28172 sujets

CSS et mise en forme, CSS3

Design extensible, help!

Bonjour,
je souhaiterai faire une page d'acceuille adaptable a un maximum de resolution (extensible).
Voila un apercu de mon code xhtml 

<body> 

<div id="en_tete"> 
<img class="top1" src="top.gif" /> 
</div> 

<div id="menu"> 
<h3> 
</h3> 
</div> 

<div id="corps"> 
<img class="acceuil" src="acceuil.png" alt="image d'acceuill"/> 
</div> 

<div id="pied_de_page1"> 
</div> 

<div id="pied_de_page2"> 
</div> 

</body>



Et voici le css 


body 
{ 
width: 100%; 
height: 100%; 
margin: 0 auto; 
padding: 0 auto; 
} 

#en_tete 
{ 
width: 100%; 
height: 75px; 
background-color: black; 
} 

#menu 
{ 
width: 100%; 
height: 26px; 
background-color: yellow; 
} 

#corps 
{ 
height: 100%; 
background-color: black; 
} 


#pied_de_page1 
{ 
width: 100%; 
height: 26px; 
background-color: yellow; 
} 

#pied_de_page2 
{ 
color: rgb(200,200,153); 
width: 100%; 
height: 75px; 
background-color: black; 
}


Voila, donc je voudrais que le corps s'adapte a la page du navigateur et qu'il pousse les pieds de page 1 et 2 vers le bas selon les besoins afin que toute la fenêtre soit exploité .
Je ne peux pas utiliser des hauteur en pourcentage pour l' en tête car j'ai une image dedans qui fait 75px de hauteur, et je veux que mon pied de page2 soit de meme dimension que mon en tête, donc 75px de haut aussi. Pour avoir mon menu (horizontale) proportionelle à l'en tête j'ai fixer une hauteur à 26px (que l'on retrouve sur le pied de page 1).

Je débute et j'avance a taton, mais la ca fait 2 jours que je bloque sur ca donc je viens demander un peu d'aide...
Merci
Modifié par webmini (13 Jun 2009 - 20:37)
Hello webmini et bienvenue parmi nous Smiley smile ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation Smiley smile
Voila j'espere que je suis en regle maintenant =).
J'ai toujour pas trouvé de solution. j'ai cherché, posté sur plusieur forum... Smiley bawling Smiley bawling Smiley bawling
Bonjour,

Dans l'absolu, si c'est ton bloc #corps qui est chargé de repousser le pied de page jusqu'en bas de la zone de visualisation du navigateur, c'est mal barré car CSS seul ne permet pas de réaliser cela. Tu peux donner une hauteur minimale (min-height) à ce bloc en pourcentage ou en pixels, mais pas une hauteur de «100% du viewport moins tant de pixels». En JavaScript, par contre, tu peux calculer cette hauteur en pixels, puis l'appliquer comme valeur de la propriété min-height.

Ceci dit, si le but est d'avoir un pied de page en bas de l'écran quelle que soit la longueur du contenu, c'est justement ce qui est proposé ici:
http://covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
Merci beaucoup Florent V. J'ai enfin réussi a faire ce que je voulais à partir du lien que tu m'as donné. Le pied de page est bien en bas de la fenetre même si le corps est peut remplis. Par contre j'ai un autre soucis... Je n'arrive pas à centrer l'image d'acceuil verticalement sans casser l'effet extensible de la page Smiley bawling .

Code xhtml


<body>

<div id="page">

<div id="premier-element"><img class="top1" src="top.gif" /></div>

<div id="menu"><h3></h3></div>

<div id="corps"><img class="acceuil" src="acceuil.png" alt="image d'acceuil"/></div>

<div id="piedpage">Mon pied de page</div>

</div>

</body>
</html>


Et le css


html
{
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
}

body
{
min-width: 760px;
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
}

#page
{
min-height: 100%;
margin: 0px auto;
width: 100%;
position: relative;
}

#page #premier-element
{
height: 75px;
background-color: rgb pink;
}

#menu
{
height: 26px;
background-color: purple;
}

#corps
{
text-align: center;
margin-bottom: 101px;
}

#piedpage
{
left: 0px;
width: 100%;
bottom: 0px;
position: absolute;
height: 101px;
background-color: pink;
}


Est-ce possible de centrer le contenu de la page avec cette technique ?
(vertical-align n'a aucun effet, seul text-align marche)

En fait cette idée de présentation m'est venu de ce site: http://www.habitchicago.com/
J'aimerai que mon image d'acceuil se comporte de la même facon (et le pied de page aussi d'ailleur mais ca c'est bon =).
Modifié par webmini (14 Jun 2009 - 16:05)
Sujet clos
Aller à