28172 sujets

CSS et mise en forme, CSS3

[Résolu] Clear:both qui ne s'applique pas qu'au DIV en cours

Bonjour,

je fais des petits tests CSS et je rencontre un problème de portée du clear:both;

Voici la structure des DIVs:
BODY
ROOT
HEADER
LOGO
NAVIGATION
CONTENT
FOOTER

NAVIGATION est calé à gauche
CONTENT prend la place restante

La mise en page dans CONTENT a les contraintes suivantes :
- Si une image en fin de paragraphe sort du DIV, on doit étendre le div.
=> Pour cela, j'ai ajouté un DIV de reset en fin de CONTENT (ça fonctionne):
HTML5:
<div class=ResetDiv></div>

CSS 3 :
.ResetDiv {
clear:both;
padding-bottom: 10px;
}

- Des images peuvent être calées à gauche ou à droite :
=> J'ai crée le CSS suivant (ça fonctionne) :

.ImageGauche {
float: left;
margin-right: 10px;
overflow:visible;
}

- Lors d'un nouveau <h1>, on doit revenir à la ligne et ne plus resté à côté de l'image gauche par exemple. Et là, ça mer...
Je me suis dit, on fait un clear:both sur le <h1>.
Oui mais si je fais cela, ça fonctionne mais j'ai un effet de bord car du coup, le début de CONTENT démarre plus bas, après la fin du DIV NAVIGATION.

.ImageDroite {
float:right;
margin-right: 10px;
overflow:visible;
}

Quelle serait le moyen de contourner cet aspect ?

Merci,

Vincent

-----------------------------------------------------------------------
<!DOCTYPE html>
<html>
	<head>
		<!-- META start -->
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<meta content="TEST" name="keywords" />
		<meta content="This is a description" name="description" />
		<!-- META end -->

		<!-- #BeginEditable "doctitle" -->
		<title>TEST</title>
		<!-- #EndEditable -->
	
		<!-- Other start -->
		<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
		<!-- Other end -->
		
		<!-- Head Scripts -->
		<script src="../js/jquery.js" type="text/javascript"></script>
		<script src="../js/jquery-json.js" type="text/javascript"></script>
		<script src="../js/jstorage.js" type="text/javascript"></script>
		<!-- Head Scripts -->
			
		<!-- CSS start -->
		<link href="../css/reset.css" rel="stylesheet" type="text/css" />
		<link href="../css/screen.css" rel="stylesheet" type="text/css" />
		<!-- CSS end -->
	</head>

	<body>
		<div id="root">
			<!-- header start-->
			<div id="header">
				<div id="Logo" class="Logo"></div>
			</div>
			<!-- header end-->
				
			<!-- navigation start -->
			<div id="navigation">
				<h5>GENERAL</h5>
				<div>
					<ul>
						<li><a href="../index.html">Accueil</a></li>
						<li><a href="../localisation.html">Localisation</a></li>
						<li><a href="../contact.html">Contact</a></li>
					</ul>
				</div>
		
			</div>
			<!-- navigation end -->
			
			<!-- main start -->
			<div id="content">
				<!-- #BeginEditable "BodyContent" -->
				<h1>Titre 1</h1>
					<p>Ceci est un message de test.</p>
					<img src="photos/helios.jpg" alt="TEST" class="ImageGauche" height="529" width="350"/><br/>
					Hélios, futur reproducteur à l'élevage.<br/>

				<h1>Titre 2</h1>
				<p>Ceci est un seconde message de test.</p>

				<!-- #EndEditable -->	
				<div class=ResetDiv></div>
			</div>
			<!-- main end -->

			<!-- footer start -->
			<div id="footer">
				FOOTER
			</div>
			<!-- footer end -->
		</div>
	</body>
</html>


/* ----- clear fix for floats ----- */
.jq-clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }
.jq-clearfix { display:inline-block; }		
/* hides clearfix from IE-mac \*/
* html .jq-clearfix { height:1%; }
.jq-clearfix { display:block; }
/* end hide from IE-mac */


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

body {
	background: url(../images/fond-superieur.jpg) repeat-x scroll 0 0 #FFFFFF;
	line-height: 1.4;
	color: #000000;
    font-family: 'Cambria',Calibri,serif;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial,sans-serif !important;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	border-bottom: 0 !important;
}

a {
	border-bottom: 0px;
	color: #5DB0E6;
}
a:focus {
	outline: 1px dotted #eee;
}
a:active {
	outline: 0px;
}
a:hover {
	color: #7bc4f4;
}

#root {
	width: 910px;
	padding: 0 0px;
	margin: 0 auto;
	margin-left: auto;
  	margin-right: auto;
  	
}
#header {
	/*background-color:#FF00FF;*/
	height: 220px;
	background-image: url('../images/top-banner.jpg');
}
#navigation {
	float: left;
	width: 160px;
	height:1100px;
	margin-top: 10px;
	margin-bottom: 10px;
	
	font: normal "Trebuchet MS", Verdana, Helvetica, Arial,sans-serif !important;
	display: inline;
	background: #fafafa;
	border: 1px solid #ccc;
	padding: 5px 10px 10px;
	color: #000;
	-moz-border-radius: .5em; /* gecko */
	-webkit-border-radius: .5em; /* webkit */
	border-radius: .5em; /* w3 */
	-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),      0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;      
	-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),   0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;      
	box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),           0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;

}
#content {
	padding: 1px 20px;
	margin-top: 10px;
	margin-left: 190px;
	/*margin: 0 auto;*/
	background-color: #DDFFDD;
	height:auto!important;
	-moz-border-radius: .5em; /* gecko */
	-webkit-border-radius: .5em; /* webkit */
	border-radius: .5em; /* w3 */
	overflow: visible;
}

#footer {
	height: 80px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
	color: #000000;
	background-color: #CCFFCC;
	text-align: center;
	font-size: small;
	font-style: italic;
	clear: left; /* sert à annuler l'effet côte-à-côte dû à la propriété flottante de la boîte précédente, et permet de s'assurer que cette dernière boîte vient se glisser en-dessous de la plus haute boîte qui la précède. */
	-moz-border-radius: .5em; /* gecko */
	-webkit-border-radius: .5em; /* webkit */
	border-radius: .5em; /* w3 */
	-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),      0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;      
	-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),   0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;      
	box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),           0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}


#navigation h5 {
	background:#388B3A;
	color:#EEEEEE;
	font-size:1.2em;
	font-weight:bold;
	text-transform:uppercase;
	border-bottom: 1px solid #aaa;
	border-radius: 5px;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#388B3A;
	border-radius:5px;
}


#navigation ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-bottom: 20px;
}
#navigation li {
	margin:0;
	padding: 0;

}
#navigation a, #navigation a:active {
	font-size: 1.2em;
	color: #0f67a1;
	display: block;
	padding:0.2em 10px;
	margin: 0;
	text-decoration: none;
	position: relative;
	border-bottom:1px solid #EEEEEE;
}
#navigation a:hover {
	background: #eee;
	color: #192839;
	border-bottom: 1px solid #ddd;
}

#content h1 {
    border-bottom: 1px solid #BBBBBB !important;
    color: #222222;
    font-size: 1.9em;
    font-weight: bold;
    margin: 5px 0 0 !important;
    padding-bottom: 10px;
	white-space:pre-line;
}

#content p {
    font-family: Verdana,Geneva,Tahoma,sans-serif;
    font-size: large;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4 !important;
    margin: 0.5em 0 !important;
    padding-bottom: 10px;
}

.Logo {
	border: thin solid #666666;
	background-color: #FFFFFF;
	background-image: url('../images/logo_128.gif');
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 10px;
	position: relative; 
	width: 132px; 
	height: 132px; 
	z-index: 1; 
	left: 70px; 
	top: 60px;
}

.ResetDiv {
	clear:both;
	padding-bottom: 10px;
}


.ImageGauche {
	float: left;
	margin-right: 10px;
	overflow:visible;
}

.ImageDroite {
	float:right;
	margin-right: 10px;
	overflow:visible;
}

.ImageCentre {
	text-align:center;
}


.Accentue {
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial,sans-serif !important;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	border-bottom: 0 !important;
}

Modifié par nolme (13 Jan 2013 - 15:53)
Salut,

Il s'agit d'un problème de "contexte de formatage".

Il faut que la div#content ait un contexte de formatage, ce qui peut se faire simplement en lui appliquant un overflow:hidden.

En faisant cela, le clear:both appliqué sur les titres à l'intérieur du #content se placeront sous les images de l'article précédent, comme tu le souhaitais.
Bonsoir,

j'ai passé #content de visible à hidden mais cela n'a rien changé sur IE et FF. Smiley ohwell

Vincent
Tu peux mettre ta page en ligne (sur un serveur) et nous donner le lien ? Parce que j'avais testé en local et ça marchait.
Bonjour,

voici le lien temporaire :
Smiley url http://www.nolme.com/temp/index.html[/url]

j'ai vérifié avec Firebug et l'attribut semble être bon.

WTF ?

(merci pour le coup de main parce que là, je sèche)
Cool ça fonctionne Smiley smile

Merci beaucoup.

(Par contre, ce qui est bizarre c'est que sous Expression Web 4, il m'affiche le bloc plus bas que la fin de la barre de navigation alors que le rendu sous IE et FF est bon. bizarre, bizarre.)
Sujet clos
Aller à