Exactement. Titre et texte. Je pensais aussi m'orienter vers quelques
div.
1- Bon. Alors "l'aidé" revient à la charge. Et vous présente : son code de débutant (visible
ici). Je signale que je n'ai pas encore créé une feuillle de
<style> mais que c'est évidemment ce qu'il faut faire.
<body style="text-align:center">
<!-- Centrer la page -->
<div style="margin-left:auto;margin-right:auto;width:750px;text-align:left;border:1px solid gray"><!-- le global -->
<!-- Bandeau-->
<H1 style="border:1px solid gray;height:133px">
Bandeau
</h1>
<!-- Hiérarchie-->
<p style="border:1px solid gray;height:20px">
Hiérarchie
</p>
<!-- menu vertical -->
<div style="float:left;border:1px solid gray;width:160px;position:relative">
<ul><li>Menu 1</li><li>Menu 2</li><li>Menu 1</li><li>Menu 2</li><li>Menu 1</li><li>Menu 2</li><li>Menu 1</li><li>Menu 2</li></ul>
</div>
<!-- Texte de bienvenue -->
<p><span style="background-color:#CCCCCC;width:500px">Bienvenue</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<!-- Dernier edito -->
<p><span style="background-color:#CCCCCC;width:500px">Edito</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...</p>
<!-- Derniers articles -->
<p style="border:1px solid gray;width:450px;float:left"><span style="background-color:#CCCCCC;width:500px">Derniers articles</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium le...</p>
<!-- Dernières nouvelles -->
<p style="border:1px solid gray;width:290px;float:right"><span style="background-color:#CCCCCC;width:500px">Dernières nouvelles</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum...</p>
<!-- Pied de Page -->
<p style="border:1px solid gray;clear:both">Pied de page</p>
</div><!-- le global -->
</body>
</html>
2- Pour un débutant tel que moi, il veut effectivement mieux quelques dessins et ensuite partir à l'assault du code. Moi, je préfère comprendre ce que je fais.
3- Et en parlant de comprendre ce que je fais, j'indique immédiatement qu'il y a un truc que je ne comprends pas très bien. Effectivement, mon "Bienvenue à...", j'aimerai l'inscrire dans un beau cadre avec un titre d'une couleur différente (cf.
ici). Mais, lorsque je remplace dans le code précédent la partie bienvenue par le code suivant :
<!-- Texte de bienvenue -->
<span style="background-color:#CCCCCC;width:500px;display:block">Bienvenue</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore ...
J'obtiens un résultat tout à fait déplorable (le bloc "passe" sous le menu, cf.
ici). J'ai plus ou moins réussi à régler le problème à coup de float et de clear... mais cela me semble très
bricolage. Y a-t-il une solution plus propre ?
GS.
Modifié le 24 Nov 2004 - 21:38