28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Position image sur un tableau

Bonjour à tous et merci d'avance pour votre aide.
J'ai consulté différent post, lu en long et en large l'article
Initiation au positionnement CSS (partie 2)

Mais rien à faire je n'arrive pas à obtenir le résultat voulu.
http://www.mmcontainer.be/service.php

Je souhaiterais posé le badge sur la partie inférieure droite du tableau.
En absolut le résultat est le bon, mais malheuresement déplace le badge en fonction de la longueur du viewport.

Voici l'extrait du code.
.badge {
	position: relative;
	z-index: 2;
	background-image: url(../images/badges/price.png);
	margin: 0px;
	padding: 0px;
	height: 321px;
	width: 321px;
	float: right;
}



<h1><a name="1">...</a></h1>
<p>...</p>

[b]<div class="badge"></div>[/b]
<table>...</table>


Merci à vous
Modifié par Rifton007 (17 Sep 2010 - 17:06)
Bonjour

Dans la mesure où ton badge contient du texte, qui à mon sens est quand même plutôt important pour ton site, le mettre en background est une mauvaise idée.

Ce tu que tu peux faire :
- mettre un div autour de ta table, en position:relative.
- mettre ton image dans cette div, directement dans le html avec une classe, puis lui donner une position:absolute (il se positionnera en fonction de ton div qui est en relative), et fixer bottom et right (partie inférieure droite c'est bien ça ?) (et lui mettre un attribut alt="" avec le texte qui y figure)


Par contre tu veux que ton badge couvre le tableau ou pas ?
Modifié par InpIxelItrust (17 Sep 2010 - 15:42)
Oui du coup il te faut un code du genre



<div  id="relative-contenaire">
<table> le tableau </table>
<img class="absolute_badge" src="tonbadge.jpg" alt="le texte du badge"/>
</div>


Et un css genre


#relative-contenaire{
position:relative;}

.absolute_badge{
position:absolute;
bottom:10px;
right:10px;
z-index:99;}


code à adapter en fonction du besoin, j'ai mis un z-index élevé sur le badge pour être sure qu'il passe au dessus tu peux bien sure mettre moins ^^
Parfait ça marche tu tonerre.

Et encore merci, probléme résolu.

PS: Par curiosité je suis parti voir ton blog, il est super. J'aime bcp le style.
Sujet clos
Aller à