Problème de positionnement vertical

26 décembre 2005 à 3:29:26

J'ai toujours eu un peu de mal pour le positionnement avec css, chaque fois j'essaye plein de trucs jusqu'à ce que ça marche, mais j'ai du mal à comprendre la logique de certaines choses...

Enfin bref, j'ai un petit problème dans l'affichage d'un design, et j'aimerais bien qu'on m'explique comment le résoudre si possible.

Voici mon code xhtml :

Et voilà mon code css :

body
{
width:816px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
text-align:center;
background-color:#C0C0C0;
z-index:0;
}

p
{
margin: 0px;
}

#principal
{
position:absolute;
width:816px;
height:100%;
margin:0px;
background-color:#000000;
text-align:center;
z-index:1;
}

#line
{
position:relative;
width:806px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
background-image:url("line.gif");
text-align:center;
z-index:2;
}

#ban01
{
position:absolute;
width:538px;
height:103px;
margin-left:3px;
margin-right:265px;
margin-top:0px;
background-image:url("ban01.gif");
z-index:4;
}

#ban02
{
position:absolute;
width:187px;
height:103px;
margin-left:541px;
margin-right:78px;
margin-top:0px;
background-image:url("ban02.gif");
z-index:4;
}

#ban03
{
position:absolute;
width:75px;
height:103px;
margin-left:728px;
margin-right:3px;
margin-top:0px;
background-image:url("ban03.gif");
z-index:4;
}

#menu
{
position:absolute;
width:800px;
height:31px;
margin-left:3px;
margin-right:13px;
margin-top:103px;
background-image:url("menu.gif");
text-align:center;
z-index:4;
}

#menu a
{
text-decoration:none;
color:#000000;
font-weight:bold;
font-family:verdana,arial,helvetica,serif;
font-size:13px;
}

#menu a:hover
{
color:#FFFFFF;
}

#menu p
{
margin:5px;
}

#menu #lien
{
margin-left:10px;
margin-right:10px;
}

#centre
{
position:absolute;
width:800px;
height:100%;
margin-left:3px;
margin-right:13px;
margin-top:0px;
background-image:url("fond.gif");
z-index:3;
}

#copyrights
{
position:absolute;
width:800px;
height:30px;
bottom:0px;
margin-left:3px;
margin-right:13px;
margin-top:auto;
margin-bottom:0px;
background-color:#777777;
z-index:5;
text-align:center;
color:#000000;
font-size:10px;
font-family:verdana,arial,helvetica;
}

#copyrights p
{
margin:3px;
}

#copyrights a
{
text-decoration:none;
color:#000000;
font-weight:bold;
font-family:verdana,arial,helvetica,serif;
font-size:10px;
}

#copyrights a:hover
{
color:#FFFFFF;
}

Alors, voilà mon problème. En fait, les lignes avec les "blabla" dans le <div id="centre"> ont été ajoutées pour tester l'extensibilité du design dans sa hauteur. Et justement, ben ça marche pas.
Lorsque j'ai défini des hauteurs de 100%, le design prend en fait en compte la hauteur de ma fenêtre, et s'ajuste à celle-ci. Mais si mon texte est plus long que la fenêtre, lorsque je fais défiler la page vers le bas, je m'apperçois que le texte "continue" plus bas que le design...

Je vais vous montrer un screen histoire que vous me compreniez :

Image utilisateur

Sinon, il se peut que j'ai mal fait certaines choses, justement ça m'aiderait beaucoup à moins faire ce genre d'erreurs si quelqu'un avait le temps de m'expliquer ce qui ne va pas...

Merci d'avance.

atly

26 décembre 2005 à 3:34:16

Sans regarder ton code, d'après ce que tu dis je me demande bien pourquoi tu mets des "height:100%;".

MastaKillah

26 décembre 2005 à 3:40:14

Ben parce-que si je les enlève, je ne vois plus ni <div id="principal">, ni <div id="line">, ni <div id="copyrights">, et je ne vois plus non plus le fond de <div id="centre">...

scaler

26 décembre 2005 à 3:46:05

yop

c'est bien le problème d'utiliser des positinnemens absolus tout le temps. On peut pas toujours faire ainsi, utilise des flottants

avec un clear sur le copyright => Si besoin ; sinon reste dans le flux.
Et puis bonjour la sémantique... Utilise un liste non ordonnée pour ton menu.

++

atly

26 décembre 2005 à 3:47:24

Mais pourquoi tu forces autant la main à ton design ?
Pourquoi tu fous des positionnements absolus alors que ce n'est pas nécessaire ? Pourquoi tu définis des width/height non nécessaires ?
Pourquoi tu cherches à faire compliqué avec une structure de design des plus simples, sans vouloir t'offenser ?

Edit : Oups, devancé.

jp949

26 décembre 2005 à 4:30:56

et puis tu mets height:100%; , mais de quoi 100%?
definis d'abord html et body , ce qui ne changera rien au probleme des position:absolute mais c'est un minimum a faire quand on utilise les %
de preciser le % de quel element

MastaKillah

25 janvier 2006 à 16:42:57

B'jour, bon ça faisait un moment que je n'avais plus touché à ça...
Y'a pas si longtemps j'ai recommencé le truc du début, et en effet je me prenais pas mal la tête.

Voici mon code tel qu'il est actuellement, je vous parlerai ensuite de mes deux pitits problèmes.

<!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" >
<head>
<title>MastaWeb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="MastaWeb by Flonum" href="themes/flonum/style2.css" />
<link rel="icon" type="image/x-icon" href="pics/site/icone-mastaweb.ico" />
</head>
<body>
<div id="ban">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="816" height="104">
<param name="movie" value="ban.swf">
<param name="quality" value="high">
<embed src="themes/flonum/ban.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="816" height="104"></embed></object>
</div>
<div id="texte-ban">
</div>
<div id="menu">
<ul>
<li><a href="index.php?page=accueil" title="Accueil et News de MastaWeb">Accueil</a></li>
<li>::</li>
<li><a href="index.php?page=services" title="Présentation et descriptif des services proposés">Services</a></li>
<li>::</li>
<li><a href="index.php?page=sites" title="Liste des sites déjà hébergés par MastaWeb">Sites hébergés</a></li>
<li>::</li>
<li><a href="index.php?page=portfolio" title="Présentation des créations MastaWeb">Portfolio</a></li>
<li>::</li>
<li><a href="index.php?page=perso" title="Blogs et Créations personnelles de chaque membre de MastaWeb">Espaces personnels</a></li>
<li>::</li>
<li><a href="http://www.forum.mastaweb.com" title="Forum de discussions de MastaWeb">Forum</a></li>
<li>::</li>
<li><a href="index.php?page=liens" title="Liens vers nos sites préférés">Liens</a></li>
<li>::</li>
<li><a href="mailto:mastakillah@mastaweb.com" title="Pour nous contacter...">Contact</a></li>
</ul>
</div>
<div id="centre">
<?php
echo("Ca y est, la partie xhtml et css est terminée et totalement aux normes.<br />
De plus, c'est vrai que le code est beaucoup plus simple comme ça. Je me prenais vraiment trop la tête.<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />

Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />
Je vais pouvoir m'attaquer aux codes php à intégrer au site !<br />";);
?>
</div>
<div id="copyrights">
<p>
MastaWeb © 2005 - 2006
<br />
Gestion et réalisation : Matthieu Denis
(<a href="mailto:mastakillah@mastaweb.com" title="Cliquez pour envoyer un mail à Masta">MastaKillah</a>)
& Florian Dreyer
(<a href="mailto:flonum@mastaweb.com" title="Cliquez pour envoyer un mail à Flonum">Flonum</a>)
</p>
</div>
</body>
</html>

body
{
width:816px;
margin:auto;
background-color:#C0C0C0;
}

#ban
{
width:816px;
height:104px;
position:relative;
top:0px;
}

#menu
{
position:relative;
width:792px;
height:31px;
margin:0px;
padding-left:12px;
padding-right:12px;
background-image:url("menu.gif");
font-weight:bold;
}

#menu a
{
text-decoration:none;
color:#000000;
font-family:verdana,arial,helvetica,serif;
font-size:12px;
}

#menu a:hover
{
color:#FFFFFF;
}

#menu ul
{
margin:0px;
list-style-type:none;
}

#menu li
{
float:left;
margin-top:4px;
}

#centre
{
position:relative;
width:796px;
padding:10px;
color:#330000;
font-family:verdana,arial,helvetica,serif;
font-size:14px;
text-align:justify;
background-image:url("fond.gif");
}

#copyrights
{
position:relative;
width:816px;
height:31px;
bottom:0px;
background-image:url("menu.gif");
text-align:center;
color:#000000;
font-size:10px;
font-family:verdana,arial,helvetica;
}

#copyrights p
{
margin:0px;
}

#copyrights a
{
color:#000000;
text-decoration:none;
font-weight:bold;
}

#copyrights a:hover
{
color:#FFFFFF;
}

Voici le screenshot de ce que ça donne :
Image utilisateur

En fait, ce que j'aimerais, c'est que le design, peut importe la longueur du texte à l'intérieur, prenne la hauteur totale de la page.
J'ai multiplié les essais... tous plus foireux les uns que les autres. Je suis arrivé à des résultats où cela marchait sous IE, mais pas sous Firefox ni sous Opera ! o_O

Certaines fois j'y arrivais à peu près, mais lorsque mon texte était plus long que la taille de la fenêtre, et que je descendait plus bas dans la page, ça me faisait n'importe quoi (la zone de copyrights restait à sa place, le texte continuait tout seul dans le vide, etc).
J'abandonne donc mes essais qui tiennent plus du bidouillage que d'autre chose et je viens ici chercher un peu d'aide.

Un autre problème, que je pensais plus simple à régler, m'embête un peu. J'ai fait mon menu avec une liste <ul>, et j'aimerais que les différents liens qui le composent soient centrés dans la largeur de la page. Pour cela, j'avais réussi en mettant des margin-left et margin-right aux balises <li> de mon menu. Seulement il me reste un problème bizarre.
Sous Firefox, le menu est automatiquement décalé sur la droite, sans que j'arrive à le déplacer, et sous IE et Opera, il est automatiquement collé au bord gauche, toujours sans que j'arrive à le déplacer. Pas moyen d'obtenir un résultat correct.

Voilà, ce sont deux petits problèmes de rien du tout, mais dont la solution m'échappe, et pourtant ce ne sont pas les tentatives qui manquent... Merci à ceux qui prendront le temps de m'aider, ça me permettrait de mieux comprendre quelques notions que je n'ai toujours pas saisies apparemment...

EDIT = Ah, autre chose...

Sous IE, la bannière en flash n'apparaît pas... Le code d'intégration du .swf est il mauvais ?