Hells_Dark Posté 1 Août 2004 Posté 1 Août 2004 (modifié) 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 ! Modifié 2 Août 2004 par Hells_Dark
Monique Posté 1 Août 2004 Posté 1 Août 2004 Bonjour Hells_Dark, Et bienvenue sur le Hub Le principe général, pour obtenir ce que tu souhaites, est de placer l'ensemble de la page dans un bloc conteneur auquel on attribue ce style .conteneur { text-align: center;} et de rétablir l'alignement à gauche dans le bloc ainsi centré avec le style .centre { text-align: left;} Le style du bloc centre sera complété en fonction du but recherché, une boîte élastique ou de largeur fixe. Tu trouveras les différentes solutions expliquées sur cette page Initiation au centrage CSS
Hells_Dark Posté 1 Août 2004 Auteur Posté 1 Août 2004 (modifié) 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 Modifié 2 Août 2004 par Hells_Dark
mee2 Posté 1 Août 2004 Posté 1 Août 2004 Il faut utiliser # test-align: center; # et pas # text-style : center; #, déjà.
Monique Posté 1 Août 2004 Posté 1 Août 2004 Attention aux erreurs d'écriture ! text-style : center; n'existe pas => text-align: center; <div id="center" la balise n'est pas fermée et le nom de l'identificateur ne correspond pas à celui de ta feuille de style => <div id="centre"> Pourquoi ces positions absolues ? p, div, h1, h2, h3 {position : absolute;} Tu peux les supprimer et, eventuellement, jouer avec des valeurs de margin ou padding pour positionner tes blocs. Les styles à appliquer #ensemble { text-align: center;}#centre { margin-left: auto; margin-right: auto; text-align: left; width: 800px; border: 1px solid #C00; height: 100%;}
Hells_Dark Posté 1 Août 2004 Auteur Posté 1 Août 2004 (modifié) 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.... Modifié 2 Août 2004 par Hells_Dark
Monique Posté 1 Août 2004 Posté 1 Août 2004 Désolé pr ces fautes d'inattention.... Cela peut arriver à tout le monde C'est pourquoi il est important de soumettre ton code aux validateurs, même quand il s'agit seulement d'essais. Si ta page n'est pas encore en ligne, tu peux coller directement ton code dans ceux-ci validateur HTML validateur CSS
Hells_Dark Posté 1 Août 2004 Auteur Posté 1 Août 2004 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
Monique Posté 1 Août 2004 Posté 1 Août 2004 J'ai corrigé le tout, tout est validé... cependant, ce n'est pas ce que je voulais... 1 : 2 : Tu as oublié de corriger <div id="center"> Essaie en supprimant les float : left; pour le logo et le menu.
Hells_Dark Posté 1 Août 2004 Auteur Posté 1 Août 2004 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
Hells_Dark Posté 1 Août 2004 Auteur Posté 1 Août 2004 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 : automargin-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 ))
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 Le menu est toujours en dessous le "contenu"... COntenu à droite puis menu à gauche mais... en dessous
LaurentDenis Posté 2 Août 2004 Posté 2 Août 2004 Il y a une erreur de conception et d'utilisation du float. Tu fait flotter ton <div id="contenu"> qui est placé après ton menu. Il faut faire l'inverse : - conserver cet ordre HTML "menu" puis "contenu", mais appliquer le float au menu; - ou bien inverser l'ordre HTML (mieux) "contenu" puis "menu", et faire flotter le contenu. En effet, le float extrait l'élément concerné de l'affichage normal (ce qu'on appelle le flux) pour permettre à ce qui le suit de le "flanquer" sur le côté. Voir http://openweb.eu.org/articles/initiation_float/ où tu trouveras un gabarit HTML CSS minimal de ce type.
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) 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 Modifié 2 Août 2004 par Hells_Dark
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 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
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) 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é.... Modifié 2 Août 2004 par Hells_Dark
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) 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 Modifié 2 Août 2004 par Hells_Dark
MissMonde Posté 2 Août 2004 Posté 2 Août 2004 Bonjour Hells-Dark, un élément en position absolue se place par rapport, soit au body, soit à un contenant lui-même positionné. ce qui veut dire que si tu ajoutes une position relative au contenant de ton menu, il se positionnera comme tu veux et le fait de mettre "position : relative" au contenant, ne change rien pour lui. dis-moi si ce n'est pas clair !!
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) 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... ). Modifié 2 Août 2004 par Hells_Dark
MissMonde Posté 2 Août 2004 Posté 2 Août 2004 voici ce que j'ai compris: apparemment, tu as un body dans lequel il y a ton background que tu veux appliquer à toute ta page. à l'intérieur il y a un contenant (div#ensemble), dans lequel tu as mis un menu à gauche en position absolue et un contenu à droite en position float. voici ce que je ferais : si tu appliques une position relative au div "ensemble", ton menu va se positionner par rapport à lui. si tu enlèves la position float au contenu de droite, il va revenir dans le flux et le background du body va s'appliquer à lui. il ne faut pas oublier de laisser une marge à gauche pour le menu; attention : comme le menu est en position absolue, le background ne s'appliquera à lui qu'à concurrence de la hauteur du contenu de droite. c'est l'inconvénient de la position absolue. Est-ce que c'est mieux maintenant ?
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) Et bien...heu... merci ! Voici ce que j'ai fait : J'ai enlevé le position : absolute du contenu (j'avais pas mis float mais absolu...enfin au début, c'était float mais avec les modifs...bref !) J'ai mis une marge à celui ci pour laisser la place au menu ! Et...ça a l'air de marcher ! C'est pas encore exactement ça au pixel près mais ça viendra ! Bon, bah je pars continuer ! Encore merci l'amie... Modifié 2 Août 2004 par Hells_Dark
MissMonde Posté 2 Août 2004 Posté 2 Août 2004 De rien; A la prochaine,n'hésite pas, ça fait de bons travaux pratiques
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 (modifié) Pendant que j'y suis , 1) j'ai un espace de 2 px spous mon logo (sous mozilla pas sur IE) qui est contenu dans la boite "ensemble" et la boite "header" suivante : #header {border-bottom : 1px solid #E1D6CE;} Entre le bord du bas de la boite header et l'image, il ya 2px, ça peut venir d'ou ? 2) Si le contenu est plus petit en largeur que le menu, celui ci dépasse alors de la boite ensemble en bas...comment y remédier ? Modifié 2 Août 2004 par Hells_Dark
MissMonde Posté 2 Août 2004 Posté 2 Août 2004 bon, j'arrive à mes limites : 1. sur les 2 px je n'ai pas assez de renseignements sur la disposition de tes blocs dans la feuille html et de leurs marges, paddings, borders et positions dans la css. 2. il y a un excellent article sur Alsacréations à propos du choix du positionnement des blocs dans une mise en page : http://www.alsacreations.com/blog/index.ph...nnement-choisir pour ce qui est de ce problème du positionnement absolu, j'espère pouvoir le résoudre grâce à un article de Pompage.net sur le pied de page, mais je n'ai pas réussi à reproduire le cas exposé (il y a du Javascript et j'ai du mal avec ce language). http://pompage.net/pompe/pieds/ Désolée
Hells_Dark Posté 2 Août 2004 Auteur Posté 2 Août 2004 Et bien, merci pour ces adresses ! Je vais les lire avec attention... Et si tu veux mon css actuel, le voilà : 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 la boite */}#center {text-align : left; /* remet le texte à gauche */position : relative;background-color : #FFFFFF;border : 1px solid #E1D6CE;margin-top: 10px;margin-left : auto;margin-right : auto;margin-bottom : 10px;width : 900px;}span {color : #CC0000;}#header {margin : 0px;border-bottom : 1px solid #E1D6CE;}#menu {position : absolute;top : 70px;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 h2 {font-size : 10px;padding-left : 10px;}#menu span {font-size : 10px;color : #CC0000;}#contenu {width : 766px;height: 100%;margin-top : 10px;margin-bottom : 10px;border : 1px solid #E1D6CE;margin-left : 122px;}#incontenu {padding-left : 10px;padding-top : 10px;padding-bottom : 10px;}.linka {color : #CC0000;text-decoration : none;}.linka a:hover {color : #FF0000;}.linkb {font-size:11px;text-decoration : none;color: #003388;}.linkb:hover {color: #666666;}#tribune {width : 300px;border : 1px solid #C00;padding-left : 10px;padding-bottom : 10px;}#tribune h1 {text-align : center;}#scroll {margin-top: 10px;margin-left: 0px; /* on place ce bloc à droite du bloc menu de 180px de large */width: 280px;height: 150px;overflow: auto; /* cette propriété va permettre le scroll de ce bloc */font-size: 12px;background-color: #EEE7E5;border: solid 1px #003388;}#inscroll{margin-left: 10px;}#news {width : 300px;font-size : 12px;border : 1px solid #C00;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;}
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant