28173 sujets

CSS et mise en forme, CSS3

Mise en page css, et sans les tableaux

o Bonjour ,
Puisque je début dans les standards d’intégration , j’ai entendu dire que je peux faire correctement une interface complète sans passer par les fameux tableaux, j’ai essayer et j’ai trouver pas mal de blocage , en essayant différent type de positionnement , les flotant ..


Volà le code html que j’ai fait, je ne sais pas si cette structure est correcte , le Code html entre le <body></body> :

<div id="page">

<div id="entete">
<div id="logo"><img src="images/logo.gif" /></div>
<div id="menu_haut">le menu</div>
</div>

<div id="zone_gauche">
</div>

<div id="contenu"></div>

<div id="pied"></div>
</div>

J’ai mis le code html sans le contenu car ce qui m’intéresse c’est juste le postionnement des zone en css que j’ai marqué ds l’aperçue suivant :

upload/15076-Copiedetes.jpg

j espère avoir le code css qui permet d'avoir ce resultat ds l’image, enfaite ce résultat je l’obtiens facilement avec les tableaux avec un code xhtml valide, mais le code html aura une grande taille , ce que je veux éviter et travailler proprement,
merci d’avance
Smiley cligne
juste une précision : bien sur le pied de page est toujours en dessous du contenu modifiable quelque soit la taille de ce contenu modifiable Smiley eek
Bonjour chahrayar,

Puisque tu débutes dans les standards d'intégration mais également sur ce forum, autant le bien faire non ? Smiley cligne
Il faudrait dans un premier temps (re)faire un tour par les règles qui régissent ce forum, notamment celle qui mentionne le bon usage du code dans les messages cela permet une meilleur compréhension, une meilleure lisibilité, ce qui semble également avoir un impact sur le nombre de réponse que l'on peut avoir... Smiley cligne

Il serait donc bienvenu d'éditer ton message et de mettre ton code dans les balises qui lui sont dévolues ([ code]...Ton code...[ /code] sans espace après le premier crochet ouvrant) Smiley cligne

Sans le code css, difficile de te confirmer que le positionnement, sera celui que tu désires, la structure html semble néanmoins correcte (on veillera à ne pas omettre la déclaration du Doctype et deux ou trois petites chose d'importance Smiley cligne )

Un petit tour sur les nombreuses ressources du site Alsacreations (FAQ, forum, blog, tutoriels,...) devrait largement suffire à te venir en aide pour mener bien ta quête vers les standards, la page des tutoriels par exemple, fournit d'interessants gabarits qui te permettront de mieux appréhender le fonctionnement des css et "curieusement" je me suis laissé dire qu'un des tutoriels allait grandement te faciliter la tâche : ici elle n'est pas belle la vie ? Smiley lol

"Dernière chose", a priori, un logo véhicule une information importante, on veillera donc à renseigner l'attribut "alt" ( à lire Smiley smile

Bonne journée,
Cdt,
Sylvain
Modifié par 6l20 (12 Dec 2007 - 21:53)
merci pour les liens, ok je m'excuse pour l'entré rapide ,
Je réécris le code html à la norme, au cas où voulez me donner un 1er aperçu du code CSS de la problématique :

 
<div id="page">

	<div id="entete">
	   <div id="logo"><img src="images/logo.gif" /></div>
	   <div id="menu_haut">le menu</div>
	</div>
	
	<div id="zone_gauche">
	</div>
	
	<div id="contenu"></div>
	
	<div id="pied"></div>
</div>
Administrateur
Bonjour et bienvenue,

merci d'éditer ton premier message pour y placer les balises [ code] comme tu l'as fais dans le 2ème message. Le but est que ce soit lisible, quand j'arrive à ton 2ème message c'est trop tard j'ai déjà (tenté en vain) de lire le 1er exemplaire Smiley cligne

---
L'apprentissage de la mise en page en CSS (sans tableau servant à de la mise en page) demande autant d'efforts d'apprentissage que la mise en page en tableaux, que tu aies ou non appris cette dernière ... C'est le lot de toute nouvelle connaissance que l'on essaie d'acquérir.
On a l'impression de faire un bond en arrière mais c'est le prix à payer Smiley cligne (et il le vaut bien(c))

---
Après les premiers tutos généraux sur les types de positionnement, on sait manipuler des span ou des div entre eux mais il est par contre assez difficile de se lancer directement dans la mise en page complète avec contraintes de fluidité, de footer toujours en bas, etc
Surtout que d'autres sont déjà passés par ces mêmes étapes, ont rencontré les mêmes problèmes et les ont résolu depuis belle lurette.
Il y a donc un tuto 'Gabarits de mise en page' (et sur les menus aussi Smiley murf ) sur Alsacréations que Raphaël a écrit à partir de pleins de sources différentes. C'est plus aisé de comprendre à partir du résultat qu'en tatonnant Smiley cligne
Modifié par Felipe (12 Dec 2007 - 21:18)
Sujet clos
Aller à