28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde
Après tant d'essai je n'arrive pas à effectuer une mise en forme souhaité raisonpou la quelle je demmande votre assistance voici une image du style que j'ai adopté:
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
margin:0 0;
display:block;
}
.container {
width:1000px;
box-shadow: 0px 0px 15px #CCC;
margin:0 auto;
background-color: #FFF;
display: block;
margin-top: 5px;
text-align: left;
}
.header{
box-shadow: 0px 0px 10px #333;
border-bottom-color:#D6D6D6;
border-bottom-width:thin;
background-image: url(image/head3.png);
background-color: #F3F3F3;
background-repeat: repeat-x;
font-size: 12px;
height: 50px;
display:block;
margin:0px;
}
#liste_mess{
border-radius:5px 5px 5px;
border-color:#F4F4F4;
border-style:dashed;
border-width:1px;
font-size:12px;
width:430px;
margin-left: 2px;
height: auto;
float: left;
margin-bottom: 10px;
margin-top: 8px;
padding: 0 10px;
margin-right: 10px;
}
#entete_user{
border-width:thin;
padding: 2px;
font-size: 12px;
float: left;
width: 992px;
box-shadow:0px 0px 2px #CCC;
margin: 3px;
border-color:CCC;
border-width:1px;
background-color: #F9F9F9;
}
.sidebar1 {
width: 250px;
padding-bottom: 10px;
margin-right: 2px;
float: left;
background-color: #FFF;
border-right-width: 1px;
font-size: 12px;
margin-left: 8px;
margin-top: 2px;
text-align: left;
}
classement des divs:
1)body
a)header
b)container
- ente_user (est la 1ère balise elle est en haut des deux secondes)
- liste_mess (flot à gauche après entete_user)
- sidebar1 (float à gauche après liste_mess)

Voici ce que je voulais, dans la balise (#liste_mess) je voulais afficher la liste des messages (et dix message par affichage) ensuite proposer au visiteur un lien pour afficher le reste des messages, mais si les messages sont long la balise descend elle seul en laissant sa balise parent (.container) et si je donne un (height) à (.container) sa devient fixe.

je voulait qu'au fur et mesure on insère les messages les balises augmente de (height).
Salut,

Il y a des outils de mise en forme disponible pour le code, plus ton message sera lisible, plus il donnera envie d'être résolu Smiley smile .

Sinon je te conseil de remplacer tes float par :
selecteur {
display:inline-block;
vertical-align: top}


Ça t'évitera pas mal de soucis ^^
merci Gili
sa marche et surtout j'avais consulter le tuto pour empêcher les éléments flottant de dépasser leurs parents, j'ai ajouté
{
overflow:hidden;
}
à ma balise container et sa marche merci pour la reponse
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif