Design extensible

Problème float sous IE

20 mars 2006 à 20:18:27

Salut,

J'ai commencé a faire mon header extensible avec des floats, sous firefox pas de problème, mais sous IE il ya des marges qui apparaissent entre les images; pourtant les problème de padding et margin semble réglés !

/* CSS document */

body {
margin: 0px 8% 0px 8%;
}

/* Affichage Header */
.headleft
{
float: left;
width: 184px;
height: 107px;
background-image: url("head_left.gif");
background-repeat: no-repeat;

}

.headback
{
width: auto;
height: 107px;
background-image: url("head_back.gif");
background-repeat: repeat;
}

.headright
{
float: right;
width: 191px;
height: 107px;
background-image: url("head_right.gif");
background-repeat: no-repeat;
}

/* Affichage Menu */
.menuleft
{
float: left;
width: 2px;
height: 22px;
background-image: url("menu_left.gif");
background-repeat: no-repeat;
}

.menuback
{
width: auto;
height: 22px;
background-image: url("menu_back.gif");
background-repeat: repeat;
}

.menuright
{
float: right;
width: 2px;
height: 22px;
background-image: url("menu_right.gif");
background-repeat: no-repeat;
}

Voila, en même temps ca fait beaucoup de div, donc si vous connaisait une autre solutions je suis preneur.
Merci,
A bientot

Deeder

20 mars 2006 à 20:24:06

Houla... Ta technique me semble bien complexe... Peux-tu nous donner un lien ou une image pour que l'on voie ce que tu veux faire exactement ?

novd

20 mars 2006 à 20:38:45

ha j'avais oublié,

Ici

novd

20 mars 2006 à 22:19:47

Citation : Deeder

Houla... Ta technique me semble bien complexe... Peux-tu nous donner un lien ou une image pour que l'on voie ce que tu veux faire exactement ?

Tu as une autre technique ? Je crois que celle ci est en tuto sur le site.

jp949

21 mars 2006 à 5:04:04

Je ne vois pas trop l'interet que tu as a faire 6 decoupes au lieu de 3 etant donné que les 2 bordures de 2px de large seront inexpoitables.
Mais puisque tu en es la si tu ne veux pas tout redecouper, il suffit de mettre des marges begatives sur les 2 flottants qui posent probleme.
margin-right:-3px; pour le gauche et margin-left:-3px; pour le droit

novd

21 mars 2006 à 11:55:59

Merci, ca marche,

Tu as raison je vais redecouper en 3 images.
Merci

edit: j'ai decouper en 3 images, j'ai toujours besoin des deux margin negatif sur les flotants.

jp949

21 mars 2006 à 14:37:53

Normal IE ne concoit pas les choses autrement qu'avec son fameux 3pxjog

novd

21 mars 2006 à 19:27:48

Salut,
J'ai un autre problème,

Regardez ici, le menu est en dessous du header, j'aimerais qu'il puisse etre dans la barre juste au dessus. Et puisque le design est extensible, il faudrait que le menu s'adapte a celui ci, genre mettre un margin left et right de 10px pour les bords de la barre puis ensuite que les <li> soit espacé selon la largeur de la fenetre. Voila, en faite le problème c'est que je n'arrive pas à mettre le menu dans cette barre.
Comment faire ?
Merci,
A bientôt,

<body>
<div class="headleft"></div>
<div class="headright"></div>
<div class="headback"></div>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Creations</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Liens</a></li>
</ul>
</body>

/* CSS document */

body {
margin: 0px 8%;
}

/* Affichage Header */
.headleft {
float: left;
width: 184px;
height: 129px;
background-image: url("head_left.gif");
background-repeat: no-repeat;
margin-right: -3px;

}

.headback {
width: auto;
height: 129px;
background-image: url("head_back.gif");
background-repeat: repeat;
}

.headright {
float: right;
width: 193px;
height: 129px;
background-image: url("head_right.gif");
background-repeat: no-repeat;
margin-left: -3px;
}

/* Menu horizontale */
ul#menu {
margin: 0;
padding: 0;
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}

#menu li {
display: inline;
margin: 0 4%;
}

#menu a:link, a:visited {
color: #585f6e;
text-decoration: none;
}

#menu a:hover {
color: #585f6e;
text-decoration: underline;
}

jp949

22 mars 2006 à 5:26:38

pour la placer la ou tu veux il faut l'inclure dans .headback mais tu vas perdre 190px de chaque cote lageur des images.
l'ideal aurait que cette zone soit decoupé a part, independante du header sinon tu peux aussi utilser la position:absolute pour la placer.
pour les elements du menu
#menu a {float:left; width:auto; padding:1% 5%;/*aleatoire a toi de regler*/ display:block; }

novd

22 mars 2006 à 18:43:07

Ca ne marche pas trop, c'est po top comme soluce.

Citation : jp949

l'ideal aurait que cette zone soit decoupé a part, independante du header sinon tu peux aussi utilser la position:absolute pour la placer.

Donc comme au debut ? Je reviens avec mes 6 images et divs ?