XHTML strict 1.0 positionnement firefox ie
XHTML strict 1.0 positionnement firefox ie - HTML/CSS - Programmation
Marsh Posté le 04-02-2007 à 23:52:50
C'est normal.
Quand tu fais des float:left, ou right.
Tu forces les éléments à se placer.
Pour footer, faut remettre de l'ordre dans les emplacements :
Et donc
tu utilises clear:
Clear:left; pour arrêter de forcer le flux à gauche
right; pareil
ou both, pour les 2
à toi de voir, le plus pertinent.
Marsh Posté le 05-02-2007 à 13:18:46
j'ai essayé mais rien a faire, marche pas.
tu peux me filer un exemple?
Sujets relatifs:
- Menu en cascade ne redimensionne pas le calque conteneur sous firefox
- xhtml+php: ça peut etre validé par le w3c?
- IE7 ok Firefox probleme (css)
- Firefox OK, Internet Explorer Problème
- Js compatibilite IE / firefox
- Photos s'affichent dans firefox, mais pas dans IE
- Bug sous firefox ?
- Pb affichage css sous Firefox mais marche sous IE
- [CSS] Positionnement dans IE :-(((
- Top Navigational Bar II sous Mozilla firefox
Marsh Posté le 04-02-2007 à 20:49:52
bonjour,
je me prends la tête depuis deux jours la dessus pour que ca fonctionne sous ie et firefox mais rien a faire...
j'essaie de mettre mon footer en bas la de page et que contenu1 et contenu2 remplissent la hauteur restante.
quelqu'un aurait-il un idée??
voici le code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
div#global {
position: relative;
width: 750px;
height:100%;
margin: auto;
background-color:#3399FF;
}
div#header {
position: relative;
width: 750px;
height: 150px;
background-color:#339933;
}
div#menu {
position: relative;
float:left;
height:80px;
width: 750px;
background-color: #ffff00;
}
div#corps {
position: relative;
float:left;
height:auto;
width: 750px;
background-color:#FF6633;
}
div#contenu1 {
height:100%;
float: left;
width: 530px;
background-color:#996600;
}
div#contenu2 {
float: right;
width: 200px;
background-color:#99FF33;
}
div#footer {
float:left;
width: 750px;
height: 30px;
bottom:0px;
background-color:#339933;
}
</style>
</head>
<body>
<div id="global">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="corps">
<div id="contenu1">CONTENU 1</div>
<div id="contenu2">CONTENU 2</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>