18073 sujets

Questions générales et questions de débutants

Modèle alsacréations qui ne fonctionne pas ss FF après rajout d'1 img

Salut,
Le titre de mon post est un peu provocateur.
En fait, j'essaie de partir d'un modèle d'Alsacreations pour refaire mon site :
http://css.alsacreations.com/modeles/modele16.htm

A partir du moment où je rajoute une image dans le bandeau header


<div id="header"> 
<img src="image.gif" />
</div>

#header {
height: 75px;
background-color: #FFFFFF;
}
#header img {
	float: left;
	margin: 0px 5px 15px;
}


L'affichage du div <haut> contenant un menu horizontal sous le div <header> se décale jusqu'à la fin de l'image incluse dans le <header>

<div id="haut">
        <ul id="menuhaut">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
        </ul>
      </div>

#haut {
height: 30px;
background-color:#CCCCFF;
}


Je ne comprends vraiment pas ce qui déclenche se décalage sous FF en plus.

Si ça vous dit qqchose, merci pour votre aide.
Jojo a écrit :
Salut,
Le titre de mon post est un peu provocateur.
En fait, j'essaie de partir d'un modèle d'Alsacreations pour refaire mon site :
http://css.alsacreations.com/modeles/modele16.htm

A partir du moment où je rajoute une image dans le bandeau header
L'affichage du div <haut> contenant un menu horizontal sous le div <header> se décale jusqu'à la fin de l'image incluse dans le <header>

Je dis peut-être une ânerie ! Smiley lol Je crois que c'est le float: left qui pose problème. #header et #haut ne sont pas en position:absolute. Donc ils suivent le flux ! L'IMG est float: left, #haut se cale à la suite s'il lui reste de la place !
Plusieurs pistes : 1. Supprime float: left.
2. Impose position:absolute à tout ce petit monde !
3. Impose width: 100% à #header.
Je mets un option sur la 3. width: 100% et #haut n'a plus de place dans le flux donc il se cale en-dessous ! Supprime float: left quand même.

Ravi si j'ai pu être utile, sinon fait une copie de sauvegarde : ça me gênerai que tu gâches ton travail et que tu me maudisse toute la nuit Smiley lol
Modifié par Mkl (14 Jul 2005 - 00:17)
Bonjour Jojo et bienvenue sur ce forum Smiley lol

Je déplace ton sujet dans le salon « Tutoriels et exercices Alsacréations : "Service Après Vente" »

--
Stephan
Mkl a écrit :

Je dis peut-être une ânerie ! Smiley lol Je crois que c'est le float: left qui pose problème. #header et #haut ne sont pas en position:absolute. Donc ils suivent le flux ! L'IMG est float: left, #haut se cale à la suite s'il lui reste de la place !
Plusieurs pistes : 1. Supprime float: left.
2. Impose position:absolute à tout ce petit monde !
3. Impose width: 100% à #header.
Je mets un option sur la 3. width: 100% et #haut n'a plus de place dans le flux donc il se cale en-dessous ! Supprime float: left quand même.


Merci MKL, mais malheureusement la suppression du float: left n'est visiblement pas la solution. Cela provoque d'autres décalages ailleurs. Donc si qq'un à une autre idée qu'il n'hésite pas.
Merci
Sujet clos
Aller à