Sujet Précédent Sujet Suivant

Probleme Float CSS

Résolu/Fermé
Patachouuu Messages postés 64 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 22 novembre 2009 - 20 oct. 2009 à 11:25
 klima servisi - 15 févr. 2010 à 14:02
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

4 réponses

Réponse 1 / 4
kartnia Messages postés 27 Date d'inscription mardi 6 octobre 2009 Statut Membre Dernière intervention 17 mai 2011 5
20 oct. 2009 à 11:36
Bonjour,
essaye de mettre : div#droite {float:left;}
0
Patachouuu Messages postés 64 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 22 novembre 2009
20 oct. 2009 à 11:41
J'ai essayée, le div droite se met à flotter à gauche, en dessous du div menu.
Donc ça marche pas, je sais pas pourquoi, mais le div droite ne veut pas passer à côté du div menu. Pourtant j'ai suffisamment de largeur pour qu'il passe...
0
Réponse 2 / 4
kartnia Messages postés 27 Date d'inscription mardi 6 octobre 2009 Statut Membre Dernière intervention 17 mai 2011 5
20 oct. 2009 à 11:44
Je viens de remarquer que ta div#menu est pas en float:left
En fait il faut que ton div droite + ton div menu soient en float:left.
0
Patachouuu Messages postés 64 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 22 novembre 2009
20 oct. 2009 à 12:37
Exacte ! Ça marche !
J'ai tellement galérée sur un autre soucis, que j'ai finis par retirer des trucs qui étaient nécessaire sans m'en apercevoir !

Mon autre soucis, c'est que je voudrais que le bas du div menu et le bas de mon div droit soit toujours bien aligné, sans avoir a préciser de hauteur. Et que cela s'adapte selon mon contenu (je veux pas avoir à changer les hauteurs de mes div à chaque nouvelles pages) qui changera au niveau de la colonne droite, mais qui devrait rester le même au niveau du menu.

Comment faire ?
J'ai essayée de faire ça avec des positions absolue et relative (je sais pas si ça a vraiment un rapport avec ce que je veux faire), mais ça me déforme ma mise en page plutôt qu'autre chose...
0
Réponse 3 / 4
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
20 oct. 2009 à 11:52
Petite ressource vraiment utile pour la question des float :

https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

Bon travail ! :D
0
Patachouuu Messages postés 64 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 22 novembre 2009
20 oct. 2009 à 12:39
Ouch de l'Anglais ! Cela sera surement utile à d'autre, mais moi je suis pas très amie avec les langues étrangères, trop compliqué. ^^

Merci quand même pour les liens.
0
Réponse 4 / 4
klima servisi
15 févr. 2010 à 14:02
I always follow your site thank you wish you continued success https://www.hugedomains.com/domain_profile.cfm?d=sunnyservisi&e=com
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses