mettre son menu sur la gauche du texte

[infernum]

salut,

comment faire pour mettre un menu sur la gauche de la page afin d'afficher les pages sur la droite du menu comme sur le site de www.wanadoo.fr

quelle est la commande ?

[windu.2b]

Salut,

La technique consiste à créer une div pour ton menu et une div pour ton texte. ensuite tu peux faire un style CSS comme suit pour ton menu:

.leftMenu
{
float: left;
width: 20%;

}

et celui-ci pour ton bloc de texte:

.blocText
{
float: right;
width: 80%;
}

Dit de tête, donc c'est à tester mais ca devrait être bon!

[Quarky]

Oui ok windu mais faut penser à rajouter un clerarer après pour se prémunir d'éventuels problèmes ...

en gros le clearer ramènes en début de ligne suivante les éléments qui suivent les précédentes div;

donc après tes div de menu et contenu, rajoutes :

<div class="clearer"> </div>

et dans ton css :

.clearer {
clear : both;
}

[windu.2b]

Tout à fait Quarky

(ca se voit trop qu'on a suivi les mêmes cours ou on arrive encore à le cacher? )

[Quarky]

On va dire qu'on a une méthode de travail qui à quelques points de ressemblance ....

[windu.2b]

On va dire qu'on a une méthode de travail qui à quelques points de ressemblance ....

Au passage, je me permets de te reprendre sur ton commentaire #3:

Tu as oublié un espace insécable entre la balise d'ouverture et la balise de fermeture div!

Ce qui donnerait donc:

<div class="clearer"> </div>

Sans ça, j'ai déjà eu quelques problèmes parfois...

[Quarky]

Je l'avais pourtant tappé !

Mais il n'a pas du passer sais pas trop pourquoi ...

[Cubic-Design]

Pas obligé de creer une div pour ça. Suffit de placer le clear both dans les propriété css des div concerné par un éventuel décalage (par exemple un footer)

[Quarky]

En meme temps moi je trouve que c'est plus clair avec une div pour ca ...

Et si tu veux faire des changments dans l'organisation des blocs, alors tu vois le tout très bien dans le squelette html !

[Yangzebul]

Oui, mais ton bloc a pas de vrai valeur sémantique. Dans l'idéal il faut séparer contenu et mise en forme, hors la tu introduit un bloc qui a pour seule finalité la mise en forme.

[Quarky]

Exact et voici une solution : (pas eu le temps de tout lire ...)

How To Clear Floats Without Structural Markup

[Yangzebul]

Très interessant comme lien !

Merci, je vais faire chauffer mon imprimante.

[Yangzebul]

Sinon, j'y pense, une autre solution plus simple serait d'utiliser cela:

xhtml

<hr/>

css

hr{
 clear: both;
 height: 0;
 }

Sémantiquement c'est parfait, hr (horizontal rule) est prévu pour ça.

Edit: mais bon une solution sans balise reste à mes yeux quand même plus élégante. C'est dommage que sur le lien que tu as donné ils soient contraint d'utiliser des hacks pour faire tourner ça partout. Je suis toujours réticent à user de telles solutions: je considère que c'est au navigateur de se corriger, mieux vaut laisser laisser tel quel si ça se dégrade de manière correcte.

[infernum]

merci à tous pour les infos

je ne suis qu'un débutant, vous pourriez me dire comment faire pour que ma feuille de style css soit prise en compte par IE, par FireFox tout s'affiche correctement.

perso.orange.fr/jcbtsinfo

merci.

es ceque je dois ajouter qque chose ?

h19 {

font-family : nina;

font-size : 12pl;

font-weight : bold;

font-style : oblique;

color : #d55454;

}

a:visited:hover:after {

font-family : nina;

color : #d55454;

content:", déjà visité !";

}

[Quarky]

Déjà sémantiquement, c'est pas très correct d'utiliser un h19 alors qu'il n'y a pas de h1, h2, ... h18 auparavant sur ta page ...

Pour remplacer ca, tu peux faire :

<div id='h19'>TON TEXTE</div>

Le nom de l'id peut être changé mais il faudra aussi le changer dans le css.

Normalement cela devrait permettre un "stylage" ( ) du texte sous IE.

Mais pour ce qui est des pseudo-classes :before et :after, IE ne les prend pas en charge ! dsl ...

[infernum]

Déjà sémantiquement, c'est pas très correct d'utiliser un h19 alors qu'il n'y a pas de h1, h2, ... h18 auparavant sur ta page ...

Pour remplacer ca, tu peux faire :

<div id='h19'>TON TEXTE</div>

Le nom de l'id peut être changé mais il faudra aussi le changer dans le css.

Normalement cela devrait permettre un "stylage" ( ) du texte sous IE.

Mais pour ce qui est des pseudo-classes :before et :after, IE ne les prend pas en charge ! dsl ...

je viens de faire la modif

je n'ai pas touché a la feuille css, j'ai modifié mon fichier html, j'ai mis

<div id="h16">B</div><div id="h11">ienvenue </div>

voila mon css

h11 {
font-family : nina;
font-size : 13pt;
font-weight : bolder;
font-style : italic;
color : #a2979c;
}	   
h16 {
font-family : nina;
font-size : 15pt;
font-weight : bolder; 
font-style : italic;
color : #885e66;
}	

avec div ci dessus fire fox et IE ne les prennent pas en compte même en les renommant en h1 et h2 en gardant les div aucune couleur aucune police est affiché.

j'ai essayé en renommant avec h1 et h2 sans les div ca fonctionne sur IE et FF mais ca provoque un retour a la ligne partout comme ca :

B

ienvenue

comment l'éviter ?

[Quarky]

En fait tu n'as tout simplement pas compris l'utilisation des balises H1 H2 ...

Ce genre de balises est fait pour les titres et introduit un stylage par défaut. Pour un souci de clareté et de respect des normes, il faut impérativement respecter l'ordre des chiffres.

C'est-à-dire que le titre principal sera balisé par h1, le sous-titre par h2 ...

Mais pour un même texte, on ne peut pas utiliser deux niveaux de balises comme tu le fais !

En gros tu auras :

<h1>Titre principal</h1>
<h2>Titre de niveau 2</h2>
...

Je te conseilles fortement de faire une bonne recherche sur le sujet pour te mettre les idées au clair !