28172 sujets

CSS et mise en forme, CSS3

[Resolu]Re : Petit soucis de mise en forme entre ie8 et Firefox

Bonsoir,

Finalement je vous affiche ma css Smiley cligne


soucis sur Firefox :
- Quand je redimensionne ma fenêtre plus rien n'est droit, certain élément reste d'autre se chevauche.

soucis sur ie8 :
- Idem que Firefox mais en plus décalage complet d'une div
- Le bas du background de mon body n'est pas visible
- Mon menu à onglets ul avec images en png n'apparait pas

voici les codes:

1.CSS

.Style2{
font-size: 12px
}

.Style3{
font-size: 9px
}

a{
color:#333;
text-decoration:none
}

a:hover{
color:#CE341F;
text-decoration:none
}

body{
background:url(img/fond.png) no-repeat top center #FFFFFF;
padding: 0px 0px 20px 0px;
margin: 0px 0px 20px 0px;
font-family:Arial, Helvetica, sans-serif;
}

#logo{
background:url(img/logo.png) no-repeat top center;
width:188px;
height:234px;
float:left;
margin:-190px 0px 0px 230px;
padding:0
}


#labyrinthe{
background:url(img/laby.png) no-repeat top center;
width:167px;
height:355px;
float:left;
margin:70px 0px 0px -200px;
padding:0
}

#top-text{
height:170px;
font-size:12px;
color:#333;
width:400px;
line-height:150px;
text-align:right;
padding:0;
margin:0px 620px;
}

#conteneur{
width:889px;
margin:0px auto;
padding:0
}

#menu{
margin:-100px 0px;
padding:0
}

#menu ul li{
list-style:none;
float:left;
padding:0;
}

#menu ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:14px;
color:#333333;
line-height:50px;
}

#menu ul li a.bt1{
height:74px;
width:100px;
background:url(img/bt1.png)no-repeat top left;
}

#menu ul li a.bt2{
height:74px;
width:104px;
background:url(img/bt2.png)no-repeat top left;
}

#menu ul li a.bt3{
height:74px;
width:135px;
background:url(img/bt3.png)no-repeat top left;
}

#menu ul li a.bt4{
height:74px;
width:131px;
background:url(img/bt4.png)no-repeat top left;
}

#menu ul li a.bt5{
height:74px;
width:127px;
background:url(img/bt5.png)no-repeat top left;
}

#menu ul li a:hover{
background-position:bottom left;
}

.block {
max-width:545px;
float:left;
margin:0px 0px 0px 250px;
padding:0;
}

.img {
float:right;
margin:10px 0px 5px 10px;
padding:0
}

p{
font-size:12px
}

.text{
text-align:justify;
color:#333;
font-size:1em
}

.titre h1{
font-weight:bold;
color:#CE341F;
font-size:12px;
padding:0;
margin:0px 0px 0px 0px
}

.bas{
float:left;
margin:50px 0px 80px 300px;
padding:0px;
font-size:10px
}


#brel{
width:180px;
height:80px;
text-align:left;
font-size:10px;
float:left;
margin:435px 0px 0px -200px;
padding:0}

.jacques{
font-weight:bold;
width:180px;
height:80px;
text-align:right;
font-size:9px;
float:left;
margin:3px 0px 0px 0px;
padding:0}




2) html de la page index


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
  	<div id="top-text"> <a href="http://www.XXXXXX.html">Qui somme nous?</a> | <a href="http://www.XXX/site_plan_XXX.html">Plan du site</a> | <a href="http://www.XXX/XXX_conditions.html">Conditions d'utilisations</a> | <a href="http://www.XXX/XXX_contact.html">Contact</a> </div>
<div id="logo">        
</div>
		<div id="labyrinthe"></div><div id="brel">XXXXXXXXX-XXX
<span class="jacques">Jacques XXX</span></div>
        <div id="lemenu">
        	<div id="menu">
    		<ul>
        		<li><a href="http://www.XXX/index.html" class="bt1 Style2">ACCUEIL</a></li>
            	<li><a href="http://www.XXX/XXX_services.html" class="bt2">SERVICES</a></li>
            	<li><a href="http://www.XXX/XXX_partenaires.html" class="bt3">PARTENAIRES</a></li>
            	<li><a href="http://www.XXX/XXX_references.html" class="bt4">REFERENCES</a></li>
            	<li><a href="http://www.XXX/XXX_contact.html" class="bt5">CONTACT</a></li>
        	</ul>
        </div>
</div>        
	<div id="conteneur">
   	  <div class="block">
			  <div class="titre">
				<h1 class="Style2">XXX-XXX-XXX</h1>
			  </div>
<div class="text">
       	  	<p>Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.Proin dignissim mauris eget massaviverra 
       	  	volutpat. Sed porttitor, ipsum vitae mollis pulvinar, sem felis <span class="img"><img src="img/photo1.png" alt="" width="318" height="158" /></span>rutrum quam, nec suscipit lacus nisl non massa. Phasellus lectus lorem, interdum a tristique et, ultricies nec turpis. Praesent convallis adipiscing velit, quis egestas arcu vulputate vitae. Aliquam et</p> <p class="Style2">risus nunc, sed vehicula libero. Nulla non enim quis risus vehicula vehicula elementum egestas enim. Ut at libero lorem, eu pharetra lorem. Praesent sed eros lorem, et hendrerit nulla. Nunc auctor ornare congue. Integer vitae ante sem. Pellentesque pharetra aliquet justo. Suspendisse purus metus, volutpat at pharetra volutpat, tempus vel lectus. Vestibulum consequat rhoncus sapien sed pretium. Morbi ultrices, est eget commodo tempus, lacus orci lobortis risus, sed tempor diam justo nec mi. Etiam quis mi turpis, at </p>
       	  	<p class="Style2">lacinia urna. Duis eget mi elit, id facilisis mauris. Quisque mollis nisl vitae tellus eleifend pulvinar. Aenean ullamcorper volutpat nisl posuere venenatis.

Nam vel mauris dui, dignissim aliquam diam. Donec pharetra, ipsum ac sagittis suscipit, mauris lorem ornare ligula, ac placerat odio lacus vitae odio. Cras enim arcu, fermentum vel egestas id, consequat vitae mauris. Donec id orci eget neque bibendum tempus eu vitae dolor. Proin vehicula turpis dolor,</p>
	    </div>
	  </div>
        
        <div class="bas">XXX 2010 <span class="Style2">©</span> tous droits réservés
        | website by <span class="a"><a href="http://www.XXX.be" target="_blank">###### ######</a></span></div>
	</div>
</body>
</html>


Je suis désolé pour le manque de clarté du code, je suis pas très performant en html, j'ai de solide lacune dans la compréhension du float et de la manière d'ajuster les div l'une par rapport à l'autre...

En attendant votre réponse,
Bien à vous
Modifié par michelmaguin (02 Nov 2010 - 10:33)
Le problème vient du fait que le background est sur le body et que tu as une images avec une largeur fixe ( le drop-shadow qui détermine la zone du contenu ) alors que ton design est fluide.

En gros, il te faudrait un conteneur de plus à ton code.


<div id="wrapper">
	TON CONTENU ET LES AUTRES DIV
</div>


Tu ajoutes comme CSS un width fix ( pour contenir ton contenu ) et un margin auto pour centrer ce conteneur là.


#wrapper { width:890px; margin:0 auto }


C'est sur que si tu mets ça directement dans ton code ça ne fonctionnera pas car la façon dont tu as fait ton site, ça va tout éclater. Cependant, la logique reste la même. En ce moment le positionnement de tes éléments ( margin, padding et tout ça ) fait référence au body ( exemple, ton top text a un margin de 620px par rapport au body. ) Puisque le body s'ajuste à la taille du navigateur, tes valeurs sont faussés du moment que tu redimensionnes ta fenêtre.

Donc, mets toi un div conteneur à la racine avec une valeur fixe quitte à mettre ton background sur ce conteneur là plutôt que le body.
Super! Pour le positionnement c'est résolu, MERCI Mr Sorano Smiley cligne !!!

Avez-vous une idée pour le fait que les images de mon menu n'apparaissent pas dans ie8 mais bien dans FF ?

Mon Html :

<div id="menu">
    		<ul>
        		<li><a href="http://www.XXX-XXX/index.html" class="bt1 Style2">ACCUEIL</a></li>
            	<li><a href="http://www.XXX-XXX/XXX-XXX_services.html" class="bt2">SERVICES</a></li>
            	<li><a href="http://www.XXX-XXX/XXX-XXX_partenaires.html" class="bt3">PARTENAIRES</a></li>
            	<li><a href="http://www.XXX-XXX/XXX-XXX_references.html" class="bt4">REFERENCES</a></li>
            	<li><a href="http://www.XXX-XXX/XXX-XXX_contact.html" class="bt5">CONTACT</a></li>
        	</ul>
        </div>


Mon CSS



#menu{
margin:0px;
padding:0
}

#menu ul li{
list-style:none;
float:left;
padding:0;
}

#menu ul li a{
display:block;
text-decoration:none;
text-align:center;
font-size:14px;
color:#333333;
line-height:47px;
}

#menu ul li a.bt1{
height:74px;
width:100px;
background:url(img/bt1.png)no-repeat top left;
}

#menu ul li a.bt2{
height:74px;
width:104px;
background:url(img/bt2.png)no-repeat top left;
}

#menu ul li a.bt3{
height:74px;
width:135px;
background:url(img/bt3.png)no-repeat top left;
}

#menu ul li a.bt4{
height:74px;
width:131px;
background:url(img/bt4.png)no-repeat top left;
}

#menu ul li a.bt5{
height:74px;
width:127px;
background:url(img/bt5.png)no-repeat top left;
}

#menu ul li a:hover{
background-position:bottom left;
}


Revoici le lien de l'exemple : http://www.XXX-XXX.be/XXX-XXX/XXX-XXX/
Modifié par michelmaguin (01 Nov 2010 - 08:38)
À première vue, c'est la gestion des PNG dans IE8 qui te cause soucis.

Deux solutions.
1) Tu fais des gif / jpg au lieu de PNG
2) Tu ajoutes un background color à tes background
Par exemple : background: #fff url(img/bt2.png)no-repeat top left;

Si les deux solutions ne fonctionnent pas, on ré-évaluera après. Mais si c'est un bug uniquement IE, je suis prêt à parier que c'est la gestion des PNG le problème.

D'ailleurs, conseil général, un PNG est beaucoup plus lourd et ça rend la page plus longue à télécharger. Dans ton cas, toutes tes images pourraient être des gifs ou des jpgs car tu n'utilises pas la transparence.

Sinon, si tu lis bien l'anglais je suis persuadé que si tu google IE8 PNG issue ou un truc comme ça, tu auras plein de réponses.
Bonjour Michel,

Merci de ne plus poster plusieurs fois le même message...

ps. : la bonne réponse t'a été donnée dans l'autre message. IE8 supporte tout à fait bien les PNGs.
Modifié par Laurie-Anne (13 Oct 2010 - 14:15)
Bonjour laurie-Anne,

je suis désolé, j'ai simplement répondu aux mails envoyés,
j'ai envoyé un message concernant mes png car elle n'avait plus de rapport avec la mise en page css.

Mr Sorano à répondu (et je le remercie) bien plus tard, alors que j'avais changer de lieu dans le forum et reformulé ma question, je suis désolé effectivement elle faisait partie de ma première question , mais je pensais vraiment qu'il n'y aurais pas de réponse pour la suite vu que j'étais dans les mise en page css, et que cela ne concernais pas les css.. ( c'est pas très clair hein?)

Concernant les messages sms,j'ai du glisser sur un touche pour un mot et faire un raccourci pour un autre mot ex: "pourquoi> pq" je m'en excuse.

je ne veux pas vous ennuyer,
Bonne journée.
En fait il devait y avoir un espace avant "no repeat" pour l'affichage des image dans ie8
voici l'exemple que m'a donné Julien Royer:

/* Avant */ 
background:url(img/bt1.png)no-repeat 
/* Après */ 
background:url(img/bt1.png) no-repeat


Je n'ai pas essayé vos deux solutions car mon soucis est résolus,
mais en tout cas, Merci de prendre du temps pour répondre aux demande de tous le monde Smiley cligne
Sujet clos
Aller à