Problème CSS Float
Résolu
Patachouuu
Messages postés
64
Date d'inscription
Statut
Membre
Dernière intervention
-
Jeannot -
Jeannot -
Bonjour,
J'ai un soucis avec mon code, j'ai mis deux éléments en float, l'un en float left pour qu'il s'aligne à gauche (il s'agit de mon menu), et l'autre en float right (il s'agit de la colonne droite ou se trouvera l'emplacement du texte sur ma page).
Problème, l'élément en float right, s'aligne en dessous de celui en float left, alors que moi je veux qu'il soit sur sa droite...
Un aperçu de mon code HTML :
<body>
<div id="banniere">
<a id="logo" href="index.html"><img id="logo" src="img/logo.png" height=119px width=329px/></a>
</div>
<div id="contenu">
<div id="menu">
<ul>
<li><a href="#">Qui sommes nous ?</a></li>
<li>Nos prestations :</li>
<li id="puce-orange"><a id="orange" href="#">Impression de documents</a></li>
<li id="puce-verte"><a id="vert" href="#">Communication extérieure</a></li>
<li id="puce-bleue"><a id="bleu" href="#">Communication intérieure</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">La presse en parle</a></li>
<li>Pour télécharger notre<br> catalogue cliquez ici :<br> <a id="catalogue" href="#"><img id="catalogue" src="img/catalogue.png" height=61px width=83px/></a></li>
</ul>
</div>
<div id="droite">
<h2>Bienvenue...</h2>
<p>Pititititittila bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla</p>
<h2>Titre...</h2>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
</p>
</div>
</div>
<div id="pied"></div>
</body>
</html>
Et le code CSS :
* {
margin:0;
padding:0;
}
html {
background-color:#cecece;
text-align:center;
font-family:verdana, arial, sans-serif;
}
body {
margin:auto;
background-color:white;
width:950px;
}
/* ----------------------BANNIERE-------------------- */
div#banniere {
background:url(img/banniere.png) center bottom no-repeat;
height:203px;
}
img#logo {
float:left;
margin-top:9px;
margin-left:16px;
border:none;
}
/* ----------------------CONTENU------------------- */
div#contenu {
width:950px;
background-color:white;
display:inline;
}
/* ----------------------MENU-------------------- */
div#contenu div#menu {
width:181px;
background-color:#818485;
color:white;
text-align:left;
font-size:0.95em;
padding-top:20px;
padding-left:15px;
padding-bottom:15px;
}
div#contenu div#menu ul li{
list-style-type:none;
margin-bottom:30px;
}
a#orange {
color:#f7941e;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-orange.png) no-repeat left top;
}
a#orange:hover{
text-decoration:underline;
background-position:3% 25%;
}
a#vert {
color:#b9d646;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-verte.png) no-repeat left top;
}
a#vert:hover{
text-decoration:underline;
background-position:3% 25%;
}
a#bleu{
color:#4ac5eb;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-bleue.png) no-repeat left top;
}
a#bleu:hover{
text-decoration:underline;
background-position:3% 25%;
}
a{
color:white;
text-decoration:none;
}
a:hover{
color:silver;
text-decoration:none;
}
img#catalogue {
border:none;
margin-top:10px;
margin-left:40px;
}
/* ----------------------PARTIE DROITE-------------------- */
div#droite {
text-align:left;
float:right;
width:700px;
color:#818485;
background-color:white;
padding:20px;
padding-top:0px;
}
h2 {
margin-bottom:20px;
margin-top:20px;
font-size:1em;
}
p {
font-size:0.9em;
}
Si quelqu'un à une solution. J'ai essayée plein de truc, display, clear, position, ect... mais je trouve pas la solution.
Merci d'avance,
Aurélie
J'ai un soucis avec mon code, j'ai mis deux éléments en float, l'un en float left pour qu'il s'aligne à gauche (il s'agit de mon menu), et l'autre en float right (il s'agit de la colonne droite ou se trouvera l'emplacement du texte sur ma page).
Problème, l'élément en float right, s'aligne en dessous de celui en float left, alors que moi je veux qu'il soit sur sa droite...
Un aperçu de mon code HTML :
<body>
<div id="banniere">
<a id="logo" href="index.html"><img id="logo" src="img/logo.png" height=119px width=329px/></a>
</div>
<div id="contenu">
<div id="menu">
<ul>
<li><a href="#">Qui sommes nous ?</a></li>
<li>Nos prestations :</li>
<li id="puce-orange"><a id="orange" href="#">Impression de documents</a></li>
<li id="puce-verte"><a id="vert" href="#">Communication extérieure</a></li>
<li id="puce-bleue"><a id="bleu" href="#">Communication intérieure</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">La presse en parle</a></li>
<li>Pour télécharger notre<br> catalogue cliquez ici :<br> <a id="catalogue" href="#"><img id="catalogue" src="img/catalogue.png" height=61px width=83px/></a></li>
</ul>
</div>
<div id="droite">
<h2>Bienvenue...</h2>
<p>Pititititittila bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla</p>
<h2>Titre...</h2>
<p>Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
</p>
</div>
</div>
<div id="pied"></div>
</body>
</html>
Et le code CSS :
* {
margin:0;
padding:0;
}
html {
background-color:#cecece;
text-align:center;
font-family:verdana, arial, sans-serif;
}
body {
margin:auto;
background-color:white;
width:950px;
}
/* ----------------------BANNIERE-------------------- */
div#banniere {
background:url(img/banniere.png) center bottom no-repeat;
height:203px;
}
img#logo {
float:left;
margin-top:9px;
margin-left:16px;
border:none;
}
/* ----------------------CONTENU------------------- */
div#contenu {
width:950px;
background-color:white;
display:inline;
}
/* ----------------------MENU-------------------- */
div#contenu div#menu {
width:181px;
background-color:#818485;
color:white;
text-align:left;
font-size:0.95em;
padding-top:20px;
padding-left:15px;
padding-bottom:15px;
}
div#contenu div#menu ul li{
list-style-type:none;
margin-bottom:30px;
}
a#orange {
color:#f7941e;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-orange.png) no-repeat left top;
}
a#orange:hover{
text-decoration:underline;
background-position:3% 25%;
}
a#vert {
color:#b9d646;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-verte.png) no-repeat left top;
}
a#vert:hover{
text-decoration:underline;
background-position:3% 25%;
}
a#bleu{
color:#4ac5eb;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-bleue.png) no-repeat left top;
}
a#bleu:hover{
text-decoration:underline;
background-position:3% 25%;
}
a{
color:white;
text-decoration:none;
}
a:hover{
color:silver;
text-decoration:none;
}
img#catalogue {
border:none;
margin-top:10px;
margin-left:40px;
}
/* ----------------------PARTIE DROITE-------------------- */
div#droite {
text-align:left;
float:right;
width:700px;
color:#818485;
background-color:white;
padding:20px;
padding-top:0px;
}
h2 {
margin-bottom:20px;
margin-top:20px;
font-size:1em;
}
p {
font-size:0.9em;
}
Si quelqu'un à une solution. J'ai essayée plein de truc, display, clear, position, ect... mais je trouve pas la solution.
Merci d'avance,
Aurélie
A voir également:
- Problème CSS Float
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
Bonjour,
dans ton code il te manque un 'float:left;' dans la partie css au niveau de ton menu.
Cordialement.
dans ton code il te manque un 'float:left;' dans la partie css au niveau de ton menu.
Cordialement.
