28220 sujets

CSS et mise en forme, CSS3

Probleme de positionnement en absolute

Bonjour à tous,

Tout d'abord félicitations pour ce site très bien fait et facile d'accès en tout cas pour mon niveau de connaissance Smiley cligne .
C'est mon premier post sur ce forum mais je passe régulièrement sur ce site pour améliorer mes compétences en css.

Je viens donc vous voir pour un problème de flux qui je sais à dû être abordé des dizaines de fois en plus du super tuto du site mais je suis là avec un problème sensiblement différent je pense.
Donc j'ai un div conteneur dans lequel j'ai une liste comme pour un menu avec chaque élément de la liste qui est un lien en 2 parties pour réaliser "un calque css" avec les pseudos classes hover et active. Donc au passage sur le lien je positionne le bloc span contenu dans mon lien en absolute. Jusque là tout est "normal" sauf que le bloc span étant positionné en absolute il ne "pousse pas" le bloc conteneur vers le bas et donc ce bloc span "dépasse" mon bloc conteneur ce qui n'est pas très joli Smiley decu surtout si on a du contenu après.
Pour remédier à ça j'ai tenter la méthode du spacer sans succès et je viens donc faire appel à votre grande connaissance des css pour m'aider à avancer.

D'avance merci.
Un petit affichage du code CSS pour exemple, ca aidera peut être à mieux voir le problème :
#page {
	background: #00a ;
	border: 1px solid #003 ;
	padding : 1em;
}


#page a {
	text-decoration: none; /* définition du lien qui affichera le calque */
	color: #fff;
}

#page a:hover {
	background: none; /* correction d'un bug IE */
}

#page a span { /* définition de la balise <span> inclue dans <a> */
	display: none;
}

#page a:hover span { /* définition de la balise <span> au survol */
	display: inline;
	position: absolute;
	top: 30px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
	right: 30px;
	width: 400px;
	height: 280px;
	text-align: center;
	background-color:#eed;
	color: #960;
	font-size : x-large;
}

.spacer {
	clear:both;
}


Et le HTML qui va avec :
<body>

<div id="page">
	<a href="#">lien<span>Mon bloc "calque"</span></a>
<div class="spacer">&nbsp;</div>
</div>

</body>
#page a:hover span {
display: inline;
position: absolute;
...
}
A mon avis ton principe n'est pas très orthodoxe. En effet, malgré ta déclaration inline ton élément span sera block, ce qui est dérangeant relativement au fait que l'élément parent est supposé rester inline.
Tu devrais peut-être repartir sur de bonnes bases. En particulier pourquoi tiens-tu au positionnement absolu ?
j'avoues que la méthode peut paraitre un peu tordue mais c'est la seule méthode que je connaisse pour un "calque" en CSS. Mais pour information span est un élément de type inline, en tout cas d'après openweb :
a écrit :
boîte de type en ligne pour les hyperliens a, les images img, les portions de texte délimitées par em, strong, les citations q, les span, etc

Le positionnement absolu est une nécessité du fait que comme précisé dans le 1er post, mon but est d'avoir une liste d'éléments affichant à leur survol un calque mais au contenu différent précisé dans le span, ce calque ayant toujours la même position sur la page : inclus dans le bloc conteneur (#page) et à droite de la liste d'éléments (dans mon exemple l'élément est seul c'est le texte "lien".
Une position relative ou float viendrait insérer le span dans le flux et l'insérer entre 2 éléments de la liste.
Modifié par benny (27 May 2005 - 14:31)
benny a écrit :
pour information span est un élément de type inline
Il y a confusion, le même mot inline étant utilisé à propos de 2 choses n'ayant rien à voir :
- la terminologie DTD XHTML : il s'agit juste de dire que par exemple tu n'a pas le droit de mettre un élément <div> dans un élément <a>, ce qui ne présume en rien de l'apparance des éléments.
- la terminologie CSS qui définit des caractéristiques visuelles et de placement pour des boites, l'un des ensembles de caractéristiques étant regroupé sous le vocable inline.

Clairement il est fort possible d'avoir une div (block au sens DTD) inline au sens CSS, mais également un élément a (inline au sens DTD) être block au sens CSS.
benny a écrit :
Le positionnement absolu est une nécessité
Oui excuse moi j'ai mal lu ton post. Ton spacer est une solution, il suffit de lui donner une dimension pour que cela fonctionne.
oui c'est une solution pas très esthétique mais disons que au moins ca marche. En attendant mieux je penses que je vais utiliser cette solution. Le problème étant que le spacer doit etre calculé en fonction du contenu de mon span ce qui va que si la hauteur de ce contenu est fixe ... malheureusement.

Vu que j'aimerais réutiliser ce concept dans d'autres utilisations je laisses ce topic se poursuivre, quelqu'un aura peut-être LA solution Smiley cligne

Merci en tout cas pour ton aide xavier.
Sujet clos
Aller à