Problème mise en page presse

Question

m@t

29 Oct 2007 à 10:42

Bonjour à tous,

Je souhaite intégrer des articles (avec images) dans une page qui possède une structure à trois collones (menu gauche, centre, menu droite). Ces trois div sont contenues dans une div content. Mon problème est que je n'arrive pas à intégrer mes articles comme je le voudrais. Pour que les articles soient bien disposés, il est nécessaire à mon avis d'ajouter un bloc avec clear:both.

Le problème c'est que lorsque je fais ça mon article vient se placer au niveau du bas des deux colonnes (j'ai donc un espace trop important entre les deux articles).

Voici le code css concerné :


* {
	margin: 0;
	padding: 0;
}

img{
	border:0;
}

body{
	background-color:#f8f8f8;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}

div.c{clear:both;}

/*********** 

Structure

***********/
#global{
	width:100%;
	background: #f8f8f8 url(../images/fond-site.jpg) repeat-x;
}

#header{
	margin: 0 auto;
	width:960px;
	height:136px;
}
#content {
	width: 960px;
	height:600px;
	margin: -8px auto;
	background-color:#ffffff;
	border-left:#e3e3e3 solid 1px;
	border-right:#e3e3e3 solid 1px;
	
	z-index:15;
}
html>body #content{
	margin: 0 auto;
	height:auto;
	min-height:600px;
}
#footer {
	width: 100%;
	height:105px;
	background: url(../images/fond-footer.jpg) repeat-x;
	z-index:2;
}

/****************

Header Containers 

****************/
#logo {
	margin-top:19px;
	float: left;
	width: 136px;
	height: 87px;
}
#photosHeader {
	float: left;
	margin-left:105px;
	width: 313px;
	height: 107px;
}
#zoneLogin {
	float: right;
	width:300px;
	height:40px;
	margin-top:35px;
	text-align:right;	
	color:#ffffff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	
}
/****************

zone contenu

****************/
#colonneGauche{
	margin-top:15px;
	float:left;
	width:160px;
}
#colonneDroite{
	margin-top:15px;
	float:right;
	width:160px;
}
#centre{
	margin:0 auto;
	width:600px;
	padding-top:15px;
}
/****************

colonne gauche

****************/
#menuGauche{
	margin:0 auto;
	background: url(../images/fond-menu-gauche.jpg) 0 0 repeat-y;
	width:144px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#8a7979;
	padding-bottom:20px;
}
#menuDroite{
	margin:0 auto;
	background: url(../images/fond-menu-droite.jpg) 0 0 repeat-y;
	width:144px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#8a7979;
	padding:0px 0px 20px 5px;
}

/****************

centre

****************/
.fil{
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	margin-top:-10px;
}
h1{
	height:31px;
	background: url(../images/fondh1.jpg) 0 0 repeat-x;
	font-family:Trebuchet MS, Verdana, Arial, sans-serif;
	font-size:18px;
	color:#04acd9;
	padding:3px 3px;
	margin-top:-4px;
}
h2.edito{
	color:#04acd9;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-style:italic;
	font-size:14px;
	margin-bottom:3px;
	width:600px;
}
div.edito{
	background-color:#e8f8fc;
	border-top:#04acd9 solid 1px;
	border-bottom:#04acd9 solid 1px;
}

h2.titreArticle{
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:#e3e3e3 solid 1px;
	background: url(../images/puce.jpg) 0 2px no-repeat;
	padding:0px 0px 3px 20px;
	margin:15px 0px 10px 0px;
	display:block;
	
}
.right{
	float:right;
	margin:5px 0px 5px 5px;
}


.article{
	width:600px;
	display:block;
	background:#FFFF33;
	margin-top:15px;
}

Et le code HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="com/style.css" type="text/css">

</head>

<body>


<!-- Begin global -->
<div id="global">
    
    <!-- Begin header -->

    <div id="header">
    
    	<div id="logo">
        	<a href="./index.php" title="Accueil"><img src="./images/logo-lei-2.jpg" alt="Logo"/></a>
        </div>
        
        <div id="photosHeader"><img src="./images/photos-header.jpg" alt="Photos entête"/></div>
        
   		<div id="outilSaisie">
        	<a href="http://leioracle.franche-comte.org/applications" title="Outil de saisie de données"></a>
        </div>
        
        <div id="zoneLogin">
        	Bonjour M. Dupond | 
        	<a href="deconnection.php" title="Se déconnecter">Se déconnecter</a>
            <br />
            5 Utilisateurs connectés
        </div>
        
        <div class="c"></div>
        
        <ul id="menu"> <!-- class="active" pour la page active -->
            <li><a href="./index.php" class="menuAccueilH" title="Accueil LEI">Accueil</a></li>
            <li><a href="./blog.php" class="menuBlog" title="Le blog">Le blog</a></li>
            <li><a href="./faq.php" class="menuFAQ" title="FAQ">FAQ</a></li>
            <li><a href="./telechargements.php" class="menuTelechargements" title="Téléchargements">Téléchargements</a></li>
            <li><a href="./statistiques.php" class="menuStatistiques" title="Statistiques">Statistiques</a></li>
            <li><a href="./lei.php" class="menuLEI" title="Le LEI">Le LEI</a></li>
            <li><a href="./contact.php" class="menuContact" title="Contact">Contact</a></li>
            <!--<li class="end_menu_2">&nbsp;</li>-->
        </ul> 
            
    </div>
    <!-- End header -->
	
    
	<div id="content">
    	
        <!-- Begin colonne gauche -->
    	<div id="colonneGauche">
        
        	<div id="menuGauche">
            
        		<h3>Newsletter</h3>
                Inscrivez vous à notre newsletter !
                
                <form id="newsletter" method="post" action="abonnement-newsletter.php">
                
                <input type="text" name="emailNewsletter"/>
                
                <a href="#" class="bouton">Envoyer</a>
                
                </form>
                
                <h3>Connectés</h3>
                	<ul>
                    	<li>Jean Dupond</li>
                        <li>Jean Dupond</li>
                        <li>Alfred Durand</li>
                        <li>Gérard Miller</li>
                        <li>Claude Campion</li>
                    </ul>
                <h3>Liens</h3>
             
                
    		</div>

    	</div>
 		<!-- End colonne gauche -->
        
        <!-- Begin colonne droite -->
        <div id="colonneDroite">
        
       		<div id="menuDroite">
            
        		<h3>Octobre 2007</h3>
                
              
                
                <h3>Novembre 2007</h3>
                
                
                
                <h3>Etourism.info</h3>
                
                    <a href="" title="Créer son site avec  
                   Jimdo ">Créer son site avec  
                   Jimdo: Jimdo est une 
                   plate-forme qui 
                   permet de créer son 
                   site en quelques minu-
                   tes...</a><br />
                    <a href="" title=" Urban Dare, 
                    l’aventure urbaine et    
                    techno">Urban Dare, 
                    l’aventure urbaine et    
                    techno: Paul avait 
                    déjà évoqué sur ce 
                    blog le géocaching, les 
                    chasses aux trésors 
                    touristiques avec GPS.</a><br />
                  
                   
                
    		</div>
    	</div>
        <!-- End colonne droite -->
        
        <!-- Begin centre -->
        <div id="centre">
        
        <div class="fil">Accueil > </div>
        
        <br/>
        
        <h1>Accueil</h1>
        
		<h2 class="edito">L'&eacute;dito:</h2>
        
        <div class="edito">Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis est enim, cui via ista non pateat, qui isti aetati atque 
       
        </div>
        
       
        <h2 class="titreArticle">Article 1</h2>
        
        <div class="article">
        
        	<div class="right"><img src="images/photo.jpg"/></div>
        
           <p>Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.
            <a href="blog.php" title="Lire la suite" class="suite">Lire la suite</a></p>
           
            <div class="c"></div>
         
        </div>
        
        <div class="basArticle">Le 02/11/2007</div>
        
        <h2 class="titreArticle">Article 2</h2>
        
         <div class="article">
     <p>Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.
        <a href="blog.php" title="Lire la suite" class="suite">Lire la suite</a></p>
        </div>
        
    
        
        
      
	</div>
	<!-- End centre -->
    
    </div>
	<!-- End content -->
    
    <div class="c"></div>
     
    <div id="footer">
    
        <div id="contenuFooter">
        
            <div id="footerGauche">
           
            </div>
             
            <div id="footerDroite">
            	footer droite
                
            </div>
           
        </div>
    </div>

</div>
<!-- End global -->

</body>
</html>

Avez-vous une idée ? Merci d'avance !
Modifié par m@t (29 Oct 2007 - 10:44)

fvsch

29 Oct 2007 à 10:47

Bonjour,

Avec une page en ligne, pour pouvoir visualiser directement le problème sans avoir à faire des copier-coller de code (dont on n'est pas sûr qu'ils permettront de reconstituer correctement la page...), ç'eût été plus simple. Smiley cligne

m@t

29 Oct 2007 à 10:57

Voici un exemple du problème en ligne :

http://www.mathieu-jobard.info/travaux/le/

Ca sera effectivement beaucoup plus pratique Smiley cligne

Petite précision : le problème n'est présent que sous firefox .. sous IE7 et 6 ça passe très bien Smiley smile

Modifié par m@t (29 Oct 2007 - 10:58)

fvsch

29 Oct 2007 à 12:27

m@t a écrit :
Petite précision : le problème n'est présent que sous firefox .. sous IE7 et 6 ça passe très bien

J'aurais tendance à dire qu'il est présent sous Firefox, mais aussi Opera, Safari, Konqueror, et plus largement tout navigateur moderne qui n'est pas Internet Explorer.

Il me semble qu'il s'agit ici d'un problème de dépassement de flottants (difficile à constater sur le lien que tu donnes à cause de la hauteur importante du bloc central, qui n'est pas flottant, et du min-height: 600px sur le bloc conteneur).

On lira donc, par exemple:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Une fois supprimée la hauteur et le min-height parasites de div#content, on pourra faire:

div#content {overflow: hidden;}

Pour IE6: le width attribué à div#content confère le layout à cet élément, ce qui empêche le dépassement des flottants. Voir la FAQ du forum sur la notion de HasLayout pour plus d'infos, ou les liens donnés dans le document lié ci-dessus.

m@t

29 Oct 2007 à 12:43

J'ai trouvé ton article très intéressant. Le bug est effectivement présent sous tous les navigateurs modernes à l'exception d'IE.

Comme tu me l'as conseillé, j'ai essayé de supprimer les proprités height et min-height de #content et d'ajouter la propriété overflow: hidden; sur #content. Malheureusement, j'obtiens le même résultat sous Firefox: le deuxième article débute au niveau de la fin des collones.

A propos du overflow: hidden;, est-ce que ça n'a pas pour but de cacher mon contenu s'il dépasse une certaine hauteur ? A moins qu'avec cette propriété, sans spécifier de hauteur minimum, mon contenu va s'étendre?

Merci pour ton aide !

fvsch

29 Oct 2007 à 14:11

Ah oui, j'avais pas fait gaffe qu'il y avait un dépassement de flottants à l'intérieur de div.article également.

Il y a deux solutions principales: soit utiliser un contexte de formatage via un overflow: hidden ou overflow: auto sur div.article, soit placer un élément à la fin de div.article avec un clear: both.

Pour l'instant, c'est la seconde solution que tu as appliquée, avec le code suivant:

[b]HTML:[/b]
 <div class="c"></div>

[b]CSS:[/b]
div.c {clear: both;}

Le problème, c'est que le champ d'action du clear est trop large, et prend en compte également les colonnes flottantes. Donc ça cleare, mais ça cleare trop.

On peut réduire le champ d'action du clear avec:
- un contexte de formatage (sauf pour IE6);
- pour IE6 (et accessoirement IE7), avec un peu de HasLayout.

Si à ce stade tu es complètement perdu, une petite lecture: Float, clear et contextes de formatage.
Modifié par Florent V. (29 Oct 2007 - 14:23)

m@t

29 Oct 2007 à 14:19

Je ne pense pas qu'on pouvait répondre plus précisement que ça à ma question ! Honnêtement chapeau et un grand merci !

Sujet clos

CSS et mise en forme, CSS3

Problème mise en page presse