Базовый HTML дизайн CSS коробки с изображением и заголовком - PullRequest
Новая
       18

Базовый HTML дизайн CSS коробки с изображением и заголовком

1 голос
/ 04 июля 2010

Я не очень хороший дизайнер. По крайней мере, не с HTML и CSS. Я использовал очень простой код, подобный этому: 

<fieldset style=\"color: #000000; border: 1px solid #000000; width: 225px; text-align: left; padding: 5px;\">
<legend style=\"color: #999999; font-weight: bold;\">Headline.</legend>
<p>text</p>
</fieldset>

Для вывода информации в онлайн-игре php, над которой я работаю. Мне нужно что-то похожее, поставить немного лучше на вид. Могу ли я получить помощь? Я думал что-то вроде: 

<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>

Но я не уверен, какой код CSS я могу написать, чтобы создать эффект, похожий на набор / легенду, которую я сейчас использую. Мне нужна коробка с названием, изображение на левой стороне и текст на правой стороне изображения.

1 Ответ

2 голосов
/ 07 июля 2010

Вы можете попробовать использовать блок div ниже.

<div class="fieldset">
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
</div>

В качестве стиля сначала задайте границу для вашего набора полей fieldset.Затем вы можете просто расположить тег h2 относительно вашего div-элемента fieldset, играя верхнее и левое значения.и убедитесь, что фон вашего тела, фон div-файла filedset и фон тега h2 одинаковы.Наконец, поместите оба элемента div entry-content и изображение влево.

С небольшой настройкой вы должны получить похожий тег.

...