28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je travaille sur mon projet sur mon ordinateur portable, je dois faire une refonte du site web.
En travaillant sur mon ordinateur portable, la page web est bien centrée sur l'écran, mais en revanche quand j'essaye sur les ordinateurs de bureaux (écran plus grand), la page est un peu plus décalé à gauche.
Savez vous comment je peux corriger ça ?

Je vous donne le lien pour avoir un aperçu si jamais vous n'avez pas trop compris :
http://alexis-bienayme.fr/isoflex-site/
Dans ton style.css, ligne 115 :

#container_menu {
background-color: #ffffff;
width: 800px;
min-height: 350px;
margin-left: 250px;
margin-top: 50px;
}


change le margin-left par margin:auto; Smiley smile
et de même pour tout les autres éléments non centrés.
Modifié par edenpulse (19 Aug 2014 - 09:41)
Ah oui, super en effet !
Ca m'enlève au moins quelques soucis.
Mais en revanche le footer n'est pas vraiment en bas, on dirait qu'il "flotte", bien que ça ne se corrige pas avec margin:auto Smiley decu

En revanche, j'ai un souci avec le header : Je n'arrive pas à mettre la barre de recherche à droite pendant que les liens soient centrés avec text-align:center.

Le footer continue à "flotter" sur d'autres écrans (si on dézoome, on peut le remarquer)
Modifié par Richieddy (19 Aug 2014 - 12:01)
Bonjour,
Pour le problème de footer, je vous propose de supprimer margin-left et margin-top et de les remplacer par la propriété margin: 0 auto comme suit:
#container_menu {
background-color: #ffffff;
width: 800px;
min-height: 350px;
margin: 0 auto;
}
Pour le problème des liens , je vous invite à lire ce tuto: http://www.creativejuiz.fr/blog/tutoriels/creer-menu-horizontal-centre-css-sans-javascript.
Pour la barre de recherche: essayez d'intégrer la div de la barre de recherche dans la même div qui englobe l'<ul> de navigation, avec une propriété css: float: right.
J'espère que ça vous sera utile. Smiley smile
Modifié par inwebunivers (23 Aug 2014 - 02:12)