Aller au contenu

Problème mise en page CSS

HyPnOz

Par HyPnOz
dans Programmation et Lignes de code

Messages recommandés

HyPnOz Passionné

HyPnOz

Posté(e)
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:

Lien vers le commentaire
Partager sur d’autres sites
gvosnet Passionné

gvosnet

Posté(e)
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 !

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites
Quarky Grand Maître

Quarky

Posté(e)
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.

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites
Quarky Grand Maître

Quarky

Posté(e)
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. ;)

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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 !

Lien vers le commentaire
Partager sur d’autres sites
HyPnOz Passionné

HyPnOz

Posté(e)
  • Auteur
Posté(e)

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:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

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

Aller sur la liste des sujets
×
×
  • Créer...