Soucis "d'alignement" des Div

Question

huluberlu

18 May 2011 à 07:22

Bonjour à tous

Voilà jai un petit soucis de css
Jai 3 div du genre :

Menu_gauche
milieu
menu_droite

et je voudrai qu'il "s'aligne",
je m'explique :

Menu_gauche milieu menu_droite

voici mes codes :


body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}

h1
{
    text-align : center;
    text-decoration : underline;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 12px;
    font-weight : bold;
    color : #0066CC;
} 
li {
    font-family: Arial, sans-serif;
    padding-left: 15px;
    font-size: 100%;
    color: black;
    display : list-item;
    list-style-image : url(images/css/puce_menu.png);
    background-image: url(images/css/puce_menu.png);
    background-repeat: no-repeat;
    background-position: 0 0.25em;

} 

div#conteneur
{
	width: 100% ;
	text-align: left ;
}
div#milieu
{
	width: 70% ;
    height: auto;
    border: 1px solid #CCCCFF;
	margin: 0 auto ;
	text-align: left ;
}

div#header
{
	width: 90% ;
    height: 150px;
    border: 1px solid #CCCCFF;
    border-radius: 10px;
	margin: 0 auto ;
	text-align: left ;
    border-radius: 10px;
}
div#menu_gauche
{
    width: 13%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: left;
    display: table-cell;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 10px;
}
div#menu_droite
{
    width: 13%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: right;
    display: inline;
    border-radius: 10px;
}


<!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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="huluberlu" />
    <link rel="stylesheet" type="text/css" href="style.css" />
	<title>Sans nom 2</title>
</head>

<body>
    <div id="conteneur">
    
        <div id="header">HEADER EN GROS ET BEAU LOGO ^^</div>
        
            <div id="menu_gauche">
                <h1 class="h1">Menu Principal</h1>
                <li class="li"><a href="#" class="menu">Accueil</a></li>
                <li class="li">Inscription</li>
                <li class="li">Poster un Fichier</li>
                <li class="li">Faire un don</li>
                <li class="li">Contact</li>
            </div>
            
            <div style="clear:both;">
            
            <div id="menu_gauche">
                <h1 class="h1">Vidéos</h1>
                <li class="li">Films</li>
                <li class="li">Séries</li>
                <li class="li">Documentaires</li>
                <li class="li">Spectacles</li>
                <li class="li">Animes / Mangas</li>
            </div>
        
            <div style="clear:both;">
            
            <div id="milieu"></div>
            
                <div id="menu_droite">
                <h1 class="h1">Vidéos</h1>
                <li class="li">Films</li>
                <li class="li">Séries</li>
                <li class="li">Documentaires</li>
                <li class="li">Spectacles</li>
                <li class="li">Animes / Mangas</li>
            </div>
    </div>



</body>
</html>

Voilà j'espere que vous me comprenez Smiley langue

Merci d'avance Smiley cligne

huluberlu

18 May 2011 à 07:25

je vous met un screen pour etre plus clair :
http://img11.hostingpics.net/thumbs/mini_223043Capture.png

hchtot

18 May 2011 à 09:29

Saluluberlu,

Tout d'abord deux choses :
- tu as des li mais pas de ul. Tes li doivent obligatoirement être contenus dans un ul
- tu n'as pas fermé tes div clear: both. Il manque un </div>.

Ensuite si tu veux que ton div "milieu" soit en float left avec ton menu gauche, il faut enlever le deuxième div clear: both. Sinon, forcément, tu reviens à la ligne...

huluberlu

18 May 2011 à 15:55

Merci de ta réponse Smiley smile

Voila jai modifier mes erreur et reussi a moitier ce que je voulez voici le resultat :
http://img11.hostingpics.net/thumbs/mini_387602Capture.png

comme tu peux le constater je narrive pas a aligner mon menu de droite avec le reste :

Voici mon code modifier :


body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}

h1
{
    text-align : center;
    text-decoration : underline;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 12px;
    font-weight : bold;
    color : #0066CC;
} 
li {
    font-family: Arial, sans-serif;
    padding-left: 15px;
    font-size: 100%;
    color: black;
    display : list-item;
    list-style-image : url(images/css/puce_menu.png);
    background-image: url(images/css/puce_menu.png);
    background-repeat: no-repeat;
    background-position: 0 0.25em;

} 

div#conteneur
{
	width: 100% ;
	text-align: left ;
}
div#conteneur_menu_gauche
{
    width: 100%;
    float: left;
}
div#conteneur_menu_droite
{
    width: 100%;
    float: right;
}
div#milieu
{
	width: 70% ;
    height: auto;
    border: 1px solid #CCCCFF;
	margin: auto ;
}

div#header
{
	width: 90% ;
    height: 150px;
    border: 1px solid #CCCCFF;
    border-radius: 10px;
	margin: 0 auto ;
	text-align: left ;
    border-radius: 10px;
}
div#menu_gauche
{
    width: 13%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: left;
    display: table-cell;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 10px;
}
div#menu_droite
{
    width: 13%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: right;
    display: inline;
    border-radius: 10px;
}

et le 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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="huluberlu" />
    <link rel="stylesheet" type="text/css" href="style.css" />
	<title>Sans nom 2</title>
</head>

<body>
    <div id="conteneur">
    
        <div id="header">HEADER EN GROS ET BEAU LOGO ^^</div>
        <div id="conteneur_menu_gauche">
         <div id="menu_gauche">
                <h1 class="h1">Menu Principal</h1>
	      <ul>
                <li class="li"><a href="#" class="menu">Accueil</a></li>
                <li class="li">Inscription</li>
                <li class="li">Poster un Fichier</li>
                <li class="li">Faire un don</li>
                <li class="li">Contact</li>
	      </ul>
            </div>
            
            <div style="clear:both;"></div>
            
            <div id="menu_gauche">
                <h1 class="h1">Vidéos</h1>
<ul>
                <li class="li">Films</li>
                <li class="li">Séries</li>
                <li class="li">Documentaires</li>
                <li class="li">Spectacles</li>
                <li class="li">Animes / Mangas</li>
</ul>
            </div>
        </div>
            
            
            <div id="milieu">TEST<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
            
        <div id="conteneur_menu_droite">
         <div id="menu_droite">
                <h1 class="h1">Menu Principal</h1>
	      <ul>
                <li class="li"><a href="#" class="menu">Accueil</a></li>
                <li class="li">Inscription</li>
                <li class="li">Poster un Fichier</li>
                <li class="li">Faire un don</li>
                <li class="li">Contact</li>
	      </ul>
            </div>
            
            <div style="clear:both;"></div>
            
            <div id="menu_droite">
                <h1 class="h1">Vidéos</h1>
<ul>
                <li class="li">Films</li>
                <li class="li">Séries</li>
                <li class="li">Documentaires</li>
                <li class="li">Spectacles</li>
                <li class="li">Animes / Mangas</li>
</ul>
            </div>
        </div>
    </div>



</body>
</html>

hchtot

18 May 2011 à 16:36

Tu as des float qui ne servent à rien dans ton cas. Il te faut simplement mettre tes trois conteneurs principaux en float: left et indiquer un width pour chacun d'entre eux :


<div id="conteneur_menu_gauche"></div>
<div id="milieu"></div>
<div id="conteneur_menu_droite"></div>

Et le CSS :


#conteneur_menu_gauche { 
     float: left;
     width: 15%;
}

#milieu{ 
     float: left;
     width: 70%;
}

#conteneur_menu_droite { 
     float: left;
     width: 15%;
}

Attention, si tu donnes un width trop important à ton menu droite, il passera dessous.

lddsoft

18 May 2011 à 16:50

Bonjour,

Je viens de constater de hchtot suggérait la même correction que moi. Désolé.
Voici ce que j'avais concocté: (il y a pas mal de modifs!)


<!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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="huluberlu" />
	<title>Sans nom 2</title>
	<style type="text/css">
body
{
	width: 99%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}

h1
{
    text-align : center;
    text-decoration : underline;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 12px;
    font-weight : bold;
    color : #0066CC;
} 
li {
    font-family: Arial, sans-serif;
    padding-left: 15px;
    font-size: 100%;
    color: black;
    display : list-item;
    list-style-image : url(images/css/puce_menu.png);
    background-image: url(images/css/puce_menu.png);
    background-repeat: no-repeat;
    background-position: 0 0.25em;

} 

div#conteneur
{
	width: 100% ;
	text-align: left ;
}

div#conteneur_menu_gauche
{
    width: 13%;
    float: left;
}

div#conteneur_menu_droite
{
    width: 13%;
    float: right;
}

div#milieu
{
	float: left;
	width: 70% ;
    height: auto;
    border: 1px solid #CCCCFF;
	margin-left: 2%;
	margin-top: 20px;
}

div#header
{
	width: 90% ;
    height: 150px;
    border: 1px solid #CCCCFF;
    border-radius: 10px;
	margin: 0 auto ;
	text-align: left ;
    border-radius: 10px;
}

div#menu_gauche
{
	width: 100%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: left;
    display: table-cell;
    margin-top: 20px;
    margin-left: 10px;
    border-radius: 10px;
}

div#menu_droite
{
	width: 100%;
    height: auto;
    border: 1px solid #CCCCFF;
	text-align: left ;
    background-color: white;
    float: right;
    display: table-cell;
    margin-top: 20px;
    margin-right: 10px;
    border-radius: 10px;
}

	</style>
</head>

<body>
    <div id="conteneur">
    
        <div id="header">HEADER EN GROS ET BEAU LOGO ^^</div>
		
        <div id="conteneur_menu_gauche">
         <div id="menu_gauche">
              <h1 class="h1">Menu Principal</h1>
			  <ul>
                <li><a href="#" class="menu">Accueil</a></li>
                <li>Inscription</li>
                <li>Poster un Fichier</li>
                <li>Faire un don</li>
                <li>Contact</li>
			  </ul>
            </div>
            
            
            <div id="menu_gauche">
                <h1 class="h1">Vidéos</h1>
				<ul>
					<li>Films</li>
					<li>Séries</li>
					<li>Documentaires</li>
					<li>Spectacles</li>
					<li>Animes / Mangas</li>
				</ul>
            </div>
        </div>
            
        <div id="milieu">TEST
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
            
        <div id="conteneur_menu_droite">
         <div id="menu_droite">
                <h1 class="h1">Menu Principal</h1>
				<ul>
					<li><a href="#" class="menu">Accueil</a></li>
					<li>Inscription</li>
					<li>Poster un Fichier</li>
					<li>Faire un don</li>
					<li>Contact</li>
				</ul>
            </div>
            
            
            <div id="menu_droite">
                <h1 class="h1">Vidéos</h1>
				<ul>
					<li>Films</li>
					<li>Séries</li>
					<li>Documentaires</li>
					<li>Spectacles</li>
					<li>Animes / Mangas</li>
				</ul>
            </div>
        </div>
		
    </div><!-- #conteneur -->
</body>
</html>

huluberlu

18 May 2011 à 17:06

Hé bien que dire .... a part MERCI Smiley smile

juste une derniere pêtite question ( apres je ne vous embete plus, c'est promis )
Jai un petit bug avec mes puce "personnalisées" de mes <li>
voir le screen :

http://img11.hostingpics.net/thumbs/mini_515916Capture.png

D'avance merci ^^

lddsoft

18 May 2011 à 17:14

Effectivement, il y a un p'ti souci!
Qu'as-tu comme code?

Ceci devrait t'aider grandement : http://maxdesign.developpez.com/tutoriels/css/puce-image-liste/
Modifié par lddsoft (18 May 2011 - 17:20)

huluberlu

18 May 2011 à 17:38

Hé bien merci en effet petite erreur dans mon code
super ce tuto Smiley cligne

Et encore merci a tous pour m'avoir aider Smiley cligne

@ très bientot

Sujet clos

CSS et mise en forme, CSS3

Soucis "d'alignement" des Div