Jump to content

mettre son menu sur la gauche du texte


Recommended Posts

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!

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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é !";

}

Link to comment
Share on other sites

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" ( :roll: ) du texte sous IE.

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

Link to comment
Share on other sites

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. :D

Normalement cela devrait permettre un "stylage" ( :mdr: ) 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 ?

Link to comment
Share on other sites

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

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 ! :yes:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...