Problème mise en page et compatibilité

Question

Martelinho10

28 Jun 2005 à 10:36

Bonjour tout le monde.

Alors j'ai un problème.

Je vous donne ma feuille de style et la page pour commencer:

body {
font-family: Arial ;
font-size: 10 px ;
width: auto ; 
background-image: url(grillage.gif) ; 
margin: auto;
}

a img {
marig: 0;
border: 0 ;
}

#conteneur {
width: 777px ; 
background-image: url(head_haut.png) ; 
margin: auto ;
}

#headermenu {
padding: 15px 0px 0px 0px ;; 
width: 777px ; 
height: 52px ;
}

#header {
width: 777px ; 
height: 162px ;
background-image: url(header.png) ; 

}

#headerpub {
padding-top: 22px ; 
padding-left: 258px ;
}

#contenu {
position: absolute;
width: 777px;
height: 100% ;
background-image: url(back_contenu.png) ; 
}

#centre {
background-image: url(back_centre.png) ; 
margin-left: 203px;
margin-right: 188px;
}

#centrecontenu {
margin-left: 6px;
margin-right: 20px;
}

#centrecontenu a {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 10px ; 
letter-spacing : 1px ;
margin: 0 2px;
color: #336699;
font-weight : normal ;
text-decoration: none;
}

#centrecontenu a:hover {
color: #000000;
}

#gauche {
position: absolute;
left:0;
width: 203px;
}

#droite {
position: absolute ;
left: 589px ;
width: 188px ;
padding-right: 40px;
}

#droitecontenu {
width: 141px ; 
padding-left: 5px;
}

#pied {
bottom: 0px ;
width: 777px;
height: 57px;
background-image: url(footer.png) ; 
}


.textecentre {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: justify; 
padding-left: 6px ;
padding-right: 20px ;
}

.textecentrectr {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: center; 
padding-left: 6px ;
padding-right: 20px ;
}

.textecentrectr a {
letter-spacing : 1px ;
margin: 0 2px;
color: #336699;
font-weight : normal ;
text-decoration: none;
}

.textecentrectrlettre {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: center; 
padding-left: 6px ;
padding-right: 20px ;
}

.textecentrectrlettre a {
margin: 0;
color: #336699;
font-weight : normal ;
text-decoration: none;
}

.textecentrectr a:hover {
color: #000000;
}


.textepied {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: center; 
padding-top: 5px ;
}

.menugauche {
font-family: Arial, Helvetica, sans-serif ; 
font-weight: bold;
font-size: 11px ; 
list-style-type: none;
padding-left: 43px;
margin: 0px;
color: #336699;
}

.menugauche li {
margin: 1px;
}

.menugauche a {
letter-spacing : 1px ;
margin: 0 2px;
color: #336699;
font-weight : normal ;
text-decoration: none;
}

.menugauche a:hover {
color: #000000;
}

.menudroite {
font-family: Arial, Helvetica, sans-serif ; 
font-weight: bold;
font-size: 11px ; 
list-style-type: none;
padding-left: 5px;
margin: 0px;
color: #336699;
}

.menudroitetexte {
font-family: Arial, Helvetica, sans-serif ; 
font-weight: normal;
font-size: 11px ; 
list-style-type: none;
padding-left: 5px;
margin: 0px;
color: #336699;
}

.menudroitembr {
font-family: Arial, Helvetica, sans-serif ; 
font-weight: normal;
font-size: 11px ; 
list-style-type: none;
padding-left: 5px;
margin-top: 3px ;
margin-bottom: 3px ;
color: #000000;
}

.menudroitetitre {
border-bottom-width: 140px ; 
border-bottom: 1px dotted #336699;
color: #336699;
font-family: Arial;
font-size: 11px;
font-weight: bold;
background-color:transparent;
padding: 0px 0px 1px 0px;
margin: 0;
padding-left: 5px ;
padding-right: 32px ;
}

.menudroitecentre {
font-family: Arial, Helvetica, sans-serif ; 
font-weight: bold;
font-size: 11px ; 
padding-right: 7px;
padding-top: 5px ;
text-align: center;

}


.menudroite li {
margin: 1px;
}

.menudroite a {
letter-spacing : 1px ;
margin: 0 2px;
color: #336699;
font-weight : normal ;
text-decoration: none;
}

.menudroite a:hover {
color: #000000;
}

p {margin: 0 0 10px 0;}

label {
margin-left: 5px;
font-family: Arial, Helvetica, sans-serif ; 
font-weight: bold;
font-size: 11px ; 
}

input {
margin-left: 5px;
border: 1px solid #336699;
background-color: #F3F1F2;
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
color: #000000;
}

.centrenewstitre {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
font-weight: bold;
text-align: left;
padding-right: 40px ;
border-bottom-width: 140px ; 
border-bottom: 1px solid #336699;
color: #336699;
margin:0 ;
background-color:transparent;
}

.centrenewsdate {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: right;
font-style: italic ;
border-bottom: 1px dotted #336699;
color: #336699; 
padding-right: 5px ;
}

.centrenewstexte {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
text-align: justify; 
padding: 4px 4px 4px 4px;
}

#news {
border: 1px; 
background-color: #F3F2F1;
border-style: solid;
border-color:#336699;
}

.lastnews {
font-family: Arial, Helvetica, sans-serif ; 
font-size: 12px ; 
font-weight: bold;
text-align: left;
padding-right: 40px ;
border-bottom-width: 140px ; 
border-bottom: 1px dotted #336699;
color: #336699;
margin:0 ;
background-color:transparent;
}


<?
session_start();
?>

<!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">

<?
if ( isset($_GET) && array_key_exists('page',$_GET) && strlen($_GET['page']) > 0 && is_file($_GET['page'].'.php') ) {
 $page = $_GET['page'] ;
} else {
 $page = "accueil" ;
}
?>

  <head>
    <title>On The Bench</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="revisit-after" content="15 days" />
    <meta name="robots" content="index,follow" />

    <link rel="stylesheet" type="text/css" href="design/diz.css" media="screen" title="Normal" />
    
    <link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
  </head>
  <body>
  
	<div id="conteneur">
	
	<div id="headermenu">
	<img src="design/head_left.png" width="39px" height="52px" alt="left" /><a href="accueil.php"><img src="design/head_accueil.png" width="111px" height="52px" alt="accueil" /></a><a href="partenaires.php"><img src="design/head_partenaires.png" width="120px" height="52px" alt="partenaires" /></a><a href="contact.php"><img src="design/head_contact.png" width="100px" height="52px" alt="contact" /></a><a href="forums.php"><img src="design/head_forums.png" width="106px" height="52px" alt="forums" /></a><img src="design/head_right.png" width="301px" height="52px" alt="right" /></div>
	<div id="header">
	<div id="headerpub">
	<a href="http://www.hosteur.com/from.php?de=fm62"><img src="http://www.hosteur.com/images/ban460.gif" border="0" alt="Hosteur"></a><br>
	</div>
	</div>
	
	<div id="contenu">
    <div id="gauche">
	<img src="design/menug_site.png" width="203px" height="39px" alt="OTB - Site" />
  
			<ul class="menugauche">
			<li>&raquo; <a href="?page=page">Accueil</a></li>
			<li>&raquo; <a href="">Contact</a></li>
			<li>&raquo; <a href="">Forums</a></li>
			<li>&raquo; <a href="">Partenaires</a></li>
			</ul>
	<p></p>
	<img src="design/menug_cm5.png" width="203px" height="34px" alt="OTB - L'Entraîneur 5" />
  
			<ul class="menugauche">
			<li>&raquo; <a href="">Informations</a></li>
			<li>&raquo; <a href="">D&eacute;mo</a></li>
			<li>&raquo; <a href="">Astuces</a></li>
			<li>&raquo; <a href="">Joueurs</a></li>
			<li>&raquo; <a href="">Tactiques</a></li>
			<li>&raquo; <a href="">Entra&icirc;nements</a></li>
			<li>&raquo; <a href="">Patchs</a></li>
			<li>&raquo; <a href="">Updates</a></li>
			<li>&raquo; <a href="">Divers</a></li>
			<li>&raquo; <a href="">Tutoriels</a></li>
			</ul>
			
	<p></p>
	<img src="design/menug_multimedia.png" width="203px" height="34px" alt="OTB - Multim&eacute;dia" />
  
			<ul class="menugauche">
			<li>&raquo; <a href="">Vid&eacute;os</a></li>
			<li>&raquo; <a href="">Fonds d'&eacute;cran</a></li>
			<li>&raquo; <a href="">Pronostiques</a></li>
			</ul>
	
	<p></p>
	<img src="design/menug_football.png" width="203px" height="34px" alt="OTB - Football" />
  
			<ul class="menugauche">
			<li>&raquo; <a href="">Actu Ligue 1</a></li>
			<li>&raquo; <a href="">Actu Europe</a></li>
			</ul>	
	  </div>
	  
	  <div id="droite">
	  	<img src="design/menud_membres.png" width="188px" height="39px" alt="OTB - Membres" />
	  <div id="droitecontenu">
	<p class="menudroitetitre">Connexion</p>
    </div>
        <?
		if(isset($_SESSION['pseudo']))
		{
		echo '<p class="menudroitembr">Bonjour <strong>'.$_SESSION['pseudo'].'</strong> !</p>';
		echo '
		<ul class="menudroite">
		<li>&raquo; <a href="idx.php?page=includes/mbr_deconnexion">Mon profil</a></li>
		<li>&raquo; <a href="idx.php?page=mbr_liste">Liste des membres</a></li>
		<li>&raquo; <a href="idx.php?page=includes/mbr_deconnexion">D&eacute;connexion</a></li>
		</ul>
		<p></p>';
		}
		else
			echo '<div id="droitecontenu"><form name="form1" method="post" action="idx.php?page=mbr_confirmation">			    
			  <label>Pseudo:</label><input name="login" type="text" size="20" maxlength="25" value="" /><br />
			  <label>Mot de passe:</label><input name="pass" type="password" size="20" maxlength="10" value="" />
			  <p class="menudroitecentre"><input type="submit" name="Submit" value="Me Connecter" /></div></p>
			  
    
	
	<div id="droitecontenu">
	<p class="menudroitetitre">Infos Comptes</p>
	</div>
	<ul class="menudroite">
	<li>&raquo; <a href="idx.php?page=inscription">Inscription</a></li>
	<li>&raquo; <a href="">Mot de passe oubli&eacute;</a></li>
	<li>&raquo; <a href="idx.php?page=mbr_liste">Liste des membres</a></li>
	</ul>
	</form>
	<p></p>
	';		
		?>
	<img src="design/menud_sondage.png" width="188px" height="34px" alt="OTB - Sondage" />
  
	<p class="menudroitetexte">Script Sondage</p>
	<p></p>
	<img src="design/menud_newsletter.png" width="188px" height="34px" alt="OTB - Newsletter" />
  
	<p class="menudroitetexte">Script Newsletter</p>
	<p></p>
	<img src="design/menud_partenaires.png" width="188px" height="34px" alt="OTB - Partenaires" />
  
	<ul class="menudroite">
	<li>&raquo; <a href="http://www.hosteur.com/from.php?de=fm62">Hosteur.com</a></li>
	<li>&raquo; <a href="http://www.firecom-media.com">Firecom-Media</a></li>
	<li>&raquo; <a href="">Menu 2</a></li>
	<li>&raquo; <a href="">Menu 3</a></li>
	<li>&raquo; <a href="">Menu 4</a></li>
	</ul>

	</div>
	
  	<div id="centre">
  	 
  	  <?
include $page.'.php' ;
?>
    
  	</div>
	</div>
	</div>	
  </body>

  </html>

Alors là je ne comprends plus rien. Voyez plutôt:

Internet Explorer - Grand contenu (Parfait)

Internet Explorer - Petit contenu (Bug complet)

Mozilla - Grand contenu (Bug en bas de page sur les menus gauche et droite)

Mozilla - Petit contenu (Parfait)

Si quelqu'un pouvait m'aider :snif:

Merci d'avance à tous ceux qui m'aideront
Modifié par Martelinho10 (30 Jun 2005 - 11:06)

Martelinho10

30 Jun 2005 à 09:27

Petit up.

Personne n'a une solution à mon problème? Smiley rolleyes

Cedric

30 Jun 2005 à 09:57

Peut être qu'avec un titre plus explicite et une description plus ciblée du code attirerait plus de monde Smiley cligne

Martelinho10

30 Jun 2005 à 10:25

On vois très bien dans mon code les DIV menu gauche et menu droite. Ainsi que les CSS correspondant, non ?

Cedric

30 Jun 2005 à 10:27

Tu as tout a fait raison Smiley smile

Sois (très) patient, la réponse va arriver, ne tiens surtout pas compte de ce que j'ai dis.

Martelinho10

30 Jun 2005 à 10:51

Alors l'architecture minimale nécessaire à ma page:
CSS


#conteneur {
width: 777px ;
background-image: url(head_haut.png) ;
margin: auto ;
}

#headermenu {
padding: 15px 0px 0px 0px ;;
width: 777px ;
height: 52px ;
}

#header {
width: 777px ;
height: 162px ;
background-image: url(header.png) ;

}

#contenu {
position: absolute;
width: 777px;
height: 100% ;
background-image: url(back_contenu.png) ;
}

#centre {
background-image: url(back_centre.png) ;
margin-left: 203px;
margin-right: 188px;
}

#gauche {
position: absolute;
left:0;
width: 203px;
}

#droite {
position: absolute ;
left: 589px ;
width: 188px ;
padding-right: 40px;
}

Et la page son architecture:


<html>

<head>

</head>

<body>

<div id="contenueur">

<div id="headermenu">
</div>   <!-- Fin du div "headermenu" -->

<div id="header">
</div>   <!-- Fin du div "header" -->

<div id="contenu">

<div id="gauche">
</div>   <!-- Fin du div "gauche" -->

<div id="droite">
</div>   <!-- Fin du div "droite" -->

<div id="centre">
</div>   <!-- Fin du div "centre" -->

</div> <!-- Fin du div "contenu" -->

</div> <!-- Fin du div "conteneur" -->

</body>

</html>

Voilà voilou en espérant que j'aurais une solution à mon problème.

Si vous avez des questions ou des renseignements n'hésitez pas.

Merci d'avance à tous ceux qui m'aideront Smiley cligne

Cedric

30 Jun 2005 à 10:58

Avant de fermer le conteneur, rajoute qq chose genre

<hr />

et dans le code css

hr{
clear: both;
visibility: hidden;
}

Au passage, tu peux aussi éditer ton titre pour qu'il soit plus explicite. Généralement dans le salon CSS, tous les problèmes sont des problèmes de design (de plus, les majuscules ne servent à rien) Smiley smile

Modifié par TriadPtale (30 Jun 2005 - 10:59)

Martelinho10

30 Jun 2005 à 11:10

Ce qui me donne :

</div> <!-- Fin du div "contenu" -->

<hr />

</div> <!-- Fin du div "conteneur" -->

Et j'ai rajouté également à ma feuille de style les propriétés que tu m'as donné.

Cela ne change rien.

Cedric

30 Jun 2005 à 11:23

Remonte le juste avant contenu

Martelinho10

30 Jun 2005 à 11:44

Aucun changement Smiley ohwell

Sujet clos