Блочная вёрстка и только блочная!

23

suxar

29 ноября 2009, 21:50

1367

Подскажите, как порезать такой шаблон в фотошопе? Основное требование сделать его резиновым! Если это реально сделать одним css? Буду очень благодарен. Заранее спасибо. Не пойму, как его позиционировать? Смотрел разные форумы, но чего-то подобного не встречал(...

ICQ#377895870, Дима.

jpg result.jpg

Создание сайта (http://dsugar.com.ua), дизайн, программирование.

766

богоносец

29 ноября 2009, 22:18

#1

http://www.artlebedev.ru/tools/technogrette/html/align-center/

Или align="center" так просто!

Блочная вёрстка и только блочная!

Этот догмат — тоже догмат.

J

155

JIucky

29 ноября 2009, 22:43

#2

suxar:
Основное требование сделать его резиновым! Если это реально сделать одним css?

нет suxar это фантастика xD

suxar:
Смотрел разные форумы, но чего-то подобного не встречал(...

плохо смотрел! вот здесь посмотри;)

21

whites

29 ноября 2009, 23:05

#3

css: text-align: center

html: align="center", valign="center"

рекомендую делать на таблицах + блоках, имхо идеальное решение.

вертикально, без таблиц, одним css, для всех броузеров - не получится...

x-Strife Game Team

S

23

suxar

30 ноября 2009, 00:16

#4

JIucky, что же там смотреть описание тэгов? Это гуд, но я имел введу такой сайт, который похож на этот!

suxar добавил 30.11.2009 в 03:24

whites, а резать шаблон как? Обращаюсь ко всем, кто может и знает, нарисуйте линии, где именно резать?

21

whites

30 ноября 2009, 01:41

#5

suxar, после шапки линия, меню на абсолютном позиционировании (position: absolute)... Дальше еще проще, линия после меню, дальше таблички... Что не ясно? Рисовать ооочень влом, сорри :)

386

dkameleon

30 ноября 2009, 01:53

#6

suxar:

whites, а резать шаблон как? Обращаюсь ко всем, кто может и знает, нарисуйте линии, где именно резать?

не уверен, что с вашим уровнем этот шаблон вам по зубам :)

на форуме тема будет на много страниц, если вы даже не в курсе, как его резать.

Дизайн интерьера (http://balabukha.com/)

21

whites

30 ноября 2009, 01:54

#7

dkameleon, да простенький шаблон, пусть учится человек, только вопросы поконкретней задает ;)

RI

66

R_Igor

30 ноября 2009, 07:06

#8

ТС вы наверное про верстку знаете по на слышке! Ведь разных форумов и сайтов на эту тему полно. (тут тоже дали ссылки) Было бы не плохо если бы вы начали что то делать и сказали вот тут у меня не получается помогите мол посоветуйте что и как. А так размытые вопросы типа - " где линии проводить и как резать ? " не уместны на мой взгляд так как это азбука верстки. И ее надо хоть немного изучить самому.

Хоть я сам новичек в версте в основном переделываю паблик под свои нужды ))) но скажу...

Тут надо определить что будет фоном тега BODY, а что ляжет прозрачным лого (хотя это и так видно). Однозначно надо фон-картинку делать до сливания теней и полу теней и выравнять ее по левому краю, а остальное прописать background :#color ну там что то из #000000 .

Ну а потом конечно же заниматься блоками.

Ну как то так )))

Все будет хорошо.

S

23

suxar

30 ноября 2009, 08:22

#9

Все равно сделаю без таблиц и только блоками. Такой же шаблон, но другой дизайн.

Порезан на три части по вертикали, а именно лого с печатью до низу, линия по вертикали с листочком до низу, эта линия, которая должна будет тянуться по горизонтали. И все, что за этот линией. При 1024х786 текст на листочки и все более или менее сносно, но когда ставлю 1600х1200 текст уходит(? Вот так я порезал шаблон, поэтому и спрашивал, все ли верно, если предположить, что я правильно порезал, если обратное, то как резать, а если в проблема в коде?

<html>

<head>

<title>Новичок с блоками</title>

html, body {margin:0;height:100%; font-family: Verdana; font-size: 8pt; font-weight: bold;}

#wrapper {height:auto !important;height:100%;min-height:100%;min-width:1000px;}

#left {float:left;width:510px; background:url(resize-test_01.jpg);} ---логотип и печать по вертикали

#right {float:right;width:390px; background:url(rightb_02.jpg);} -----линия по вертикали

#center {margin:0 390px 0 510px; background:url(vline6_02.png);} ----за линией по вертикали

.t1 { margin-bottom: 15%; margin-top: 10% margin-left: 5%; margin-right: 15%; position: absolute; top: 70%; left: 15%; } --- текст на листочке.

#nav{ ---Кнопки в .png

width:850px;

margin:0 auto;

padding:0;

list-style:none;

position:relative;

width:100%;

}

#nav .about{

position:absolute;

top:340px;

left:340px;

height:69px;

width:127px;

}

#nav .company{

position:absolute;

top:340px;

left:510px;

height:64px;

width:223px;

}

#nav .created{

position:absolute;

top:430px;

left:210px;

height:81px;

width:191px;

}

#nav .services{

position:absolute;

top:410px;

left:420px;

height:80px;

width:143px;

}

#nav .contacts{

position:absolute;

top:430px;

left:615px;

height:71px;

width:232px;

}

#nav li a{

text-indent:-9999px;

overflow:hidden;

height:100%;

display:block;

position:relative;

}

#nav .about a{

background:url(O-nas_03.png)no-repeat;

}

#nav .company a{

background:url(Kompany_03.png)no-repeat;

}

#nav .created a{

background:url(done_03.png)no-repeat;

}

#nav .services a{

background:url(service_03.png)no-repeat;

}

#nav .contacts a{

background:url(Kontakt_03.png)no-repeat;

}

.clear {clear:both;}

</style>

</head>

<body>

</ul>

<p>Какой-то текст.</p>

</div>

</div>

</body>

</html>

_

299

_Ad

30 ноября 2009, 09:35

#10

JIucky:
нет suxar это фантастика xD

ничего не фантастика.. Резиновым запросто можно сделать.. Там видно даже ровные кусочки рамок, которые тянутся..

только резина некрасиво будет смотреться.. На больших разрешениях сразу уменьшится плотность текста (не будет так красиво иллюстрации обтекать).. Кроме того, на больших экранах читать полуметровые строчки - это извращение..

Выравнивание у вас в шаблоне по левому краю.. Никаких центров. У вас же ж верхний левый угол картинки не переходит в однородный тон влево, чтобы по центру выравнивать..

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Что делать, если ваша email-рассылка попала в спам