VPF::Подскажите как лучш сверстать

lapulya9

Дата 10.7.2010, 17:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Имеется такой вот блок контента
user posted image

Картинка, надпись и текст даны отдельно. Как разбить область на эти 2 ячейки? Возможно ли это сделать без таблицы?
Подскажите. Теряюсь в догадках
Благодарю

m0ro

Дата 10.7.2010, 19:09 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 800
Регистрация: 19.5.2007

Репутация: нет
Всего: 68

Два дива. У каждого float:left, width:n... И внутри каждого - расстояния, позиционирования и т.п.

bars80080

Дата 11.7.2010, 01:35 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

но прежде б я спросил: зачем без таблицы?

ksnk

Дата 11.7.2010, 10:49 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

Вообще разница дивной разметки относительно табличной - в поведении при изменении окна броузера. Дивные элементы, будут выстраиваться друг под другом, если место не позволяет, а табличные так и останутся в том-же относительном положении. Нужно поинтересоваться у дизайнера что должно происходить при маленьких размерах окна броузера.

m0ro, Кстати, такое-же примерно можно сделать и вот так. Imho, меньше букаф smile

Код


<div style="padding:10px 10px 10px 140px;position:relative;">
<img style="position:absolute;top:10px;left:10px;width:120px;height:120px;" src="img.gif">
<h1>Lorem Ipsum</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
 the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
 of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
 also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Это сообщение отредактировал(а) ksnk - 11.7.2010, 10:49

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

lapulya9

Дата 26.7.2010, 12:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Решила таки сделать таблицей. Но вот верстать их не умею. Нашла такой вот код.

Код


<table width="100%" border="0">
        <tr>
        <td class="TD_img"></td>
        <td class="TD_body">customer</td>
        <td class="TD_img"></td>
        <td class="TD_body">account</td>
        <td class="TD_img"></td>
        <td class="TD_body">news</td>
        </table>

Получается в трех ячейках картинки, в трех текст. Ну если с текстом более-менее понятно, то с картинками глухо. как их вставить в ячейки?
Если можно дайте код css любой таблицы. Вообще не понятно что к чему...
С разделителями не понятно... я их даже скопировать в фотошопе не могу - пишет выделенная область пуста.
С дизайнером к сожалению никакой связи нет, это мне дали тестовое задание. Думаю главнее общая идея верстки, ну чтоб правильно и валидно. Нюансы дело наживное - так босс сказал. Хочется естестно чтоб все было отлично, но трудно самой все, спросить даже не у кого. Если бы не ваш форум, вообще не знаю что бы делала.
Спасибо!

Это сообщение отредактировал(а) lapulya9 - 26.7.2010, 12:19

bars80080

Дата 26.7.2010, 12:39 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(lapulya9 @ 26.7.2010, 12:16

)

то с картинками глухо. как их вставить в ячейки?

Код


        <td class="TD_img"><img src="img.gif"></td>
        <td class="TD_body">customer</td>

Цитата(lapulya9 @ 26.7.2010, 12:16

)

С разделителями не понятно... я их даже скопировать в фотошопе не могу - пишет выделенная область пуста.

не тот слой видимо выбрали. откройте окно слоёв и выберите нужный

lapulya9

Дата 26.7.2010, 13:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Код


<div id="content">
        <table width="100%" border="0">
        <tr>
        <td class="TD_img"><img src="img/bg-servise.png"></td>
        <td class="TD_body">
            <h1 align="left">CUSTOMER SERVICE</h1>
            <p>You may use this online form to request an account balance, reserve an Association facility, report a common area maintenance problem.</p>
            <a href="/">Click here to continue</a>
        </td>
        <td class="TD_img"><img src="img/bg-account.png"></td>
        <td class="TD_body">
            <h1 align="left">MY ACCOUNT</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
            <a href="/">Click here to continue</a>
        </td>
        <td class="TD_img"><img src="img/bg-news.png"></td>
        <td class="TD_body">
            <h1 align="left">AVALON NEWS</h1>
            <p><font color=#c83800><b>March 5, 2010</b></font></p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod...</p>
            <a href="/">Read all news</a>
        </td>
        </table>
    </div><!-- #content-->

ну вот что вышло. Только вот разделители остались. Выглядит он как прямоугольник размером с одну колонку (фото+текст), а с двух сторон разделители. По идее нужно его зафонить для центральных двух ячеек MY ACCOUNT. А как?

Это сообщение отредактировал(а) lapulya9 - 26.7.2010, 13:39

bars80080

Дата 26.7.2010, 13:54 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

пропишите его как-нибудь.

что такое разделитель? вертикальная полоска? поставьте её фоном для нужной ячейки и замостите только по вертикали:

Код


.TD_body { background: url(myfon.gif) repeat-y right top; }

right top - размещение справа сверху.

lapulya9

Дата 26.7.2010, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Вышло! Только она повторяется и для последнего блока. а не должна!

Все спасибо! Дошло как надо было!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! smile

Это сообщение отредактировал(а) lapulya9 - 26.7.2010, 14:33

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »