Retour a la ligne avec CSS

[Sebastien]

Je m'essaye aux css avec topstyle...

Mon probleme est que j'ai cree un bloc menu calé à gauche de la page, mais quand je tappe du texte, le bloc s'allonge avec le texte, or je voudrais qu'il reste fixe et que le texte passe à la ligne. comment on fait?

ma css est :

div#header {

height: 74px;

background: #00000;

border: 1px #D9D9D9;

border-style: solid;

width: 100%;

background-image: url(logo.gif);

background-repeat: no-repeat;

background-position: 80%;

}

div.blocsmenu {

background: #F7F7F7;

border: 1px #D9D9D9;

border-style: solid;

margin-top: 100px;

font-family: Arial;

font-size: 1em;

padding: 2 px;

float: left;

width: 10%;

}

[Loupilo]

Quel est le bloc qui pose pb ?

[Sebastien]

div.blocsmenu ca doit etre un truc tout bete, j'ai lu divers ressources mais j'ai du manquer qqchose...

[Jan]

Avec le width:10% le bloc devrait garder ses dimensions... à condition que le texte qu'il contient contienne des espaces. A défaut, ton bloc s'élargit.

[Sebastien]

Ah ouais ca marche...pfiou compliqué ce machin

Et dans les rubrique de mon menus je peux mettre des h3 (theme) et listes (liens du theme) ?

[Denis]

Si bien sûr, tu peux y mettre ce que tu veux, mais pourquoi aurais-tu besoin de quoi que ce oit d'autre que des listes imbriquées pour créer un menu ? Sans voir ton code, en lisant ce qui semble être ton besoin, je verrais quelque chose comme ceci :

<ul>
          <li>Item 1 de menu
               <ul>
                    <li>Sous-item 1 de item 1</li>
                    <li>Sous-item 2 de item 1</li>
                    <li>Sous-item 3 de item 1</li>
                    <li>Sous-item 4 de item 1</li>
               </ul></li>
          <li>Item 2 de menu
               <ul>
                    <li>Sous-item 1 de item 2
                         <ul>
                              <li>Sous-item 1 de sous-item 1 de item 2</li>
                              <li>Sous-item 2 de sous-item 1 de item 2</li>
                         </ul></li>
                    <li>Sous-item 2 de item 2</li>
                    <li>Sous-item 3 de item 2</li>
               </ul></li>
          <li>Item 3 de menu
               <ul>
                    <li>Sous-item 1 de item 3</li>
                    <li>Sous-item 2 de item 3</li>
               </ul></li>
</ul>

Avec ça, tu peux te créer toute la profondeur hiérarchique dont tu as besoin, sans utliser autre chose que des listes imbriqués. Si tu voulais donner un titre à l'ensemble de ce menu, tu pourrais très bien utiliser un h3 si tu le voulais.

[Sebastien]

Si je redefinis les li et ul dans ma feuille de style, est ce que les sous-items en li auront une typo differente des item li?

[Sebastien]

Ah oui et comment je vire le decalage à droite du li?

[Denis]

Ben, ça dépend... tout dépendra de ta feuile de style et de la manière dont elle est structurée... Si tu ne spécifiais que

ul li {... régles CSS quelconques...}

Alors oui, tous les li auraient les mêmes règles d'appliquées. Mais si tu avais

ul li {... régles CSS quelconques...}
ul li ul li {... autres régles CSS quelconques...}

Alors les <li> contenus dans des <ul>, contenus dans des <li> auraient une attribution différente des <li> directement contenus dans des <ul>.

M'exprime-je clairement ?

[Denis]

Pour virer le décalage, suffirait de réduire le padding et le margin de gauche

[Sebastien]

Merci denis,

Alors la syntaxe ul li {... régles CSS quelconques...} s'applique seulement aux li contenu dans des ul?

D'autre part ma syntaxe html ci dessous est elle correcte?

<div class="blocsmenu">

<ul><h2>Item 1 de menu</h2>

<li>texte 1</li>

<li>texte 2</li>

<li>texte 3</li>

</ul>

[LaurentDenis]

Non : <li> est le seul élément qui peut être placé dans <ul>

Donc plutôt :

<div class="blocsmenu">
    <h2>Titre de menu 1</h2>
    <ul>
    <li>texte 1</li> 
    <li>texte 2</li>
    <li>texte 3</li>
    </ul>

    <h2>Titre de menu 2</h2>
    <ul>
    <li>texte 1</li> 
    <li>texte 2</li>
    <li>texte 3</li>
    </ul>
</div>

Et si jamais tu rencontres des problèmes avec le décalage vers la droite de tes items de menus selon les navigateurs, voir :

http://devedge.netscape.com/viewsource/2002/list-indent/

pour comprendre le jeu du padding-left et du margin-left entre Mozilla et IE

(en anglais, mais bref et simple)

Modifié 1 Mai 2004 par LaurentDenis

[Denis]

Tiens, de base et très simplement, voici un fichier contenant un tel menu :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1"  />
	<title>exemple de menu par liste</title>
	<style>
  #menu {margin: 0; padding: 0; list-style-type: none; font-weight: bold;}
 	 #menu li a {display: block;}
 	 #menu li a.encours {display: block;}
 	 #menu li a:link, #menu li a:visited {color: #EEE; text-decoration: none;}
 	 #menu li a:hover {background-color: #790c21; color: #fff;}
 	 
  #sousniveau {font-weight: normal; padding: 0; margin: 0; list-style-type: none; color: #999;}
 	 #sousniveau li a {color: #999; margin: 0;}
 	 #sousniveau li a:hover {background-color: #fff; color: #999;}
	</style>
</head>
<body>

<ul id="menu">
	<li>Item 1</li>
	<li>Item 2
  <ul id="sousniveau">
 	 <li>Sous item 1 de item 2</li>
 	 <li>Sous item 2 de item 2</li>
  </ul></li>
	<li>Item 3
  <ul id="sousniveau">
 	 <li>Sous item 1 de item 3</li>
 	 <li>Sous item 2 de item 3</li>
 	 <li>Sous item 3 de item 3</li>
 	 <li>Sous item 4 de item 3</li>
  </ul></li>
	<li>Item 4
  <ul id="sousniveau">
 	 <li>Sous item 1 de item 4</li>
 	 <li>Sous item 2 de item 4</li>
 	 <li>Sous item 3 de item 4</li>
 	 <li>Sous item 4 de item 4</li>
 	 <li>Sous item 5 de item 4</li>
  </ul></li>
	<li>Item 5</li>
	<li>Item 6</li>
</ul>
  
</body>
</html>

Tu pourrais juste lui donner un look en fonction de tes goûts.

[Sebastien]

Merci beaucoup à tous de votre aide

apres une journée d'effort j'ai mis au point cette page modele : http://s.billard.free.fr/v2/

Ca s'affiche bien c'est vous? la syntaxe est correcte? je mets quoi du coté des doctype?

[Jan]

Sous Mozilla1.4 (windows), encore des petits pbs:

- le point devant les rubriques des menus

- l'alignement des cadres menus et principal

[Monique]

Bonjour,

Pour ne plus avoir les puces dans tes listes, tu dois ajouter list-style-type:none; aux propriétés de l'élément li.

Pour le doctype le HTML strict semble convenir à ton code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

[Sebastien]

Les points (. c'est une déco perso

Concernant l'alignement qu'est ce qui va pas? les 2 blocs ne sont pas à la même hauteur? des idées pour résoudre ca?

Modifié 1 Mai 2004 par Sebastien

[Sebastien]

merci euh par contre je comprends pas quand j'ajoute le doctype ca pourrit ma mise en page??

[Americas]

chez moi aussi le Doc Type pourri la mise en page... alors je l'ai viré

Les puristes me diront que c'est parce que mon code ne respecte pas les standards...

Je leur répondrai que ce n'est pas évident de respecter les standards quand on fait évoler des pages sur plusieurs années

[Jan]

Les points (. c'est une déco perso

Je ne parle pas de ceux-là, mais des puces. Monique t'indique comment les enlever.

Vois sur le screenshot que j'ai posté http://www.webmaster-hub.com/index.php?sho...indpost&p=23629

[LaurentDenis]

chez moi aussi le Doc Type pourri la mise en page... alors je l'ai viré 

Les puristes me diront que c'est parce que mon code ne respecte pas les standards...

Quelques points de méthode :

- Quand il s'agit de faire passer aux standards des pages existantes de ce type, ne pas commettre l'erreur de commencer par un DTD stricte ! Il faut commencer par une DTD "permissive" : HTML4.0 ou 4.O1 transitionnel, voire frameset. Ensuite, faire évoluer la DTD au fil des étapes de correction.

- Faire attention en particulier aux DTD qui modifient le mode de rendu CSS (DocType switching). Eviter le mode de rendu strict quand on ne maîtrise pas encore bien CSS.

- Ne pas vouloir corriger obligatoirement toutes ses pages, voire les porter au même standard. Travailler plutôt par ordre de priorité : pages-clés du site, pages les plus visitées... Conserver une partie du site en HTML 4.0 frameset ou transitionnel n'est pas un problème.

- Ne pas viser obligatoirement le standard le plus exigeant : toutes les spécifications "se valent", d'un certain point de vue. L'important est d'être conforme et d'éliminer le plus possible de soupe.

[Sebastien]

Qu'est ce que je ferais sans vous... Bon la page devrait etre correcte maintenant. Html et CSS ont été validé par le W3C.

Ca s'affiche bien chez vous? (http://s.billard.free.fr/v2)

Ah oui encore une question : dans dreaweaver 4 in l'y a pas moyen d'editer mon site en wysiwyg?? car l'affichage c'est du n'importe quoi on est cantoné à l'édition en mode source?

Modifié 2 Mai 2004 par Sebastien

[Denis]

L'affichage est nickel sous MSIE (5.0, 5.5, 6.0), Mozilla (1.6), FireFox (0.8), Firebird (0.7), Opera (7.23), K-Meleon (0.8) et Netscape (7.1). Beau boulot.

La seule chose, c'est que tes boites 'Musique' (à gauche) et 'Musique et photo numérique' (droite) ne sont alignées horizontalement que dans Internet Explorer. Dans tous les autres, la boîte de droite est décallée d'une vingtaine de pixels vers le bas, probablement du à un padding ou un margin non spécifié à 0.

[Sebastien]

Ca devrait aller maintenant que j'ai ajouté un body avec des margin et padding à o

Que pensez vous de la taille par defaut des polices? comment se fait il que les polices des liens ne se réduisent pas dans les memes proportions que les polices paragraphe quand je reduis la taille dans IE alors que les tailles definies sont les memes dans la feuille de style (1em)?

[Denis]

Peut-être doit-on remercier pour cela la rigueur du respect de l'application des normes de l'hégémonique MSIE ?