Forum Développeur - Administration serveur, programmation et base de données

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

mitchum

Mar 13 2005, 02:39 PM

salut a tous,
pour ma mise en page CSS j'ai un div pour le centre de ma page.
mais celui ci ne va pas jusqu'en bas de la page.
comment faire?

code source de la page:

CODE

<!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="en" lang="en-AU">

<head>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="Sinorca (screen)" />

<title>titre</title>

</head>

<body>



<div id="top"><a href="http://www.lemotocross.com" class="doNotDisplay doNotPrint">www.lemotocrosss.com, le motocross en Normandie</a></div>



<div id="header">

<div class="midHeader"></div>

<div class="subHeader">

<span class="doNotDisplay">Navigation:</span>

<a href="#">Lien</a> |

<a href="#">Lien</a> |

<a href="#">Lien</a> |

<a href="#">Lien</a> |

<a href="#">Lien</a>

</div>

</div>



<div id="side-bar">

<div>

<ul>

<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>

</ul>

</div>

<div class="lighterBackground">

<p class="sideBarTitle">Zone membre</p>

hjhjhj

</div>

<div class="lighterBackground">

<p class="sideBarTitle">Sponsors</p>

logo sponsors + lien

</div>

</div>



<div id="main-copy">

<p>ici on met le texte de la page</p>

</div>



<div id="footer">

sdds

</div>

</body>

</html>

code source du CSS:

CODE

body {

color: black;

background-color: #f3f3f3;

font-family: verdana, helvetica, arial, sans-serif;

font-size: 11px; /* Enables font size scaling in MSIE */

margin: 0;

padding: 0;

width: 980px;

}

html > body {

font-size: 8.5pt;

}

.doNotDisplay {

display: none;

}

/* ##### Header ##### */

.midHeader {

background-image: url(header.jpg);

height: 264px;

}

.subHeader {

color: white;

background-color: #585858;

border-bottom: 1px solid #ff6633;

padding: 1ex 1ex 1ex 1.5mm;

}

.subHeader a {

color: white;

background-color: transparent;

text-decoration: none;

font-weight: bold;

margin: 0;

padding: 0 0.75ex 0 0.5ex;

}

.subHeader a:hover {

text-decoration: underline;

}

/* ##### Side Bar ##### */

#side-bar {

width: 15em;

float: left;

clear: left;

border-right: 1px solid #ff6633;

background-color: #585858;

}

#side-bar div {

/*border-bottom: 1px solid #ff6633;*/

}

.sideBarTitle {

font-weight: bold;

margin: 0 0 0.5em 2.5mm;

padding: 1em 0 0 0;

color: #f63;

text-align: center;

}

#side-bar ul {

list-style-type: none;

list-style-position: outside;

margin: 0;

padding: 0 0 1.1em 0;

}

#side-bar li {

margin: 0;

padding: 0.1ex 0; /* Circumvents a rendering bug (?) in MSIE 6.0 */

}

#side-bar a, .thisPage {

color: #f3f3f3;

background-color: transparent;

text-decoration: none;

margin: 0;

padding: 0.75em 1ex 0.75em 5mm;

display: block;

font-weight: bold;

}

#side-bar a:hover {

color: #ff6633;

background-color: #f3f3f3;

text-decoration: none;

}

.sideBarText {

line-height: 1.5em;

margin: 0 0 1em 0;

padding: 0 1.5ex 0 2.5mm;

display: block;

}

#side-bar .sideBarText a {

text-decoration: underline;

margin: 0;

padding: 0;

display: inline;

}

#side-bar .sideBarText a:hover {

color: rgb(0,102,204);

background-color: transparent;

text-decoration: none;

}

.lighterBackground {

color: #ffffff;

background-color: #585858;

}

/* ##### Main Copy ##### */

#main-copy {

color: black;

background-color: white;

text-align: justify;

line-height: 1.5em;

margin: 0 0 0 15em;

padding: 0.5mm 5mm 5mm 5mm;

border-left: 1px solid #ff6633;

}

#main-copy p {

margin: 1em 1ex 2em 1ex;

padding: 0;

}

#main-copy a {

color: rgb(0,102,204);

background-color: transparent;

text-decoration: underline;

}

#main-copy a:hover {

text-decoration: none;

}

#main-copy h1 {

color: white;

background-color: rgb(100,135,220);

font-size: 100%;

font-weight: bold;

margin: 3em 0 0 0;

padding: 0.5ex 0 0.5ex 1ex;

}

/* ##### Footer ##### */

#footer {

color: white;

background-color: #585858;

font-size: 91%;

margin: 0;

/*padding: 1em 2.5mm 2.5ex 2.5mm;*/

clear: both;

height: 20px;

border-top: 1px solid #ff6633;

}

#footer a {

color: white;

background-color: transparent;

text-decoration: underline;

}

#footer a:hover {

text-decoration: none;

}

merci beaucoup pour votre aide.

Antoine

Mar 13 2005, 08:18 PM

CODE

body, html {

height: 100%

}

body>html {

min-height: 100%

height: auto;

}

#nomdetadiv {

height 100%;

}

De mémoire, si mes souvenires sont bons.

mitchum

Mar 14 2005, 07:36 AM

salut,
merci de ta reponse, masi ca ne change rien sur IE et firefox.
a+

RaphaelG

Mar 14 2005, 09:28 AM

Antoine a fait un ptit oubli :

CODE

#nomdetadiv {

height : 100%;

}

jep

Mar 14 2005, 09:38 AM

Il a aussi fait une petite erreur là :

CODE

html>body {

min-height: 100%

height: auto;

}

:wink:

mitchum

Mar 14 2005, 09:51 AM

oui ca marche, merci mais en fait ca fait une grande page, alors que moi je voudrais queca fasse au minimum la taille du menu sur la gauche, et maxi la taille du texte au centre.
pourtant j'ia regardé le tuto d'aslacreation sur les colonnes qui poussent l'autre, mais je n'y arrive pas...

RaphaelG

Mar 14 2005, 10:01 AM

Je n'ai pas compris.
Si tu veux deux colonnes qui s'étire l'une et l'autre en fonction du contenu, il faut procéder autrement.
Supprimer les positionnements absolus et les remplacer par des flottants, en utilisant un élément en "clear : both" pour permettre à l'ensemble de s'adapter.

mitchum

Mar 14 2005, 10:03 AM

Ok daccord, je m'etait mal exprimé, desolé du derrangement, je vais aller voir ca.
merci

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.