Partage

Site extensible ... en hauteur ...

Contraintes ...

1 décembre 2005 à 22:42:35

Bonjour à tous !

Voilà mon problème est stupide mais ... je n'arrive plus à rendre mon site extensible en hauteur ... :ninja:

Le problème est que je voudrais avoir une hauteur minimum de 1500px, comme indiqué dans la feuille de style que je vais vous copier, mais si je dépasse cette hauteur, le contenu " déborde " du bloc conteneur ...

Edit : Voici un lienlienlienlien vers un screen de mes derniers tests en local ...

Edit 2 : Un second screen qui explique mieux le problème

Feuille de style

body{
margin: 0 ;
padding: 0;
font-family : arial,"MS gothic","MS mincho";
font-size: 0.8em;
color : #000000;
background-color : #000000 ;
}

a:link {
color : #000000;
text-decoration : none;
}

a:active {
color : #333333;
text-decoration : none;
}

a:visited {
color : #000000;
text-decoration : none;
}

a:hover {
color : #333333;
text-decoration : none;
}
#global {
width: 760px;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
background: #215D83;
}
#texte {
background-color : #215D83;
height : 1500px;
}
#header {
width: 760px;
height: 200px;
margin-left: auto;
margin-right: auto;
padding: 0;
background: url('./header.jpg');
}
#gauche {
background-image: url('./10px1.jpg');
background-repeat: no-repeat;
width: 10px;
height: 250px;
padding: 0;
float: left;
}
#milieu {
width: 10px;
background: url('./10px2.jpg');
height: 250px;
float: left;
}
#droite {
width: 10px;
background: url('./10px3.jpg');
height: 250px;
float: left;
}
#menu {
width: 198px;
height: 99%;
background: #5B97BD;
float: left;
text-align : left;
border-width: 1px;
border-style: solid;
border-color: black;
}
#contenu {
width: 528px;
height: 99%;
background: #80B2D1;
float: left;
border-width: 1px;
border-style: solid;
border-color: black;
}
.inscription {
text-align : center;
margin-bottom : 15px;
}
.formulairearea{
margin-bottom : 2px;
}
#news {
width: 526px;
height: 20px;
margin-top : 10px ;
background: url('./news.jpg');
}
#rubriques {
width: 198px;
height: 20px;
background: url('./rubriques.jpg');
margin-top : 10px ;
}
#carte {
width: 198px;
height: 20px;
background: url('./carte.jpg');
}
#news_menu {
width: 198px;
height: 20px;
background: url('./news_menu.jpg');
margin-top : 10px ;
}
#avatar {
width : 100px;
height : 100px;
border-width: 1px;
border-style: solid;
border-color: black;
background-color : #000000 ;
}
.liste ul {
list-style-type : none;
margin-left: -35px;

}

.liste li {
font-weight : bold;
list-style-type : none;
margin-left: -35px;
padding-bottom:5px;
}
.news_menu li {
font-weight : bold;
list-style-type : none;
margin-left: -35px;
padding-bottom:5px;
font-size:75%;
}
.liste_carte li {
font-weight : bold;
text-align : center ;
font-size : 90%;
list-style-type : none;
margin-left: -45px;
}

.liste_carte ul {
font-weight : bold;
text-align : center ;
font-size : 90%;
list-style-type : none;
margin-left: -45px;
}
ul.liste_alphabet {
list-style-type : none;
font-weight : bold;

}
.liste_alphabet {
text-align : center;
margin-left: auto;
margin-right: auto;
width: 473px;
padding-bottom : 10px;
border-bottom : 2px solid #67746A;
background-color : #7F8F82;

}
.liste_alphabet li{
display : inline;
margin : 0 0 0 5px;
}
.liens {
width: 188px;
padding: 5px;
}
#formulaire {
width: 175px;
padding: 5px;
}
.bouton_login {
background-color : #21201B;
width: 80px;
height : 22px;
color : #FFFFFF;
border-width: 1px;
border-style: solid;
border-color: black;
text-align : center ;
}
.contenu_news {
margin-left: auto;
margin-right: auto;
width: 473px;
border-bottom : 2px solid #3679A2;
background-color : #80B2D1;
text-align : center ;
padding-top : 10px ;
padding-bottom: 10px ;
}
.titre_news {
text-align:left;
}
.date_news {
text-align:left;
font-size: 75%;
padding-bottom: 10px;
}
.amcommentaire {
margin-left: auto;
margin-right: auto;
width: 473px;
border-bottom : 2px solid #67746A;
background-color : #7F8F82;
text-align : left ;
padding-top : 10px ;
padding-bottom: 10px ;
}
#titre {
font-weight : bold;
margin-left: auto;
margin-right: auto;
width: 473px;
background-color : #7F8F82;
font-size: 1em;
text-align : left ;
}
#retour {
font-weight : bold;
margin-left: auto;
margin-right: auto;
width: 473px;
background-color : #7F8F82;
text-align : left ;
}
#screen {
float : right;
margin-right : 15px;
width: 200px;
height : 250px;
border-width: 1px;
border-style: solid;
border-color: black;
background-color : #7F8F82;
}
#titre_nouveautes {
font-weight : bold;
text-align : center;
}
.nouveautes {
margin-left: auto;
margin-right: auto;
width: 473px;
margin-top: 45px;
}
.image_nouveautes {
float : right;
width: 200px;
height : 250px;
border-width: 1px;
border-style: solid;
border-color: black;
background-color : #7F8F82;
}
.synopsis_nouveautes {
width: 250px;
}
#formulaire_centre {
width : 473px;
height : 100%;
margin-left: auto;
margin-right: auto;
}
.menu_rubriques {
margin-top : 0px ;
border-bottom : 1px solid #000000;
border-top : 1px solid #000000;
}

Voilà, un peu bordélique tout ça, mais faites attention aux premiers termes uniquement !

Merci

EDIT Modération : Merci d'utiliser les balises de mise en page du code prévues à cet effet

strucky

1 décembre 2005 à 22:49:20

Quel est le doctype de ta page ?

Donnes ton code html qui va avec, car seulement avec le css, c'est difficile :euh:

CpnNemo

1 décembre 2005 à 22:52:10

Citation : Pard

<?php session_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Kuzanagi Network</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="alternate" href="/rss_news.xml" type="application/rss+xml" title="News SDT" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="http://127.0.0.1/Kuzanagi%20Network/home/design/kuzanagihome.css" />
</head>
<body>

<? include ('haut.php') ?>

<div id="global">

<div id="texte">

<? include ('gauche.php') ?>

<?php
if (array_key_exists('page', $_GET)) {
switch ($_GET['page'])
{
case 'news' :
include('news.php');
break;

case 'inscription' :
include('inscription.php');
break;

case 'identification' :
include('identification.php');
break;

case 'recuperation' :
include('recuperation.php');
break;

case 'cookie' :
include('cookie.php');
break;

case 'carte' :
include('carte.php');
break;

case 'destroy' :
include('session_destroy.php');
break;

case 'animes' :
include('animes.php');
break;

case 'fiche_anime' :
include('fiche_anime.php');
break;
}
}
else
{
include('news.php');
}
?>

</div>
</div>
</body>
</html>

Citation : Pard

<div id="milieu"></div>
<div id="contenu">
<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div id="news"></div>
<div class="contenu_news">
<div class="titre_news"><h2>Ouverture du site</h2></div>
<div class="date_news"><p>Pard, le 31.01.2006 à 15h47</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis eros. Mauris rhoncus. Curabitur ipsum felis, fringilla sed, faucibus a, facilisis sed, dui. Praesent commodo ullamcorper est. Vestibulum leo. Cras venenatis, tortor et cursus elementum, orci mauris porta lorem, sed ornare lectus lorem ac nisl. Sed rutrum nisl sed lorem. Vivamus porttitor accumsan sapien. Suspendisse blandit ipsum at sapien. Vestibulum eu nulla. Nullam sit amet tortor. Suspendisse volutpat felis sit amet erat.<br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet eros non velit ornare laoreet. Sed at lorem consectetuer augue rutrum semper. Nulla eleifend risus at tellus. Nullam sed purus. Suspendisse neque nulla, convallis ut, sagittis in, porta nec, pede. Donec a nisl. Donec elit metus, cursus et, hendrerit eu, posuere in, elit. Mauris tortor. Cras cursus, eros quis consectetuer condimentum, dolor enim ornare ipsum, eget iaculis risus sem vel tellus. Fusce felis. Nullam justo dolor, viverra et, vehicula sit amet, vestibulum eleifend, ipsum.
</p>
</div>

<div class="contenu_news">
<div class="titre_news"><h2>Ouverture du site</h2></div>
<div class="date_news"><p>Pard, le 31.01.2006 à 15h47</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis eros. Mauris rhoncus. Curabitur ipsum felis, fringilla sed, faucibus a, facilisis sed, dui. Praesent commodo ullamcorper est. Vestibulum leo. Cras venenatis, tortor et cursus elementum, orci mauris porta lorem, sed ornare lectus lorem ac nisl. Sed rutrum nisl sed lorem. Vivamus porttitor accumsan sapien. Suspendisse blandit ipsum at sapien. Vestibulum eu nulla. Nullam sit amet tortor. Suspendisse volutpat felis sit amet erat.<br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet eros non velit ornare laoreet. Sed at lorem consectetuer augue rutrum semper. Nulla eleifend risus at tellus. Nullam sed purus. Suspendisse neque nulla, convallis ut, sagittis in, porta nec, pede. Donec a nisl. Donec elit metus, cursus et, hendrerit eu, posuere in, elit. Mauris tortor. Cras cursus, eros quis consectetuer condimentum, dolor enim ornare ipsum, eget iaculis risus sem vel tellus. Fusce felis. Nullam justo dolor, viverra et, vehicula sit amet, vestibulum eleifend, ipsum.
</p>
</div>

<div class="contenu_news">
<div class="titre_news"><h2>Ouverture du site</h2></div>
<div class="date_news"><p>Pard, le 31.01.2006 à 15h47</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis eros. Mauris rhoncus. Curabitur ipsum felis, fringilla sed, faucibus a, facilisis sed, dui. Praesent commodo ullamcorper est. Vestibulum leo. Cras venenatis, tortor et cursus elementum, orci mauris porta lorem, sed ornare lectus lorem ac nisl. Sed rutrum nisl sed lorem. Vivamus porttitor accumsan sapien. Suspendisse blandit ipsum at sapien. Vestibulum eu nulla. Nullam sit amet tortor. Suspendisse volutpat felis sit amet erat.<br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet eros non velit ornare laoreet. Sed at lorem consectetuer augue rutrum semper. Nulla eleifend risus at tellus. Nullam sed purus. Suspendisse neque nulla, convallis ut, sagittis in, porta nec, pede. Donec a nisl. Donec elit metus, cursus et, hendrerit eu, posuere in, elit. Mauris tortor. Cras cursus, eros quis consectetuer condimentum, dolor enim ornare ipsum, eget iaculis risus sem vel tellus. Fusce felis. Nullam justo dolor, viverra et, vehicula sit amet, vestibulum eleifend, ipsum.
</p>
</div>

<div class="contenu_news">
<div class="titre_news"><h2>Ouverture du site</h2></div>
<div class="date_news"><p>Pard, le 31.01.2006 à 15h47</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis eros. Mauris rhoncus. Curabitur ipsum felis, fringilla sed, faucibus a, facilisis sed, dui. Praesent commodo ullamcorper est. Vestibulum leo. Cras venenatis, tortor et cursus elementum, orci mauris porta lorem, sed ornare lectus lorem ac nisl. Sed rutrum nisl sed lorem. Vivamus porttitor accumsan sapien. Suspendisse blandit ipsum at sapien. Vestibulum eu nulla. Nullam sit amet tortor. Suspendisse volutpat felis sit amet erat.<br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet eros non velit ornare laoreet. Sed at lorem consectetuer augue rutrum semper. Nulla eleifend risus at tellus. Nullam sed purus. Suspendisse neque nulla, convallis ut, sagittis in, porta nec, pede. Donec a nisl. Donec elit metus, cursus et, hendrerit eu, posuere in, elit. Mauris tortor. Cras cursus, eros quis consectetuer condimentum, dolor enim ornare ipsum, eget iaculis risus sem vel tellus. Fusce felis. Nullam justo dolor, viverra et, vehicula sit amet, vestibulum eleifend, ipsum.
</p>
</div>

<div class="contenu_news">
<div class="titre_news"><h2>Ouverture du site</h2></div>
<div class="date_news"><p>Pard, le 31.01.2006 à 15h47</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis eros. Mauris rhoncus. Curabitur ipsum felis, fringilla sed, faucibus a, facilisis sed, dui. Praesent commodo ullamcorper est. Vestibulum leo. Cras venenatis, tortor et cursus elementum, orci mauris porta lorem, sed ornare lectus lorem ac nisl. Sed rutrum nisl sed lorem. Vivamus porttitor accumsan sapien. Suspendisse blandit ipsum at sapien. Vestibulum eu nulla. Nullam sit amet tortor. Suspendisse volutpat felis sit amet erat.<br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet eros non velit ornare laoreet. Sed at lorem consectetuer augue rutrum semper. Nulla eleifend risus at tellus. Nullam sed purus. Suspendisse neque nulla, convallis ut, sagittis in, porta nec, pede. Donec a nisl. Donec elit metus, cursus et, hendrerit eu, posuere in, elit. Mauris tortor. Cras cursus, eros quis consectetuer condimentum, dolor enim ornare ipsum, eget iaculis risus sem vel tellus. Fusce felis. Nullam justo dolor, viverra et, vehicula sit amet, vestibulum eleifend, ipsum.
</p>
</div>

</div>
<div id="droite"></div>

Mylans

1 décembre 2005 à 22:57:04

en hauteur.... je sais pas trop, en largeur c'esr plus simple

strucky

1 décembre 2005 à 23:03:51

Est-ce que

#texte {
background-color : #215D83;
height : 1500px;
}

Est l'id des balises qui contiennent ton texte, désolé, je l'ai pas vu dans ton code.

Si oui, essaies :

#texte {
background-color : #215D83;
min-height : 1500px; /* sauf IE */
height: 100%;
_height: 1500px; /* pour IE seulement */
}

ps: utilises les balises codes, cela rend le code plus facile à lire

CpnNemo

1 décembre 2005 à 23:05:25

Non, ça ne marche pas ...

Et je ne sais pas ce que ce sont les balises codes !

strucky

1 décembre 2005 à 23:20:08

Et celui-ci :

#contenu {
width: 528px;
height: 99%;
background: #80B2D1;
float: left;
border-width: 1px;
border-style: solid;
border-color: black;
}

C'est celui qui contient toute tes news ?
Essaies en enlevant le height: 99%

Citation : Pard

Et je ne sais pas ce que ce sont les balises codes !

Je parle des balises <code> du forum

CpnNemo

1 décembre 2005 à 23:42:16

Ca ne marche toujours pas ...

Bon, je vais essayer de bidouiller autre chose ... o_O

jp949

2 décembre 2005 à 5:53:53

dans ton dtd tu as une erreur " 1.1 strict et <meta content text/html > "

CpnNemo

2 décembre 2005 à 12:42:36

Euh ... et ? o_O

gcyrillus

2 décembre 2005 à 17:01:27

bonjour, pour le xhtml1.1, si tu ne te sert pas de xml, ou autre langage de ce type, repasse en xhtml1.0 strict, pas besoin de recoder ta page , mais elle sera vraiment valide ... ce probleme de choix entre 1.1 et 1.0 a ete maintes fois expliqué sur le web , pour en savoir plus, aide toi de google par exemple.

Il faut savoir que des que tu donne une hauteur a un element , sa hauteur reste fixe, sauf dans IE !
et si tu met ensemble dans le css min-height:100px; et height:100px; . le min-height(ou max-height) ne sert a rien ! .

pour info, une façon de faire une hauteur minimale parmis d'autres( perso je prefere les commentaires conditionnels):

html,body {
min-height:1500px;
height:auto!important;/* pour ne pas bloquer la hauteur a 100% de la fenetre */
height:1500px;/* Ie ne comprend pas min-height mais gere height de cette façon ! */
}

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

CpnNemo

2 décembre 2005 à 20:09:22

Je ne comprends pas ... tu me dis que mettre min-height et height ensemble est inutile et ne marche pas ...

Pourtant dans le code que tu me donnes, il y a les deux ... o_O

headbanger

2 décembre 2005 à 21:04:09

euh moi je croyait que c'etait pas possible en heutaur que ca se reglait par rapport a la resolution des gens

gcyrillus

2 décembre 2005 à 22:07:06

bonjour,
excuse moi,
entre les 2 lignes min-height et height, tu as aussi height:auto!important; , cette ligne indique 2 choses:

height:auto; d'abord, qui comme ça est la valeur par defaut de height et qui autorise l'element a s'aggrandir en hauteur.
puis le "hack" ou "contournement" !important, qui indique au navigateur d'ignorer toute nouvelle valeur rencontré pour height.,
Exepté IE qui ne comprend pas ça et qui va lire height:1500px; , du coup IE et les autres savent que la hauteur minimale ou de base pour cette elemnt est 1500px.

bonne soirée

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

CpnNemo

3 décembre 2005 à 0:23:33

Oui, désormais je comprends mais je pense que mon code n'est pas très astucieux, lourd ... car ta méthode ne marche toujours pas ... pourtant ça devrait ... o_O

gcyrillus

3 décembre 2005 à 10:56:42

bonjour,
si tu n'arrive pas a appliqué le min-height a #global, enleve dans le css son height:100%;
et dans dans ce div, ajoute en dernier une balise supplementaire comme un div auquel tu applique par le biais du css (et oui, encore !) un clear:both;
(html :

css

.etire {margin:0;clear:both;}

)
le clear both, est suffisant, mais tu peut "surcharger" le css pour en modifier l'aspect et tu peut "classiquement" t'en servir pour y placer un pied de page.
a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

CpnNemo

4 décembre 2005 à 18:42:47

Merci, je vais essayer !