[css] Ascenseur horizontal inutile

**tofito** · 12/10/2008, 18h04

Bonjour,

Laissez moi vous faire un dessin plutôt qu'un long discours...
Regardez mon site en développement ici
Comme vous pouvez le voir sous firefox, l'affichage est normal... (une barre bleue sur 50% de la largeur de l'écran, une barre blanche sur le reste...) Par contre si vous regardez cette page sous ie6, l'affichage est le même mais il y a un élément en plus en bas de l'écran: un ascenseur horizontal qui ne sert à rien...
Comme il ne sert à rien, j'aimerais bien m'en débarrasser...
Quelqu'un verrait-il comment faire?
Merci

le code html:

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">	
<head>
<title>titre</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">@import url(normal.css);</style>
</head>
 
<body>
 
	<div id="header_background_left">
		<div id="header_background_right">
		</div>		
	</div>
 
</body>
</html>

le code css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
* {margin: 0px; padding: 0px;}
body {font: 12px verdana, arial, helvetica, sans-serif; background: #ffffff; overflow: hidden;}
 
#header_background_left {left: 0px; width: 100%; height: 80px; background: url(http://dladobe.free.fr/header-background-left.gif) repeat-x;}
#header_background_right {width: 50%; margin-left: 50%; height: 80px; background: url(http://dladobe.free.fr/header-background-right.gif) repeat-x;}

**Bisûnûrs** · 12/10/2008, 19h40

Le problème n'apparait sur IE6 que dans certains cas, apparemment, celui où le calcul de la marge gauche et de la largeur ne coïncide pas, c'est à dire où 50% + 50% = 100% + 1. En clair, 50% dans une certaine configuration peut valoir un demi pixel en plus (quand le 100% = 49px, le 50% ne peut pas valoir 24.5px, donc vaudra 25px => 25 + 25 = 50 et non pas 49). Si Firefox arrive à se débrouiller, ce n'est pas le cas d'IE6.

Tu devrais revoir ta structure HTML pour adopter un code plus "conventionnel" et plus maintenable.

**tofito** · 12/10/2008, 22h03

C'est à dire?
J'ai réussi à virer l'ascenseur en ajoutant la propriété width: 100%; au body, mais je suis ouvert à des conseils de codes "plus "conventionnels" et plus maintenables", pour peu qu'ils soient un minimum concrets, argumentés et constructifs...

**Bisûnûrs** · 12/10/2008, 23h09

Cf mon post :
http://www.developpez.net/forums/d62...6/#post3695601

**tofito** · 13/10/2008, 12h05

Ouais... bof... je suis pas convaincu par les conseils...
Certes ton exemple est plus simplifié mais il y a des fonctionnalités en moins...
Mon header était fait de telle sorte qu'il prenne la largeur totale de l'écran quelle que soit la résolution utilisée par l'utilisateur...
Toi ton exemple tu mets une image de 983 pixels de large, basta...
Sinon les onglets... ben c'est sûr que les tiens sont simplifiés mais bon ils sont moins jolis aussi... ils n'ont pas les coins arrondis... ils ne s'allument pas lorsque l'on passe le curseur dessus...
Bref... c'est sûr que mon code peut être simplifié mais si c'est pour perdre des fonctionnalités, je ne vois pas l'intérêt...

**Bisûnûrs** · 13/10/2008, 12h11

Je n'allait pas reproduire dans l'exactitude toutes tes fonctionnalités, je me suis arrêté à la structure ... Sinon effectivement tu peux aussi dire que la police est un peu moins belle sur mon exemple.

Bref.

[css] Ascenseur horizontal inutile

CSS

Vue hybride

Discussions similaires

Partager

Partager