Mise en page CSS

[-ZN-]

Salut,

Tout d'abord merci a Sibelius et a Alsacreations pour les tutoriels etc mis a disposition... dont je me suis inspire pour la mise en page suivante

ca fait qq heures que je galere avec une mise en page CSS, j'ai fait un petit schema (vite fait mal fait mais j'espere que ca illustrera suffisamment)

SCHEMA 1

J'ai un bloc conteneur car je souhaire limiter la taille de l'affichage a 800px en largeur...

J'arrive a placer les differents elements en bricolant un peu ... seulement je n'aime pas vraiment le bricolage et je souhaite progresser en CSS (j'ai un background de developpeur pas de graphiste, j'ai tenu qq temps sans les CSS ... mais il faut bien s'y coller un jour )

Je crois que mon probleme peut etre resolu rapidement mais j'avoue etre perdu!

un peu de code CSS:

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#FFF;
border-left:solid;
border-right:solid;
border-color: #009933;
border-width: 1px;
height:100%;
}

#header {
height: 120px;
background-color: #FFFF00;
}
#menu ul {
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: medium;
	font-weight:bold;
    color: #009933;
    line-height: 27px;   
	background-color:#A7DA54;
}
#menu li {
    list-style-type: none;
    display: inline;
}

#centre {
position:absolute;
background-color:#3399FF;
margin-left: 180px;
margin-right: 180px;
}

#gauche {
position: absolute;
left:0;
width: 150px;
vertical-align:top;
height:200px;
background-color:#9933CC;
}
#droite {
position: absolute;
right:0;
width: 150px;
height:200px;
background-color:#9933CC;
}

#pied {
position:relative;
top:100%;
height: 20px;
background-color: #FF3366;
}

et ma page:

<div id="conteneur">

	<div id="header"> 
	HEADER
        </div>

	<div id="menu" align="center">
  <ul>
 	 <li>OPTION 1</li>
 	 <li>OPTION 2</a></li>
 	 <li>OPTION 3</a></li>
  </ul>
	</div>
  
        <div id="centre">
        CENTRE de ma page , j'y tape ce que je veux, et en plus, ca se remet automatiquement a la ligne;) 
        </div>
   
        <div id="gauche">
        BANDEAU GAUCHE
        </div>
  
        <div id="droite">
       BANDEAU DROITE
       </div>
  
    <div id="pied">
    FOOTER</div> 
         </div>

Le resultat ressemble a ca:

SCHEMA 2

Mes soucis :

>le conteneur n'est a mon avis pas toujours bien centre ... peut-on arranger ca? (ca n'est pas ce qui me tracasse le plus)

>mon footer est mal place, comment resoudre ce probleme?

Merci d'avance a celles et ceux qui pendront le temps de m'aider et qui se pencheront sur mon probleme

ZN

Modifié 26 Mars 2005 par -ZN-

[Sebastien]

Pour centrer un conteneur, il faut :

-Que le conteneur mère soit en text-align: center, le conteneur mère pouvant être le body

-Que le conteneur fils ait les attributs css margin-left: auto; margin-right: auto

[-ZN-]

Merci Sebastien,

Heu ... si le body peut etre un conteneur je n'ai pas vraiment besoin de mon bloc" conteneur" alors non?

[-ZN-]

Ok j'ai vire mon bloc "conteneur", remplace par le body

j'ai aussi trafique le footer (en virant la balise top) mais je n'arrive pas a le placer en bas:

SCHEMA 3

une idee?

Modifié 26 Mars 2005 par -ZN-

[Sebastien]

En mettant le footer dans le flux ca marche pas?

Moi pour le design général j'aurais geré bannière et menu en flux, les 3 colonnes en float et le footer dans le flux, avec une propiété clear : both pour qu'il reste le plus bas possible.

[-ZN-]

Merci encore Seb,

Décidemment j'ai du mal ... mettre dans le flux c'est a dire en utilisant la propriete position:absolute, puis pour mes colonnes j'en met une a float: right, l'autre a float:left et la centrale sans rien?

C'est deja mieux :

SCHEMA 4

Pourquoi est ce que j'ai un decalage (vertical) entre le menu (en vert) et mon bloc "centre" (en bleu)?

meme question entre le footer et le bloc centre?

Modifié 26 Mars 2005 par -ZN-

[-ZN-]

Ok c'est regle, je n'ai dit que des betises dans mon precedent post:

il suffit que les trois colonnes soit en float:left, declarees dans l'ordre dans mon fichier html, avec des tailles bien calculees, et ca passe nickel chrome sans espace.... je commence a mieux comprendre!

Le truc c'est que dans ma page html j'aimerai declarer (pour tester une technique d'optimisation referencement) mon bloc centre avant les blocs correspondant aux colonnes de droite et de gauche ... c'est fesable sans etre trop complique?

Modifié 24 Mars 2005 par -ZN-

[Sebastien]

Etre dans le flux c'est ne choisir aucun positionnement spécifique : par defaut les blocs occupent toute la largeur disponibles et se placent l'un en dessous de l'autre, c'est donc parfait pour ta partie superieure.

Pour tes colonnes à gauche et a droite, tu les mets en float effectivement avec la largeur qui va bien et tu ajuste la largeur du centre en jouant avec margin-left et margin-right.

Enfin, tu mets le footer avec clear-both

Pour ton decalage vertical je sais pas, probablement une histoire de marge par defaut, fait un reset en debut de ta CSS :

* { padding:0; margin:0; }

[Sebastien]

T'inquiete pas pour le référencement Par contre tu peux placer des liens d'evitement (aller au menu, au contenu, recherche) pour l'accessibilité

[-ZN-]

Excellent merci beaucoup Sebastien ca fontionne bien a present!

Dis, tu me conseillerais quelles lectures pour aller plus loin en CSS?

Une autre ch'tite question, est-il vraiment conseille de se passer de tableaux?

est-il aussi facile de faire la meme mise en page avec des CSS?

(je souhaite par exemple faire un menu sur le bandeau de gauche... tres facile avec un tableau mais en CSS c'est pas evident quand on debute...)

Modifié 24 Mars 2005 par -ZN-

[Sebastien]

Je n'ai lu aucun bouquin mais tout le monde dit du bien de "CSS" d'eric Meyer, recemment traduit en francais, disponible à la fnac ou chez amazon.

[-ZN-]

Ooops j'ai modifié mon post entretemps ...

pas forcemment des bouquins, plutot des sites web

(je crois que je passe 50% de mes journees a lire en fait)

[Sebastien]

Les tableaux ne sont normalement pas fait pour la mise en page, mais il y a une tolerance au sein même des normes du W3C. Donc les tableaux de mise en page ne sont pas "interdits" mais il faut mieux s'en passer; et dans tous les cas ils doivent être linearisables.

Le positionnement CSS est un peu plus dur que les tableaux dans le sens ou l'on ne peut pas se contenter de les dessiner comme dans Dreamweaver. Après, c'est une logique à apprendre, ca vient petit à petit.

Le truc c'est de ne pas raisonner en terme de cellules, mais de voir plutot la mise en page CSS comme un empilement de blocs à l'envers (gravité en haut), avec de propriété variables. Un genre de Tetris en quelque sorte

Ah et pour les liens commence ici et consulte les liens du Hub

Modifié 24 Mars 2005 par Sebastien

[-ZN-]

Merci pour tes explications, je souhaite me mettre serieusement aux CSS et ne plus utiliser les tableaux... Toutefois pour une mise en page complexe j'aurais du mal a les zapper pour le moment...

merci pour les liens, je ne les connaissait pas tous

et si je peux me permettre... continue a entretenir ton blog tes articles sont tres interressants

A bientot!

[Sebastien]

Merci