• Страница 1 из 1
  • 1
Как сделать Wrapper?
axe
Дата: Вторник, 22.12.2009, 10:59 | Сообщение # 1
шептун
Группа: Проверенные
Пользователь №: 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
Дата: Вторник, 22.12.2009, 11:28 | Сообщение # 2
говорун
Группа: Проверенные
Пользователь №: 26
Сообщений: 236
Получено оценок: 13
axe, держи,изучай,просвещайся
  
axe
Дата: Вторник, 22.12.2009, 11:39 | Сообщение # 3
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
dancelot, спасибо конешно, но там уроки на английском
  
BogachevAsman
Дата: Вторник, 22.12.2009, 15:07 | Сообщение # 4
Группа: Удаленные
axe, Там на русском..
  
axe
Дата: Вторник, 22.12.2009, 18:37 | Сообщение # 5
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
BogachevAsman, блин там токо 3 урока на русском, но я почитал это нето
  
UnderShot
Дата: Вторник, 22.12.2009, 20:32 | Сообщение # 6
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe, сложного то? В каждом уроке обязательно прилагается кусочек используемого кода в качестве примера. Скопируй этот код и вставь к себе на страницу, посмотришь, что получится

Очень важная тема!
Filmzona — онлайн фильмы.
  
BeSinLi
Дата: Вторник, 22.12.2009, 20:43 | Сообщение # 7
спикер
Группа: Проверенные
Пользователь №: 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
Дата: Вторник, 22.12.2009, 21:30 | Сообщение # 8
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
BeSinLi, спасибо, токо можно ли както radius заменить на картинку? и как сделать картинку не только по углам(top_right, top_left, bottom_left, bottom_right), но и по бокам(top, bottom, left, right)(ну которая будет увеличиватса в зависимости от height страницы)?
  
axe
Дата: Вторник, 22.12.2009, 21:31 | Сообщение # 9
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
и что значат теги -moz- и -webkit- ??
  
GlebLozhkovoy
Дата: Вторник, 22.12.2009, 21:50 | Сообщение # 10
говорун
Группа: Проверенные
Пользователь №: 255
Сообщений: 116
Quote (axe)
-moz-

для любимого огнелиса стиль. beer хаки это
  
UnderShot
Дата: Среда, 23.12.2009, 08:59 | Сообщение # 11
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe,
Code
#wrapper{width:700px;height:100%;bacgkround:url(image) repeat-y}


Очень важная тема!
Filmzona — онлайн фильмы.
  
axe
Дата: Суббота, 26.12.2009, 01:07 | Сообщение # 12
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
UnderShot, какое именно изображение я туда долджен вставить?
  
Aleko
Дата: Суббота, 26.12.2009, 07:54 | Сообщение # 13
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
axe, то, которое должно будет служить фоном

Бесплатные обои.
  
axe
Дата: Суббота, 26.12.2009, 13:48 | Сообщение # 14
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
Aleko, щас протестирую
  
UnderShot
Дата: Суббота, 26.12.2009, 20:55 | Сообщение # 15
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
axe, звиняюсь, очепятко!
Code
#wrapper{width:700px;height:100%;background:url(image) repeat-y}

Так будет правильней


Очень важная тема!
Filmzona — онлайн фильмы.
  
axe
Дата: Суббота, 26.12.2009, 23:35 | Сообщение # 16
шептун
Группа: Проверенные
Пользователь №: 669
Сообщений: 60
UnderShot, ага, уже все поставил работает
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.