28173 sujets

CSS et mise en forme, CSS3

Problème avec des éléments sortit du flux et avec IE

Bonjour à tous, j'aimerai réaliser un site dont le contenu s'affiche dans un cadre style "cadre baroque".
J'ai réussi à le faire nickel pour Mozilla mais sur IE ca passe pas du tout.
En plus le faite de sortir des élément du flux en utilisant des "float:left" fait que le contenu sort du cadren qui lui est réservé...
Enfin voilà mon code html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	
	<title>Boutique Sophie</title>
	
	<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
	
	<style type="text/css">

		   @import url(css/alsaCreation.css);

	</style>

</head>

<body>

	<div id="conteneur"> 
	
	      <div id="top"></div>
	
	      <div id="left"></div>
		
	      <div id="global"></div>
		
	      <div id="right"></div>
		
	      <div id="bottom"></div>
	
	</div>

</body>
</html>


et mon code css : 

body{
background:url(../images/background.jpg) #000 repeat-y left;
margin-top:10%;
}
div#conteneur{
width:633px;
margin-left:30%;
margin-top:0;
}
div#top{
height:66px;
width:633px;
background:url(../images/cadreHaut.jpg);
}
div#left{
height:300px;
width:40px;
margin-left:7px;
background:url(../images/cadreGauche.jpg) repeat-y left;
float:left;
}
div#global{
width:540px;
height:300px;
background-color:#FFFFFF;
color:#OOO;
font:11px Georgia, Times, serif;
float:left;
}
div#right{
height:300px;
width:40px;
background:url(../images/cadreDroit.jpg) repeat-y right;
float:left;
}
div#bottom{
clear:both;
height:66px;
width:633px;
background:url(../images/cadreBas.jpg);
}


Voilà, j'éspère que vous pourrez me donner un petit coup de pouce Smiley biggrin Smiley biggrin parce que là je m'arrache limite les cheveux Smiley biggol Smiley biggol
Merci d'avance
Modifié par erehcab (17 Mar 2006 - 19:00)
Salut
J'ai deja eu ce probleme mais je me souviens plus où, il me semble que j'ai resolu le pb en mettant un display:block partout où j'avais des tailles.
Bonjour erehcab,
Je pense au problème de doublement des marges sur IE.
Cela devrait se résoudre avec un "display: inline;" dans "div#left".
7px x 2 = 14px. Il manque de la place dans "div#conteneur".
Yes ca marche c'est bien coooooool.

Merci pour la solution, mais je ne comprend pas trop l'histoire du display:inline.
Pourrais-tu m'expliquer un peu le truc stp.

Sinon il y a une autre question qui me travaille bien c'est lorsque que je réduit la fenêtre, le cadre centrale ne reste pas fixe et vient se superposer sur mon image de fond, ce qui fosse ma mise en page.

Comment faire pour qu'il reste fixe ?
En ce qui concerne "display: block;" essaye une recherche avec "doublement marge ie" dans : la FAQ, le blog et Google. Il y à plein d'articles sur ce sujet. Si ma mémoire est bonne, c'est un problème de "haslayout" sur ie.
Pour que le cadre central ne passe pas sur ton image de fond, tu vas devoir donner une marge left fixe à "div#conteneur".
Merci beaucoup pour ton aide, je vais aller sur la FAQ pour mieu comprendre les problèmes de compatibilité IE.
Sinon j'aurai une dernière petite question qui concerne la taille verticale de mon cadre:
le cadre s'agrandit avec le contenu mais il n'affiche pas les deux dernières parties, ce qui laisse un trou en bas du cadre de chaques côtés.
upload/3494-cadre.jpg

voilà ce qui se passe.

upload/3494-cadreGauche.jpg

et voilà la pièce du cadre qui se répète.
Modifié par erehcab (18 Mar 2006 - 14:57)
C'est parce que les dimensions de tes côtés sont fixes. Les images de fond ne seront jamais plus grandes.
Tu doit mettre tes images (réduites à une) dans "div#global" ou faire en sorte que "div#left", "div#right" et "div#global" aient toujours la même hauteur.
Modifié par papillon41 (18 Mar 2006 - 15:37)
Ok, dèjà je pense qu'il sera bien plus simple pour moi de dégager le div#left et le div#right pour laisser juste le div#global et mettre en background mon cadre comme ca :

upload/3494-backgroundG.jpg

et jusque là, tout va bien :

upload/3494-test2.jpg

mais dès que j'insère un contenu ca deborde :

upload/3494-test1.jpg

et voilà mon nouveau code css :


body{
background:url(../images/background.jpg) #000 repeat-y left;
margin-top:5%;
}
div#conteneur{
width:700px;
margin-left:300px;
}
div#top{
height:66px;
width:633px;
background:url(../images/cadreHaut.jpg);
}
div#global{
width:633px;
background:url(../images/backgroundGlobal.jpg) repeat-y;
color:#OOO;
text-align:center;
font:11px Georgia, Times, serif;
}
div#bottom{
clear:both;
height:66px;
width:633px;
background:url(../images/cadreBas.jpg);
}


Est ce que tu vois d'ou ca pourrait venir ?
Modifié par erehcab (18 Mar 2006 - 16:13)
Tu doit mettre des "padding" dans "div#global" et diminuer d'autant son "width".
Soit par exemple :
div#global{
[#red]width:533px;
padding-left: 50px;
padding-right: 50px;[/#]
background:url(../images/backgroundGlobal.jpg) repeat-y;
color:#OOO;
text-align:center;
font:11px Georgia, Times, serif;
}
NOTA : Attention à ce que tes images soient de la même largeur que tes <div>.
NOTA 2 : Pour tes essais met des retours à la ligne dans ton texte. Dans ton exemple, les lignes ne sont pas sécables.
Modifié par papillon41 (18 Mar 2006 - 17:54)
Sujet clos
Aller à