Drôle de positions...

Bonjour,

je vous écris pour le problème suivant:j'ai un décalage vertical entre le menu et les images. A quoi cela peut-être dû ? Vous pourrez vous en rendre compte en regardant la copie d'écran:ci-jointe
Le code HTML :

<div id="header_conteneur">// bloc général
<div id="header_bloc_left">
  <form id="form1" ...>
    <select name="Liste" ...>
      <option selected="selected">Les objectifs fondamentaux S3.4 Motorisation</option>
      ...
    </select>
  </form>
  ...<img src="css/images/navigation/btn_haute_left.jpg" name="prevBtnTop" border=0 class="nav_haute_left" />...
<img src="css/images/navigation/btn_haute_right.jpg" name="nextBtnTop" border=0 class="nav_haute_right" /></a></div>...

Le code CSS:

#header_bloc_left{/* bloc contenant les 3 éléments*/ 
	padding:0;
	margin:0;
	width: 550px;
	height:172px;
	float: left;
	background-image:url(images/titre.jpg);
...
/* Navigation haute*/ 
.nav_haute_left{
	float:left;
	margin-top: 0px;
	margin-left: 400px;
	margin-right: 20px;
	margin-bottom: 0px;
	}

.nav_haute_right{
	float:left;
	margin-top: 0px;
	margin-bottom: 0px;
	}
...
.menu{
float:left;
margin-top: 141px;
margin-left: 70px;
margin-right: 20px;
margin-bottom: 0px;
}

Je n'ai mis que le code incriminé afin de n'avoir pas de page à rallonge...
merci,

Salut,

albius a écrit :

Je n'ai mis que le code incriminé afin de n'avoir pas de page à rallonge...
merci,

Ca aurait été encore moins à rallonge de mettre un lien vers la page concernée.
Ainsi on aurait eu une vision globale du code, car il est difficile de constater si le problème ne vient pas d'une autre propriété dans ta feuille de style qui provoque ce décalage.

(j'ai pas suffisamment de temps pour regarder en détail pour ma part)

Bonjour,

J'ai disposé la page comme vous l'avez demandé à cette adresse: http://www.cfa-bourges.fr/test
Si je peux vous demander aussi pourquoi, bien qu'ayant regardé votre tutoriel à ce propos, j'ai le bas de page qui reste légèrement en retrait de la fin du navigateur.

En vous remerciant,

Bonjour,

C'est un problème de dépassement de flottant : select.menu étant flottant (float: left), il dépasse de son conteneur (form), et ne repousse pas les liens avec les images si ceux-ci ne sont pas eux-même flottants.

Conseil : mettre le header en position: relative, et positionner les trois éléments (select, et les deux liens) en absolu par rapport aux limites du header.

Bonjour Florent,

J'avoue que je ne comprends pas trop tes explications... Il me semble pourtant que les 3 éléments sont en flottant. J'ai essayé de faire ce que tu as dit, mais ça n'a pas l'air de vouloir marcher... Quand tu parles du header, c'est le bloc général ou le bloc contenant les éléments de navigation ? (je suppose que oui...)