28221 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai un p'tit problème sur un menu en ul li ici .

En gros, le menu ressemble à ca :

<ul id="Menu">
 <li id="Menu-Top">
  <ul>
   <li><h2>Accès rapide</h2></li>
   <li><a href="./forums/">Forums</a></li>
   <li><a href="./?page=guestbook">Livre d'or</a></li>
   <li><a href="./?page=contact">Contact</a></li>
   <li><a href="./?page=about">A propos</a></li>
  </ul>
 </li>
 
 <li id="Menu-Principal">
  <ul>
   <li><h2>Menu</h2></li>
   <li><a href="./index.php">Accueil</a></li>
   <li><a href="./?page=classe">Présentation de la classe</a></li>
   <li><a href="./?page=galleries">Galleries Photos</a></li>
   <li><a href="./?page=timetable">Emploi du temps</a></li>
  </ul>
 </li>
</ul>


et styler de cette facon :

#Menu ul, #Menu li {
	list-style-type:none;
	list-style-position:inside;
	padding:0;
	margin:0;
	}

#Menu {
	display:block; 
	position:absolute; 
	top:210px; 
	left:20px; 
	width:204px; 
	padding:0; 
	}

#Menu li ul {
	border:1px solid #999;
	margin-bottom:10px;
	background:url('images/design/menu-bg.gif') 0 27px;
	}



Rien de biiiiiiiiiiiiien choquant quoi ... Smiley rolleyes
Essaies de place ton menu avant d'afficher ton contenu de page

Apres test cela fonctionne pas
Modifié le 23 Dec 2004 - 22:23
doomer a écrit :
Et ce que tu trouves nécessaire la petite animation au survol de ton menu !?


Si j'le mets, c'est effectivement que ca me parait nécessaire, maiiiiiiiis, par contre, j'vais refaire le gif animé, et en faire un plus beau, j'l'ai fait vite celui là


doomer a écrit :
Essaies de place ton menu avant d'afficher ton contenu de page

Apres test cela fonctionne pas


J'avais déjà essayé !
Je suis en train de repndre ta page et la balise link est mal fermé et une autre.

Je suis fatigué je regarde encore 10mn
Comment ca la balise link est mal fermée :| ?! J'l'ai passé au validateur, et j'suis XHTML 1.0 Strict valide Smiley cligne !
Bon déjà ton menu passe au dessus de ton div footer malgré ton clear.
Avec HTML Tidy une erreur apparait au bout de la balise manque un /

Bizarre
Modifié le 23 Dec 2004 - 22:38
En fin de compte dans ton css pour le menu :

tu utilises un float:left et tu redimensionnes ton div conteneur afin qu'il prenne le reste de la place avaec un margin-left:xx% par rapport à ton menu.

J'ai testé cela fonctionne

Un petit résolu et on en parle plus Smiley cligne
Modifié le 23 Dec 2004 - 22:40
D'autant plus bizarre que j'utilise ééééééégalement HTML Validator with Tidy , et qu'il me dis :
0 error - 0 warning
Je l'ai peut être téléchargé au mauvais moment ou bien c'est le fait de l'avoir téléchargé enfin c'est pas grave Smiley langue c'est un détail

Par contre au niveau accessibilité un gif animé c'est pas top pour ton menu enfin c'etait au passage
Modifié le 23 Dec 2004 - 22:43
doomer a écrit :
En fin de compte dans ton css pour le menu :

tu utilises un float:left et tu redimensionnes ton div conteneur afin qu'il prenne le reste de la place avaec un margin-left:xx% par rapport à ton menu.

J'ai testé cela fonctionne

Un petit résolu et on en parle plus Smiley cligne


C'était la solution que j'utilisais avant de me rendre compte que c'est vraiment trop le bazar avec différentes résolutions ... Moi en 1600*1200 , j'mettais le #Content en 75% , j'avais un espace ENORME sur le côté, et ca passait même pas 1024*768 ...
Perso, je viens de tester sous IE5 et IE6 et firefox 1.0 pas de probleme il faut faire attention de ne pas attribuer des width:100% au mauvais endroit.
Tu le met déjà tans ton body
Modifié le 23 Dec 2004 - 22:45
J'ai refait les modifs dans le CSS en utilsant les float, puis modifiant le 100% et retirant un float dans le content. Et puis 2 ou 3 petites choses et cela fonctionne nickel j'ai pas de marge blanche pas de barre horizontal.

Enfin cela fonctionne, je t'ai donné les grandes lignes.

Je vais faire autre chose maintenant.
Modifié le 23 Dec 2004 - 22:49
Nan nan, mais cette solution, par à rapport à ce que j'ai dis avant :
Kévin a écrit :
C'était la solution que j'utilisais avant de me rendre compte que c'est vraiment trop le bazar avec différentes résolutions ... Moi en 1600*1200 , j'mettais le #Content en 75% , j'avais un espace ENORME sur le côté, et ca passait même pas 1024*768 ...


Je peux vraiment pas l'utiliser , y'a trop de différences !
À mon avis, les changements suivants règlent ton problème.
Il reste à faire des ajustements de padding et margin.

Dans le CSS :

#Content { 
   [b][#red]float: right;[/#][/b] /* supprimer */
   padding-left: 250px; 
   margin-right: 20px; 
   text-align: justify; 
}

Dans le HTML :

Remplacer :

 <ul id="Menu">
  ...
 </ul>

par :

 <div id="Menu"> 
  <ul>
   ...
  </ul>
 </div>

Dans le cas suivant, mieux vaut éviter les guillemets simples (cause de certains problèmes dans IE)
Utiliser guillemets doubles, ou pas de guillemets.

'images/design/header-bg.gif'

Modifié le 24 Dec 2004 - 20:36
Effectivement, ca marche mieux en enlevant le float =D !!!

Par contre, je garde mon ul pour le menu, pour une raison simple, c'est que je veux utiliser le moins de balises possibles ...

MERCI BEAUCOUP , c'est mon cadeau de Noel Smiley smile :d !