28220 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage non correct sous IE et FF

Salut

J'ai un problème d'affichage dans Firefox et IE ? Pouvez-vous m'aidez

Voici le lien vers le site http://www.npdesign.be/test2/

Voici les codes sources:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>site2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link type="text/css" rel="stylesheet" href="styles.css" />

	
</head>
<body style="background-color:#4C5844;">

	<div id="haut_">
	</div>
	
	<div id="barre_">
	</div>


	<div>
    <div id="contenu">
    	<div id="centre-h_">
    	</div>
    	
    	<div id="id1px-centre-h_">
    		Bienvenue sur mon site<br/>
			Salut<br/>
			<br/>
    	</div>
    	
    	<div class="news-h_">
    	</div>
    	
    	<div class="id1px-news-h_">
    		Salut voici une petit news pour le test
    	</div>
    	
    	<div class="news-b_">
    	</div>
		
		<div class="news-h_">
    	</div>
    	
    	<div class="id1px-news-h_">
    		Salut voici une 2eme petit news pour le test
    	</div>
    	
    	<div class="news-b_">
    	</div>
    	
    	<div id="centre-b_">
    	</div>
		
  	</div>

  	<div id="menu">
  		<div id="haut">&nbsp;</div>
  		<div id="centre">
		<a href="#">Lien</a><br/>
		<a href="#">Lien2</a><br/>
		<a href="#">Lien3</a><br/>
		<a href="#">Lien4</a><br/>
		<a href="#">Lien5</a><br/>
		</div>
  		<div id="bas">&nbsp;</div>
  	</div>
	<div id="ext_g">&nbsp;</div>
  
  	<div id="hr"></div>
	</div>	

  <div id="bas_">
	</div>
</body>
</html>


html, body { 
	margin: 0; 
	width: 816px; 
	height: 850px;
}

#haut_ {
	height:218px; 
	background-image: url("images/haut.gif");
}

#barre_ {
	height:33px;
	background-image: url("images/barre.gif");
}

#menu
{
	width: 178px;
	height:auto;
	background-image: url('images/1px_menu_h.gif'); 
}

#haut {
	width:100%;
	height:47px;
	background-image: url("images/menu_h.gif");
}

#centre {
	width:100%;
	height:auto;
	padding-left: 60px;
}

#bas {
	width:100%;
	height:35px;
	background-image:url("images/menu_bas.gif");
}

#ext_g {
	width:100%;
	height:auto;
	background-image: url("images/1px_ext_g.gif");
}

#centre-h_ {
	height:31px;
	background-image: url("images/centre_h.gif");
}

#contenu {
width: 638px;
	float: right;
}

#id1px-centre-h_ {
	background-image: url("images/1px_centre_h.gif");
	padding-left:30px;
}

.news-h_ {
	height:46px;
	background-image: url("images/news_h.gif");
}

.id1px-news-h_ {
	background-image: url("images/1px_news_h.gif");
	padding-left:50px;
}

.news-b_ {
	height:32px;
	background-image: url("images/news_b.gif");
}

#centre-b_ {
	width:638px; /* Pourquoi on ne peut pas supprimer ce width ?? */
	height:52px;
	background-image: url("images/centre_b.gif");
}

#bas_ {
	height:157px;
	background-image: url("images/bas.gif");
}

#hr { 
	clear: both; 
	visibility: hidden;
	margin: 0;
}


Pouvez-vous me dire ce qui ne va pas
Dans firefox il manque un partie en dessous du menu ?
et dans IE le menu n'est pas bien placé
Modifié par PaNTi (21 Sep 2005 - 17:02)
Administrateur
Salut et bienvenue ici Smiley smile

Je vais être sec (désolé par avance) mais :

1- ton titre n'a rien de pertinent : 99% des sujets du forum concernent des "problèmes". Comment distinguer le tien des autres ?
Je suppose que tu as lu les Règles avant de poster, dans ce cas, j'aimerais que tu relises (et appliques) celle-ci : http://forum.alsacreations.com/help.php#regle11
Merci d'avance

2- comme tu le dis, il s'agit d'un problème d'affichage (et non de structure). L'affichage est géré par les CSS et n'a rien à voir avec la structure (X)HTML.
Ton sujet n'a donc rien à faire dans ce salon. Je le déplace dans le salon CSS et mise en forme.

Bonne chance Smiley cligne
Administrateur
PaNTi a écrit :
Merci je vais allez lire les régles car je ne les avaient pas lu

Curieux.
En t'inscrivant, tu as un texte que tu lis et approuves en cliquant sur le bouton d'inscription.
Ce texte dit clairement que tu dois lire les Règles avant de créer ton premier post.

Tu ne lis jamais les contrats quand tu signes ?
M'enfin bon : c'est toujours fast-food et compagnie, comme d'hab.
On arrive, on prend et on se barre Smiley ohwell

PS : désolé, je n'ai rien contre toi : journée fatiguante et lassé de répéter la même chose.
Modifié par Raphael (20 Sep 2005 - 18:12)
Administrateur
PaNTi a écrit :
Je suis tous aussi désolé de ne pas avoir pris le temps de les lires

Allez tope-là : on efface tout et on recommence Smiley smile
Salut PaNTi et bienvenue sur le forum Smiley cligne
Bonjour,
Comme ceci, CSS:
html, body { 
	border:0; padding:0px; margin:0px;
	width: 816px; 
	height: 850px;
}

#haut_ {
	height:218px; 
	background-image: url(images/haut.gif);
}

#barre_ {
	height:33px;
	background-image: url(images/barre.gif);
}

#menu
{position: absolute;left:0;
	width: 178px;
	height:auto !important; height:200px; min-height:200px;
	background-image: url(images/1px_menu_h.gif);
	background-repeat: repeat-y;
}

#haut {
	width: 178px;
	height:47px;
	background-image: url(images/menu_h.gif);
}

#centre {
	width: 178px;
	height:auto !important; height:50px; min-height:50px;
	padding-left: 60px;
}

#bas {
	width: 178px;
	height:35px;
	background-image:url(images/menu_bas.gif);
}


#centre-h_ {
	height:31px;
	background-image: url(images/centre_h.gif);
}

#contenu {margin:0px 0px 0px 178px;padding:0px;border:0;
	width: 638px;
	height:auto !important; height:200px; min-height:200px;
}

#id1px-centre-h_ {
	background-image: url(images/1px_centre_h.gif);
	padding-left:30px;
}

.news-h_ {
	height:46px;
	background-image: url(images/news_h.gif);
	text-decoration: underline ;
	padding-left:60px;
	line-height: 15px;
}

.id1px-news-h_ {
	background-image: url("images/1px_news_h.gif");
	padding-left:50px;
}

.news-b_ {
	height:32px;
	background-image: url("images/news_b.gif");
	text-align:right;
	padding-right:60px;
	font-size: smaller;
	line-height: 10px;
}

#centre-b_ {
	width:638px; /* Pourquoi on ne peut pas supprimer ce width ?? */
	height:52px;
	background-image: url("images/centre_b.gif");
}
#Lecorps {
	height:auto !important; height:200px; min-height:200px;
	width: 816px;
	background-image: url(images/1px_ext_g.gif);
	background-repeat:repeat-y;
}

#bas_ {
	height:157px;
	background-image: url("images/bas.gif");
}

Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>site2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link type="text/css" rel="stylesheet" href="styles.css" />

	
</head>
<body style="background-color:#4C5844;">

	<div id="haut_">
	</div>
	
	<div id="barre_">
	</div>


	<div id="Lecorps">
	
  	<div id="menu">
  		<div id="haut"> </div>
  		<div id="centre">
		<a href="#">News</a><br/>
		<a href="#">A propos</a><br/>
		<a href="#">Changelog</a><br/>
		<a href="#">Screenshots</a><br/>
		<a href="#">Vidéos</a><br/>
		<a href="#">Livre d'or</a><br/>
		<a href="#">Contact</a><br/>
		
		</div>
  		<div id="bas"> </div>
  	</div>

    <div id="contenu">
    	<div id="centre-h_">
    	</div>
    	
    	<div id="id1px-centre-h_">
    		Bienvenue sur mon site<br/>
			Salut<br/>
			<br/>
    	</div>
    	
    	<div class="news-h_">
		<strong><br/>News 1</strong>
    	</div>
    	
    	<div class="id1px-news-h_">
    		Salut voici une petit news pour le test<br/>
			<br/>
			<br/>
			VOila
    	</div>
    	
    	<div class="news-b_">
		<em><br/>Le 01/01/01</em>
    	</div>
		
		<div class="news-h_">
		<strong><br/>News 2</strong>
    	</div>
    	
    	<div class="id1px-news-h_">
    		Salut voici une 2eme petit news pour le test
			<br/><br/>
    	</div>
    	
    	<div class="news-b_">
		<em><br/>Le 01/01/01</em>
    	</div>
    	
    	<div id="centre-b_">
    	</div>
  	</div>
  
	</div>	

  <div id="bas_">
	</div>
</body>
</html>
@comar91

Est-ce que tu pourrais décrire en quelques lignes les modifications que tu as faites sur le design de PaNTi ?

Parce qu'avec son titre peu évocateur, l'absence de description du problème et aucun détail sur la solution proposée, ce sujet représente pour le moment très peu d'intérêt pour la communauté Smiley ohwell
Oui tu as tout à fait raison, avec mes excuses.
L'idée est de récuperer la hauteur du + grand des deux div menu/contenu au niveau supérieur et d'appliquer sur le dit niveau une image de fonds.
Je suis donc passé du 'mode float' à un positionnement absolu.

Ce qui nous donne pour le css:
1/ Ajout id Lecorps sur div incorporant menu et contenu 

 height:auto !important; height:200px; min-height:200px;
width: 816px;
background-image: url(images/1px_ext_g.gif);
background-repeat:repeat-y;

2/ Modification id menu 
position: absolute;left:0;
 height:auto !important; height:200px; min-height:200px;
 background-repeat: repeat-y;

3/ Modification id centre 
 height:auto !important; height:50px; min-height:50px;

4/ Modification id contenu 
margin:0px 0px 0px 178px;padding:0px;border:0;
 height:auto !important; height:200px; min-height:200px;

Pour le code:
1/ Modification du div contenant menu et contenu
 <div id="Lecorps">

2/ J'ai interverti menu et contenu
3/ J'ai supprimé de menu 
<div id="ext_g">

4/ J'ai supprimé 
<div id="hr">
Sujet clos
Aller à