28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div qui se balade selon les résolutions : Je ne veux pas !

Bonjour à tous,

je cherche à insérer une balise "flottante" qui contient une image dans ma page mais à un endroit bien précis.
Avec Dreamweaver, j'ai insérer une "div PA" que j'ai placé là où je le souhaitais.

Voici le code CSS : 
#apDiv1 {
	position:absolute;
	width:523px;
	height:294px;
	z-index:1;
	left: 172px;
	top: 469px;
	visibility: visible;
}


et celui HTML : 
<div id="apDiv1"><img src="images/fillebas.png" width="523" height="294" /></div>


Problème, selon les résolutions, l'image se décale sur la gauche ou la droite alors que je veux qu'elle reste à un endroit bien précis !

Auriez-vous une idée svp ?

Merci d'avance pour votre aide et bonne journée Smiley smile
Modifié par Masure (14 Aug 2009 - 14:01)
Bonjour jQz et merci pour la page que j'ai bien lu.
J'ai renseigné les propriétés top, bottom etc. mais rien n'y fait, quand je redimensionne la page, l'image bouge toujours Smiley decu
Je ne sais pas trop quoi mettre en pixel.. voici ce que j'ai mis : 
#apDiv1 {
	position:absolute;
	width:523px;
	height:294px;
	z-index:1;
	right: 200px;
	left: 202px;
	top: 469px;
	bottom: 20px;
	visibility: visible;
}

Qu'en penses tu ?
Ce n'est pas logique que right, left, top et bottom soient tous renseignés, comment ta div peut-elle être à 202px de la gauche et 200px de la droite alors que la taille de la fenêtre est variable ?
Garde seulement une valeur horizontale et une verticale.

De plus, visibility: visible ne sert à rien car ta div est visible par défaut.

Essaie déjà avec ça.

Est-ce que ta div est contenue dans une autre div ?
Si c'est le cas, il est possible que ce soit cette div parent qui se déplace. Il faut que ta div soit enfant de body.
Modifié par Skoua (07 Aug 2009 - 14:57)
Bonjour,

La notion de balise "flottante" est assez abstraite ; un exemple de la page en action ne serait pas un luxe pour mieux cerner ton problème Smiley cligne .

Romain
Pour ce qui est des variables, j'en reviens donc au départ, sauf que j'ai viré le visibility ce qui donne : 
#apDiv1 {
	position:absolute;
	width:523px;
	height:294px;
	z-index:1;
	left: 202px;
	top: 469px;
}


Ma div n'est pas dans une autre div, elle est placé juste après la balise <body>
J'ai mis la page en ligne si tu veux voir ce que ça donne :
http://www.club-dj.fr/DG/justanewd.htm

Quand on redimensionne la fenêtre, l'image de la fille peut se retrouver en plein milieu du site et moi je veux qu'elle reste tout simplement sous le menu, en bas du site.

J'attends de tes nouvelles, merci d'avance Smiley smile
Re-bonjour,

La méthode employée n'est pas la bonne. Le positionnement absolue ne peut t'aider dans ce contexte. Une première solution pouvant être avancée (qui méritera quelques réflexions quand même notamment gêne en terme de lisibilité de ton contenu) serait d'inclure cette décoration de la manière suivante :
- application de la propriété background-image sur ton élément footer ;
- application de la propriété padding-top sur ton élément footer ;
- application de la propriété z-index pour conserver cette image de fond au dessus des éléments centraux.

N'hésite pas si tu as des questions Smiley smile .

Romain
Administrateur
Masure a écrit :
Quand on redimensionne la fenêtre, l'image de la fille peut se retrouver en plein milieu du site et moi je veux qu'elle reste tout simplement sous le menu, en bas du site.

Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.

D'où la question : par rapport à quel ancêtre positionné se place ton div ?
Merci pour vos réponses mais je suis complètement perdu Smiley confus
J'ai beau lire des tutoriaux etc je ne trouve pas et je commence à craquer Smiley eek
J'essaie pleins de choses mais le résultat reste le même.
Je ne comprends vraiment rien Smiley ohwell
Désolé pour le dérangement mais il faut absolument que je trouve la solution, et même avec vos aides je n'y arrive, je vais m'arracher les cheveux Smiley confus

En fait, je ne comprends pas pourquoi mon div bouge horizontalement alors que verticalement c'est ok...
Modifié par Masure (07 Aug 2009 - 16:07)
Salut,

Pour résumer la chose, ton image en absolute se positionne en fonction du dernier élément positionné au dessus de lui, en l'occurrence ici le body. Le problème c'est que ton design bouge en fonction de la taille de l'écran vu qu'il se centre tout seul.

La solution viendrait dans le fait de mettre ton image avec la fille dans un élément positionné qui serait dans cette partie qui se centre automatiquement. On te propose le footer ou autre, à toi de voir.
Masure, inutile de t'arracher tes cheveux, cela ne résoudra pas le problème Smiley langue .

Relit le post de Raphael et dit nous la réponse à la question posée par sa question Smiley cligne .
Je vais passer pour un véritable crétin Smiley biggol mais je ne comprends pas vraiment le post de Raphael, l'histoire d'ancêtre en particulier.
dans ma source html, j'ai <body> puis viens mon <div> puis après mes <table> etc. (Oui je sais c'est pas bien mais je vais me mettre aux 100% CSS bientôt !)

Pour moi, mon <div> est bien au dessus de tout, idem dans mon éditeur WYSIWYG.

J'ai essayé de le mettre dans un tableau, même résultat, mon image bouge toujours horizontalement
Non car quand je mets le div dans un tableau, mon menu s'élargit puisque mon image est bien plus large que le menu.
Je veux tout simplement que l'image passe par dessus tout le site, placé à un endroit bien précis.
C'est pas évident Smiley ohwell
Alors, si j'ai bien compris, l'ancêtre de mon div est <body>
Mais je ne vois pas ce qu'il faut que je fasse...
Administrateur
Masure a écrit :
Alors, si j'ai bien compris, l'ancêtre de mon div est <body>
Mais je ne vois pas ce qu'il faut que je fasse...

Plus précisément :
- Ton div n'a aucun autre ancêtre positionné (= qui a une propriété CSS "position"), donc il va se placer par rapport au Body
- Il suffit de positionner l'ancêtre voulu (= lui donner la propriété CSS "position: relative" par exemple) pour que ton div se place par rapport à cet ancêtre

Si c'est volontaire qu'il n'y ait pas d'ancêtre à part le body... c'est un problème de conception du site au départ alors : je crois que l'approche de yodaswii est bien plus logique.
Modifié par Raphael (07 Aug 2009 - 17:24)
Merci à tous, j'ai réussi !
J'ai tout simplement ajouté la position absolue au body dans mon CSS mais j'ai un autre problème... Désormais mon site n'est plus centré !.
Voici le code : 
<style type="text/css">
.apDiv1 {
	position:absolute;
	width:392px;
	height:294px;
	z-index:1;
	left: -70px;
	right:600px;
	top: 490px;
}
td img {display: block;}body {
	margin-top: 0px;
	background-image: url(justanewd_bg.jpg);
	background-repeat: repeat-x;
	background-color: #000;
	position:absolute;
	
}
.centrer-txt {
	text-align: center;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.titre-blanc {
	color: #FFF;
}




</style>


Je ne vois pas comment je peux rencentrer mon site à nouveau.
Quelqu'un pourrait me donner les étapes pour centrer le site svp ?

Merci d'avance Smiley cligne
Bon en fait j'ai réussi en rajoutant letf:400px pour le body !
Merci encore une fois pour vos conseils Smiley smile
A bientôt !
Sujet clos
Aller à