28172 sujets

CSS et mise en forme, CSS3

Pb de div calé sur left et right

Hello shiver et bienvenue,

shiver a écrit :
Une image vaut mieux qu'un long discours.
Mouaip... ça n'est déjà pas toujours vrai dans la vie de tous les jours mais en ce qui concerne une page web ce serait plutôt (par ordre de préférence) :
* une page en ligne.
* le code (html + css) permettant de reproduire le problème.
* éventuellement une image pour voir le rendu souhaité. Smiley cligne

Tu veux parler de quelque chose comme ça ?
<!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" />
<title>Test</title>
<style type="text/css" media="screen">
html, body {
	margin:0;
	padding:0;
}
#div1 {
	width: 700px;
	height: 600px;
	background: #00CC00;
	float: left;
}
#div2 {
	position: fixed;
	left: 700px;
	right: 0;
	height: 600px;
	background: #FF3300;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
oui voilà merci pour le code, j'avais ça à la place :



<style type="text/css" media="screen"> 
html, body { 
    margin:0; 
    padding:0; 
} 

.div1 { 
    position:absolute;
    left:0px;
    top:0px;
    width: 700px; 
    height: 600px; 
    background: #00CC00; 
} 

.div2 { 
    position: absolute; 
    top:0px;
    left:700px; 
    right: 0px; 
    height: 600px; 
    background: #FF3300; 
} 
</style> 
</head> 
<body> 
<div id="div1" class="div1"></div> 
<div id="div2" class="div2"></div>



Pourtant ça m'affiche bien ce que je veux sur Safari et Firefox mais apparemment pas sur Firefox PC.

Tu as mis dans le css de div2 un left + un right et je croyais que c'était ça qui n'était pas bien pris en charge par Firefox PC...

Mon code fonctionne chez toi ou il comporte des erreurs ?
Modifié par shiver (03 Sep 2009 - 03:29)
Bonjour,

Un petit début de piste :
Vu que ta div2 est en position absolu elle ne s'élargira jamais suivant l'écran.
masseuro a écrit :
Vu que ta div2 est en position absolu elle ne s'élargira jamais suivant l'écran.
Euh... ben si : tu peux essayer avec mon code avec absolute à la place de fixed et le rendu est le même. Smiley cligne

@shiver > ton code fonctionne aussi chez moi avec FF2+


PS: par contre si tu n'as pas de contraintes particulières pourquoi ne pas faire tout simplement :
<!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" /> 
<title>Test</title> 
<style type="text/css" media="screen"> 
html, body { 
    margin:0; 
    padding:0; 
} 
#div1 { 
    width: 700px; 
    height: 600px; 
    background: #00CC00; 
    float: left; 
} 
#div2 { 
    margin-left: 700px; 
    height: 400px; 
    background: #FF3300; 
} 
</style> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
</body> 
</html>

Modifié par Heyoan (03 Sep 2009 - 11:41)
shiver a écrit :
Une image vaut mieux qu'un long discours.

Toi, tu as loupé la définition de l'accessibilité web, non? Smiley lol
Sujet clos
Aller à