Positionnement css conteneur
Bonjour,
J'ai une question pour les pros du positionnement des élements. Pour le site d'un club, le but est de mettre dans un conteneur principal :
- un menu (en flottant à gauche pour l'instant)
- une colonnes de "breves" ... (en flottant à droite )
- et le contenu (texte/info...) vient bien se placer au milieu
Horizontalement tout est bien a sa place,
En revanche si le texte du milieu est plus court que le menu ou les breves, le conteneur ne descend pas jusqu'en bas ... il s'arrete à la taille du contenu au milieu ...
Comment puis-je corriger ca ? (c'est surement tout bete mais j'avoue que je seche un peu la)
Merci d'avance pour votre aide ;)
J'ai une question pour les pros du positionnement des élements. Pour le site d'un club, le but est de mettre dans un conteneur principal :
- un menu (en flottant à gauche pour l'instant)
- une colonnes de "breves" ... (en flottant à droite )
- et le contenu (texte/info...) vient bien se placer au milieu
Horizontalement tout est bien a sa place,
En revanche si le texte du milieu est plus court que le menu ou les breves, le conteneur ne descend pas jusqu'en bas ... il s'arrete à la taille du contenu au milieu ...
Comment puis-je corriger ca ? (c'est surement tout bete mais j'avoue que je seche un peu la)
Merci d'avance pour votre aide ;)
Configuration: Windows XP Firefox 3.0.4
7 réponses
-
bonjour
si j'ai bien compris tu as un site en trois parties gauche milieu droite
et tu veux que la parti du milieu sois aussi longue (pas large mais longue) que celle des coter quleque sois son contenu ???
Adns
ps si tu peux balance ton code...-
oui voila, le but serait que le grand conteur (qui englobe les 3 parties) fasse au moins la hauteur des éléments qu'il y a dedans ...
je peux mettre le code pas de soucis , je mets l'exemple avec la page d'acceuil ;) :
CODE HTML :
[...]
<div id="entete">
</div>
<div id="conteneur">
<div id="menu">
<ul> <a href="index.php"><b> Accueil </b></a><br /><br />
<img src="images/logo_tdt.jpg" /> <br /><br />
<li><a href="club.php">Le club</a></li>
<li><a href="inscrip.php">Inscriptions</a></li>
<li><a href="entrainements.php">Entrainements</a></li>
<li><a href="equipes.php">Equipes</a></li>
<li><a href="calendrier.php">Calendrier</a></li>
<li><a href="results.php">Résultats</a></li>
<!--<li><a href="photos.php">Photos</a></li>-->
<br><br>
<!--<a href="contact.php">Contact</a>-->
</ul>
<img src="images/tables.jpg" align="middle" width="107" height="67"/>
</div>
<div id="pied">
<a href="index.php">[Accueil]</a>      
<a href="entrainements.php">[Entrainements]</a>      
<a href="calendrier.php">[Agenda]</a>      
<a href="contact.php">[Contact]</a>      
<br> Copyright 2008 All Rights Reserved
</div>
</div>
</body>
</html>
CODE CSS (je le charge d'un fichier externe dans le head):
/* CSS Document */
/* Polices & Général */
body
{
background-color:#336633;
margin:auto;
margin-top:20px;
width:1000px;
}
/* Mise en place éléments */
#entete{
background-image:url(images/table_tdt3.gif);
background-repeat:no-repeat;
background-position:center;
text-align:center;
height:120px;
}
#pied{
color: black;
font-size:10px;
text-align:center;
margin-top: 25px;
margin-bottom:5px;
padding: 3px;
}
#conteneur{
border: groove 6px #006699 ;
background-color:#CCFF99;
}
#cont {
font-family:Georgia, Times New Roman, Times, serif;
font-size:12px;
padding: 15px;
width: 600px;
margin-left: 200px;
margin-top: 25px;
}
#menu {
float:left;
color: #006699;
width: 150px;
padding: 5px;
margin: 10px;
border-right: groove 2px #006699 ;
position: fixed;
}
#breves{
float:right;
color: #006699;
width: 150px;
margin-top : 50px;
font-style:oblique;
font-weight:bold;
border-left: groove 2px #006699 ;
}
J'espere que ca pourra plus vous aider ;)
Merci d'avance
-
-
ta div conteneur englobe bien le tout donc elle devrait etre plus grande..
il y a peut etre un souci avec les float
je pense qu'il faut dire a un moment que tu veux que ca redevienne normale plus de float left ou rigth
pour ca
<div id"clear"></div>
avec css
#clear{
clear:both;
}
Adns -
En fait je viens de regarder sur le net mais je suis pas tres sur que la propriété clear soit la solution
En gros ce que je devrais (voudrais) avoir ressemble a ca :
-----------------------------------------
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
----------------------------------------
et ce que j'ai c'est ca :
----------------------------------------
| | | |
| | | |
| | | |
----------------------------------------
| | | |
| | | |
J'espere qu'avec le pti schema ca aide :$
Merci d'avance a tous -
tu dois juste avoir un probleme de positionnement d'une balise div dans ce cas .....
enfin avec le code fourni ce devrais marcher pourtant
Adns
---------
La culture c'est comme la confiture moins on en a plus on l'étale
Le Monde du partage Remplacera le partage du monde -
Si quelqu'un d'autre a une idée je prends ^^ pck la je seche vraimeent alors que l'architecture du site est vraiment toute simple
Merci ;) -
désolé je suis pas un pro css en général j'utilise des table :):)
Adns -
Re bonjour a tous ,
Effectivement adns ta solution avec le clear était la bonne ...
En fait, avant la fin de la div conteneur (et pour ma part avant le pied de page puisqu'il est contenu dans cette boite)
j'ai simplement insérer le code suivant :
[...]
<div class="spacer"></div>
<div id="pied">
<a href="index.php">[Accueil]</a>
<a href="entrainements.php">[Entrainements]</a>
<a href="calendrier.php">[Agenda]</a>
<a href="contact.php">[Contact]</a>
<br> Copyright 2008 All Rights Reserved
</div>
</div>
</body>
</html>
et dans le code css
.spacer {
clear: both;
}
Et voila
olution trouvé sur le site tres interessant de Openweb : https://openweb.eu.org/articles/initiation_float !!!
Voila pour tout le monde ;)
