cradre qui s'adapte au contenu d'une page ?

Marsh Posté le 21-09-2008 à 18:02:04

Salut,

j'ai pris un site open source sur le net mais j'ai un petit probleme pour la mise en page quand je mets du contenu.
voila un exemple de ce que j'obtient si je rempli -> http://nialablue.free.fr/Nouveau%2 [...] lerie.html

J'aimerais donc savoir comme avoir le "cadre" au centre adapté en fonction du contenu que j'y mets
à la base j'ai definis les taille manuellement dans la feuille de style

Je met le style.css au cas ou :

/************* GENERAL CSS ************/

body {
margin: 0px;
padding: 0px;
background: #ffffff repeat-y center top;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #3399FF;
}

a {
font-weight: bold;
text-decoration: none;
color: #33CCFF;
}

a:hover {
text-decoration: underline;
color: #33CCFF;
}

/************* HEADER STUFF ************/

#header {
width: 973px;
height: 180px;
margin: 0px auto;
padding: 10px 0px;
background:url(http://www.freeseamlesstextures.com/texture_tutorials/stone_texture_for_tutorial.jpg);
color:#000000;
}

#header h1 {
margin: 0px;
padding: 0px 0px 0px 10px;
text-align: left;
color: #3399FF;
font-size: 3em;
text-transform: uppercase;
}

#header h2 {
margin: 0px;
padding: 0px 0px 0px 20px;
text-align: left;
font-size: 1.5em;
text-transform: uppercase;
}

/************* MENU ************/

#menu {
width: 973px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background-color: #4760e1;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

#menu li {
display: inline;
}

#menu a {
padding: 5px 15px;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
background-color: #333333;
}

/************* CONTENT ************/

#content {
width: 973px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
background-color: #4760e1;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
font-weight: normal;
}

#content p, #content ul, #content ol {
line-height: 150%;
}

#left {
float: left;
width: 683px;
height: 780px;
padding: 0px 20px 40px 20px;
background-color: #4760e1;
}

#right {
float: right;
width: 210px;
height: 780px;
padding: 0px 20px 40px 20px;
color: #99CCFF;
background-color: #4760e1;
}

/************* FOOTER ************/

#footer {
clear: both;
width: 969px;
height: 200px;
margin: 0px auto;
border-top: 0px solid #666666;
background:url(http://www.free-pictures-photos.com/texture/texture-08.jpg);
font-size: 9px;
text-align: center;
padding: 2px;
color: #333333;
}

Message édité par _Niala_ le 21-09-2008 à 18:10:59

---------------
Quake III Musika - Un coup de blues ?

Reply

Marsh Posté le 21-09-2008 à 18:02:04

Reply

Marsh Posté le 22-09-2008 à 20:43:42

:hello:

---------------
Quake III Musika - Un coup de blues ?

Reply

Marsh Posté le 23-09-2008 à 11:46:22

Ca vient de tes <div id="left"> <div id="right">dans ton div content.
Les div left et right ayant une hauteur définie à 780px, et ton content ne contenant que ces div, ton div content se contente de s'adapter à une hauteur de 780px, même si il y a des trucs qui dépassent du div left.

Bref, il te suffit de virer la hauteur fixe des div left et right.

Reply

Marsh Posté le 23-09-2008 à 11:57:58

yes, merci

---------------
Quake III Musika - Un coup de blues ?

Reply

cradre qui s'adapte au contenu d'une page ?

Sujets relatifs:

Leave a Replay