28173 sujets

CSS et mise en forme, CSS3

Probleme de position absolute d'une div

bonjour a tous

j'essaie sur un site de pouvoir aligner 2 produits mais le souci
c'est que le deuxieme va se figer en desous alors que je voudrais l'aligner
en margin-top 10px et margin-left:300px;

http://www.bleuquest-informatique.com/priv/yokis/

pourquoi se fige t-il en dessous alors que j'ai tout mis en absolute ?

MERCI



mes codes :



<div class="contenu">                  
                                                
<div style="position absolute; width:250px; height:241px;  margin-top:10px;    margin-left:10px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #1f1643;">
<a href="http://www.bleuquest-informatique.com/tarifs-marketing-internet.php"><img src="./images/MTV500E.jpg" alt="domotique produit micromodule yokis" /></a>
</div>
                                                                   
<div style="position absolute; width:250px; height:241px;  margin-top:10px;  margin-left:300px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #1f1643;">
<a href="http://www.bleuquest-informatique.com/tarifs-marketing-internet.php"><img src="./images/MTR500M.jpg" alt="domotique produit micromodule yokis" /></a>
</div>
                                 
                                                                                
                                                                
</div>


ma css


* 
{margin: 0px; padding: 0px; border: 0px; font-family: Verdana, Tahoma, Arial, Serif; color: #000000; font-size: 8pt;
font-weight: normal; font-style: normal; text-decoration: none; line-height: 13px;} 

body{background-color: #ffffff;} 
 
h1{font-weight:bold; background-color: #FFFFFF; font-size:8pt; color:#000000;}

h2{font-weight:bold; color:#000000; background-color: #FFFFFF; font-size:10pt;}

h3{font-weight:bold; color:#000000; background-color: #FFFFFF; font-size:8pt;}

h4{font-weight:bold; color:#000000; background-color: #FFFFFF; font-size:8pt;}

.ancre {font-weight:bold; background-color: #FFFFFF; font-size:10pt; color:#cc3333;}

.couleur {font-weight:bold; background-color: #FFFFFF; font-size:8pt; color:#000000;}




.centrage
{position: absolute; width: 970px; left: 50%; margin: 0px 0px 0px -485px; border-width: 1px 1px 1px 1px; 
border-style: solid; border-color: #CCCCCC; margin-top: 10px;}



.banniere { position: absolute; width: 970px; height: 110px;}



.menu-gauche
{ position: absolute; width:155px; text-align:center; margin-top:110px; margin-left:0px; }




.image-droite
{ position: absolute; width:170px;  margin-top:360px;  margin-left:793px; padding:2px;
  border-width: 5px 1px 1px 1px; border-style: solid; border-color: #1f1643;}
  


.image-droite2
{ 
position: absolute; width:170px;  margin-top:120px;  margin-left:793px; padding:2px;
border-width: 5px 1px 1px 1px; border-style: solid; border-color: #1f1643;}



.contenu
{position: absolute; width:628px; padding:0px; margin-top:120px; margin-left:159px; 
border-width: 5px 1px 1px 1px; border-style: solid; border-color: #1f1643;}
Bonjour,

“j'ai tout mis en absolute”
Oui, mais de quelle manière ?
<div style="position absolute;


Allez, je te les donne “:” et “:”.
Positionne-les absolument correctement (-;


+ Pour info. :
border-width: 1px 1px 1px 1px; border-style: solid; border-color: #CCCCCC;

est peut-être plus facile à gérer sous cette forme 
border : 1px solid #ccc;

Modifié par Gihef (01 Aug 2007 - 22:20)
Gihef a écrit :
Bonjour,
“j'ai tout mis en absolute”
Oui, mais de quelle manière ?
<div style="position absolute;


Allez, je te les donne “:” et “:”.
Positionne-les absolument correctement (-;


@Gihef
Quitte à aider tu devrais dire à lio où mettre les ":" plutôt que procédé par elipse Smiley cligne
Bonjour,

hormis les : qui mansuent (deux fois) sur ton html <div style="position : absolute;... Comme te l'a si bien précisé Gihef.
Pourquoi tous ces absolutes, ton contenu, lui même en absolute ne vas pas suivre son contenant ... Tu n'es pas sortie de l'auberge Smiley cligne

Un petit positionnement en float, non?
merci pour ta reponse ghost

tu me suggeres de mettre du float: left; pour mes 2 produits dans
ma div contenu qui elle est en absolute c'est bien ca ?
Désolé si la réponse n'était pas assez claire.
Mais ça me semblait être un bon petit exercice pour un petit oubli qu'on ne pense même pas à chercher. Idem pour le “;” (-;
Et puis :
position absolute
Positionne-les absolument

Le “float” serait une bonne solution. Mais si ça fonctionne comme tu l'as conçu, reste là-dessus.
Modifié par Gihef (01 Aug 2007 - 23:40)
Re,

Le problème c'est qu'à partir du moment ou tes 2 produits sont bien positionnés en absolute, ton bloc contenu ne suit pas le mouvement (tu peux le tester avec un border: 1px solid black). Tu peux remédier à cela en donnant un height fixe à contenu. Si ça ne te pose pas de problème c'est parfait, par contre si la taille des produit est variable, il faudra je pense changer de positionnement, laisser contenu dans le fux et positionner tes produits en float ou display: inline, il faut voir le contexte...

En fait je m'inspirerais de ce tuto et je reprendrais ma page sans table Smiley biggol
Gihef a écrit :
Mais si ça fonctionne comme tu l'as conçu, reste là-dessus.


Assurément une solution qui fontionne à "courte vue", sans grande marge d'évolution.
Sujet clos
Aller à