28172 sujets

CSS et mise en forme, CSS3

Border et positionnement

Je suis en pleine mise en page d'un site web et je viens de rencontrer un comportement auquel je ne m'attendais pas.
Pour y vois plus clair dans mon positionnement j'avais mis des border de différentes couleur à mes éléments.

Seulement lorsque j'enlève le border de mon conteneur le positionnement change.

Est-ce un comportement normal?

Voici mon code:

<html>
<body>
    <div id="container">
        <div id="logo">
        </div>
        <nav>
        </nav>
        <div id="content">
        </div>
    </div>
</body>
</html>




html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 100%;
}

body {
	background: #f7f6f5;
	font-family: Arial, Helvetica, sans-serif;
	width: 90%;
	height: 90%;
	margin: 0 auto;
	font-size: 1em;
}

#container {
	border: 1px solid black;
	position:relative;
	width: 100%;
	height: 100%;
	min-width: 960px;
	min-height: 560px;
	margin-top: 5%;
}

#logo {
	border: 1px solid red;
	position:absolute;
	left:50px;
	margin: 0 auto;
	width: 270px;
	height: 155px;
	background: url('../images/logo.jpg') 0 0 no-repeat;
	background-size: 270px 155px;
	z-index: 1;
}

#content {
	border: 1px solid yellow;
	position:relative;
	margin-left: 160px;
	margin-top: 75px;
	z-index: 10;
	border-top: 3px solid #2d2d29;
	padding-left: 10px;
	padding-right: 10px;
}

h1 {
	border-bottom: 2px solid #2d2d29;
}

nav {
	position:absolute;
	right:0;
	top: 30px;
	font-weight:bold;
	font-size: 1em;
}

nav li {
	list-style-type: none;
	display: inline-block;
	margin-left: 20px;
}

nav a {
	color: #2d2d29;
	text-decoration: none;
}

nav a:hover {
	border-bottom: 2px solid #2d2d29;
}


Essayez de commenter le border sur 'container' et dites moi si vous avec aussi les éléments qui se décalent..
Merci pour ta réponse Raphaël mais as-tu essayé mon code?

Chez moi les éléments ne se décalent pas de quelques pixels, leur position change complètement.
Mon contenu vient se coller en haut du conteneur, comme si du fait d'enlever le border empêchait le positionnement relatif.
Je viens de supprimer les width:100% de ma balise html
J'ai ajouté un box-sizing:border-box à mon body et mon container.
Mon content n'a pas de width précisé.

Et lorsque j'enlève le border de mon container tout se décale toujours.
Mais ça le fait chez toi ou pas?

Nouveau CSS:

html {
	margin: 0;
	font-size: 100%;
}

body {
	background: #f7f6f5;
	font-family: Arial, Helvetica, sans-serif;
	color: #2d2d29;
	width: 90%;
	height: 90%;
	margin: 0 auto;
	font-size: 1em;
	box-sizing:border-box;
}

#container {
	border: 1px solid #f7f6f5;
	position:relative;
	width: 100%;
	height: 100%;
	min-width: 960px;
	min-height: 560px;
	margin-top: 5%;
	box-sizing:border-box;
}

#logo {
	/*border: 1px solid red;*/
	position:absolute;
	left:50px;
	margin: 0 auto;
	width: 350px;
	height: 200px;
	background: url('../images/logo.jpg') 0 0 no-repeat;
	background-size: 350px;
	z-index: 1;
}

#content {
	/*border: 1px solid yellow;*/
	position:relative;
	margin-left: 200px;
	margin-top: 95px;
	z-index: 10;
	border-top: 3px solid #2d2d29;
	border-bottom: 3px solid #2d2d29;
	padding-left: 10px;
	padding-right: 10px;
}

h1 {
	border-bottom: 2px solid #2d2d29;
	margin-top: 10px;
}

/*******************************************************************
*
*                              MENU
*  
********************************************************************/
nav {
	position:absolute;
	right:0;
	top: 60px;
	font-weight:bold;
	font-size: 1em;
}

nav li {
	list-style-type: none;
	display: inline-block;
	margin-left: 20px;
}

nav a {
	color: #2d2d29;
	text-decoration: none;
}

nav a:hover {
	border-bottom: 2px solid #2d2d29;
}
Administrateur
Je n'ai pas les moyens de tester mais il y a quelques précautions à prendre, notamment box-sizing à préfixer (-moz-) si tu testes sur Firefox.
Bonjour,
peut-être as tu à faire avec les "fusions de marges", qui, avec un padding ou un border, sont contenus a l’intérieur du conteneur, sans elles sont reporter a l’extérieur du conteneur.

Généralement titre et paragraphe ont un margin par defaut de 1em 0; . Ces marges peuvent jouer des tours aux +/- débutants Smiley smile

Pour les bordures en phase de test, tu peut les dessiner avec outline ou un box-shadow: 0 0 0 1px (exterieur boite, ou inset 0 0 0 1px (interieur de ta boite) pour t'affranchir de ce genre de surprises.

++
Modifié par gc-nomade (16 Oct 2013 - 20:58)
Je viens de tomber sur un article très intéressant à propos du "margin collapsing", c'est peut être de ça dont tu parles gc-nomade.
Du coup je comprend mieux ce qu'il se passait.

Merci à tous
Modifié par zookd (19 Nov 2013 - 19:57)
Sujet clos
Aller à