28221 sujets

CSS et mise en forme, CSS3

[RESOLU] En bas ou en arrière plan ?

Salut,

J'ai créé récemment deux topics, un pour savoir comment mettre une image en arrière plan, et un autre pour savoir comment la positionner en bas à droite de ma page. J'ai passé mes deux sujets en "[RESOLU]" ; le problème c'est que j'arrive pas à avoir les deux à la fois : soit mon image est en bas à droite, soit elle est en arrière plan, mais j'arrive pas à l'avoir en bas de ma page ET en arrière plan.

Donc j'ai deux choix :

#flammes{
	background:url(flammes.jpg) no-repeat;
	width:436px;
	height:407px;
	float:right;
	right:0;
	padding:0;
	position: absolute;
	z-index: 0;
}
#articles{
margin:130px 0 0 350px;
padding:0;
z-index: 1;
}

L'image (#flammes) se met en en bas à droite de ma page mais au premier plan et cache donc mon autre calque (#articles).

#flammes{
	background:url(flammes.jpg) no-repeat;
	width:436px;
	height:407px;
	float:right;
	right:0;
	padding:0;
	position: absolute;
	z-index: 0;
}
#articles{
margin:130px 0 0 350px;
padding:0;
z-index: 1;
[bold]position:absolute;[/bold]
}

L'image (#flammes) se met en arrière plan mais en plein milieu de ma page (enfin alignée à droite mais pas en bas).

Dans mon html, j'ai un conteneur dans lequel il y a mon calque #articles et du texte dedans, puis mon calque #flammes.

Voila voila... je commence à désespérer... Smiley decu
Merci , a+ Smiley smile
Modifié le 07 Feb 2005 - 19:54
a écrit :
euh... C'est quoi ça :

[bold]position:absolute;[/bold]

?
Je sais pas, j'ai du me gourer dans mon copier coller, mais c'est pas dans mon code lol
a écrit :
Tu avais une partie de la solution ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=1699#p17260
body { 

   background: url(flammes.jpg) bottom right no-repeat;

}
J'ai déja essayé ça, mais l'image s'aligne en bas de l'écran et non de la page : et donc si il y a une scrollbar, l'image est "en bas" jusqu'à ce qu'on fasse défiler ; un peu comme sur cette image : http://sandwichpipo.free.fr/autres/articlev3-bug.jpg
Après avoir regardé ton code et tes feuilles de style... Je suis désolé d'avoir te le dire, mais il n'y a malheureusement qu'une seule chose à faire si tu veux régler ce type de problème:
- revoir les bases du positionnement CSS
- reconstruire entièrement tes styles

En effet, ta mise en page actuelle repose sur quelques contre-sens majeurs, dont surtout le fait qu'un bloc ne peut pas être à la fois en position absolue et flottant: ce sont deux modes de positionnements incompatibles Smiley cligne .

Je ne sais pas trop, à vrai dire, comment ce design parvient à tenir debout. Mais il est inutile d'espérer y obtenir un comportement logique d'une règle CSS toute simple (l'image de background du body) qui, ailleurs, serait effectivement très facile à appliquer Smiley cligne
[mode humour bas]

Laurent Denis a écrit :
Après avoir regardé ton code et tes feuilles de style... Je suis désolé d'avoir te le dire, mais il n'y a malheureusement qu'une seule chose à faire si tu veux régler ce type de problème:

Encore heureux que t'aie pas dit : 
A:\>Format c: /s


Smiley lol

[/mode humour bas]
a écrit :
Tu avais une partie de la solution ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=1699#p17260
body { 

   background: url(flammes.jpg) bottom right no-repeat;

}
J'ai déja essayé ça, mais l'image s'aligne en bas de l'écran et non de la page : et donc si il y a une scrollbar, l'image est "en bas" jusqu'à ce qu'on fasse défiler ; un peu comme sur cette image :http://sandwichpipo.free.fr/autres/articlev3-bug.jpgQuel boulet je suis, j'avais mal lu... Finalement ça marche, désolé et merci beaucoup Smiley biggrin Smiley biggrin Smiley biggrin
a écrit :
Après avoir regardé ton code et tes feuilles de style... Je suis désolé d'avoir te le dire, mais il n'y a malheureusement qu'une seule chose à faire si tu veux régler ce type de problème:
- revoir les bases du positionnement CSS
- reconstruire entièrement tes styles

En effet, ta mise en page actuelle repose sur quelques contre-sens majeurs, dont surtout le fait qu'un bloc ne peut pas être à la fois en position absolue et flottant: ce sont deux modes de positionnements incompatibles
Oki, merci de me l'avoir signalé, comme tu as vu je suis loin d'être une bête en CSS Smiley confused ... Enfin j'ai changé tout ça.
a écrit :
Encore heureux que t'aie pas dit :
A:\>Format c: /s
Merde, j'ai pas compris... Ptain si je comprends plus l'humour bas ça va plus. Allez un ptit tour sur mes blagues de l'année dernière, ça fait toujours du bien Smiley cligne
Modifié le 07 Feb 2005 - 18:43
Sujet clos
Aller à