28173 sujets

CSS et mise en forme, CSS3

Design Extensible avec float [Problème IE]

Bonjour,

Je fais un site pour un copain, je commence à coder pour afficher mon header compatible pour toutes les resolutions, sur firefox, comme d'habitude pas de problème, sur IE un peu plus. Le lien : http://ntprod.info/ext/


body {
margin: 0px 8% 0px 8%;
}

/* Affichage Header */
.headleft
{
   float: left;
   width: 184px;
   height: 107px;
   background-image: url("head_left.gif");
   background-repeat: no-repeat;
   
}

.headback
{
   width: auto;
   height: 107px;
   background-image: url("head_back.gif");
   background-repeat: repeat;
}

.headright
{
   float: right;
   width: 191px;
   height: 107px;
   background-image: url("head_right.gif");
   background-repeat: no-repeat;
}

/* Affichage Menu */
.menuleft
{
   float: left;
   width: 2px;
   height: 22px;
   background-image: url("menu_left.gif");
   background-repeat: no-repeat;
}

.menuback
{
   width: auto;
   height: 22px;
   background-image: url("menu_back.gif");
   background-repeat: repeat;
}

.menuright
{
   float: right;
   width: 2px;
   height: 22px;
   background-image: url("menu_right.gif");
   background-repeat: no-repeat;
}




<body>
<div class="headleft"></div>
<div class="headright"></div>
<div class="headback"></div>
<div class="menuleft"></div>
<div class="menuright"></div>
<div class="menuback"></div>
</body>


Ca fait beaucoup de div sur la page html ?! Mais bon ca marche sur Firefox,
sur IE tout etait afficher n'importe comment avant que je passe les width: 100% en width: auto; , en auto ça s'affiche un peu mieu, il y a juste des marges entres les images, j'ai essayer de rectifier avec des padding, margin et des display:block; mais rien a faire.
Si vous avez une idée ?
Merci pour vos réponses, A bientôt Smiley cligne
Effectivement ça fait beaucoup d'éléments pour peu de contenu...

Alors qu'avec une div et un h1 on s'en sort très bien, non ?
<div id="header">
	<h1>Jean-Louis David Pro.com (programmeur)</h1>
</div>

div#header {
	min-width: ...;
	max-width: ...;
	height: 130px;
	border: solid 1px #cdd; border-top: none;
	background: white url(fondheader.png) no-repeat right top;
}
div#header h1 {
	height: 130px;
	line-height: 1px; font-size: 1px;
	text-indent: -2000px;
	background: transparent url(fondh1.png) no-repeat left top;
}


Bon, moi ça me semble plus simple comme ça...
Pour compléter, les pages suivantes t'intéresseront peut-être :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
Sujet clos
Aller à