Hells_Dark

Bijour MissMonde et Merci Heu, a lire comme ça, ça parait clair...mes éléments ne se positionnent comme je veux....i mais... C'est vraiment bizarre ! En fait, la boite du menu est correctement positionné ainsi que la boite du contenu par rapport au contenant ! Le problème, c'est que ces 2 boites ne sont pas vraiment dans le contenant (sur la page,bien sur, dans le code, elles y sont). En effet, le contenant a un fond blanc et celui ci ne vas pas plus loin que le logo qui se situe en haut du contenant.... Et j'ai exactement le même problème pour le contenu de la boite "contenu" ! Il dépasse largement de la boite en bas ! Que dois je faire ? J'ai pourtant mis height : 100% pour la boite "ensemble" (celle qui contient l'ensemble du site) et idem pr la boite "contenu" (qui contient le... ).

En faitle pb, c'est que quand je met par exemple : #menu { position : absolute; top : 10px; left : 10px; width : 102px; } Pour le menu, et bien, le menu se positionne à 10 pixel du bord de la fenêtre et pas à 10 pixel du bord de la boite "ensemble" dans laquelle le menu (et tout le reste du site...) est.... Je commence à désésperer... personne ne comprend mon pb ? DItes le moi, faut pas hésiter

Finalement, je crois que je vais tout positionner en absolu... Ce sera surement plus simple Absolute est bien censé se faire par rapport à la boite dans lequel nos trucs sont ? PArce que chez moi, ça soirt de partt, rien n'est respécté....

Bijour ! BAh en tout cas, moi j'applique un border à mes ul et ça marche très bien.... Le W3C valide ma page en tt cas

Je commence à en avoir un peu marre... J'ai essayé avec la boite contenu en position relative et le menu en float cette fois... C'est poarfait avec Mozilla, un désastre avec IE... Je commence à me dire que j'aurais jamais exactement ce que je veux...snif

Oui, cette fois le menu se retrouve bien à gauche du contenu ! Cependant ce qu''il ya à l'intérieur du contenu dépasse de la boite contenu... Pourtant j'ai mis height : 100%; pour cette boite... body { background-color : #F3F3F3; border-top : 5px solid #C00; border-bottom: 5px solid #C00; } * { font-size : 12px; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; font-weight : bold; margin:0; /* suppression de toutes les marges */ padding:0; } #ensemble { text-align : center; margin-bottom : 10px; } #center { background-color : #FFFFFF; border : 1px solid #E1D6CE; text-align : left; margin-top: 10px; margin-left : auto; margin-right : auto; width : 900px; } #tribune { margin-top: 10px; margin-left: 0px; /* on place ce bloc à droite du bloc menu de 180px de large */ width: 200px; height: 150px; overflow: auto; /* cette propriété va permettre le scroll de ce bloc */ font-size: 12px; background-color: #EEE7E5; border: solid 1px #003388; } #intribune { margin-left: 10px; } #news { width : 300px; font-size : 12px; border : 1px solid #C00; margin-top : 10px; margin-bottom : 10px; padding-left : 10px; } #posts { width : 300px; font-size : 12px; border : 1px solid #C00; margin-top : 10px; margin-bottom : 10px; padding-left : 10px; } #edito { width : 300px; font-size : 12px; border : 1px solid #C00; margin-top : 10px; margin-bottom : 10px; padding-left : 10px; } #citation { width : 300px; font-size : 12px; border : 1px solid #C00; margin-top : 10px; margin-bottom : 10px; padding-left : 10px; } span { color : #CC0000; } #logo { border-bottom : 1px solid #E1D6CE; } #menu { margin-top : 10px; margin-bottom : 10px; margin-left : 10px; width : 102px; } #menu ul { margin-top : 10px; border : 1px solid #E1D6CE; list-style-type : none; } #menu li { padding-left : 0px; } #menu li h1 { padding-left : 10px; } #menu li a { color : #CC0000; text-decoration : none; } #menu li a:hover { color : #FF0000 } #menu li h2 { font-size : 10px; padding-left : 10px; } #menu li h2 span { font-size : 10px; color : #CC0000; } .linka { color : #CC0000; text-decoration : none; } .linka a:hover { color : #FF0000; } .linkb{ font-size:11px; text-decoration : none; color: #003388; } .linkb:hover { color: #666666; } .linkb:visited { color: #003388; } #contenu { float : right; width : 766px; height: 100%; margin : 5px; margin-top : 10px; margin-bottom : 10px; border : 1px solid #E1D6CE; } #incontenu { padding-left : 10px; padding-top : 10px; } (problème uniquement avec Mozilla) De plus la boite contenu n'a pas une marge de 10 pixel à droite par rapport à la boite "ensemble".... Sous Mozilla, si, mais sous IE, elle est plus grande

Le menu est toujours en dessous le "contenu"... COntenu à droite puis menu à gauche mais... en dessous

HEu....ça a l'air de marcher chez moi ! Je suis 3 ème avec le nom de mon clan (hellsplayers) ! Le pire c'estr que ceux qui me devancent sont aussi mes sites (premières versions, sites anvciens et délaissés )

Bon, tout m'a l'air bon mais... Maintenant je voudrais mettre encore un cadre à droite du menu pour mettre...he ben, le contenu du site pardis ! J'avais pensé faire ainsi : #contenu { float : left; margin-left : 120px; margin-right : 10px; margin-bottom : 10px; border : 1px solid #E1D6CE; } Mais ça ne marche pas.... Le "contenu" se place après tout (après le tableau contenantn le logo et le menu...) Une idée ? CSS : body { background-color : #F3F3F3; border-top : 5px solid #C00; } * { font-size : 12px; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; font-weight : bold; margin:0; /* suppression de toutes les marges */ padding:0; } #ensemble { text-align : center; } #center { background-color : #FFFFFF; border : 1px solid #C00; text-align : left; margin-top: 10px; margin-left : auto; margin-right : auto; width : 800px; } #logo { margin-left : auto margin-right : auto; border-bottom : 1px solid #C00; } #menu { margin-top : 10px; margin-bottom : 10px; margin-left : 10px; width : 102px; } #menu ul { margin-top : 10px; border : 1px solid #E1D6CE; list-style-type : none; } #menu li { padding-left : 0px; } #menu li h1 { padding-left : 10px; } #menu li a { color : #CC0000; text-decoration : none; } #menu li a:hover { color : #FF0000 } #contenu { float : left; margin-left : 120px; margin-right : 10px; margin-bottom : 10px; border : 1px solid #E1D6CE; } PAGE : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>HELLSPLAYERS TESTS CSS</title> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <link href="styles/hells_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="ensemble"><div id="center"> <div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" width="670" height="70" /></div> <div id="menu"> <ul> <li><img src="images/menu_menu.gif" alt="Menu" /></li> <li><h1><a href="ghd">Accueil</a></h1></li> <li><h1><a href="hrtf">Forum</a></h1></li> </ul> <ul> <li><img src="images/menu_membre.gif" alt="Zone membre" /></li> <li><h1><a href="hrt">Accueil</a></h1></li> <li><h1><a href="rht">Accueil</a></h1></li> </ul> <ul> <li><img src="images/menu_plus.gif" alt="Plus" /></li> <li><h1><a href="rth">Team</a></h1></li> <li><h1><a href="index.php?page=liens">Liens</a></h1></li> </ul> </div> <div id="contenu">5555</div> </div> </div> </body> </html> (codes validés bien sur (pas 2 fois les même erreurs ))

mmm, en effet ! Cela m'a l'air beaucoup mieux !!! Gràce à toi Monique, je suis sur la bonne voie ! J'ai commandé un bouquin vendredi sur les css sur eyerolles.com , je vais me perfectionner encore un peu (j'en ai bien besoin) ! Merci

Perso, je conseille 2 autres sites géniaux pour commencer (avis perso ) : -> www.lephpfacile.com -> www.lesiteduzero.com Bonne chance l'amie !

J'ai corrigé le tout, tout est validé... cependant, ce n'est pas ce que je voulais... 1) le menu est à droite (???) 2) le contenu du menu est centré ... 3) le tout n'a pas le contour que je voulais... Mon code : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>HELLSPLAYERS TESTS CSS</title> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <link href="styles/hells_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="ensemble"><div id="center"> <div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" /></div> <div id="menu"> <ul> <li><img src="images/menu_menu.gif" alt="Menu" /></li> <li><h1><a href="ghd">Accueil</a></h1></li> <li><h1><a href="hrtf">Accueil</a></h1></li> </ul> <ul> <li><img src="images/menu_membre.gif" alt="Zone membre" /></li> <li><h1><a href="hrt">Accueil</a></h1></li> <li><h1><a href="rht">Accueil</a></h1></li> </ul> <ul> <li><img src="images/menu_plus.gif" alt="Plus" /></li> <li><h1><a href="rth">Accueil</a></h1></li> <li><h1><a href="thr">Accueil</a></h1></li> </ul> </div> </div> </div> </body> </html> mon css : body { background-color : #F3F3F3; border-top : 5px solid #C00; } * { font-size : 12px; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; font-weight : bold; margin:0; /* suppression de toutes les marges */ padding:0; } #ensemble { text-align : center; } #centre { background-color : #FFFFFF; border : 1px solid #C00; text-align : left; margin-top: 10px; margin-left : auto; margin-right : auto; width : 800px; height : 100%; } #logo { float : left; margin-left : 20px; margin-bottom : 10px; } #menu { float : left; margin-top : 80px; margin-left : 20px; width : 100px; } #menu ul { margin-top : 10px; border : thin dotted #E1D6CE; list-style-type : none; } #menu li { padding-left : 0px; } #menu li h1 { padding-left : 10px; } #menu li a { color : #CC0000; text-decoration : none; } #menu li a:hover { color : #FF0000 } ...hem

Désolé pour ces fautes d'inattention.... En fait, le truc des absolus...c'était quand j'utilisais des positions absolues, sinon, IE s'y perdait...mais je devrais l'enlever maintenant.... Je vais faire des essais....

HEu....pour bien comprendre, je vais vous donner ce que j'ai fait (enfin..testé...) Voilà pr la page... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>HELLSPLAYERS TESTS CSS</title> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <link href="styles/hells_css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="ensemble"> <div id="center" <div id="logo"><img src="images/hp3.gif" alt="Hellsplayers © 2004" /></div> <div id="menu"> <ul> <img src="images/menu_menu.gif" alt="Menu" /> <li><a href="#">Accueil</a></li> <li><a href="#">Accueil</a></li> </ul> <ul> <img src="images/menu_membre.gif" alt="Zone membre" /> <li><a href="#">Accueil</a></li> <li><a href="#">Accueil</a></li> </ul> <ul> <img src="images/menu_plus.gif" alt="Plus" /> <li><a href="#">Accueil</a></li> <li><a href="#">Accueil</a></li> </ul> </div> </div> </div> </body> </html> Voilà pr la page... Et le css : body { background-color : #F3F3F3; border-top : 5px solid #C00; } p, div, h1, h2, h3 {position : absolute;} * { font-size : 12px; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; font-weight : bold; margin:0; /* suppression de toutes les marges */ padding:0; } #ensemble { background-color : #FFFFF; border : 1px solid #C00; height : 100%; width : 800px; text-style : center; } #centre { text-style : left; } #logo { float : left; margin-top : 10px; margin-left : 20px; margin-bottom : 10px; } #menu { width : 100px; float : left; margin-top : 80px; margin-left : 20px; } #menu ul { margin-top : 10px; border : thin dotted #E1D6CE; list-style-type : none; } #menu li { padding-left : 10; } #menu li a { color : #CC0000; text-decoration : none; } #menu li a:hover { color : #FF0000 } ...help

Bijour à tous !!! Je suis new dans la communauté ! C'est étonnant, mais je n'arrive pas à mettre mon site dans un tableau... En fait ce que je veux, c'est que le site soit dans un tableau (quand je dis tableau, c'est 100% css, pas de table, de td et tt... ) sans marge en haut ou en bas mais juste sur les cotés... Mais étonnemment je n'arrive pas... Un petit exemple (simple) siouplait, messieurs ? (comme sur ce site par ex : http://www.alistapart.com/articles) Moi, j'avais fait un truc type : #contour { border-top : 0px ; border-bottom : 0px border-left : 50px ; border-right : 50px ; } mais ça ne mlarche pas du tt... Merci !