Как сделать Wrapper?
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
Я недавно научился немного делать дизы в .psd(ну раньше вы понимаете тупо менял картинки в юКозовских дизах). И начал рисовать не сложный шаблон для своего сайта, но мне нужна помощь в верстке, поскольку в ней я нечего не понимаю. Вот есть к примеру страница сайта:
И мне нужно сделать такую обводку страницы как на скрине.
То, что обведенно зеленым, это я нашел и понял как поставить в хтмл, а то, что красным это то шо я незнаю как поставить в хтмл
Вот код который я нашел, чтобы сделать Wrapper, но только в углах:
CSS
Code
<style> div.top-left{ background-image: url(/top_left.png); background-repeat: no-repeat; background-position: top left; height: 13px; } div.top-right{ background-image: url(/top_right.png); background-repeat: no-repeat; background-position: top right; height: 13px; } div.bottom-left{ background-image: url(/bottom_left.png); background-repeat: no-repeat; background-position: bottom left; height: 13px; } div.bottom-right{ background-image: url(/bottom_right.png); background-repeat: no-repeat; background-position: bottom right; height: 13px; } #wrapper1{ margin: 0px auto 0px auto; padding: 5px; } #wrapper2{ background: #FFFFFF; margin: 10px auto 10px auto; width: 99%; text-align: left; padding: 0px; clear:left; } </style>
top_left.png top_right.png bottom_left.png bottom_right.png - Это картинки на углы типо этого:
HTML
Code
<div id="wrapper2" style="margin-top:5px"> <div class="top-left2"><div class="top-right2"></div></div> <div id="wrapper1" style="margin-top:0px; margin-bottom:0"> [BODY] <div class="bottom-left2"><div class="bottom-right2"></div></div> </div>
Сообщение отредактировал axe - Вторник, 22.12.2009, 11:15
dancelot
говорун
Группа: Проверенные
Пользователь №: 26
Сообщений: 236
Получено оценок: 13
axe , держи,изучай,просвещайся
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
dancelot , спасибо конешно, но там уроки на английском
BogachevAsman
Группа: Удаленные
axe , Там на русском..
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
BogachevAsman , блин там токо 3 урока на русском, но я почитал это нето
UnderShot
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe , сложного то? В каждом уроке обязательно прилагается кусочек используемого кода в качестве примера. Скопируй этот код и вставь к себе на страницу, посмотришь, что получитсяОчень важная тема! Filmzona — онлайн фильмы .
BeSinLi
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Code
<div class="wrapper" style="-moz-border-radius: 10px; -webkit-border-radius: 10px;"> [BODY] </div>
Не работает в IE...
——————————-- „ Tempora mutantur, et nos mutamur in illis“ ——————————————— „ Si felix esse vis, este!“ ——————————————————————————————————————————————————————— старая аватарка
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
BeSinLi , спасибо, токо можно ли както radius заменить на картинку? и как сделать картинку не только по углам(top_right, top_left, bottom_left, bottom_right), но и по бокам(top, bottom, left, right)(ну которая будет увеличиватса в зависимости от height страницы)?
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
и что значат теги -moz- и -webkit- ??
GlebLozhkovoy
говорун
Группа: Проверенные
Пользователь №: 255
Сообщений: 116
для любимого огнелиса стиль. хаки это
UnderShot
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe , Code
#wrapper{width:700px;height:100%;bacgkround:url(image) repeat-y}
Очень важная тема! Filmzona — онлайн фильмы .
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
UnderShot , какое именно изображение я туда долджен вставить?
Aleko
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
axe , то, которое должно будет служить фономБесплатные обои.
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
Aleko , щас протестирую
UnderShot
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe , звиняюсь, очепятко! Code
#wrapper{width:700px;height:100%;background:url(image) repeat-y}
Так будет правильнейОчень важная тема! Filmzona — онлайн фильмы .
axe
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
UnderShot , ага, уже все поставил работает