Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Positionnement css conteneur

Dernière réponse le 13 déc 2008 à 17:20:49 olaf54, le 11 déc 2008 à 11:30:20

Signaler ce message aux modérateurs

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 ;)

Configuration: Windows XP
Firefox 3.0.4

Meilleures réponses pour « positionnement css conteneur » dans :

Problème css : Div de positionnement Voir

Positionner des éléments grâce aux CSS Voir Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

Creer conteneur CSS (Résolu) Voir

[PHP] Lister le contenu d'un répertoire VoirGrâce à PHP, il est possible d'afficher le contenu d'un répertoire et de ses sous-répertoires. Voici ci-dessous une fonction permettant de parcourir récursivement les répertoires et sous-répertoires et d'en afficher les fichiers : function...

Télécharger le contenu d'une page WEB distante VoirIntroduction Installation sous Linux (Ubuntu / Debian) Installation sous Windows Dev C++ Microsoft Visual C++ Petite exploration des fonctions de libcurl Un exemple: télécharger la page d'accueil de CCM Notre fichier source Compilation...

Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...

Toutes les balises XHTML et CSS (Résolu) Voir

Liens en programmation CSS (Résolu) Voir

CSS - Position cadre DIV Voir

Télécharger Apprendre XHTML & CSS Voir

DHTML - La notion de couche VoirQu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...

Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

RSS - Syndication de contenu VoirIntroduction au RSS Le standard RSS représente un moyen simple d'être tenu informé des nouveaux contenus d'un site web, sans avoir à le consulter. Le format « RSS » (traduisez « Really Simple Syndication ») permet ainsi de décrire de façon...

Posez votre question Répondre

adns, le 11 déc 2008 à 11:35:20

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... La culture c'est comme la confiture moins on en a plus on l'étale
Le Monde du partage Remplacera le partage du monde

Répondre à adns

olaf54, le 11 déc 2008 à 11:46:59

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>


<br><br>

</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

Répondre à olaf54

adns, le 11 déc 2008 à 11:58:20

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 La culture c'est comme la confiture moins on en a plus on l'étale
Le Monde du partage Remplacera le partage du monde

Répondre à adns

olaf54, le 11 déc 2008 à 12:54:04

Je te remercie pour ta reponse ... mais je vois pas trop ou mettre inserer ce clear ... honnetement je ne m'en suis encore jamais servi donc je visualise pas trop

^^
Merci ;)

Répondre à olaf54

olaf54, le 11 déc 2008 à 13:40:38

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

Répondre à olaf54

adns, le 11 déc 2008 à 13:52:52

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

Répondre à adns

olaf54, le 11 déc 2008 à 15:27:10

Penses tu que ce que ca puisse etre la faute des float ... qui se comportent mal vis a vis des positions ???

En positionnant les éléments non plus avec des floats mais avec des coordonnées plus precises ou des position "relative" purrait y changé quelque chose ?

Répondre à olaf54

olaf54, le 11 déc 2008 à 16:02:01

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 ;)

Répondre à olaf54

adns, le 11 déc 2008 à 17:41:23

Désolé je suis pas un pro css en général j'utilise des table :):)

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

Répondre à adns

olaf54, le 12 déc 2008 à 20:49:28

Des tables pour la mise en pages .... :o ;)

Répondre à olaf54

olaf54, le 13 déc 2008 à 17:20:49

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 : http://openweb.eu.org/articles/initiation_float !!!

Voila pour tout le monde ;)

Répondre à olaf54

Posez votre question Répondre