Des div qui s'emboites ,css

Fermé
rémoundo Messages postés 408 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 17 mars 2010 - 26 déc. 2009 à 15:49
rémoundo Messages postés 408 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 17 mars 2010 - 26 déc. 2009 à 16:29
Bonjour,j'ai fais sur la page d'accueil de mon (futur) site un arrangement qui tient a un fil et qui ne marche que sur Firefox le problème est que sur firefox sa tient mais au moindre modification ca case ! aperçu :

avec le style="height:132em;" : http://www.monsterup.com/image.php?url=upload/1261674736982.png

sans le style="height:132em;" : http://www.monsterup.com/image.php?url=upload/1261674736972.png

c'est en faite plusieurs div qui sont ans un même div ,pour les div qui ont le contour gris et noir j'ai pris sur le modèle de la div qui les contiens ,sa ne marche pas du tonnerre
et l'alignement n'est pas le même sur tout les navigateur ! et sur ie 6 tout est cassé ! (la page carrément )

bref

le html :

	    <div class="right_haut"></div>
	    <div class="rightbk"  style="height:132em;">
		    <h2>bienvenue sur ...</h2>

<h4>
<img src="images/nintendow2.png" alt="nintendow" /><br />
Le site sur nintendo ,et mario ...</h4>
<p class="font"><img src="images/bar.png" alt="boutton" />
Bienvenue sur nintendow le site qui vous fera découvrir (ou redécouvrir) l'univers de mario et de nintendo ! 
Vous y trouver des news,des test ,des biographies ,des chose exclusives et bien plus encore ...
Ce site est optimiser pour <strong>Mozilla Firefox </strong> un navigateur superbe qui je vous recomande à 
<a href="http://www.mozilla-europe.org/fr/firefox/">télécharger ici</a>.
<br /><strong> Voila ,et ...bonne visite sur nintendow !</strong>
<br /><img src="images/bar.png" alt="boutton" /></p>
<p style="text-align:center" >
   <ul class="kwicks">  
     <li id="kwick1"><a href="#">Home</a></li>  
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
     <li id="kwick5"><a href="#">Search</a></li>  
 </ul>  

</p>
<br />  

	    <div class="right_hautx"></div>
	    <div class="rightbkx">
<p class="font2" >
<img src="images/mo.png" alt="" />
<br />  
<br /><i>01/01/10 </i><span class="dedans">Enfin ! ouverture de nintendow !!!</span>
<br />
<br /><i>01/01/10 </i><span class="dedans">on y est enfin !2010 c'est partie !</span>
<br />
<br /><i>31/12/09 </i><span class="dedans">Une année pour créer nintendow !</span>
<br />
</p>
</div>
		<div class="right_basx"></div>
	    <div class="right_hautx"></div>
	    <div class="rightbkx">
<p class="font2" >
<img src="images/mo2.png" alt="" /> 
<br />
<br />
<img src="images/encemo.png" style="margin-left:5px;" alt="" />
</p>
</div>
		<div class="right_basx"></div>
	    <div class="right_hautx"></div>
	    <div class="rightbkx">
<img src="images/mo8.png" alt="" />
<p class="font2" >
<?php include('exemple.php'); ?>
</p>
</div>
		<div class="right_basx"></div>
<div style="float: right ;margin-right:-3px;margin-top:-960px;" >
	    <div class="right_hauty"></div>
	    <div class="rightbky">
<img src="images/mox.png" alt="" /> 
<!-- Debut shoutbox - https://www.i-tchat.com/ -->
<iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=80015" width="180" height="350" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="https://www.i-tchat.com/" onClick="window.open(this.href+'?80015');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<!-- Fin shoutbox -->
<img src="images/bar2.png" alt="" />
<p class="font2">

<img src="images/mox2.png" alt="" />
Haaa l'ouverture ... toujours un grand jour ! surtout pour nintendow un petit réseau de sites un peu vide pour l'instant mais qui va se développer <strike>et bientôt controler le monde</strike>
</p>
<p>
<img src="images/mox3.png"  alt="" />
<br />
<img src="images/dos.png" style="margin-left: 15px;" alt="" /> 
<br />
</div><div class="right_basy"></div>
</div>
<br />

<br />

	</div>


		<div class="right_bas"></div>






Le css :

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

.right_hautx {
    margin-left: 0px;
	height: 100px;
	width: 430px;
float: left ;
	position: relative;
	background: url(images/right-topx.png) no-repeat;
}

.right_basx {
    margin-left:0px;
	position: relative;
	height: 20px;
	width: 430px;
float: left ;
	background: url(images/right-bottomx.png) no-repeat;
	margin-bottom:3px;
}

.rightbkx {
    margin-left:0px;
width: 430px;
	background: url(images/right-bkx.png) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
float: left ;
	position: relative;
    padding-top: 0px;
    padding-bottom: 5px;
}

.right_hautx {
    margin-left:0px;
float: left ;
	height: 20px;
	position: relative;
	width: 430px;
	background: url(images/right-topx.png) no-repeat;
}

.right_basx {
    margin-left:0px;
float: left ;
	height: 20px;
	width: 430px;
	position: relative;
	background: url(images/right-bottomx.png) no-repeat;
	margin-bottom:3px;
}

.rightbkx {
    margin-left:0px;
	width: 430px;
float: left ;
	background: url(images/right-bkx.png) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}

.rightbkx h2 {
    font-size: 1.3em; 
    color: #2366a7;
    margin: 0; 
	padding: 0;
    margin-bottom: 10px;
	padding-bottom: 0.3em; 
	width: 150px;
	border-bottom: 1px dashed #C0C0C0;
}


.right_hauty {
    margin-left: 0px;
	height: 100px;
	width: 210px;
	position: relative;
	background: url(images/right-topy.png) no-repeat;
}

.right_basy {
    margin-left:0px;
	position: relative;
	height: 24px;
	width: 210px;
	background: url(images/right-bottomy.png) no-repeat;
	margin-bottom:3px;
}

.rightbky {
    margin-left:0px;
width: 210px;
	background: url(images/right-bky.png) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
	position: relative;
    padding-top: 0px;
    padding-bottom: 5px;
}

.right_hauty {
    margin-left:0px;
	height: 26px;
	position: relative;
	width: 210px;
	background: url(images/right-topy.png) no-repeat;
}

.right_basy {
    margin-left:0px;
	height: 24px;
	width: 210px;
	position: relative;
	background: url(images/right-bottomy.png) no-repeat;
	margin-bottom:3px;
}

.rightbky {
    margin-left:0px;
	width: 180px;
	background: url(images/right-bky.png) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}

.rightbky h2 {
    color: #2366a7;
    margin: 0; 
	padding: 0;
    margin-bottom: 1px;
	padding-bottom: 0.3em; 
	width: 150px;
	border-bottom: 1px dashed #C0C0C0;
}

.right_haut {
    margin-left:0px;
	height: 20px;
	width: 665px;
	position: relative;
	background: url(images/right-top.png) no-repeat;
}

.right_bas {
    margin-left:0px;
	height: 20px;
	width: 665px;
	position: relative;
	background: url(images/right-bottom.png) no-repeat;
	margin-bottom:3px;
}

.rightbk {
    margin-left:0px;
	width: 635px;
	background: url(images/right-bk.jpg) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}

.right_haut {
    margin-left: 0px;
	heigth: 100px;
	width: 665px;
	position: relative;
	background: url(images/right-top.png) no-repeat;
}

.right_bas {
    margin-left:0px;
	heigth: 20px;
	width: 665px;
	position: relative;
	background: url(images/right-bottom.png) no-repeat;
	margin-bottom:3px;
}

.rightbk {
    margin-left:0px;
	width: 635px;
	background: url(images/right-bk.png) repeat-y;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 5px;
	position: relative;
}




d'où vient le problème ,comment rendre compatible tout navigateur (ou presque) ?

que faire quand les navigateur ne font pas les mêmes chose ?

je suis perdu
merci d'avance je l'espère !

A voir également:

1 réponse

rémoundo Messages postés 408 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 17 mars 2010 17
26 déc. 2009 à 16:29
up !
0