28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pb alignement de 3 div

Hello hello !
Voilà j'ai mis en place un centrage vertical et horizontal de mon site.
J'ai du donc corriger pas mal d'erreurs de code pour aligner mes div correctement.
mais il reste une div que je ne parviens pas à mettre où je veux ! Smiley ohwell
voici le lien qui sera plus parlant :
http://www.szchantier.cazenove-architectes.com/index.php?page=mission[/url]

Le second bloc de texte est calé au bas de la première zone de texte. Or, j'aimerais qu'il (le 2ème bloc) se cale sous le diaporama de photos. Smiley lol
j'ai essayé différentes manières mais rien à faire...
si vous avez une idée ?
Modifié par sagi (24 Jan 2008 - 19:12)
bon et bien j'ai fini par trouvé une solution.
Je ne sais pas si elle est bien.
Par contre, je sais qu'elle fonctionne sous IE5 et 6, FF2 Mac et PC et sours Safari !
Voici mon code :

xhtml :

<body>

<!-- tableau une cellulle pour le centrage vertical du site --> 
<table id="page-table"><tr><td id="page-td">

<!-- design global du site-->
<div id="global">

  <!-- ici le header-->
  <div id="header"> 

    <div id="logo">
    </div>

    <div id="menu_horiz_2">
      </div>
	
  </div>
	

	<!-- ici la zone centrale -->

           <!-- les zones de texte à gauche -->
<div  id="conteneur-centre">

           <div id="gauche">
           </div>

         <!-- le diaporama -->
         <div id="diaporama">

         <div id="colonne03">
         </div>
         </div>

</div>
  
  <!-- ici le pied de page-->
  <div id="footer">
	  <ul class="lienfooter">
	  <li><a href="http://www.ntild.com" target="_blank">Webdesign by NTild.com</a></li>
	  </ul>
	  </div>
  
</div>
</td></tr></table> <!-- fin du tableau-->

</body>


css :


html 
{
	height: 100%;
}

body
{
        height: 100%;
	margin: 0; 
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #F1F2F3;
        text-align: center;
}

#page-table 
{
	height: 100%;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

#page-td 
{
	height: 100%;
	padding: 0;
	vertical-align: middle;
}


/*conteneur global du site*/
#global 
{     
     width: 1000px; 

     margin: 20px auto;
     text-align: left;
     background : url() no-repeat;
     background-color: #F1F2F3;
}

/*haut de page*/
#header
{
	width: 1000px;
	height: 91px;
}


/*Le centre du site*/

#conteneur-centre
{
width: 1000px;
height: 478px;
}

#diaporama
	{

		width: 1000px;
		height: 421px;
                padding-top: 60px;
                padding-left: 350px;
                font-size: 12px;
	        color: #434343;   
	}
	
div#colonne03 /*zone texte sous le diaporama*/
{
    width:510px; 
    height: 80px;
    padding-top:10px;
    padding-right: 10px;
    font-size: 12px;
    color: #434343;
    overflow:auto;
}


#gauche 
{
position: absolute;
width: 310px;
height: 380px;
margin-top: 57px;
margin-left: 20px;
padding-right: 8px;
overflow:auto;
font-size: 12px;
color: #434343;
}

#gauche a
{
      font-size: 12px;
      color: #434343;
      text-decoration: none;
}

#gauche a:hover
{
      font-size: 12px;
      color: #3293DE;
}


/*le pied de page*/
#footer
{
	width: 1000px;
	height: 13px;
	font-size: 10px;
	color: #9C9D9F;
	text-align: right;
}

/* couleur du lien footer*/
.lienfooter 
{
	list-style-type: none;
}

.lienfooter a 
{
	margin: 0 2px;
	color: #3293DE;
	text-decoration: none;
}
.lienfooter a:hover 
{
	text-decoration: none;
}
Sujet clos
Aller à