Как бы вы разместили эти изображения?

http://elektrikhost.com/Как бы вы разместили эти изображения?

Вы видите, что пингвины над заголовком на столбцах? Я пытаюсь заставить их быть над заголовком и списком. Мне интересно, что бы вы сделали? использовать позицию абсолютную или относительную? Я застрял.

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-значок изображения. потребности выглядеть следующим образом: alt text

источник

2010-10-10 omnix

Вы можете просто задать стиль изображения для float: right

источник

2010-10-10 22:00:25

Удивительно, как это было для меня. – omnix

попробовать

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

Я мог бы даже предложить добавить padding: 5px 5px; на этот вопрос, но это только мне ...

источник

2010-10-10 21:53:40 jcolebrand

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

Идея заключается в том, что изображение позиционируется «абсолютным», поэтому оно может находиться где угодно в пределах своего родительского элемента «.starter». Это не будет работать, если «.starter» не установлен в относительный.

Я получил это, чтобы работать в Firebug, селектор .starter img, возможно, нуждается в изменении, но его идея абсолютного позиционирования, которую вы должны отнять от этого.

источник

2010-10-10 22:00:06 Tom

но это настолько сложно метода – jcolebrand

При всем уважении, используя встроенный стиль означает, что он должен применить тот же стиль для каждого пингвин изображения. что противоречит суровой идее программирования и не будет очень удобной. Является ли метод или мое объяснение путаным? – Tom

Использовать относительное позиционирование. Вы также можете дать ему z-index, чтобы разместить его «сверху» любых элементов.

Независимо от того, взгляните на эту страницу. Это должно помочь вам:

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

источник

2010-10-10 22:00:09

, который действительно не помогает ему с тем, что он пытается сделать, и z-index на встроенных элементах не имеет большого преимущества (хотя я мог придумать некоторые причины для этого) – jcolebrand

Уверен, что это так. Используя относительное позиционирование, он может расположить его точно там, где он хочет его относительно его естественного положения. –

Использование относительного положения сохраняет фон, хотя, я пытаюсь извлечь изображения из фона. О, ну, я думаю, я должен полностью позиционировать их всех. [thank god for firebug] – omnix

Если бы это было, я бы добавить этот CSS.

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

источник

2010-10-10 22:51:46 babtek

Как бы вы разместили эти изображения?

ответ

Смежные вопросы