28172 sujets

CSS et mise en forme, CSS3

Margin bottom pour conteneur en position absolute est ce impossible?

bonjour,

j'ai un conteneur dans le quel j'ai des bordures arrondis.

je met position absolute à mon conteneur, mais je peux pas faire un margin bottom par rapport au bas

de la fenetre.

NB: j'utilise position absolute parce que position relative m'affiche des bugs.

guidez moi svp pour trouver une méthode pour faire margin-bottom tout en utilisant position absloute.

merci
1younes a écrit :
guidez moi svp pour trouver une méthode pour faire margin-bottom tout en utilisant position absloute.

La méthode en question n'existe pas.

Parmi les solutions:
- ne pas positionner l'élément en absolu (l'utilisation du positionnement absolu n'est peut-être pas appropriée ici);
- positionner en absolu un conteneur qui aura un padding-bottom de Npx (la taille du margin-bottom que tu voulais utiliser) et dedans placer ton élément en positionnement statique.
bonjour, j'ai pas bien compris la 2éme solution, "et dedans placer ton élément en positionnement statique." comment?

merci
#conteneur {
	position: absolute;
	padding: 10px 10px 100px 10px;
	background: red;
}
#contenu {
	width: 500px;
	height: 400px;
	background: blue;
}

...

<div id="conteneur">
	<div id="contenu">...</div>
</div>
par exemple.

Mais j'avoue ne pas voir l'utilité de la manoeuvre.
bonjour, j'ai remet position relative à mon conteneur, et voila les bug qui s'affiche surIE (sur firefox affichage correcte).

voir ma page de test qui affiche le bug sur IE:

http://music.islamzik.net/bug-bordure/test.html


voila aussi trois impression d'écran pour voir le bug lorsque j'utilise la bare de défilement verticale:

http://music.islamzik.net/bug-bordure/bug-bordure1.gif

http://music.islamzik.net/bug-bordure/bug-bordure2.gif

http://music.islamzik.net/bug-bordure/bug-bordure3.gif

merci de me résoudre le probléme Smiley confused
Modifié par 1younes (16 Feb 2008 - 16:33)
Hello,

La page de test que tu présentes me semble de meilleure facture que d'autres choses que tu as pu présenter sur ce forum dernièrement. Donc déjà bravo pour l'amélioration. Smiley smile

Pour le problème rencontré avec IE, c'est un bug du moteur de rendu d'Internet Explorer, qui peut être lié au HasLayout. Je t'invite donc à lire: Qu'est-ce que le HasLayout, et comment l'utiliser?

Qu'est-ce que ça donne si tu attribues un zoom: 1 à tes titres par exemple?
je te remercie infiniment florent Smiley smile , j'ai mis zoom: 1; et ca marché trés bien.

ainsi pour régler ceratins padding et margin pour les deux fameux navigateur IE et Firefox, j'ai utilisé les commentaires pour IE, mais je ne suis pas sur que c'est correcte (je veux eviter les bugs).

Pour IE:

<!--[if lte IE 6]>
<style type="text/css">
#hautgauche {
position: absolute;
top: 0;
left: 0;
}
#hautdroit {
position: absolute;
top: 0;
right: -1px;
}
#basgauche {
position: absolute;
bottom: -1px;
left: 0;
}
#basdroit {
position: absolute;
bottom: -1px;
right: -1px;
}
body
{
	background-color: #F9F9F9;
	padding: 0px;
	padding-bottom: 9px;
}
#conteneur 
{ 
   width: 783px; 
   margin: auto;
   margin-top: 12px;
   margin-bottom: 30px;
   margin-left: 105px;
   background: url(fond.gif) center repeat-y; 
   position: relative;
} 
#bas
{
	CLEAR: both;
	width: 781px;
	border: 1px solid #C9C6B3;
	font: 0.7em Tahoma,sans-serif;
	height: 40px;
	text-align: center;
	padding: 0px;
	padding-top: 10px;
	background-color: #EFEDED;
}
</style>
<![endif]-->



pour firefox:

#hautgauche {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
top: 0;
left: 0;
background: url(hautgauche.gif);
}
#hautdroit {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
top: 0;
right: 0;
background: url(hautdroit.gif);
}
#basgauche {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
bottom: 0;
left: 0;
background: url(basgauche.gif);
}
#basdroit {
font-size: 1px;
height: 13px;
width: 13px;
position: absolute;
bottom: 0;
right: 0;
background: url(basdroit.gif);

}

body
{
	background-color: #F9F9F9;
}

#conteneur 
{ 
   width: 783px; 
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   margin-left: 105px;
   background: url(fond.gif) center repeat-y; 
   position: relative;
}

#bas
{
	CLEAR: both;
	width: 781px;
	border: 1px solid #C9C6B3;
	font: 0.7em Tahoma,sans-serif;
	height: 40px;
	text-align: center;
	padding: 0px;
	padding-bottom: 10px;
	background-color: #EFEDED;
}


merci de confirmer Smiley smile
Modifié par 1younes (16 Feb 2008 - 21:56)
Je n'ai pas vérifié le détail, mais à priori tu passes trop de styles à IE6 via ton commentaire conditionnel. Le principe à utiliser est le suivant:
1. on déclare les styles CSS pour tous les navigateurs;
2. s'ils sont nécessaires, on applique quelques correctifs très ciblés à certaines versions d'Internet Explorer.

Le plus souvent, une feuille de correctifs CSS pour Internet Explorer ne dépasse pas quelques lignes de code.
Disons que si tu dupliques des styles de ta feuille de styles générique dans ta feuille de correctifs CSS pour IE, c'est plus un problème de méthode et d'organisation qu'un problème technique.

Si tu modifies ta feuille de styles générique, mais que tu n'impactes pas la modification dans les correctifs pour IE, tu auras des styles différents pour IE (ou IE 5-6 si ton commentaire conditionnel vise IE6 et inférieurs) et les autres navigateurs.

Et puis bon, globalement dupliquer du code c'est plutôt inutile, donc autant ne pas le faire...
bonjour,

a écrit :
Et puis bon, globalement dupliquer du code c'est plutôt inutile, donc autant ne pas le faire...


mais ca marché trés bien pour moi, que dites vous?
1younes a écrit :
mais ca marché trés bien pour moi, que dites vous?

Oui, quelque chose d'inutile n'a pas d'effet négatif direct. C'est juste inutile, donc dispensable. Mais si on veut dupliquer inutilement du code (et risquer de s'embrouiller ensuite à cause d'un code présent en deux endroits), on est bien sûr libre de le faire.
Sujet clos
Aller à