Probleme de compatibilite navigateurs - mise en page d' elements div

Signaler
Messages postés
21
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
21 janvier 2010
-
Messages postés
21
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
21 janvier 2010
-
Bonjour,

Novice en codage, je tente de faire une mise en page et je rencontre quelques problemes...

Voici mon code HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>


Ceci est le bandeau




Menu haut


Menu moyen


Menu bas




Ceci est le contenu


Ceci est la colonne droite


Ceci est le pied de page


</html>

Voici mon CSS:
div {
text-align:center;
}
div#bandeau {
position:absolute;left:210px;
width:600px;
height:120px;
background-color:#00CCFF;
}
div#menu {
float:left;
width:200px;
height:600px;
background-color:#FF6699;
}
div#menu_haut {
width:200px;
height:200px;
background-color:#66CC33;
}
div#menu_moyen {
width:200px;
height:200px;
background-color:#FFCCEE;
}
div#menu_bas {
width:200px;
height:200px;
background-color:#CC99CC;
}
div#contenu {
position:absolute;left:210px;
margin-top:150px;
width:600px;
height:450px;
background-color:#FFCC00;
}
div#colonne_droite {
position:absolute;left:820px;
margin-top:150px;
width:150px;
height:450px;
background-color:#66CC33;
}
div#pied_page {
clear:both;
width:800px;
height:100px;
background-color:#33FF99;
}



Le rendu souhaité est celui de Firefox.

Je souhaiterai qu'il fonctionne egalement tout navigateur, ce qui n'est pas le cas. Par exemple, sous IE7, tout est sans dessus dessous...

Merci pour votre aide,

Talmai

5 réponses

Messages postés
109
Date d'inscription
vendredi 30 janvier 2004
Statut
Membre
Dernière intervention
23 novembre 2010

Salut, essaye d'enlever tous les div devant les # du css

taillecrayon
Messages postés
21
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
21 janvier 2010

Bonjour et merci pour ton conseil taillecrayon mais cela n'y change rien...

J'ai deux autres questions: est-il possible d'appeler une page html dans une div ?

Ensuite, l'index de mon site utilise des frames pour diviser la structure de mes pages. Le probleme est que lorsque je réduit la taille de ma fenetre ou que je passe sur un ecran plus petit, le contenu devient illisible...

En fait, ma question est: commment empêcher mes frames de changer de taille ? Il faudrait leur attribuer une taille fixe et que lorsque je change de taille d'écran, on ait un scroll général possible sur l'ensemble de la page mais pas sur chaques frames...

Voici mon code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MENU CSS + LOGO</title>
<link rel="stylesheet" type="text/css" href="./CSS/style.css"/>
</head>
<FRAMESET COLS="16%,70%,10%" border=3 frameborder="no" Scrolling="no">
<FRAME SRC="./menu.html" NAME="menu" border=3 frameborder="no" Scrolling="no">
<FRAMESET ROWS="15%,75%,10%" frameborder="no">
<FRAME SRC="./entete-acceuil.html" NAME="entete" border=3 frameborder="no" Scrolling="no">
<FRAME SRC="./acceuil.html" NAME="contenu" border=0 frameborder="no" Bordercolor="yellow" Scrolling="no">
<FRAME SRC="./pieds-acceuil.html" NAME="pieds" border=3 frameborder="no" Scrolling="no">
</FRAMESET>
<FRAME SRC="./partenaires.html" NAME="bandeau droite logos" border=3 frameborder="no" Scrolling="no">
</FRAMESET>
</html>


...merci pour votre aide...
Messages postés
239
Date d'inscription
mercredi 19 février 2003
Statut
Membre
Dernière intervention
17 janvier 2013
5
Bonjour,

Personnellement je fais cette action sur chaque page du coté mapage.aspx :

...	
<!-- Feuille de tous les navigateurs -->
<link rel="stylesheet" type="text/css" media="screen" href="../css_site.css" />
<!-- Feuille de IE7 -->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="../css_site_ie.css" />
<!-->
<!-- Feuille de IE8 -->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="../css_site_ie8.css" />
<!-->
...


a+
PascalCmoa
email: PascalCmoa
Messages postés
21
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
21 janvier 2010

Merci, mais à quoi correspond ton code ?
Quel est son effet exact ?

merci
Messages postés
21
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
21 janvier 2010

J'ai un nouveau probleme avec FIREFOX.

Dans mon css:
p img {position:absolute; right:-5px; width=870; height=570 }

Dans mon html:




Sous IE, cela fonctionne mais sous firefox, les proprietes width et height ne sont pas appliquées...