28221 sujets

CSS et mise en forme, CSS3

Modification d'un modèle de mise en page (sans succès :( )

Salut à tous,
j'essaie sans succès de modifier le modèle suivant "Largeur fluide et hauteur fluide (%), header / menu gauche / contenu scrollable / footer" dispo sur la page des modèles mais par contre je n'arrive pa a obtenir ce que je veux c'est à dire :
- une cellule contenu et menu en pourcentage
- un footer de hauteur fixe, collé sur le bas du navigateur
- et un ascenceur dans le menu de gauche

Merci d'avance à ceux qui pourront m'aider
P.A.
voici le code de la page :
<!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> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("site.css");
</style>
<script language="JavaScript" type="text/javascript" src="fonctions.js"></script>
</head>

<body>
<div class="conteneur">
<div class="header">
<p>entete de la page</p>
</div>

<div class="centre">
<p>div que j'ai rajouté pour contenir menu et contenu</p>
<div class="menu"><p>menu gauche de largeur fixe : 150px ms que je voudrais scrollable aussi</p>

<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul><ul class="menugauche">


</div>
<div class="contenu">
<p>partie "frame" scrollable </p>

</div>
</div>
<div class="footer">contenu du footer </div>
</div>


<script language="JavaScript" type="text/javascript">
MM_preloadImages('images/menu_r1_c2_ON.jpg','images/menu_r1_c3_ON.jpg','images/menu_r1_c4_ON.jpg','images/menu_r1_c5_ON.jpg','images/menu_r1_c6_ON.jpg');
</script>
</body>
</html>


et la CSS :
/* CSS issu des tutoriels www.alsacreations.com/articles */
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}
.conteneur { /*le conteneur global du site, qui sera centré */
width: 780px;
left: 50%;
margin-left: -390px;
height: 100%;
position: absolute;
background-color: #99CC99;
}

.header {
background-color: #99CCCC;
}

.centre{
position: relative;
color:#0000ff;
background-color:#00ff00;
}



Merciiiiiiii
Administrateur
Bonjour, et bienvenue à toi sur ce forum,

Comme c'est ton premier post sur le forum je t'invite à passer lire ce post pour bien vérifier que tu as suivi la bonne démarche :
Méthodologie à lire avant de poster dans ce salon

Pour les extraits de code, comme le suggère l'Aide du forum, il est chaudement recommandé de systématiquement baliser les codes HTML ou CSS avec le bouton CODE approprié ([ code][ /code] sans les espaces), cela facilite la lecture de tout le monde et augmente les chances qu'un des membres s'interesse au problème... et surtout : cela évitera d'avoir des décalages de pages énormes comme avec ton code actuel. Je t'invite donc à le modifier en urgence.

Si le coeur t'en dit tu peux aussi passer au bar du forum pour les présentations.
Sujet clos
Aller à