28220 sujets

CSS et mise en forme, CSS3

Menu de gauche qui n'arrive pas jusqu'en bas et bug IE

Bonjour à tous,

Débutant depuis peu le XHTML et CSS, je m'entraîne à convertir le design d'un ami, mis en forme grâce aux tableaux, en un design valide XHTML / CSS n'utilisant que des <div> en remplacement des tableaux.

Cependant je rencontre deux soucis :

-> Mon menu de gauche ne descend pas jusqu'en bas, pourquoi ?
-> Sous IE, l'affichage déconne... J'ai a chaque fois un espace entre tous mes div.

Pouvez-vous m'aider à élucider et résoudre ces deux problèmes svp!

Voici la page à consulter :

http://www.webmaster-debutant.net/testscss

Merci de votre aide et @ très bientôt !

Cordialement,
Le Webmaster de Webmaster-Debutant.net !
Salut,

en ce qui concerne les espacements, c'est surement lié à un problème de marges vu que tu affiches les images directement avec le tag img.
ne t'est-t'il pas possible de mettre ces images en "background" de ta div grace aux css (bien sur tu devrait spécifier une hauteur (height) à ta div), mais ca me semble plus convenable, non ?


Ensuite, le block de ton menu ne descendera pas tant que le contenu ne l'y forcera pas ( oui je sais ^^ mais je me comprend).
Un height: 100% pourrait résoudre ca peut-être ?

++ rabs -- qui passait par là..
Salut Rabs,

Merci de ta réponse tout d'abord. Je n'avais pas pensé aux backgrounds, je vais essayer et je vous dirais si ça va mieux.

Sinon j'ai testé le height à 100% mais ca ne marche pas... Pourtant les gabarits d'alsacréations descendent bien jusqu'en bas!

N'hésitez pas à donner vos idées pour m'aider svp !

@ Bientôt !

Cordialement,
Le Webmaster de [URL supprimé par Stephan]

[L'URL de ton site est présent dans ta signature et puis un bouton en bas du post (renseigné via ton profil) pointe aussi vers ton site, merci de ne pas faire de flood]
Modifié par Stephan (15 Sep 2005 - 07:23)
Modérateur
salut,

bonjour,

en attendant de trouver la solution qui te convient, ajoute au css :
#separation4{background-color:#F90F26;}

cela reprend la couleur de fond de ton menu et donne l'impression qu'il va jusqu'au bas de la page, mais ton menu ne s'allonge pas reellement.
a plus
Bonsoir !

Merci à tous pour vos réponses ! Tout d'abord je vois que je n'ai plus qu'une malheureuse séparation dans mon header sous IE et plus aux autres. Ce que je ne comprends pas c'est que j'ai presque rien touché au code pour que ca change et je n'ai donc pas compris pourquoi ça fait ceci (mais tant mieux puisque c'est le but au final).

D'après-vous, est-ce que ce bug peut provenir du fait que mon menu est réalisé avec des images ? Voici la structure de mes menus :

<div id="menu_header">
		<ul id="menu_images">
			<li><a href="#" title=""><img src="images/btn1.png" alt="" /></a></li>
			<li><a href="#" title=""><img src="images/btn2.png" alt="" /></a></li>
			<li><a href="#" title=""><img src="images/btn3.png" alt="" /></a></li>
			<li><a href="#" title=""><img src="images/btn4.png" alt="" /></a></li>
			<li><a href="#" title=""><img src="images/btn5.png" alt="" /></a></li>
		</ul>
	</div>


Devrais-je donc plutôt faire ceci :

<div id="menu_header">
<a href="#" title=""><img src="images/btn1.png" alt="" /></a>
<a href="#" title=""><img src="images/btn2.png" alt="" /></a>
<a href="#" title=""><img src="images/btn3.png" alt="" /></a>
<a href="#" title=""><img src="images/btn4.png" alt="" /></a>
<a href="#" title=""><img src="images/btn5.png" alt="" /></a>
</div>


Je n'ai toujours pas réglé le soucis du bloc de gauche qui ne va pas jusqu'en bas mais vous avez de bonnes idées Smiley cligne Nh'ésitez pas à m'aider si vous en voyew d'autres !

@ Bientôt !

Cordialement,
Hugo.
De un, c'est toujours la même histoire il est possible que cette espace soit lié aux marges de ta liste. Liste que je te conseille de conserver et de na pas remplacer par de simples liens.

Voir un menu avec uniquement des images j'aprécie pas trop Smiley ohwell

Quelque chose comme ca pourrait déjà être mieux, c'est pourtant pas du grand art non plus ^^ :


<div id="menu_header">
<ul id="menu_images">
<li><a href="#" title="accueil" id="accueil"> </a></li>
<li><a href="#" title="team" id="team"> </li>
<li><a href="#" title="alliances" id="alliances"> </a></li>
<li><a href="#" title="forum" id="forum"> </a></li>
<li><a href="#" title="contact" id="contact"> </a></li>
</ul>
</div>

#accueil a {
display: block;
width: ..px;
height: ..px;
}

et ainsi de suite pour tout tes liens..


la méthode que j'utilise pour les collones : http://pompage.net/pompe/colonnesfactices/

Autre chose, tu met des images partout, hors il est quand même préferrable d'utiliser du texte (accessibilité ?), il existe ensuite plusieurs méthode pour faire que ce texte s'affichera comme une image via CSS.
http://www.mezzoblue.com/tests/revised-image-replacement/
Modérateur
salut,
ma façon de faire un menu avec image, et texte invisible:
<div id="menuh">
<ul>
<li><a href="#" id="un"> <span>Accueil</span></a></li>
<li><a href="#" id="deux"> <span>forum</span></a></li>
<li><a href="#" id="trois"> <span>news</span></a></li>
<li><a href="#" id="cat"> <span>contact</span></a></li>
<li><a href="#" id="sink"> <span>liens</span></a></li>
</ul>
</div>

ensuite,
j'applique un display:none; au span,
un text-decoration:none; au lien (l'espace "insecable" est necessaire pour rendre les liens actifs sous IE alors on fait aussi disparaitre le soulignement par defaut) + 1 display:block; et une taille adaptée pour s'accordée avec la taille de l'image "lien" placée en background (l'effet de roll-over est aussi possible) .
un exemple pour un menu horizontale que j'ai "bricolé" (avec 2 images): http://gcyrillus.free.fr/tole/
l'avantage , me semble t'il est que ce lien est visible et comprehensible aussi si les "styles" sont desactivés, et puis l'image peut-etre une seule image en s'inspirant des exemples : http://css.alsacreations.com/Galeries-de-menus-en-CSS
en particulier ce menu: http://css.alsacreations.com/modelesmenus/g01.htm

a plus et bon courage
Sujet clos
Aller à