28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous,
Comme l'indique le titre du sujet, j'ai un problème d'alignement sur deux blocs (div). Je souhaite que le bloc jaune et le bloc rouge (vert sur l'image vignette) soient alignés sur une même horizontale (sommets des blocs).
upload/23311-Capture01.jpg

  <div id="Contenu_Gauche">
    <div id="Bloc_Menu_Tourisme">
<img src="images/tourisme_visite.gif" width="80" height="21" alt="Tourisme - Visite - Creusot - Montceau">
    <ul class="Menu_Vertical">
    <li><a href="#" title="Musées">Musées</a></li>
    <li><a href="#" title="Chiner">Chiner</a></li>
    </ul>
    <img src="images/tourisme_hebergement.gif" width="163" height="22" alt="Tourisme - Hébergement - Creusot - Montceau">
    <ul class="Menu_Vertical">
    <li><a href="#" title="Hôtels">Hôtels</a></li>
    <li><a href="#" title="Gîtes">Gîtes</a></li>
    <li><a href="#" title="Campings">Campings</a></li>
    </ul>
  <img src="images/tourisme_bouger.gif" width="100" height="21" alt="Tourisme - Bouger - Creusot - Montceau">
  <ul class="Menu_Vertical">
  <li><a href="#" title="Sport">Sport</a></li>
  <li><a href="#" title="Parcs">Parcs</a></li>
  <li><a href="#" title="Bars">Bars</a></li>
  </ul>
  </div><!-- End Bloc_Menu_Tourisme -->
  <div id="Bloc_Infos_Tourisme">
  <iframe name="Infos_Tourisme" width="400" height="500" align="left" scrolling="auto" marginheight="0" marginwidth="0" frameborder="0"></iframe>
  </div><!-- End Bloc_Infos_Tourisme -->
  </div><!-- End Contenu_Gauche -->



#Bloc_Menu_Tourisme {
	width: 165px;
	margin-top: 10px;
	background-color: #FF0;
}
#Bloc_Infos_Tourisme {
	float: right;
	width: 400px;
	margin-top: 10px;
	background-color: #F00;
}


Modifié par luxojr (21 Apr 2010 - 10:46)
C'est ton bloc menu qu'il faut mettre en flottant, pour que ton contenu puisse glisser et se placer à ses côtés.

Tu as dans ton cas indiqué le contenu comme flottant. Mais comme il apparaît dans le code après le menu, il est normal qu'il ne remonte pas, puisque ton menu (l'élément div) a par défaut un rendu block.

Bloc_Menu_Tourisme{ 
     background-color: #FF0;
     float: left;
     margin-top: 10px;
     width: 165px;
}
#Bloc_Infos_Tourisme{
    background-color: #F00;
    margin-top: 10px;
    width: 400px;
}

Modifié par octopus984 (23 Apr 2010 - 18:15)