28217 sujets

CSS et mise en forme, CSS3

Administrateur
Oui bien sûr que c'est possible.
Il te faudra par contre bien connaître les bases, c'est à dire les différents schémas de positionnement :
http://www.alsacreations.com/articles/div/
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/

Sans connaître ce minimum vital, tu vas très vite t'embrouiller. Il vaut mieux prendre son temps, tu le regagneras plus tard Smiley cligne
Certe, certe,

J'ai déjà lu tout cela... sans grand résultat pour ma pauvre tête. Quelques morceaux de codes seraient les bienvenus...
Prends ton mal en patience, des divs vides avec des couleurs de fond et fait le toi même. Si tu n'y arrives pas, alors pars sur quelque chose de plus simple. Même pour des gens qui "savent", ce que tu demandes est long.

alors tentes par toi même et tu apprendras plus vite.
Administrateur
Bah des codes c'est beaucoup demander par contre la structure serait un truc du genre :

- un bloc bandeau (flux normal)
- un bloc menu (flux normal)
- un bloc contenant : menu vertical (float left*) + texte bienvenue + Edito (flux normal)
- un bloc derniers articles (flux normal) avec marge à droite
- un bloc dernières infos (float right)
- un pied de page (avec clear pour passer sous le bloc flottant)

A toi de choisir les balises les plus appropriées (inutile de mettre des <div> partout Smiley cligne ) et si tu veux changer de positionnement, il est possible de faire tout ça en positionnement absolu également (mais ce sera plus compliqué)

* attention, vu la complexité de ta structure, ton menu vertical doit être à la fois en float left + en position relative (pour que les sous-menus aient un parent positionné)
Merci Raphaël,

Ton explication est aussi bonne qu'un bout de code. Je tente ma chance.

Suite au prochain n°.
Pareil que Raphaël (enfin je pense, j'ai pas testé, mais à vue de nez, ça à l'air de coller), par contre pense bien à dimensioner ton bloc "derniers articles" si tu met "dernieres news" en float, sinon vu que le bloc "dernier article" est un élément de type bloc (<p> ou <div> contenant des <p>) il prendra par défaut toute la largeur).
J'ai fait un petit récapitulatif de ce que Raphaël à dit mais sur une image template pour que tu vois un peu mieux (peut etre)

http://www.elmoustikoblog.net/divers/template.gif

Voilà, pour le balisage, tout dépend du contenu, mais à priori ce genre de structure et ça roule Smiley cligne

Par contre, tu aura du mal à rendre l'égalité de hauteur de tes 2 colones en bas, à moins de les englober dans un conteneur et d'attribuer une image de fond à ce conteneur leurrant l'effet d'egalité de hauteur
http://www.alistapart.com/articles/fauxcolumns/
@ElMoustiko : comment t'arrive à faire ton image template ?

C'est plutôt clair comme explication !
Bah un bon vieux dessin vaut mieux qu'un long discours (non pas que tu m'ai endormi Raphaël Smiley cligne ) donc j'ai ouvert mon bon gros toshop Smiley confused et pis j'ai fais mes zones et j'ai légendé tout simplement Smiley cligne

Un bon vieux Paint de Vindoz ferait aussi bien l'affaire Smiley lol

A vrai dire ça irait plus vite de le faire direct via CSS sur un modèle de page, mais comme Raphaël (et la plupart des autres "helpers" du forum) je préfère laisser faire les tests par celui qui demande de l'aide et le laisser réfléchir au problème et aux solutions pour bien les comprendre (en le guidant tout de même) plutot que de donner un code tout cuit, même si j'ai souvent envie de la faire pour étaler ma science euuhhh ehehhe *ahem* pour me débarrasser du problème, ...e ueeeheuheueh *ahem* pour aider le plus rapidement possible celui qui demande
Si on veut que les "aidés" reviennent aussi comme "aidants", la méthode est efficace. Bravo ! Smiley winner
Nan nan c'était juste spécial Joke Smiley lol

Par contre, je fais le code pour voir s'il y a des problèmes qui pouraient survenir.

Par exemple, je viens de penser à un truc en le faisant, il vaut mieux utiliser <div> pour les différentes zones, parcequ'à priori on aura titre+texte donc pour les regrouper c'est mieux.
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
Bonsoir
Image template = Un vrai régal
Comme quoi parfois, Un bon croquis vaut mieux qu'un long discours comme disait Napoléon Bonaparte.
C'est original et très parlant.
Merci