Dimension d'un site(html,php,css)

Version imprimable

04/07/2007, 13h17
kayvinn

Dimension d'un site(html,php,css)

Bonjour,

J'ai un petit problème persistant qui persiste(lol) malgrès des recherches sur le net etc. En faite, plutot que de piocher plusieurs petits éléments de chaques sites qui parlent de la conception web, je vais vous poser une question qui regroupe tout ^^.

Quels dimensions prendre pour que le resultat final soit bon via tout les navigateurs? (les unités à utiliser, les dimensions, etc.)

Parce que, le site que je suis en train de faire est :

- parfaitement bon avec Interet Explorer en 800*600, 1024*768, et les autres résolutions.

- Mais avec Mozilla Firefox, en 800*600 les divs sont décallées, en 1024*768 c'est bon(grace au "_" en css qui permet d'etre pris en compte par IE et pas FF).

Mais comment avoir un bon alignement avec FF et IE si FF se refère: non pas a la div relative, mais au bord de la page ?
puisque en 800*600, le bord du site=le bord de la page totale
et en 1024*768, le bord du site=lebord de la page + ~100px

Voila voila, j'espere ma question a ete comprise^^ et merci de vos réponses:)
04/07/2007, 13h28
Strix

Salut et bienvenue sur Developpez.net ;)

Citation:

puisque en 800*600, le bord du site=le bord de la page totale
et en 1024*768, le bord du site=lebord de la page + ~100px

Je comprends pas tout. Tu peux rajouter du code HTML ainsi que ton CSS ?

Merci

Merci de répondre:) et donc euh voila, avec IE quelque sois la résolution, ma div"conteneur" est centrer et les divs à l'interieur se positionne par rapport a la div"conteneur". mais avec FF les divs à l'interieur se positionne par rapport au bord de la page (dur a expliquer dsl je fais de mon mieu:p).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="motif.png">
<div class="conteneur">
<div class="design" align="center"><img src="design.png"></img>
<?php
if (isset($_COOKIE["cookident"])) {?>
<div class="log"><center>
Bonjour<br>
<a href="deconect.php">Déconnection</a>
</center></div>
<?} else {?>
<div class="log"><center>
<form method="post" action="identify.php">
<input type="text" class="champs" name="com" maxlength="20" value="Pseudo"><br>
<input type="password" class="champs" name="mot" maxlength="16" size="16" value="password"><br>
<input type="submit" value="S'identifier" class="boutons"><br>
<a href="sregister.php" class="linkreg"><b>S'inscrire</b></a></center>
</form>
</div></div>
<?}?>
</div>
</body></html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.linkreg {
   position: absolute;
   margin-top: .5em;
   margin-left: .9em;
}
 
.champs {
   border-width: 1px;
   border-color: #000000;
   font-size: 10;
   background-color: #EEEEEE;
   width: 9em;
}
 
.boutons {
   border-width: 1px;
   border-color: #000000;
   font-size: 10;
   background-color: #EEEEEE;   
}
 
.conteneur {
   margin-top: -1em;
   margin-left: -0.6em;
   margin-right: -0.6em;
}
 
.design {
   position: relative;
   margin-top: 0em;
   margin-left: 0em;
}
 
.log {
   position: absolute;
   left: 6.9em;_left: .9em;
   top: 6.7em;_top: 6.5em;
}

Voilà ce que tu peux faire pour que ton conteneur soit centré (en horizontal et vertical) et en position absolute
Code:

1 2 3 4 5 6 7 8 9 .conteneur { position:absolute; margin-left: - /* hauteur/2 */; margin-top: - /* largeur/2 */; top:50%; left:50%; width: /* largeur */; height: /* hauteur */; }

04/07/2007, 14h12
kayvinn

oui mais ensuite, les divs a l'interieurs?

en faite, c'est pour placer les divs a l'interieur de celle "conteneur" avec FF et dans toutes les resolutions. Par exemple, le div"log" je veux qu'elle reste dans un espace prevu-pour dans le design(en haut a gauche du design) et ca avec IE et FF dans toutes les resolutions^^

Et donc je positionne la div"log" mais avec IE elle se positionne par rapport a la div conteneur, ce qui la place bonne dans toutes les résolutions.
Mais avec FF la div"log" se positionne par rapport au bord de la page. en 1024*768 aucun probleme mais en 800*600 ou autre ben c'est a coté.
04/07/2007, 23h06
kayvinn

Voila mon probleme en image ;)

alors, avec IE dans toutes les résolutions : c'est bon car le 1em d'espacement se referencie au bord de la div qui se centre.
http://img69.imageshack.us/img69/1248/iexj1.png

Le drame avec FF, la div qui contient (pseudo pass pour s'identifier) s'espace de 7em par rapport au bord de la page. Donc en 1024*768 il se place a 7em, parfait car 7em= l'espace qui a entre le bord du naviateur et le debut de la page qui est optimiser 800px de large. Mais en 800*600 il se place tjrs a 7em du bord de la page, et le bord du navigateur en 800*600 = le bord de la page du site^^

http://img235.imageshack.us/img235/2675/ff800600ow1.png