28220 sujets

CSS et mise en forme, CSS3

voici tout d'abord mon code
.menu a {
width: 120%;
float: left;
display: block;
background-image:url(images/NeonDa5.jpg);
position:relative;
height: 48px;
line-height: 50px;
text-align: center;
font-size:14pt;
border: 2px outset #fff;
text-decoration: none;
color: #ffffff;
}


Je ne vois pas où est mon erreur.
je veux tout simplement mettre une image de fond de mon bouton sous form <ul> <li>
Modifié par Pops83 (19 Jul 2005 - 10:00)
Modérateur
Voici tout d'abord ma réponse...

Essaye avec:
background: url(images/NeonDa5.jpg) 0 0 no-repeat;
Et c'est une feuille d'impression que tu fais? Parce que sinon, l'unité "pt" n'est pas adaptée...

Bonjour! Smiley coucou
float: left;
et
position:relative;

c'est pas un peu trop pour du positionnement ?

dans lien tu as bien mis <a class="menu" ....> ?
Résolu en mettant comme ça
background:url("../images/NeonDa52.gif") 0 0 no-repeat;


Pour quoi float et position en trop ?
je comprend pas.
ok ton pb venait donc de l'adresse de ton image qui n'était pas bonne

je veut pas dire de bétise mais il me semble n'avoir jamais vu
float et position dans une meme classe
ce que je veux dire c'est soit l'un soit l'autre

si je ne me trompe pas , position sera le seul à etre pris en compte
laurent ou raphael le confirmerons je pense
Modifié par sane79 (19 Jul 2005 - 10:08)
ouais le problème devait étre les .. avant mais je comprend pas car le dossier images est au même niveau que ma page.

On va attendre l'avis des experts pour le float et position
Modérateur
Pour float et position, tu peux tout à fait les utiliser de concert. Le fait d'indiquer "position" te permet par exemple, de placer un élément en absolu à l'intérieur de la division ou bien, associé à "top", à placer ta division en hauteur au sein de son conteneur.

Sinon, tu ne dois pas mettre de guillemets dans la définition de l'url.

@+ Smiley cligne
Pops83 a écrit :
ouais le problème devait étre les .. avant mais je comprend pas car le dossier images est au même niveau que ma page.

On va attendre l'avis des experts pour le float et position


oui mais est ce que ta page css est au meme niveau que la page html
je ne suis pas sur
je pense que tu doit avoir une hierarchie comme ca:

Smiley home
- Smiley css
---- style.css
- Smiley image
---- neonduf5.gif
- page.html

et du coup il te faut positioné ton image par rapport à ton css et non à ton html (enfin je pense je ne suis pas sûr)
sinon oui ne met pas de guillemets

et sinon pour le float et position je ne savais pas qu'on pouvait le faire
quelqu'un à un exemple ?
Modérateur
Un petit exemple:
<!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>Positionnement</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-15" />
<style type="text/css">
<!--

.atcha {
background: #000;
width: 200px;
height: 100px;
float: left;
position: relative;
top: 20px;
margin: 0 20px; }
 
 #glop {
 background: #9D9;
 position: absolute;
 top: 50px;
 left: 100px;
 width: 20px;
 height: 20px; }

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

	<div class="atcha">
		<div id="glop">
		</div>
	</div>
	<div class="atcha"> </div>

</body></html>

Modifié par koala64 (19 Jul 2005 - 10:39)
oueh ok pour le positionnement absolu mais je ne vois pas trop l'interet du truc (il doit y en avoir un)

avec ceci cela fait la même chose
.atcha {
background: #000;
width: 200px;
height: 100px;
float: left;
[i]/*position: relative;
top: 20px;
margin: 0px 20px;*/[/i]
[b]margin: 20px 20px;[/b]
}

#glop {
background: #9D9;
[b]position: relative;[/b]
margin-top: 50px;
margin-left: 100px;
width: 20px;
height: 20px; }

Modifié par sane79 (19 Jul 2005 - 11:09)
Modérateur
Oui, je n'ai pas dit le contraire... Tout dépend de la configuration dans laquelle tu te trouves... Les css sont souples et te permettent d'utiliser différentes méthodes... A toi de voir celle qui te convient le mieux... Ici c'était pour l'exemple mais je ne l'aurais pas écrit comme çà s'il ne s'agissait pas de te montrer le rendu possible de cette méthode. Ce qu'il fallait retenir, c'était la possibilité de le faire... Smiley cligne
Avant tout, j'ai horreur qu'on me qualifie d'expert : ça vous met dans la position insupportable d'être obligé de trouver une réponse intelligente Smiley lol

Bon, soyons sérieux maintenant :

Pops83 a écrit :
voici tout d'abord mon code
.menu a {
width: 120%;
float: left;
display: block;
background-image:url(images/NeonDa5.jpg);
position:relative;
height: 48px;
line-height: 50px;
text-align: center;
font-size:14pt;
border: 2px outset #fff;
text-decoration: none;
color: #ffffff;
}


Je ne vois pas où est mon erreur.
je veux tout simplement mettre une image de fond de mon bouton sous form <ul> <li>


Une remarque : dans ce type de cas, la question sera plus claire si tu indiques aussi ce qui se passe : impossible de savoir au départ si l'image ne s'affiche pas (erreur d'url probable) ou mal (problème CSS probable)

Pour l'erreur sur l'url : attention, les url contenues dans les feuilles de styles externes ne sont pas relatives à la page HTML, mais à la feuille de style. Autrement-dit, elle doivent indiquer le chemin vers l'image depuis le répertoire où est le fichier CSS.

Personnellement, je place toujours les images de background CSS dans un sous-répertoire "images" du répertoire "CSS". Mon chemin est plus facile à trouver, et mes images de présentation sont séparées des images de contenu, ce qui me facilite la gestion.

Ensuite, pour "float et position" :
- on peut tout à fait ajoute une position relative à un float : la position relative prend l'élément là où il s'est mis en float et le fait glisser à gauche, à droite, en haut, en bas... selon les valeurs indiquées avec top, left... (exemple ci-dessus)
- on peut aussi ajouter relative à float quand on a besoin que le flottant puisse à son tour contenir des éléments en position absolue. (exemple ci-dessus aussi)
- mais on ne peut pas, par contre, faire un élément à la fois flottant et en position:absolute ou en position:fixe.
Modifié par Laurent Denis (19 Jul 2005 - 11:29)
Modérateur
Laurent Denis a écrit :
Bon, soyons sérieux maintenant
Zut! J'ai pas retiré mon casque de gloomith! Smiley biggol
Modifié par koala64 (19 Jul 2005 - 11:37)
Un expert ne doit pas donner forcément une réponse intelligente mais une réponse juste et c'est le cas ici: Rien à dire.

Quand à mon erreur de chemin, vous avez aussi raison; J'avais écrit le chemin en fonction de ma page php et non par rapport à ma css. Je le savais pourtant mais un oubli, un égarrement est si vite arrivé.

Quand au float, je n'ai pas tout compris ce qui a été dit mais si ça peut aider à faire avancer le schmilblik pour quelqu'un d'autre.

Moi ma page fonctionne comme ça, je ne vais pas m'amuser à la modifier.

Merci. Donc Double [Résolu]