28220 sujets

CSS et mise en forme, CSS3

Bonjour !
Voilà, j'ai un petit soucis (hé oué).. Smiley lol
J'ai essayé de faire un bloc qui s'adapte a la largeur de la page Smiley confus .
J'ai testé les deux codes suivants :

div#scrollbar{ 
  position:absolute; 
  right:128px; 
  top:180px;
  bottom:80px;
  z-index:1;
  }


Sous firefox, pas de soucis, mais sous IE, le bloc ne s'affiche pas.

On dirait que IE veut avoir height. L'ennui, c'est que je n'ai pas de valeur fixe !
Quelqu'un a une idée ? Smiley smile

Merci ^^ Smiley enforcer
Modifié par Sylvain (19 Jul 2005 - 17:59)
mais, dans ce cas, je n'ai plus les même espaces a gauche et a droite...
Si je met 50% a mon blog:
en 800x600, il y a 400px pour ma div, et 200px de chaque coté
en 1024x768, il y a 512px pour ma div, 256px de chaque coté.

Or, moi, je veux avoir toujours le même nombre de pixel de chaque coté ! ^^
Modérateur
ah ok... Smiley ravi

bon essaye un truc de ce type alors:
div#scrollbar {
background: #000;
margin: 0 200px;
height: 100px; }
Ca rejoint ce que j'avais mis avec les marges en haut, mais ca ne marche pas non plus (ca en fait pas grand chose en fait) Smiley sweatdrop

désolé ^^
Modérateur
ah non, là quand je t'écris "margin: 0 200px;", çà veut dire que je mets les marges supérieures et inférieures à 0 et les marges gauche et droite à 200px.
j'essaie, mais j'arrive vraiment pas a le faire marcher.

Le vrai code que j'utilise qui marche sous firefox, c'est lui:
div#track { 
  position:absolute; 
  right:128px; 
  top:180px;
  width:20px; 
  bottom:80px;
  z-index:1;
  }

J'en avais pris un plus simple pour l'exemple Smiley cligne

La différence, c'est que c'est vertical et pas horizontal, mais je pense que c'est du pareil au même.
Il marche sous Ff mais pas sous Ie.
Tu as une idée ? (qui rejoindrait l'autre que j'arrive pas a faire marcher ?) Smiley rolleyes

En tout cas, j'ai appris à encore mieux me servir de margin ^^ Merci ^^ Smiley ravi
Modifié par Sylvain (19 Jul 2005 - 11:06)
Modérateur
arf... J'avais tapé ce code là:
<!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><title>Largeur variable</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-15" />
<style type="text/css">
<!--

div {
background: #9D9;
margin: 0 200px;
height: 100px; }

//-->
</style></head><body>

	<div>
	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
	</div>

</body></html>

Modifié par koala64 (19 Jul 2005 - 11:26)
On dirait qu'horizontal et vertical, ca a une différence...

<!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><title>Largeur variable</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-15" />
<style type="text/css">
<!--

div {
background: #9D9;
margin: 200px 0;
width: 100px; }

//-->
</style></head><body>

<div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>

</body></html>


Ca ne marche pas en vertical Smiley bawling
Je vais essayer quelque chose>

faire un div grande comme toute la fenetre, et la, positionner comme je le souhaite avec des padding.

Seulement, j'ai quelques soucis...
désolé, ce n'est pas ca, car la div violette "partie scrollable" ne s'agrandit pas
Modifié par Sylvain (19 Jul 2005 - 18:22)
Oui...
En positionnant le footer sur ce même modele en position absolue avec bottom : 0;, on aura l'impression que le contenu violet s'adapte non ? Smiley ohwell