Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Incontournables XHTML / CSS :

Auteur
Chat
# 14 May 2008 - 16:56:21
Citer
30 Posts
Bonjour a tous, j'ai une page qui contient une div menu gauche et qui a l'interieur contient d'autre div.

Il y a un un des div, le div img, qui contient un lien hypertexte dans le HTML pour faire un popup qui ne prend pas en compte quand je lui met le parametre position absolute, il ce place toujours par raport au div juste au dessus de lui...

J'ai essayer sur le div qui est au dessus de lui et lui fonctionne tres bien en positon absolute, j'pense que sa doit venir qu'il y ai un lien hypertexte dans la div img... confus


Avez vous une solution? confused


Mon HTML:


</head>

<body>

<table id="page-table"><tr><td id="page-td">

<div id="conteneur">


<div id="menu_gauche">

<a href="pages/contact.html" target="contenu">contact</a>
<a href="pages/association.html" target="contenu">association</a>
<a href="pages/liens.html" target="contenu">Liens</a>
<a href="http://localhost/cpg1418/displayimage.php?album=lastup&cat=0&pos=5" target="contenu">membres</a>
<a href="galerie/galerie.php" target="contenu">galerie</a>
<a href="pages/auth.html" target="contenu">auth</a>
<?php

$serveur ="localhost";
$login = "root";
$mot_passe = "";
$base = "artkateo";



$connexion = mysql_pconnect($serveur, $login, $mot_passe) or die ("impossible de se connecter a MySQL : ".mysql_error());



$mabase = mysql_select_db($base) or die ("impossible de ce connecter ma table : ".mysql_error());
$requete = "select * from actualite";

$resultat = mysql_query($requete);

while ($row = mysql_fetch_row($resultat))

{

$titre = $row[1];

$date = $row[2];

$resume = $row[3];



echo stripslashes('<div id="titre">'.$titre.'</div>');

echo stripslashes('<div id="date">'.$date.'</div>');

echo stripslashes('<div id="resume">'.$resume.'</div>');



}



?>

<div id="img">

<A HREF="#" class="a" onClick="window.open('image_actu/actualite.jpg','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=yes, resizable=1, copyhistory=0, menuBar=0, width=460, height=470');return(false)">Cliquez ici<br />
pour<br />
voir le visuel</A> </div>

</div>

<div id="menu_haut"></div>

<div id="menu_droit"></div>


<div id="contenu">

<iframe name="contenu" src="" marginheight="0" marginwidth="0" width="460" height="470" scrolling="auto" frameborder="0">accueil</iframe>


</div>

<div id="bas_page"></div>
</div>

</td></tr></table>

</body>
</html>


Mon CSS:


*{
list-style-type: none;
margin : 0px;
padding:0px;
}



body{

font-family: "Times New Roman", Times, serif;
height: 100%;
background-color: #ffffff;

}

/*------------ Les 3 étapes suivantes sont pour centrer le contenu de la page */

.centrer {
margin-left: auto;
margin-right: auto;
width : 1000px;
text-align : left; /* pour résoudre le bug de centrage de IE */
}


#page-table {
height: 100%;
width: 100%;
border-collapse: collapse;
text-align: center;
}
#page-td {
height: 100%;
padding: 0;
vertical-align: middle;
}

/* ----------- Div principal (ou conteneur)*/

#conteneur{
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 810px;
height: 610px;

}

/*-------------Div du menu gauche */

#menu_gauche{
width: 280px;
height: 610px;
background-image: url(../images/menu_gauche.jpg);

}

/*-------------------Div du menu du haut */

#menu_haut{
position: absolute;
top: 0px;
width: 460px;
height: 90px;
margin-left: 280px;
background-image: url(../images/menu_haut.jpg);
}


#menu_droit{
position: absolute;
top: 0px;
margin-left: 740px;
width: 70px;
height: 610px;
background-image: url(../images/menu_droit.jpg);

}

#contenu{
position: absolute;
margin-left: 280px;
margin-bottom: 0px;
margin-right: 0px;
margin-top: 0px;
top: 90px;
width: 460px;
height: 470px;

}

#bas_page{
position: absolute;
margin-left: 280px;
top: 560px;
width: 460px;
height: 50px;
background-image: url(../images/bas.jpg);
}


#titre{

text-align: center;
white-space: normal;
font-weight: bold;
text-transform: uppercase;
margin-top: 40px;
margin-left: 30px;
margin-right: 70px;
font-family: Verdana,Geneva, Arial, Helvetica, sans-serif;
width: 180px;
color: White;
}

#date{
text-align: center;
text-transform: uppercase;
font-size: 15px;
white-space: normal;
margin-top: 10px;
margin-left: 30px;
margin-right: 70px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 180px;
color: White;

}



#resume{
text-align: center;
word-spacing: -2px;
font-size: 11px;
white-space: normal;
margin-top: 15px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: 30px;
margin-right: 70px;
width: 180px;
color: White;

}

#img{
position: absolute;
text-align: right;
word-spacing: -2px;
font-size: 11px;
margin-top: 50px;
margin-left: 30px;
margin-right: 70px;
width: 180px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}


/*-------------Couleur des liens non visité */

.a:link {

text-decoration: none;
color: White;

}

/*-------------Couleur des liens visité */

.a:visited {
/*text-decoration: none;*/
color: White;

}

/*-------------Couleur des liens au survol de la souris */

.a:hover {
text-decoration: none;
color: White;

}

/*-------------Couleur des liens quand il y a le click */

.a:active {
text-decoration: none;
color: White;

}






Merci d'avance!!! cligne
Modifié par Chat (14 May 2008 - 17:25)

^
Shunkin
# 14 May 2008 - 17:06:17
Citer
43 Posts
Bonjour,

#img{
position: absolute;
text-align: right;
word-spacing: -2px;
font-size: 11px;
margin-top: 50px;
margin-left: 30px;
margin-right: 70px;
width: 180px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Je ne vois aucun paramètre de positionnement (top, bottom, left, right).

http://www.jlpp.com 
^
Chat
# 14 May 2008 - 17:24:39
Citer
30 Posts
Ah je ne savais pas qu'il falais lui metre directement un parametre pour qu'il ce mette en pratique, quand j'l'ai mi sur une autre div il est sortie directement du flux... sweatdrop


Merci pour ton aide!!! cligne

^

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 11 ms - Charte