28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème positionnement blocs flottants

Bonjour,

Je réalise une page web statique un peu complexe, et après avoir épluché les tutoriels du site sur les positionnements flottants et absolus , j'arrive à peut près à obtenir ce que je veux sous Chrome et Mozilla, mais sous Internet Explorer c'est la cata...
Comme j'ai développé plus de l'Internet ces 2 dernières années, je dois être rouillée !
Voilà, j'ai une structure entête, intro (2e entête uniquement sur la page d'index), bloc contenu (composé de 2 colonnes), pied de page.
J'ai réalisé mon code XHTML de telle sorte que le contenu s'affiche dans l'ordre d'importance sans style, mais avec la CSS je veux positionner différemment.
<body>
<div id="conteneur">
  <div id="header">
    <h1>Titre</h1><h2>Sous-titre</h2>
    </div><!--#header-->
    <div id="intro">
    <p>Texte d'introduction</p>
  <div id="domus">nom du partenaire</div>
    </div><!--#intro-->

  <div id="contenu">

	<div id="menu">
        <p><ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="lien.html">Lien</a></li>
        <li><a href="lien.html">Lien</a></li> 
        <li><a href="lien.html">Lien</a></li>  
        <li><a href="lien.html">Lien</a></li>
       </ul>
        </p>
        <p>
        <ul>
        <li><a href="">Télécharger la plaquette</a></li>
        <li><a href="">Download leaflet</a></li>
        </ul>
        </p>
	</div><!--#menu-->

      <div id="col_gauche">
        <h3 class="noir">titre niv3</h3>
        <p>texte</p>
      <h3 class="noir">titre niv3</h3>
        <p>texte</p>      
      <h3 class="noir">titre niv3</h3>
        <p>texte</p>
     </div><!--#col_gauche-->
      <div id="col_droite">
     <h3 class="noir">titre niv3</h3>
        <p>texte</p>
      <h3 class="noir">titre niv3</h3>
        <p>texte</p>
    </div><!--#col_droite-->
  </div><!--#contenu-->

<div id="pied">
    <div id="pied_gauche">
    <h3>titre niv3</h3>
    <p>texte</p>
    <h3>titre niv3</h3>
    <p>texte</p>
      <h3>titre niv3</h3>
    <p>texte</p>
        <h3>titre niv3</h3>
    <p>texte</p>
    </div><!--#pied_gauche-->
    <div id="pied_centre">
    </div><!--#pied_centre-->
    <div id="pied_droit">
    <img class="logos" src="img/logos.png"/>
    </div><!--#pied_droit-->
</div><!--#pied-->

  <div id="engins">
    <p><ul>
    <li>Automobile</li>
    <li>Aéronautique</li>
    <li>Nautisme</li>
    <li>Véhicules utilitaires</li>
    <li>Train</li>
    <li>Tramway</li>
    <li>Métro</li>
    <li>Engins agricoles</li>
    </ul>
    </p>
  </div><!--#engins-->

</div><!--#conteneur-->
</body>


Et l'affichage que je souhaite :
1) l'entête avec les 2 titres
2) l'intro avec la liste des engins à gauche, le texte à droite et le partenaire tout à droite près de son logo (dans l'image d'arrière-plan)
3) le contenu divisé en 2 colonnes avec le menu au-dessus de la colonne de droite
4) le pied de page avec 3 sous parties

Les problèmes que je rencontre :
1) sous Firefox et Chrome : j'ai un espace d'une dizaine de pixels entre l'en-tête et l'intro (si je joue sur une marge négative ça se chevauche sous IE)
2) la partie contenu : s'affiche comme je le souhaite sous Firefox et Chrome, mais les 3 blocs s'empilent à droite sous IE...
@charset "utf-8";
/* CSS Document */
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background:#CCC ;
	color:#000;
}
div#conteneur
{
	width: 980px ;
	margin: 0 auto ;
	text-align: left ;
}
#header
{
   width: 100%;
   height: 200px;
   background-repeat: no-repeat;
    background-image:url(../img/header.png);
}

#header h1, h2 {
	color: #CCC;
	padding-left:420px;
	margin:0;
}
#header h1 {
	font: 1.5 em Arial, Helvetica, sans-serif;
	padding-top:120px;
}
#header h2 {
	color: #CCC;
	font: 1.2em Arial, Helvetica, sans-serif;
}
#intro
{
   width: 100%;
   height: 200px;
   background-image:url(../img/intro.png);
   color:#FFF;
}
#intro p
{
   padding-top:10px;
   padding-left:280px;
   text-align:justify;
   width: 600px;
}
#domus
{
   position: absolute;
   top : 350px;
   padding-left:200px;
   text-align:right;
   width: 680px;
   
}
div#contenu
{
	width: 976px ;
	height:auto;
	margin: 0 auto ;
	overflow:hidden;
	text-align: left ;
	border: 2px solid #399 ;
	background:#FFF ;
}
#menu
{
   text-align:right;
   	margin-left : 480px;
	width: 460px;
   	padding-right:50px;
   	margin-bottom:50px;
	border: 1px solid #CCC ;

}
#menu a {
	text-decoration:none;
	color:#099;
	font-weight:bold;
	font-size:1.1em;
}
#menu ul {
	   list-style:none;
}


#col_gauche {
	position : absolute ;
	top : 430px;;
	width:460px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #CCC ;

}
#col_droite {
	margin-left : 480px;
	width:460px;
	padding: 10px 10px 10px 10px;
		border: 1px solid #CCC ;
}

h3.noir {
	color:#fff;
	background-color:#000;
}

#col_gauche p, #col_droite  p {
	text-align:justify;
}


#pied {
	background-color:#000;
	width:980px;
	height:200px;
	padding-top:15px;
}
#pied_gauche {
	float : left;
	width:300px;
}
#pied_centre {
	float : left;
	width:370px;
	border:1px solid #000;
}
#pied_droit {
	float : left;
	width:300px;
	border:1px solid #000;
}

#pied h3 {
	font-size:1.2em;
	color:#CCC;
	margin:0;
	padding : 5px 0px 0px 10px;
}
#pied p {
	color:#fff;
	margin:0;
	padding : 0px 0px 0px 10px;
}
#pied img 
{
   width: 280px;
}
#engins
{
   position: absolute;
   top : 220px;
   left :120px;
   text-align:left;
   width: 220px;
   font-variant:small-caps;
   color:#906;
   font-size: 1.2em 
}
#engins ul {
	   list-style:none;
}


Merci de vos lumières... j'avoue que tutos sur les positionnements me sont assez confus...
Modifié par V@lentine (09 Apr 2011 - 10:03)
Je dois être plus fraîche ce matin, j'ai trouvé la solution pour l'espacement entre les div !
* {
margin: 0;
padding: 0;
}

Reste à résoudre le problème du contenu Smiley smile
Bon ben j'ai réussi, j'ai rejoué avec les flottants, il me semble l'avoir fait hier, mais bon ça marche !
J'ai viré le <p> dans le div#menu pour ne laisser que les ul..

#menu
{
   text-align:right;
	float: right;	
	width: 400px;
   	padding-right:50px;
   	margin-bottom:50px;
}
#col_gauche {
	float: left;
	width:460px;
	padding: 10px 10px 10px 10px;
}
#col_droite {
	float: left;
	width:460px;
	padding: 10px 10px 10px 10px;
}
Sujet clos
Aller à