X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Резиновые сайты
ShizAngel
ShizAngel
Topic Starter сообщение 20.5.2009, 16:45; Ответить: ShizAngel
Сообщение #1


У меня есть несколько вопросов по вёрстве резиновых сайтов.
-Какие особенности при создании резинового сайта?:rolleyes:
-Как сделать элементы сайта резиновыми/растягиваемыми?

Сейчас изучаю div`ную вёрстку и столкнулся с проблемой.Шапка сайта не растягивается.Если сильно уменьшить масштаб страницы,то шапка начинает повторяться.Как сделать,чтобы она уменьшалась при изменении масштаба?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
сообщение 20.5.2009, 17:13; Ответить: Zippovich
Сообщение #2


width: 100%
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Diablo_hb
Diablo_hb
сообщение 20.5.2009, 18:56; Ответить: Diablo_hb
Сообщение #3


Какие особенности при создании резинового сайта?
они определяются дизайном
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShizAngel
ShizAngel
Topic Starter сообщение 20.5.2009, 19:10; Ответить: ShizAngel
Сообщение #4


Неполучается у меня шапку растянуть.:mol:Ну что я делаю не так?
Html:
<! 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" lang="ru" xml:lang="ru">
<html>
<head>
<title>Pheebio::SmallPage</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="menu">
<a href="#1">Главная</a>
<a href="#2">Галерея</a>
<a href="#3">Мои работы</a>
<a href="#4">Мои достижения</a>
<a href="#5">Обо мне</a>
</div>
<div id="main">Тут находится содержание сайта</div>
<div id="sidebar">тут ещё чо-то</div>
<div id="footer">подвал</div>
</div>
</body>
</html>
css:
* {
padding: 0;
margin: 0;
border: 0;
}

#header {
background-image: url(bg-img.png);
width: 100%;
height: 130px;
}

#menu {
color: #fff;
padding: 10px;
background-image: url(bar.png);
width: 100%;
border: 1px solid #0d3143;
margin-bottom: 10px;
}

#menu a {
   margin: 2px 10px;
   padding: 5px 7px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   font-weight: bold;
}

#menu a:hover {
   background: #ffa800;
   color: #333;
   border: 1px solid #ffd89b;
}


Вот если посмотреть на #menu,то там width 100% и на сайте оно растягивается,а с шапкой никак.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
f0rest
f0rest
сообщение 21.5.2009, 22:01; Ответить: f0rest
Сообщение #5


(ShizAngel @ 20.5.2009, 22:10) *
Неполучается у меня шапку растянуть.:mol:Ну что я делаю не так?
Html:
<! 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" lang="ru" xml:lang="ru">
<html>
<head>
<title>Pheebio::SmallPage</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="menu">
<a href="#1">Главная</a>
<a href="#2">Галерея</a>
<a href="#3">Мои работы</a>
<a href="#4">Мои достижения</a>
<a href="#5">Обо мне</a>
</div>
<div id="main">Тут находится содержание сайта</div>
<div id="sidebar">тут ещё чо-то</div>
<div id="footer">подвал</div>
</div>
</body>
</html>
css:
* {
padding: 0;
margin: 0;
border: 0;
}

#header {
background-image: url(bg-img.png);
width: 100%;
height: 130px;
}

#menu {
color: #fff;
padding: 10px;
background-image: url(bar.png);
width: 100%;
border: 1px solid #0d3143;
margin-bottom: 10px;
}

#menu a {
   margin: 2px 10px;
   padding: 5px 7px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   font-weight: bold;
}

#menu a:hover {
   background: #ffa800;
   color: #333;
   border: 1px solid #ffd89b;
}


Вот если посмотреть на #menu,то там width 100% и на сайте оно растягивается,а с шапкой никак.


попробуй так

css:
* {
padding: 0;
margin: 0;
border: 0;
}

#header {
background-image: url(bg-img.png);
[COLOR="Red"]padding:0px;
margin:0px;[/COLOR]
width: 100%;
height: 130px;
}

#menu {
color: #fff;
padding: 10px;
background-image: url(bar.png);
width: 100%;
border: 1px solid #0d3143;
margin-bottom: 10px;
}

#menu a {
   margin: 2px 10px;
   padding: 5px 7px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   font-weight: bold;
}

#menu a:hover {
   background: #ffa800;
   color: #333;
   border: 1px solid #ffd89b;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShizAngel
ShizAngel
Topic Starter сообщение 22.5.2009, 9:08; Ответить: ShizAngel
Сообщение #6


padding:0px;
margin:0px;
И что это даёт?Поля 0 пикселей,отступ 0 пикселей.С таким кодом тоже не получилось.
Я ещё попробовал отрезать от картинки 1 пиксель и сделать его растягивающимся.
<div id="wrap">
<div id="header"><div id="header2"></div></div>
<div id="menu">

#header {
background-image: url(logo1.png);
height: 130px;
}

#header2 {
background-image: url (logo2.png);
background-repeat: repeat-x;
width: 100%;
height: 130px;
}

Не получилось.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
f0rest
f0rest
сообщение 22.5.2009, 10:14; Ответить: f0rest
Сообщение #7


(ShizAngel @ 22.5.2009, 12:08) *
padding:0px;
margin:0px;
И что это даёт?Поля 0 пикселей,отступ 0 пикселей.С таким кодом тоже не получилось.
Я ещё попробовал отрезать от картинки 1 пиксель и сделать его растягивающимся.
<div id="wrap">
<div id="header"><div id="header2"></div></div>
<div id="menu">

#header {
background-image: url(logo1.png);
height: 130px;
}

#header2 {
background-image: url (logo2.png);
background-repeat: repeat-x;
width: 100%;
height: 130px;
}

Не получилось.


ну тогда не знаю), у меня тоже была такая проблемка и решилась она этим способом
div#h3 {height:200px;padding:0px; margin:0px;background:url('/img/logo.gif');background-repeat:repeat-x;}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
maxtt_hb
maxtt_hb
сообщение 25.10.2009, 17:11; Ответить: maxtt_hb
Сообщение #8


а можно на лого.жпг посмотреть?) размеры и т.д.
что то не понимаю проблемму)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
murr000
murr000
сообщение 23.4.2010, 17:55; Ответить: murr000
Сообщение #9


прошу прощения за некропостинг, но:
требуется растянуть фоновые изображения при масштабировании по высоте. по ширине проблем нет, я сделала их плавно переходящими друг в друга при уменьшении страницы, а вот в высоту после определенного уменьшения, начинают повторятся.
[IMG]http://savepic.org/475671m.jpg[/IMG]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Веб-дизайн · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСайты уходят в прошлое
для развития бизнеса стали не столь актуальны
 157 muratastana 31308 Сегодня, 12:14
автор: Arsenwenger
Открытая тема (нет новых ответов) Нужна програмка постинга в свои сайты
 0 kasey7 302 22.4.2024, 19:54
автор: kasey7
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПродам свои сайты
10 сайтов на продажу
 3 ArchiDOM 1479 5.4.2024, 3:51
автор: Llirik
Открытая тема (нет новых ответов) Есть смысл создавать сайты на латышском?
 16 Nekit 4043 31.3.2024, 1:23
автор: Liudmila
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСайты с доходом на продажу. Будет ли спрос?
 46 Telnor 45083 30.3.2024, 15:37
автор: trustedadvisor


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 13:55

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet