Positionnement calques CSS

Marsh Posté le 22-01-2005 à 11:53:20

Hello
J'ai un problème de positionnement de calques en CSS. Voilà les codes :

CSS

Code :

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

HTML

Code :

<div id="siteInfo">
<div style="float:left;">| <a href="#top">Haut de page</a> | <a href="#">Contact</a> | <a href="#">Plan du site</a> |</div>
<div style="width:16px; margin:auto;"><a href="/"><img src="/root/favicon.png" alt="Retour à l'accueil" title="Retour à l'accueil" border="0"></a></div>
<div style="float:right;">©2005 Gillou</div>
</div>

Est-ce que quelqu'un comprend pourquoi le copyright se met sur une autre ligne ? (cf.image ci-dessous)

Comment faire pour que les 3 liens soient à gauche, l'icône au milieu et le copyright à droite, le tout sur une même ligne ?
Merci

Reply

Marsh Posté le 22-01-2005 à 11:53:20

Reply

Marsh Posté le 22-01-2005 à 13:28:52

Ton positionnement flottant est effectivement contradictoire.
Il faut bien tenir compte qu'un élément flottant n'agit pas sur le contenu qui le précède (ici, ta partie centre).
Il faut donc placer tes flottants avant les parties en flux normal

Pour aligner 3 éléments, voici une méthode :

Code :

#content {
background: yellow;
text-align : center;
}
.gauche {float: left;}
.droite {float: right;}
<div id="content">
<p class="gauche">gauche</p><p class="droite">droite</p>
<p>centre</p>
</div>

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Reply

Marsh Posté le 22-01-2005 à 14:19:50

Salut Sibelius, et merci beaucoup pour ta réponse puisqu'elle résoud mon problème : j'ai placé l'image centrale après les deux flottants dans le code, et effectivement maintenant tout est aligné parfaitement.
Par contre je ne comprends pas bien ta phrase :

Citation :

Il faut bien tenir compte qu'un élément flottant n'agit pas sur le contenu qui le précède (ici, ta partie centre).

Que veux-tu dire ? (je suis débutant en CSS hein, c'est peut-être une question bête...)

Encore merci pour la solution en tout cas !

Reply

Marsh Posté le 22-01-2005 à 14:30:16

Gillou_2004 a écrit :

Citation :

Il faut bien tenir compte qu'un élément flottant n'agit pas sur le contenu qui le précède (ici, ta partie centre).

Que veux-tu dire ? (je suis débutant en CSS hein, c'est peut-être une question bête...)

Encore merci pour la solution en tout cas !

Les flottants sont d'abord placés dans le flux (donc après les éléments qui les précèdent), PUIS poussés à droite ou à gauche.
Pour en savoir plus :
http://openweb.eu.org/articles/initiation_float/
http://www.alsacreations.com/articles/div/

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Reply

Marsh Posté le 22-01-2005 à 15:06:59

merci pour tout

Reply

Positionnement calques CSS

Sujets relatifs:

Leave a Replay