28172 sujets

CSS et mise en forme, CSS3

Passage du mode Tableaux en mode CSS: votre avis?

Bonjour à tous

Je suis en train de remodeler mon site. Ma page INDEX était à base de tableaux, et je veux la passer en CSS

D'après les directives de ce lien:
http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

...j'ai fait mon squelette

Mais ça coince quelque part

Voilà ce que je veux:


http://i38.tinypic.com/2ce0ty0.gif


Voilà mon code:




<head>

[#violet]<style type="text/css">

div#menu {
	float: left;
	height: 775px;
	width: 180px;
	
}
div#contenu {
	height: 767px;
	width: 561px;
	float: left;
}
div#menu_haut {
	height: 447px;
	width: 180px;
}
div#menu_bas {
	height: 328px;
	width: 180px;
}

</style>[/#]

</head>



<body>
	[#green]<div id="menu">[/#]
  		[#green]<div id="menu_haut">[/#]Menu Haut...[#green]</div>[/#]
  		[#green]<div id="menu_bas">[/#]menu Bas...[#green]</div>[/#]
	[#green]</div>[/#]
	[#green]<div id="contenu">[/#]Contenu...[#green]</div>[/#]
</body>




Ce que j'obtiens est assez bizarre

Dans dreamweaver, le contenu est en dessous du menu. J'ai d'abord le menu haut, puis le menu bas en dessous, et enfin le contenu en dessous du menu bas

Par contre, quand je demande à voir l'aperçu dans IE ou Firefox, j'obtiens la page telle que je la veux

Je n'ai pas encore inséré toutes mes images et tous mes textes (j'ai une page d'accueil assez complexe et assez brouillonne qu'il faut que je retravaille, c'est pourquoi je voudrais un squelette parfait avant), et j'ai peu de m'être trompé quelque part, mais pourtant j'ai suivi les consignes du lien

Qu'en pensez-vous?

Merci beaucoup:)
Modifié par nathan.ontenal (16 Dec 2008 - 15:42)
Bonjour,

nathan.ontenal a écrit :
Dans dreamweaver, ...


Ne jamais s'appuyer sur le rendu de ces éditeurs. Smiley cligne

nathan.ontenal a écrit :
Qu'en pensez-vous?


Rien de spécial à vrai dire. Sauf ce qui est dit ci-dessus.
Sinon quelques remarques autant fixer des largeurs se justifie autant fixer des hauteurs ... préférer les hauteurs minimales. Attention également à ne pas tomber dans cette optique de transposition tableau vers css : le but étant de rendre le tout compréhensible et rapidement maintenable (oublier cette notion de découpage). Smiley cligne

Bonne continuation.
Romain
Tu positionne ton contenu à gauche (float:left) alors que c'est le menu qui devrait l'être.

+1 pour les hauteurs, n'oublie pas que certains utilisateurs peuvent vouloir agrandir les contenu donc alonger les pages.

Et pendant que j'y suis, en préventif, pour préciser tes tailles de caractères veilles à utiliser des unités fluide (em ou %) plutôt que statique (px).
Bonjour,

L'image que tu présentes n'est pas un design, mais un découpage. On peut te donner des pistes sur l'intégration d'un design, mais avec un découpage tu as déjà fait des choix qui ne sont pas forcément pertinents, donc difficile d'en dire quelque chose.

Donc: à quoi ça doit ressembler?
Sujet clos
Aller à