December 20, 200618 yr Bonjour à tous ! Voila je débute tout doucement dans l'apprentissage des CSS et cie et je voudrai faire une mise en forme du type : Un bloc header en haut, un bloc pied de page en bas, des blocs de menu à gauche et à droite et des blocs centraux pour le contenu des données, j'ai fait cette page : http://hypnoz.ath.cx/hyp/indexx.html Mais tout ce mélange Vous pourriez me filer un coup de main svp ? Je dois avoir un probleme avec les position absolute et relative des blocs mais je trouve pas ... Merci
December 20, 200618 yr Vite fait, sans avoir testé, je te conseillerai plutôt de mettre ton bloc "conteneur_droite" avant "conteneur_centre" et d'appliquer la propriété "float:right;" à "conteneur_droite". Pour le "conteneur_pied", mets un "clear:both;" dans la CSS. Quoiqu'il arrive, va faire un tour sur le site du zéro, et plus particulièrement dans cette rubrique pour le cas qui t'intéresse. Bon courage !
December 20, 200618 yr Author Ok merci Le site a un prob SQL il semblerait je regarde ca aprés Sinon que pense-tu des attributs de position que j'ai placé ? Sont-ils correctes ? Merci C'est bon ca re-fonctionne : En effet le lien sur le Design est intéressant et il reprend la méthode que je souhaite utiliser pour les menus : Merci
December 20, 200618 yr Bizarre j'ai pas l'impression que ce que je vois soit le rendu souhaité. Chez moi (Firefox 2.0) le pied de page est placé au dessus du conteneur.
December 21, 200618 yr Author Bizarre j'ai pas l'impression que ce que je vois soit le rendu souhaité. Chez moi (Firefox 2.0) le pied de page est placé au dessus du conteneur. Oui oui c'est pas trop ce que je veux en effet D'ou ma question sur la position de mes conteneurs ?
December 21, 200618 yr Bon alors d'abord un erreur facilement réparable : tu as oublié de fermer ta balise meta : <meta ... /> Pour le css, moi j'éviterais le positionnement en "absolute" et je lui préférerais le placement en float. En gros il y aurait un "conteneur central" et à l'intérieur, trois blocs ("conteneur_gauche", "conteneur_central" et "conteneur_droite"). Sinon, pas besoin d'attribuer une classe "menugauche" à ton ul car tu peux l'atteindre avec "#menugauche ul". Là j'ai pas trop le temps mais d'ici ce week end, je pourrais te faire ta structure si tu n'y arrivais pas PS : En tous les cas ton code est agréable à lire.
December 21, 200618 yr Author En fait à la base j'avais fait comme ca : Un conteneur, le header, les 3 blocs gauche, centre, droite et tout fonctionnait à merveille ! Ensuite je me suis dit : " Tiens ca serait sympa que je mette plusieurs blocs à gauche et plusieurs à droite" donc j'ai voulu ajouté des conteneurs droite, centre, gauche et y mettre les conteneurs de menu déja présent, au moins dans mon conteneur principale gauche je mettai tout mes conteneurs gauche, dans le droit > les droits etc ... Un peu à la maniere du conteneur principal qui contient header, centre, droite et gauche mais pour les 3 parties du site ... Et la je me suis emmelé les pinceaux et pas moyen de faire ce système ... A mon avis j'utilise pas la bonne méthode et il faudrait mieux que je revienne au système basique avec mes 3 blocs mais dans ce cas là je dois regarder la manière de faire pour ajouter un bloc sous un bloc à gauche par exemple Heu j'espere que c'est a peu près clair Merci
December 21, 200618 yr Oula.... Tu peux faire un dessin plz Fais un truc rapide juste pour que je puisse avoir une idée de la structure complète que tu souhaites. Je te la ferais en t'expliquant la manière dont je m'y suis pris.
December 21, 200618 yr Author Voilou : http://hypnoz.ath.cx/design.JPG Merci beaucoup Edited December 21, 200618 yr by HyPnOz
December 21, 200618 yr Ok c'est bon. Voici le code : HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Titre</title> <link rel="stylesheet" media="screen" type="text/css" href="style.css" /> </head> <body> <div id="header"> Header </div> <div id="contenu"> <div id="gauche"> <div class="vert">Menu gauche</div> <div class="vert">Menu gauche</div> </div> <div id="centre"> <div class="vert">Centre</div> <div class="vert">Centre</div> </div> <div id="droite"> <div class="vert">Menu droite</div> <div class="vert">Menu droite</div> </div> <div class="clearer"> </div> </div> <div id="pied"> Pied </div> </body> </html> CSS body { width : 80%; margin : auto; } .clearer { clear :both; } .vert { border : 2px solid green; margin : 10px; } /* Bannière */ #header { border : 4px solid black; margin : 10px 0 10px 0; padding : 10px; } /* Contenu */ #contenu { border : 4px solid black; padding : 10px; } #gauche { border : 1px solid red; float : left; width : 16%; } #centre { border : 1px solid red; float : left; width : 62%; margin : 0 24px 0 24px; } #droite { border : 1px solid red; float : left; width : 16%; } /* ############# */ /* Pied de page */ #pied { border : 4px solid black; margin : 10px 0 10px 0; padding : 10px; } Les explications : J'ai fait une structure en 3 div (Bannière, Contenu central et Pied de page). Puis dans la div centrale, 3 div encore placées en float. J'ai volontairement laissé des border pour que tu puisses bien voir les div. PS : code valide évidemment.
December 21, 200618 yr Author Grand merci pour ton aide/travail Quarky C'est tout à fait ce que je voulai faire !! A mon avis j'avais des merdes avec les float jamais utilisé ca pour le placement des div faudrait que je regarde ca de plus prés Enfin merci je montrerai l'évolution du site de temps à autre sachant que je suis un "grand newb" en dév Par contre une question j'ai vu que tu avais utilisé des % pour l'affichage de la taille des conteneurs mais sous Firefox 2 si je modifie la taille de ma fenetre les blocs se décalent les un en dessous des autres, est-ce un bug ? Sinon je passe en taille fixe de pixels au moins l'ascenseur en bas se présentera Edited December 21, 200618 yr by HyPnOz
December 21, 200618 yr Ah ouais tiens, j'avais pourtant vérifié pour le redimensionnement mais juste en agrandissement. Bon j'avoues que j'ai pu trop la tête la dedans : trop crevé Mais pour faire quelque chose de propre, les % c'est mieux car tu ne peux connaître la taille de la fenêtre de tes visiteurs.
December 21, 200618 yr Author Ouep d'accord avec toi pour les % par contre si l'utilisateur réduit sa fenetre ca bug au niveau de l'affichage En tout cas grand merci encore à toi pour ton temps de réponse, super ping Edited December 21, 200618 yr by HyPnOz
December 22, 200618 yr Author Une question qui me passe par la tête je profite de l'ouverture du topic : Pour mettre un titre sur la ligne (le border) de mon bloc Menu ou vert par exemple, comment faire ? Existe t-il un attribut titre à placer ou il faut que je fasse un .gif que je place en haut du cadre ? Merci encore
December 24, 200618 yr Heu... tu veux faire quoi? Tu veux modifier le design de tes bordures, c'est ça ?
December 24, 200618 yr Author En fait je voudrai intégrer un texte directement sur la bordure afin de mettre un titre au bloc, et si c'est pas possible j'aimerai connaitre selon vous la meilleure methode pour intérer un titre à une bordure proprement, sachant que par la suite je mettrai surement une décoration a la marge top et bottom des blocs menus http://hypnoz.ath.cx/hyp/indexx.php La page en question avec les blos gentillement travaillé par Quarky !
December 25, 200618 yr Salut, Pour mettre un titre sur la bordure d'un div, la solution pourrait être de placer le titre (dans un span ou un hé/h3/h*) et de l'aligner via le CSS avec un attribut: position:absolute; Enfin, ca c'est si mes cours de CSS ne sont pas trop loin...
December 26, 200618 yr Author Ca n'a pas fonctionnait comme voulu pour le titre donc j'ai un peu modifié la méthode et ca rends plutot pas mal je trouve http://hypnoz.ath.cx/hyp/indexx.php Par contre ma CSS va vite etre chargée car j'utilise pas la meme couleur pour les blocs Menu et citation, je les nomme donc pas pareil etc ... Ca risque detre lourd
Archived
This topic is now archived and is closed to further replies.