Aller au contenu

Problème mise en page CSS

Par HyPnOz
dans Programmation et Lignes de code

Featured Replies

Posté(e)

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 :mad2: 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 :transpi:

  • Citer
    • Posté(e)

    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 !

  • Citer
    • Posté(e)
    • Auteur

    Ok merci :p Le site a un prob SQL il semblerait je regarde ca aprés :p

    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 :francais:

  • Citer
    • Posté(e)

    Bizarre j'ai pas l'impression que ce que je vois soit le rendu souhaité. :craint:

    Chez moi (Firefox 2.0) le pied de page est placé au dessus du conteneur.

  • Citer
    • Posté(e)
    • Auteur

    Bizarre j'ai pas l'impression que ce que je vois soit le rendu souhaité. :transpi:

    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 :cartonjaune: D'ou ma question sur la position de mes conteneurs ? :mdr2:

  • Citer
    • Posté(e)

    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 :cartonjaune:

    PS : En tous les cas ton code est agréable à lire.

  • Citer
    • Posté(e)
    • Auteur

    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 :chinois:

    Heu j'espere que c'est a peu près clair :eeek2:

    Merci :eeek2:

  • Citer
    • Posté(e)

    Oula....

    Tu peux faire un dessin plz :chinois::eeek2:

    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. :eeek2:

  • Citer
    • Posté(e)

    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. :D

    PS : code valide évidemment. ;)

  • Citer
    • Posté(e)
    • Auteur

    Grand merci pour ton aide/travail Quarky :D 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 :top:

    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 :D

    Modifié par HyPnOz

  • Citer
    • Posté(e)

    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.

  • Citer
    • Posté(e)
    • Auteur

    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 :D:D

    Modifié par HyPnOz

  • Citer
    • Posté(e)
    • Auteur

    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 :francais:

  • Citer
    • Posté(e)
    • Auteur

    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 :zarb:

    http://hypnoz.ath.cx/hyp/indexx.php

    La page en question avec les blos gentillement travaillé par Quarky !

  • Citer
    • Posté(e)

    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... :yes:

  • Citer
    • Posté(e)
    • Auteur

    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 :fumer:

  • Citer

    • Archivé

    Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

    Aller sur la liste des sujets