18041 sujets

Questions générales et questions de débutants

Superposition de div car une div refuse de bouger [de l'aide svp]

c'est un titre barbare mais c'est une erreurs de barbare aussi :-°

voila en fait lors de la construction d'une nouvelle version de mon site je suis confronté a un probléme au niveau d'une div en position absolute et d'un footer qu ne veut désesperement pas bouger en fonction de cette fameuse div en position absolute ...
pourtant le footer n'est pas fixe car il réagis a la hauteurs de la barre de menus o_O

je vous fait une version du code simplifier html ^^

d'abord voici le CSS 


<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="./internet-explorer.css" media="screen" />
<![endif]-->
<style type="text/css">
body
{
background-color:#6695c6;
margin-bottom:-200px;
}
html
{
overflow:auto;
border:none;
}
div#corp-principle
{
position:relative;
width:800px;
background-color:#FFFFFF;
margin-left:50px;
z-index:4;
}
div#bordure
{
border-top:solid;
border-top-width:1px;
border-left:solid;
border-left-width:1px;
border-right:solid;
border-right-width:1px;
}
div#header
{
width:700px;
height:175px;
}
div#border-header
{
border-top:solid;
border-top-width:1px;
border-left:solid;
border-left-width:1px;
border-right:solid;
border-right-width:1px;
background-position:center;
background-repeat:no-repeat;
background-image:url("./images/header.jpg");
}
div#menu
{
margin-left:50px;
width:150px;
background-color:#FFFFFF;
}
div#menu_bordure
{
border-right:solid;
border-right-width:1px;
border-left:solid;
border-left-width:1px;
padding-left:5px;
}
div#séction_du_site
{
position:absolute;
left:221px;
top:263px;
width:625px;
background-color:#FFFFFF;
z-index:29;
margin-bottom:30px;
}
div#bordure_séction_du_site
{
border-right:solid;
border-right-width:1px;
border-left:solid;
border-left-width:1px;
text-align:center;
padding:5px;
z-index:29;
}
div#chibi_qui_tient
{
position:absolute;
left: 260px;
top: 225px;
z-index:10;
}
div#chibi_qui_tient_2
{
position:absolute;
left: 700px;
top: 225px;
z-index:10;
}
div#footer
{
position:relative;
margin-top:30px;
width:625px;
background-color:#FFFFFF;
z-index:29;
}
div#bordure_footer
{
position:relative;
border-right:solid;
border-right-width:1px;
border-left:solid;
border-left-width:1px;
z-index:29;
}
div#horloge
{
position:absolute;
left: 112px;
top: 141px;
z-index:100;
}
div#naruto_tient_la_div
{
width:55px;
position:relative;
top:-90px;
left:-394px;
z-index:1;
}
div#naruto-tient-div-principale
{
position:absolute;
top:0px;
left:0px;
z-index:1;
}
div#contenu_page
{
text-align:center;
}


et l'html maintenant 


<body><div id="corp-principle"><center><!-- début corp principal -->
<img src="./images/bordure-arrondie-haut-gauche-d2d2d2.gif" alt="haut-gauche" align="left" />
<img src="images/bordure-arrondie-haut-droite-d2d2d2.gif" alt="haut-droite" align="right" />
<div id="bordure"><!-- début de la bordure corp principal -->
<br />
<div id="header"><!-- début du header !-->
<img src="./images/bordure-arrondie-haut-gauche.gif" alt="haut-gauche" align="left" />

<img src="images/bordure-arrondie-haut-droite.gif" alt="haut-droite" align="right" />
<div id="border-header"><!-- début des bordure du header !-->
<br /><br /><br />
<br />
<br /><br /><br /><br />
</div><!-- fin des bordure du header !-->
<img src="images/bas.gif" alt="bas" />
</div>
<div align="right">
<!-- fin du header !-->
<br />
<img src="images/haut-et-bas-en-meme-temps.gif" alt="haut-et-bas" /></div>
</div>
<!-- début de la bordure corp principal !-->
</center>
</div><!-- fin corp principal !-->
<div id="menu">

<div id="menu_bordure"><br />
<span class="menu">menu :</span><br />
- <a href="./accueil.php" class="menu_police">accueil</a>

<br />
<br />
<span class="menu">information :</span><br />
<span class="italique_souligné">il y a :</span><br />
<span class="italique"> 
1 visiteur 
sur tout le site</span><br />
<span class="italique_souligné">et :</span><br /><span class="italique">

0 membre<br />
<br />^_^ /<br /></span>
<span class="italique_souligné">tu te nomme :</span><br />
<span class="italique">l'homme sans nom</span><br />
<br />
<img src="images/naruto-vu-de-haut.gif" alt="naruto-vu-de-haut" /></div><img src="images/bas-complet-d2d2d2.gif" alt="bas-complet" /></div>

<div id="chibi_qui_tient"><img src="images/chibi-tien-la-div.jpg" alt="chibi-qui-tient" /></div>
<div id="chibi_qui_tient_2"><img src="images/chibi-tien-la-div-2.jpg" alt="chibi-qui-tient-2" /></div><br class="spacer" /><div id="séction_du_site"><img src="images/haut-div-contenu.gif" alt="haut-div contenu" /><div id="bordure_séction_du_site"><span class="titre_accueil">je vous souaite la bienvenu sur ce monde décaler ... le monde de florentp83 !</span><br />
<span class="sous_titre_accueil">ce monde n'est pas sérieux <img src="http://naruto-fantasy.com/forum/smileys/C2.gif" alt=":p" /> entre les faute d'horographe, les  &gt;&gt; ^^ &lt;&lt;<br />

ET si vous utiliser "internet exploreur" vous allez étre désaventager<img src="http://naruto-fantasy.com/forum/smileys/A7.gif" alt="siffle" /><br />(mais il n'est jamais trop tard pour essayer ... <img src="http://naruto-fantasy.com/forum/smileys/E9.gif" alt="roulement de tamboure" /> ... <a href="http://www.mozilla-europe.org/fr/products/firefox/" class="firefox">FIREFOX</a>)</span><br /><br />
<strong>sur ce site vous allez trouver des vidéo, des image, des texte sur naruto MAIS aussi sur des sujet qui ne sont pas rapport avec naruto !</strong><br />
<br />
<!-- ici va se poser les news -->
<span class="sous_titre_accueil">news écrit par <a href="mailto:florentp83@naruto-fantasy.com" class="normaly">florentp83</a> le 13 mai 2007 :</span><br /><br /><span class="titre_accueil">bienvenu</span><br /><br />

<span class="couleurs_perso">bienvenu dans la version 6 de mon site ^^, 6 vérsion déja  mais bon si vous auriez vu la téte des version 1 a 4 vous auriez fuis loin ... tres loin ... vers un autre site <img src="http://naruto-fantasy.com/forum/smileys/D9.gif" alt="ahhhh" /> mais je suis de retour (la suite a la pokémon vous pouvez vous la mettre ou je pense <img src="http://naruto-fantasy.com/forum/smileys/A7.gif" alt="siffle" />) vous offrant le fruit de plus d'un mois de dévelopement non intensif <img src="http://naruto-fantasy.com/forum/smileys/A10.gif" alt="le roi" /> car je ne suis pas ésclave de mon site <img src="http://naruto-fantasy.com/forum/smileys/F2.gif" alt="esclave" /> ... c'est lui qui l'est de moi <img src="http://naruto-fantasy.com/forum/smileys/C10.gif" alt="diable" /></span><br /><br /><br />
<span class="titre_accueil">le réste de mon site ... vous avez cas le visiter pour le savoir <img src="http://naruto-fantasy.com/forum/smileys/C10.gif" alt="diable" /></span><br /><br /><br /><br /><br /><br /></div><img src="images/bas-div-contenu.gif" alt="bas-div-contenu" /></div>
<center>
<div id="footer"><img src="images/haut-div-contenu.gif" alt="haut-div contenu" /><div id="bordure_footer" ><em>naruto-fantasy.com par <a href="mailto:florentp83@naruto-fantasy.com" class="rouge">florentp83</a><br />
  les personnages de naruto© et tout son univers est la propriété de Masashi Kishimoto !<br />

  toute reproduction partiele ou complète de ce site est interdite ! toute reproduction ou lien direct d'image,wallpaper etc. ne doit pas être fait sans l accord de son créateur c'est a dire <a href="mailto:florentp83@naruto-fantasy.com" class="rouge">moi</a></em></div>
<img src="images/bas-div-contenu.gif" alt="bas-div-contenu" /></div><div id="naruto_tient_la_div"><img src="images/naruto_tient_la_div.jpg" alt="naruto-tient-la-div" /></div>
</center>
<div id="naruto-tient-div-principale"><img src="images/naruto-tient-la-div-principale.jpg" alt="naruto-tient-la-div-principal" /></div>
<div id="horloge">
<object data="http://florentp83.free.fr/horloge.htm" type="text/html">alt :<a href="http://florentp83.free.fr/horloge.htm">http://florentp83.free.fr/horloge.htm</a></object>
</div>


ce qui donne ca ^^ ====> http://florentp83.free.fr/accueil.php

voyez comment la div principale passe desous le footer qui lui réste en place alors que je veut qu'il désende o_O

merci de vous penchez sur mon cas

p.s : j'ai essayer de mettre un z-index identique, je ne peut pas enlever le z-index et les position relative de certaine div peuvent paraitre inutile saufe que c'est juste un moyen pour faire marcher le z-index ^^
Administrateur
Hello et bienvenue Smiley smile

Ton comportement est normal et attendu : les positionnements absolus font sortir les éléments du flux. Ils n'ont alors plus d'influence sur les autres (ils peuvent donc s'afficher par-dessus).

Le positionnement absolu est à éviter si tu ne le maîtrises pas parfaitement. Dans ton cas, le plus simple eût été d'employer le positionnement flottant et d'utiliser la règle "clear : both" pour afficher ton footer en dessous, quoi qu'il arrive.

Quelques ressources à suivre :
- Comprendre le positionnement des éléments en CSS (Alsacréations)
- Positionnement absolu (Openweb)
- Positionnement flottant (Openweb)
- Un modèle de gabarit en positionnement flottant : http://css.alsacreations.com/modeles/modele15.htm

Bon apprentissage et bonne chance Smiley cligne

PS : Bonjour à toi aussi Smiley ohwell
Modifié par Raphael (14 May 2007 - 15:01)
perso dans la css je ne mets jamais div#bidulle je mets #bidulle tout simplement Smiley confused
apart ça je sais pas t'aider Smiley ohwell je débute aussi en CSS
Administrateur
florentp83 a écrit :
dsl je ne me suis pas présenter Smiley bawling

je vais voirs ca ^^

Ce n'est pas une question de présentation, mais surtout de politesse : en général quand on arrive quelque part, on dit un ptit "bonjour", non ? Smiley cligne

EDIT : au fait, n'hésite pas à prendre 2sec de ton temps pour écrire les mots en entier. Cela sera plus compréhensible pour tout le monde. Par exemple "désolé" au-lieu de "dsl" Smiley cligne
Modifié par Raphael (14 May 2007 - 15:15)
si ^^

on frappe a la porte aussi mais je l'ai pas trouver alors je suis entrer dsl Smiley lol
j'ai pas trouver le tapis alors j'ai encore les pied sale
Smiley rolleyes

EDIT : mince alors moi qui me bat aussi contre le sms ... je devrait arreter msn ca me réussi pas Smiley bawling
Modifié par florentp83 (14 May 2007 - 15:18)
Sujet clos
Aller à