28220 sujets

CSS et mise en forme, CSS3

Position absolute, width et height (sous firefox)

salut à tous, mon problème est très simple car j'en ai trouvé la cause :

quand on fait un div (ou span), et que dans la feuille de style CSS on spécifie position:absolute, height:20px, width:20px, tout marche tres bien, sous IE comme sous Firefox : on a un calque en position absolue qui fait 20px sur 20px

si on enlève le position:absolute, ou si on le remplace par position:relative/static, cela ne change rien sous IE, par contre Firefox oublie completement les height et width spécifiés auparavant : le div prend ses dimensions en s'adaptant au texte qu'il contient

mon problème : j'ai besoin d'avoir un div dimensionné par un height et un width.... sans position:absolute, et qui marche sous Firefox Smiley decu

P.S : les dimensions que je souhaite pour mon div sont supérieures à celles que le div prend par défaut en s'adaptant au texte qu'il contient (je ne sais pas si cela a de l'importance)
Salut kosovar tu es comme moi un nouveau néanmoins je te souhaite la bienvenue Smiley cligne

Je viens de faire qques tests avec ton probléme, ben j'en ai aucun moi Smiley confus . Pourrais tu montrer un petit morceau de ton code css/html ? Je pourrais sûrement t'aider d'avantage Smiley cligne

a+
Modifié par Bazunga (14 Jun 2005 - 10:36)
salut, merci pour ta reponse Smiley biggrin

alors, le html :


<html>
	<head>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<span id="span1">Test</span>
	</body>
</html>


puis la feuille de style css :


#span1
{
width:200px;
height:200px;
background-color:#f00;
color:#fff;
text-align:center
}


avec tout ca, si j'ouvre ma page html sous IE ca me donne ca :


http://www.alsatel.fr/iexplorer.jpg

et sous Firefox ca me donne :


http://www.alsatel.fr/firefox.jpg


walla c pa la meme chose comme vous pouvez le constater :x
Salut,
les <span> sont des balises en ligne (inline), voir l'explication :
http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

On ne peut pas les dimenssioner, il faudrait utiliser display: block; pour régler la question, mais là il semble tout simplement que c'est la balise qui n'est pas correcte, tu devrais utiliser <div> qui est l'équivalent block de <span>

Par ailleurs, il manque un doctype à ton code, c'est TRES important, et une balise <title>.
Enfin, suivant la version d'HTML que tu utilises, tu ne peux pas mettre un élément inline directement dans le body, d'où l'importance du doctype.

Le fait qu'IE dimenssione tout de même ton span est une légèreté du moteur de rendu CSS d'IE et n'est pas le comportement normal.
Modifié par Olivier (14 Jun 2005 - 13:30)
uh.. il va donc falloir que je développe un peu + les sources de mon problème.

je sais que les <span> sont des balises inline, et c'est d'ailleurs pour ca que je n'ai pas utilisé de div (justement parce que ce sont des block). Par contre je ne savais pas qu'on ne pouvait pas les dimensionner, cela dit ca marche sous n'importe quel navigateur si on rajoute "position:absolute" dans la feuille de style, mais je conviens parfaitement qu'il s'agisse là d'assouplissements de moteurs de navigation et que ça n'est pas une utilisation des span dans les règles de l'art.

en bref : je fais un menu déroulant en javascript (booooooouuuhh je cé ya un tuto qq part dans le site qui explique comment faire tout ca en css, mais je l'ai decouvert un peu tard, mon menu marche a 98%, et j'ai pas la motiv' de m'attaquer à de la programmation css pour ca)

mon objectif, c'est d'avoir un texte contenu dans un span invisible, pour que je puisse dire à javascript d'ouvrir et de fermer le menu selon que la souris soit sur le span ou non (rien à voir avec le texte contenu dans le span), d'ou l'interet du dimensionnement du span.
j'utilise span paske j'en ai plusieurs à la suite et que je veux qu'ils soient en ligne et non pas les uns en dessous des autres comme le font les div (mes tests avec display:inline n'ont rien donné).

voila le pourquoi du comment

si personne n'a de solution je comprendrais, c'est un peu compliqué Smiley ohwell

euh... doctype, connait pa (jsuis encore un novice), mais je vais courir de suite cheveux aux vents me renseigner sur cette chose qui a l'air importante. la balise <title>.... on s'en fou.... non ?
Modifié par Kosovar (14 Jun 2005 - 13:54)
Tu peux éventuellement attribuer un display: block à tes <span> pour les dimensionner comme tu l'entends... dans ce cas, sans CSS, les <span> se dégraderont en éléments en ligne (sous les navigateurs texte, Lynx par exemple).
Mais si c'est pour faire un menu, il vaut mieux utiliser une balise <ul> pour le définir, et des <li> pour chacun des éléments du menu. Dans ce cas tu peux attribuer un dispay: block aux balises <li> et les dimensionner comme tu l'entends ! C'est une méthode préconisée, pour ce qui est de l'accessibilité.
En espérant que ça peut t'aider Smiley smile
Sujet clos
Aller à