28220 sujets

CSS et mise en forme, CSS3

Hello,

J'attire votre attention sur cette mise en page http://ceie.free.fr qui est basé sur cette mis en page là http://css.alsacreations.com/modeles/modele5.htm sauf que dans le bloc central et bien j'ai une image (carré bleu avec deux blocs juste en dessous).
Pour faire court, le bloc centre est composé de l'image et dessous deux blocs côte à côte qui prennent la largeur du bloc centre.
bloc = div bien sur Smiley cligne
Ah oui mon problème c'est que mon pied de page et bien il ne descend plus et reste au même niveau que mes deux blocs du div centre et là ça pose problème...c'est là que j'ai besoin d'un petit coup de patte Smiley bawling
Merci.

Je pense que vous pourrez éditer mon code sous FF sinon dites le moi et je le balancerais.
Modifié par xgregx (08 Mar 2005 - 14:52)
voila mon CSS

/* Evi.css Style By G.Georges
   Dernière modification:    04/03/2005
   ------------------------------------
   ------------------------------------
   Couleurs----------------------------
   2D4398 : Bleu
   D2E6FF : Bleu clair
   ----------------------------Couleurs


Basé sur les tutos de  www.alsacreations.com
 

*/


/* BODY
--------------------------------------------------------------------------------
*/


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: 000;
color: #2D4398;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

  
/* HEADER
--------------------------------------------------------------------------------
*/

#header{
height: 132px;
margin: 0 0 10px 0;
}

h1#header {

background-color: #99CCCC;
padding: 0;
}

h1#header a
{
  width: 750px ;
  height: 132px ;
  display: block ;
  background: url(../images/top.gif) no-repeat left top;
  position: relative ;


}

h1#header a span
{
  display: none ;
}

/* CONTENEUR
--------------------------------------------------------------------------------
*/

#conteneur {
position: absolute ;
width: 750px ;
margin: 5px 0 20px 0;
background: #fff ;
color: #2D4398;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

/* CENTRE
--------------------------------------------------------------------------------
*/
#centre {
margin-left: 130px;
margin-right: 200px;
}

#centre img{
border: none;
}

/* CENTREGAUCHE
--------------------------------------------------------------------------------
*/

#centregauche{
position: absolute;
left:120;
width: 225px;
border-right: #2D4398 solid 1px;

}

/* CENTREGDROIT
--------------------------------------------------------------------------------
*/

#centredroit{
position: absolute;
left:360px;
width: 225px;


}


/* menu
-------------------------------------------------------------------------------
*/
#gauche {
position: absolute;
left:0;
width: 120px;
margin: 10px 5px;
}

#gauche img
{
  border: none ;
}

.tb_menu{
margin: 0;
padding: 0;
width: 140px;
}



/* DROITE
--------------------------------------------------------------------------------
*/

#droite {
position: absolute;
right:0;
width: 160px;
margin: 10px 0 0 10px;
}

.tb_news_bleu{
background-color: #D2E6FF;
font-weight: bold;
margin: 0;
padding: 0;
}

/*FOOTER
--------------------------------------------------------------------------------
Mise en forme de la partie pied de page */
div#footer {
position: absolue;
bottom: auto;
height: 60px;
text-align: center;
border-top: #D2E6FF solid 1px;
}

div#footer img
{
  border:  none ;
  vertical-align: middle ;
}

Voilà le xHtml pas encore validé tout ça.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
    <title>Evidence</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="fr" />
    <link rel="StyleSheet" href="css/evi.css" type="text/css">
 </head>
  <body>
  <div id="conteneur">   
   <h1 id="header"><a href="index.php" title="Evidence"><span>Evidence V1</span></a></h1>

<!-- Menu Gauche -->
<div id="gauche"> <a href="#"><img src="images/accueil.gif" width="114" height="24" /></a><br />
  <a href="#"><img src="images/news.gif" width="114" height="24" /></a><br />
  <a href="#"><img src="images/dep.gif" width="114" height="24" /></a><br />
  <a href="#"><img src="images/activites.gif" width="114" height="24" /></a><br />
  <a href="#"><img src="images/etudes.gif" width="114" height="24" /></a> <br />
  <a href="#"><img src="images/focus.gif" width="114" height="24" /></a><br />
       <a href="#"><img src="images/contact.gif" /></a><br />

</div>
<!-- Fin Menu Gauche -->

<!-- Bloc Droit-->
<div id="droite">
      <table class="tb_menu">
       <tr><td class="tb_news_bleu">News</td></tr>
       <tr><td><? echo "Boucle des news PHP" ; ?></td></tr>
       <tr><td></td></tr>
       <tr><td class="tb_news_bleu">Verset du jour</td></tr>
       <tr><td><? echo "Verset PHP" ; ?></td></tr>
       <tr><td class="tb_news_bleu">Nous prions pour vous</td></tr>
       <tr><td>Cliquez <a href="">ici</a> pour nous envoyer votre sujet de prière.</td></tr>
     </table>
</div>
<!-- Fin Bloc Droit -->

<!-- Bloc Centre -->
<div id="centre">
  <img src="images/mid.gif" /><br />

<!-- Bloc Centre Gauche -->
<div id="centregauche">
      Editorial de la semaine: Titre de l'édito.<br />
      Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Vestibulum non magna. Duis nonummy
      erat a wisi. Nulla dui libero, ornare id, porta a,
      mattis id, diam. Nullam tincidunt quam sit amet arcu...<br />
      <a href="#">[Lire la suite]</a>
</div>
<!-- Fin Centre Gauche -->

<!-- Bloc Centre Droit -->
<div id="centredroit">
      Dossier - Guatemala: Retour sur le voyage en amérique du sud...<br />
      <a href="#">[Lire la suite]</a>
</div>
<!-- Fin Bloc Droit -->
</div>
<!-- Fin Bloc Cenetre -->
<!-- Footer-->
<div id="footer">
Centre Evengélique Evidence 93 avenue de la république 92250 Montrouge<p />&nbsp;&nbsp;</a> 
  Contactez les webmestres - [<a href="http://validator.w3.org/check?uri=referer" target="blank">CSS</a> 
  - xhtml] <a href="http://www.mozilla.org/products/firefox/" target="blank"> 
  <img src="../images/firefox.png" alt="Get Firefox" width="80" height="15" /> 
</div>
<!-- Fin Footer-->
</div>
<!-- Fin Conteneur-->

</body>
</html>

Modifié par xgregx (06 Mar 2005 - 08:31)
Tu devrais éditer ton titre pour qu'il reflète mieux la nature du problème que tu rencontres. Cela attirerait plus le chaland Smiley cligne pour répondre.
Igor a écrit :
Tu devrais éditer ton titre pour qu'il reflète mieux la nature du problème que tu rencontres. Cela attirerait plus le chaland Smiley cligne pour répondre.


Merci Igor, j'espère que là ça ira mieux! Smiley cligne
En fait, là je fais du bricolage à partir d'un gabarit qui me semblait pertinant mais je n'en suis pas sure et de toute manière ce n'est pas la bonne métode alors je ferme le sujet, je rebosse et je reposte de manière plus claire si nécéssaire.
Merci à tous.