Верстка блока для сайта

Kilo · June 6, 2009

Требуется:

Верхнее оранжевое изображение разделить на 3 части.

Т.е. по краям фиксированная ширина по 10 px а посередине background 1 px который растягивается по заданной ширине.

Нижняя рамка тоже из трех частей, фиксированный верх и низ а середина тянется.

Между двумя объектами должно быть расстояние 3 px.

Как это все грамотно сделать в CSS ?

И что должно быть в HTML файле?

Помогите новичку, уже голова кругом... скрин.jpg

psywalker · June 6, 2009

дружище, ерунда это всё, не парься, вот тебе примерный вариант, как делать верхний оранжевый блок..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin: 0; padding: 0;}
 div.one { background: Правый угол; }
 div.two { background: Левый угол;}
 div.three { background: Середина 1 пиксель, тот который ты хотел, чтобы растягивался; margin: 0 10px; height: длина твоего блока...;}
</style>
<title>Untitled Document</title>
</head>

<body>
<div class="one"><div class="two"><div class="three"></div></div></div>
</body>
</html>

По такомуже принципу сделай и нижний, а вообще способов много, пока тебе этот для первого раза, вот кстати если хочешь, посмотри, я делал тут на подобии: Верхний блок - зелёненький, написано ещё: Успешное сообщение! http://www.psywalker.ru/xtrm/statie.html ..разбери этот вариант, всё поймёшь или там ещё есть углы закруглённые всякие

AjiTae · June 7, 2009

>Середина 1 пиксель - Ужас ужас!

А просто цвет задать это слишком просто?(не считая того что 1px картинки - это не ускорение загрузки, а совсем наоборот, ибо браузеру требуется мульён раз повторить этот самый 1пиксель вместо допустим десяти раз в случае с картинкой 50х50px, а выигрыш в размере просто смеховорный - считанные байты)

В иенее тысячи и тысячи вариантов на данную тему, как что задавать вопрос тут - стыдно.

...Скука страшная вещь. Вот так оно должно выглядеть.

Edited June 7, 2009 by AjiTae

psywalker · June 7, 2009

слушай дружище, а мне хотелось бы уточнить насчёт первого варианта, скажи, а что будет с твоим закруглённым углом, если фон будет например зелёным? Я имею ввиду фон body , если у тебя есть возможность, то напиши пожалуйста самый короткий Универсальный вариант такого блока с закруглёнными углами

AjiTae · June 7, 2009

Бери картинку и перерисуй уголки на зелёные, какие проблемы?)

Ток не забудь добавить прозрачность гифке.

В принципе же выглядит оно так:

<style>
div.orange 
{ 
width:179px; /* для того чтоб тянулось по шаирине это надо убрать и поставить проценты */
height:35px;
background: #fc7a05 url(картинка 10x35px, пример ниже) -10px top no-repeat; 
margin-bottom:3px;
}
div.orange div 
{ 
width:10px;
height:35px;
float:right;
background: url(картинка 10x35px, пример ниже) 0px top; 
}
</style>

<div class="orange">
<div></div>
Тянется по ширине
</div>

Пример картинки, уголки править под цвет.:

P.S. Данный вариант является оптимальным решением именно конкретной задачи, универсально под любой фон это уже не подёт, надо править цвет под каждый конкретный. Универсальный вариант уже будет состоять из 3х <div> и картинки с прозрачностью.

ЗЫ. Повторюсь: на тему закруглённых углов существует не меньше стони разнообразных уроков, пробуйте ввести в гугле "скруглённые углы", не пожалеете.)

Edited June 7, 2009 by AjiTae

Kilo · June 9, 2009

>Середина 1 пиксель - Ужас ужас!
А просто цвет задать это слишком просто?(не считая того что 1px картинки - это не ускорение загрузки, а совсем наоборот, ибо браузеру требуется мульён раз повторить этот самый 1пиксель вместо допустим десяти раз в случае с картинкой 50х50px, а выигрыш в размере просто смеховорный - считанные байты)

Спасибо огромное что растолковали про 1 пиксель. На самом деле я думал что действительно чем меньше картинка тем легче будет браузеру.

Если можно, выложите сюда код Вашего примера, а то ссылка не открывается.

А на счет того что задаю на этом форуме столь простые вопросы, так не сочтите, с кем не бывает. Для чего тогда этот форум.

Раньше плотнее занимался дизайном, но был перерыв почти в год, многое шагнуло вперед, я отстал и подзабыл. А сейчас вот сижу, кручу верчу этот блок и просто голову сломал на этих мелочах.

s0rr0w · June 9, 2009

это не ускорение загрузки, а совсем наоборот, ибо браузеру требуется мульён раз повторить этот самый 1пиксель вместо допустим десяти раз в случае с картинкой 50х50px, а выигрыш в размере просто смеховорный - считанные байты)

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

Kilo · June 9, 2009

А если помимо левой и правой картинки использовать ещё среднюю, например шапка с блоком будет иметь градиент.

То как тогда будет выглядеть код блока состоящий из 3-х картинок, т.е. средняя должна тянуться.

psywalker · June 9, 2009

То как тогда будет выглядеть код блока состоящий из 3-х картинок, т.е. средняя должна тянуться.

я тебе писал выше

Sign In

Верстка блока для сайта

Question

Kilo

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

AjiTae

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

AjiTae

Link to comment

Share on other sites

Kilo

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Kilo

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information