Comment positionneriez-vous ces images?

http://elektrikhost.com/Comment positionneriez-vous ces images?

Vous voyez les pingouins c'est sur l'en-tête sur les colonnes? J'essaye de les faire passer l'en-tête et la liste. Je me demande ce que tu ferais? utiliser la position absolue ou relative? Je suis coincé.

HTML:

<section class="starter"> 
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"> 
    <h2>Starter Plan</h2> 
    <ul> 
    <li><span>5GB Disk Space</span></li> 
    <li><span>Unmetered Bandwidth</span></li> 
    <li><span>Unlimited Add-on Domains</span></li> 
    <li><span>Unlimited Subdomains</span></li> 
    <li><span>Unlimited Email/FTP Accounts</span></li> 
    <li><span>Unlimited MySQL Databases</span></li> 
    <li><span>Shell access upon request</span></li> 
    </ul> 
    <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan"> 
</section><!-- //.starter -->

.plan-icône est l'image. doit ressembler à ceci: alt text

Source

2010-10-10 omnix

Vous pouvez simplement définir le style d'image à float: right

Source

2010-10-10 22:00:25

C'est incroyable comment c'était celui qui a fonctionné pour moi. – omnix

essayer

<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">

Je pourrais même ajouter un padding: 5px 5px; suggère à cela, mais c'est juste moi ...

Source

2010-10-10 21:53:40 jcolebrand

.starter { position: relative; } 
.starter img { position: absolute; top: 5px; left: 140px; }

L'idée est que la L'image est positionnée de façon "absolue" donc elle peut être n'importe où dans les limites de son élément parent ".starter". Cela ne fonctionnera pas si ".starter" n'est pas réglé sur relatif. J'ai eu ceci pour fonctionner dans Firebug, le sélecteur de .starter img pourrait devoir changer mais c'est l'idée du positionnement absolu que vous devriez enlever de ceci.

Source

2010-10-10 22:00:06 Tom

mais c'est si complexe d'une méthode – jcolebrand

Avec tout le respect dû à l'aide de style en ligne signifie qu'il doit appliquer le même style à chaque image de pingouin. ce qui va à l'encontre de l'idée DRY de programmation, et ne sera pas très maintenable. La méthode ou mon explication est-elle déroutante? – Tom

Utiliser le positionnement relatif. Vous pouvez également lui donner un z-index pour le placer "au-dessus" de tous les éléments.

Quoi qu'il en soit, jetez un oeil à cette page. Il devrait vous aider:

http://w3schools.com/CSS/css_positioning.asp

Source

2010-10-10 22:00:09

qui ne l'aide pas vraiment avec ce qu'il essaie de faire, et z-index sur les éléments en ligne n'a pas beaucoup d'avantages (bien que je puisse penser à certaines raisons de le faire) – jcolebrand

Bien sûr que oui. En utilisant le positionnement relatif, il peut le positionner exactement où il le veut par rapport à sa position naturelle. –

L'utilisation de la position relative permet de conserver l'arrière-plan, j'essaie de retirer les images de l'arrière-plan. Eh bien, je suppose que je dois absolument les positionner tous. [Dieu merci pour firebug] – omnix

Si c'était moi, j'ajouter ce CSS.

#plans-wrap section { position: relative; } 
#plans-wrap section .icon { position: absolute; right: 0px; top: 0px; }

Source

2010-10-10 22:51:46 babtek

Répondre

Questions connexes