28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Height + contenu div

salut je voudrais savoir comment pouvoir mettre mon site a la bonne hauteur (par rapport a la résolution) j'ai un^prb avec un div que je n'arrive pas a regler

Voila mon fichier html :

<body>


<div id="container">





<div class="head1">
<img src="image/logo-vertigo.jpg"  alt="logo-vertigo">
</div>

<div class="menu">
 <table cellpadding=0 cellspacing=0 width=100% height=30>
    <tr>
     <td class=textemenu1> 
      <div>Accueil</div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Dernier numéro</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Agenda</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Textes en ligne</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Anciens numéros</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Abonnement</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Sites utiles</a></div>
     </td> 
     <td class=textemenu> 
      <div><a href="#.html">Contact</a></div>
     </td> 
    </tr>
   </table>
</div>

<div class="recherche">
    <form action="php/recherche.php" method="post" enctype="text/plain">
     Rechercher : <input name=recherche size=10>
    </form>   
</div>

<div class="espace">   
</div>



<div id=centre>

<div class="float">
 <img src="image/image1.jpg"  alt="image: dernier numéro">
</div>

<div class="float1">
     <font class=titre1>Textes Danses en ligne</font><br><br>
     Danses<br>
     <font class=texte1>Fabienne Costa</font><br><br>
     Conspiration de la danse et du cinéma<br>
     <font class=texte1>Véronique Fabbri</font><br><br>
     Leçon de mise en scène et étude du geste: le rêve intense de Jerry Lewis<br>
     <font class=texte1>Emmanuelle André</font>
    
</div>

<div class="float2">
 <img src="image/danse.jpg" alt="Dernier numéro">
</div>

<div class="float3">
<font class=titre1>Hors-Série Danses</font><br><br>
<font class=texte>Petit texte de présentation du numéro.</font>
</div>

</div>

<div class="pieddepage"> 
 <font class="textepieddepage"><a href="http://www.ovh.com/fr/index.xml" class="a1" target="_blank"  title="Solutions d'hébergement professionnels">/ Revue Vertigo est hébergé par OVH /</a> &nbsp; &nbsp; &nbsp;</font>  
 <font class="textepieddepage">Editions Capricci, 21 bd Victor Hugo 44200 Nantes</font>  
</div>

</div>


et voici mon fichier css :

html, body {
    height: 100%;
}


body {
margin: 0;/* sans marges, la page sera collée aux bords */
padding: 0;
font-family: arial, verdana, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
color: #ffffff;
}

#container {
position: relative;
min-height: 100%;
}



.head1 {
background-image: url('../image/haut1.jpg');
width: 100%;
height: 58px;
text-align: center;
font-size: 1px;
}

.menu {
background-image: url('../image/fond-menu.jpg');
width: 100%;
height: 30px;
text-align: center;
}

.recherche {
width: 100%;
background-color: #000000;
text-align: right;
font-family: arial, verdana, sans-serif;
font-weight: bold ;
font-size: 8pt;
font-variant:uppercase;
color: #ffffff;
}

.espace {
width: 100%;
height: 30px;
background-color: #000000;
}

#centre{
background-color: #000000;
width: 100%;
}

div.float {
float: left;
width: 22%;
}

div.float1{
float: left;
width: 40%;
}

div.float2{
float: left;
width: 18%;
}

div.float3{
float: left;
width: 19%;
}

.pieddepage{
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}


et voici le lien qui permet de visionner le site :
http://www.revuevertigo.com


J'ai mis un pied de page fixe, je ne sais si c'est une bonne id ?????
puis le prb surtout c ce div "centre" qui ne s'adapte pas
et aussi quelques différences entre nestcape et ie dans l'interprétation du css

merci de m'aider
Modifié par greench (29 Jun 2006 - 12:03)
ai-je mal pose ma question ?
peut-etre que vous ne voyez pas ou est le prb. Précisez le moi si c le cas
j'ai vraiment besoin de vos lumieres !!!!!
Dans mon cas, j'utilise un petit code javascript :

document.getElementById('main').style.height = document.documentElement.clientHeight-296+'px';


-296 px c'est la hauteur de mes autres elements, soit le header et le footer.

Ça fonctionne sous IE6 et FireFox. Safari je crois que oui, j'ai testé au travail mais je suis pas 100% sûr.
voici mon site :
http://www.revuevertigo.com

J'aimerais que mon bloc div "centre" soit totalement noir (il y a un background-color: black) , il se bloque par rapport à mon contenu ce qui fait apparaitre ce blanc!!!
En plus je ne sais pas si c une bonne id j'ai un autre bloc div "pieddepage" qui lui se trouve tout le temps en bas :

.pieddepage{
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #F7931E;
text-align: center;
}


ces deux blocs ne sont plus en contact. J'aimerais savoir comment je peux faire pour que la hauteur de mon bloc div "centre" se gère automatiquement en hauteur (par rapport à la resolution et non par rapport au contenu comme c le cas la)
j'espere avoir ete clair Smiley ohwell
Un truc tout con, alors : essaie ça 
body {
    background-color: #000;
}


Rem : appliquer une couleur de fond au body est de toutes façons obligatoire, puisque tu lui as appliqué une couleur de texte blanche.
Modifié par Sopo (29 Jun 2006 - 12:03)
Sujet clos
Aller à