Colonnes Flexibles

djo77380 · 26 Octobre 2008

Tout d'abord bonjour à tous! J'espère que vous pourrez m'aider! Je précise je débute lol
Je vais pas y aller par quatre chemin voici un aperçu de mon design:

De chaque coté du "corps" se trouve une colonne (noire avec les effets marrons). J'aimerais que ces colonnes soient de la même longueur que le "corps" et donc extensibles en fonction de la taille du "corps" (selon la quantité de textes).
J'ai essayer de créer une div enveloppant le corps et les 2 colonnes mais rien n'y fait ça ne fonctionne pas

Merci d'avance!

CODE HTML

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Site Perso</title>
       <meta http-equiv="Content-Type" content="text/html; charset= Unicode (UTF-8)"" />
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
   </head>
 
   <body>
 	<map name="Map" id="Map">
  <area shape="rect" coords="209,-1,315,24" href="index.html" />
<area shape="rect" coords="333,1,370,21" href="cv.html" />
<area shape="rect" coords="489,-2,563,18" href="contact.html" />
</map>
     
       <div id="en_tete">
           <?php include("banner.php"); ?>       
       </div>
  		<div id="colgauche">         
       </div>
        <div id="coldroite">           
       </div>
       <div id="corps">
       <p><center>Bienvenue sur mon site!!!!</center></p>
                     .......

       </div>
		
       
       <div id="pied_de_page">
       
           <p><br/><br/><center>Copyright "" 2008, tous droits réservés</center></p>
       </div>
 		<?php include("bas.php"); ?>
 </div>
   </body>
</html>

CODE CSS

Bloc de code:

body
{
   width: 800px;
   margin:0 auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-color: #000000;
}



#banmenu { ---> (bannière appelée par l'include)
	margin: -6px;
	background-color: #000000;
	padding:0px;
	margin-left:0px;
}


#colgauche {
	background-image: url("images/barleft.jpg");
	float : left;
      width : 200px;
 }

#coldroite {
	background-image: url("images/barright.jpg");
	width: 79px;
	height: 100px;
	float: right;

}


#corps {
	background-color:;
	border: 0px;
    color: #FFFFFF;
	background-image:url("images/fond.jpg");
	margin-left:79px;
	width:600px;
	padding:20px;
	font: Arial;
	font-size: 13px;
}

#pied_de_page {
	color: #FFFFFF;
	background-image:url("images/foot.jpg");
	margin-left:79px;
	width:600px;
	padding:20px;
	font-size: 12px;
}
#bas {
	margin-left:79px;
	width:642px;
	height:70px;
	
}

Anonyme · 26 Octobre 2008

Hop

Attention tu utilises xhtml 1.1 ce n'est pas vraiment nécessaire, d'autant plus que certains éléments utilisés ne sont pas bon par rapport au doctype. Autant passer au xhtml 1.0 strict (en enlevant les mauvais éléments) ou transitionnal.

djo77380 · 26 Octobre 2008

gloup gloup a dit:
Hop

Attention tu utilises xhtml 1.1 ce n'est pas vraiment nécessaire, d'autant plus que certains éléments utilisés ne sont pas bon par rapport au doctype. Autant passer au xhtml 1.0 strict (en enlevant les mauvais éléments) ou transitionnal.

J'ai déjà regarder tous ces sites ça m'aide vraiment pas

Anonyme · 26 Octobre 2008

Ah bon

Il ya encore une solution mais il faut un div wrapper autour de tes trois colonnes, il faut visualiser le wrapper comme display:table et les colonnes comme display:table-cell. Un truc dans le genre, mais ce n'est pas compatible IE6 (7 je ne sais pas)

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>3 colonnes de même hauteur</title>
    <style type="text/css" media="screen">
        #wrapper{
            display: table;
            margin-top: 1em;
            }
        #menu, #content, #rubriques {
            border: 1px solid #000;
            display: table-cell;
            padding: .25em;
        }
        #menu, #rubriques {
            width: 20%;
            background-color: #f00;
        }
    </style>
    
</head>

<body>
    <div id="wrapper">
        <div id="menu">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        </div>
        <div id="content">
            <p>Donec tempus justo et leo. Duis ac libero vitae sem tristique elementum. Nullam sed leo sed felis tristique aliquet. Sed justo nulla, blandit in, bibendum eget, porttitor vel, lacus. Nullam vestibulum blandit sem. Maecenas ut pede non nibh feugiat vehicula. Nam ac arcu. Etiam commodo magna vel pede. Pellentesque in ante sed dui dictum pellentesque.</p>
        </div>
        <div id="rubriques">
            <p>In consectetuer nulla sit amet augue luctus dapibus. Aliquam venenatis scelerisque quam. Sed nec turpis nec nisl condimentum mollis. </p>
        </div>
    </div>

</body>
</html>

fredmac75 · 26 Octobre 2008

Pour que tu puisses visualiser le problème, il serait utile que tu appliques un border:1px solid red; à toute tes div :

Bloc de code:

div {border:1px solid red;}

Ce faisant, tu seras en mesure d'identifier le problème, et par la même de nous faire une copie d'écran pour que nous puissions t'aiguiller.

Colonnes Flexibles

djo77380

Membre confirmé

Anonyme

Invité

djo77380

Membre confirmé

Anonyme

Invité

fredmac75

Membre expert

Sujets similaires