Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > верстка на div-ах - резиновость

Автор: verstalishik 20.2.2008, 14:11

доброго времени суток, есть пример свёрстаной страницы(приблизительно)
так вот проблемы:
1 резиновость странички  нужно обязательно в div-ах
пробовала :html, body {
    margin:0px;
    padding:0px;
    height:100%;
}
ни один div не имеет фиксированной height , weight
2 шрифты не подгружаются  через :
@font-face
  {
   font-family: Ariac;
   src: url(../images/Coronet.ttf);
  }

P.S.: не поймите не правильно, может я не понимаю всего принципа "резиновости"
может кто сможет скинуть ссылки чтиво про "резиновость"
заранее спасибо

могу выложить код

Автор: ilyaILF 20.2.2008, 14:17

Дивы сами по себе изначально резиновые, т.е. растягиваются на всю ширину окна броузера, или на всю ширину родительского элемента (в отличии от таблиц, последние ведут себя по-другому), а в высоту же DIV растягивается содержащимся в нем контентом. Вот здесь http://www.dynamicdrive.com/style/layouts/category/C10/ можно посмотреть неплохие приемы, используемые при верстке на Дивах.

Автор: verstalishik 20.2.2008, 14:46

я использую только абсолютное позиционирование , указываю только top и left DIVa
про контэнт ты безусловно прав!!!!!
так в это и заключается вся проблема
есть рисунок его height :770px; при расширении экрана 1280х1024 все ОК!!!
а вот с расширением по меньше уже по хоже - появляются скроулинги что по х что по у

P.S.: что мне картинки резать или все таки я не поняла

Автор: NDenis 20.2.2008, 14:56

А абсолютное позиционирование обязательно??
Вот http://softwaremaniacs.org/blog/2006/11/18/positioned-layout/ почитайте, хорошая статья.

Автор: verstalishik 20.2.2008, 15:05

NDenis, у меня не большой вопрос
про примеру
#search {
  position: absolute;
  right: -1px; top: 190px;
  height: 20px; width: 100%;
  padding: 10px 0;
}
указывается height  и width- проценты от экрана или чего...... не могу понять

Добавлено через 49 секунд
не хочу навязываться, может показать код

Автор: NDenis 20.2.2008, 15:14

Вы, наверное, не внимательно читали ;)

Цитата

Хочу обратить внимание на блок поиска. В HTML он находится внутри блока #sections, но мне захотелось, чтобы он выглядел как отдельный полноправный блок. Делается это тем же самым абсолютным позиционированием, но стоит посмотреть на его координаты:

#search {
  position: absolute;
  right: -1px; top: 190px;
  height: 20px; width: 100%;
  padding: 10px 0;
}

top: 190px могут показаться странным, потому что от верха страницы он отстоит на 20 + 80 + 20 (#title) + 170 + 20 (#sections) = 310 пикселов. Дело в том, что абсолютно позиционированный #sections создает для своего содержимое свой собственный стакан, а раз #search лежит внутри него, то все его координаты считаются относительно #sections.

Цитата(verstalishik @ 20.2.2008, 15:05

)

не хочу навязываться, может показать код

думаю, надо было с этого начинать ;)

Автор: verstalishik 20.2.2008, 15:17

Код


html, body {
    margin:0px;
    padding:0px;
    position: relative; /* для задания "стакана" */


}
body, input, select, textarea {
    background-color: #ffffff;
}
@font-face
  { 

   font-family: Coronet; 

   src: url(../images/Coronet.ttf);

  } 
#main7 {
    position:absolute;
    left:0px;
    top:0px;
    border:1px solid white;
    height: 770px; width: 100%;
}
#main {
    position:absolute;
    left:400px;
    top:70px;
    border:1px solid white;
}
#main1 {
    position:absolute;
    left:350px;
    top:660px;
    border:1px solid white;
}
#main2 {
    position:absolute;
    left:580px;
    top:670px;
    border:1px solid white;
}
#main3 {
    position:absolute;
    left:810px;
    top:660px;
    border:1px solid white;
}
#main4 {
    position:absolute;
    left:250px;
    top:350px;
    border:1px solid white;
    font-family:Coronet;
}
a.nav {
    font-family:Coronet;
    font-size:45px;
    border:1px solid #ffffff;
    text-decoration:none;
}
#main5 {
    position:absolute;
    left:870px;
    top:350px;
    border:1px solid white;
}
#main6 {
    position:absolute;
    left:420px;
    top:580px;
    border:1px solid white;
}
a:link, a:visited, a:hover, a:active{color:white;}
#main8 {
    position:absolute;
    left:920px;
    top:0px;
    border:1px solid white;
}

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<HEAD>
<TITLE>Венский Бал</TITLE>
    <META content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div id="main7"><img src="image/shtora1.jpg"/></div>
<div id="main"><img src="image/VB_KZ1.png"/></div>
<div id="main4"><A class="nav" href="#"><font color="#aa0000"> Алматы</font></A></div>
<div id="main6"><A class="nav" href="#"><font color="#000000">Заполнить анкету Дебютанта</font> </A></div>
<div id="main1"><A href="#"><img src="image/baden-baden.jpg"/></A></div>
<div id="main2"><A href="#"><img src="image/BallWienLogo.gif"/></A></div>
<div id="main3"><A href="#"><img src="image/v_moskve.jpg"/></A></div>
<div id="main8"><img src="image/shtora2.jpg"/></div>
<div id="main5"><A class="nav" href="#"><font color="#aa0000">Астана</font></A></div>
</BODY>
</html>

вот

Автор: NDenis 20.2.2008, 15:54

ИМХО, здесь абсолютное позиционирование не нужно. Можно обойтись float-раскладкой элементов и позиционированием отступами

Автор: verstalishik 21.2.2008, 06:33

NDenis, решила таки я воспользоваться float позиционирование, в FF достигла нужного результата, а вот в IE что то не получается - левый и правый блоки закреплены как и надо, только вот что в центре съехало очень долеко!!!!

Добавлено через 2 минуты и 15 секунд
вот новый код

Код


html, body {
    margin:0px;
    padding:0px;
    width:100%;
}
body, input, select, textarea {
    background-color: #ffffff;

}
.main2 {
float:left;
margin: -600 0 0 0em;
padding:0 0 0 330px;
}

.main {
float:left;
margin: 0 0 0 0em;
border: 1px solid white;
padding:0 0 0 0px;

}
.main1 {
float:right;
margin: 0 0 0 0em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main3 {
float:left;
margin: -315 0 0 14em;
border: 1px solid white;
padding:0 0 0 0px;
}

.main4 {
float:left;
margin: -315 0 0 43em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main5 {
float:left;
margin: -190 0 0 26em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main6 {
float:left;
margin: -120 0 0 13em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main7 {
float:left;
margin: -116 0 0 28em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main8 {
float:left;
margin: -120 0 0 42em;
border: 1px solid white;
padding:0 0 0 0px;
}

<html>
<HEAD>
<TITLE>Венский Бал1</TITLE>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div class="main"><img src="image/shtora1.gif"/></div>
<div class="main1"><img src="image/shtora2.gif"/></div>
<div class="main2"><img src="image/VB_KZ1.gif"/></div>
<div class="main3"><A class="nav" href="#"><font color="#aa0000"> Алматы</font></A></div>
<div class="main4"><A class="nav" href="#"><font color="#aa0000"> Астана</font></A></div>
<div class="main5"><A class="nav" href="#"><font color="#aa0000"> Заполнить анкету Дебютанта</font></A></div>
<div class="main6"><img src="image/baden-baden.jpg"/></div>
<div class="main7"><img src="image/BallWienLogo.gif"/></div>
<div class="main8"><img src="image/v_moskve.jpg"/></div>
</BODY>
</HTML>

Код

Автор: NDenis 21.2.2008, 11:05

Цитата

margin: -116 0 0 28em;

Единицы измерения надо указывать smile

Только 0 может быть без единиц измерения

Да, и еще, не заставляйте IE работать в quirks mode, указывайте DOCTYPE

Автор: verstalishik 21.2.2008, 14:50

NDenis, указала единицы измерения px, но доктайп на прописывала
в IE все хорошо, в FF все поплыло даже картитки исчезли

Код


html, body {
    margin:0px;
    padding:0px;
    width:100%;
}
body, input, select, textarea {
    background-color: #ffffff;

}
.main2 {
float:left;
margin: -600px 0 0 0em;
padding:0 0 0 330px;
}

.main {
float:left;
margin: 0 0 0 0em;
border: 1px solid white;
padding:0 0 0 0px;

}
.main1 {
float:right;
margin: 0 0 0 0em;
border: 1px solid white;
padding:0 0 0 0px;
}
.main3 {
float:left;
margin: -360px 0px 0 -400px;
border: 1px solid white;
padding:0 0 0 0px;
}

.main4 {
float:left;
margin: -360px 0 0 -5px;
border: 1px solid white;
padding:0 0 0 0px;
}
.main5 {
float:left;
margin: -190px 0 0 -320px;
border: 1px solid white;
padding:0 0 0 0px;
}
.main6 {
float:left;
margin: -160px 0 0 -450px;
border: 1px solid white;
padding:0 0 0 0px;
}
.main7 {
float:left;
margin: -155px 0 0 -280px;
border: 1px solid white;
padding:0 0 0 0px;
}
.main8 {
float:left;
margin: -160px 0 0 -100px;
border: 1px solid white;
padding:0 0 0 0px;
}
a.nav{
font-family:Coronet;
text-decoration:none;
font-size:16px;
}

посоветуйте лит-ру про доктайпы

Автор: ilyaILF 21.2.2008, 14:54

http://www.webmascon.com/topics/coding/25a.asp и http://www.w3schools.com/tags/tag_doctype.asp

Автор: verstalishik 21.2.2008, 15:08

спасибо, вот только не могу разобраться с float -позиционированием????
перерыла весь код и ни чего не изменилось правлю в IE, в FF поплыло, правлю в FF , в IE поплыло

P.S.:прошу помощи

Автор: ilyaILF 21.2.2008, 15:51

Сорри, не в ту тему написал... smile

Автор: NDenis 21.2.2008, 16:15

немного поправил стили для 3х блоков:

Код


.main3 {
float:left;
margin: 360px 0 0 400px;
border: 1px solid white;
padding:0 0 0 0px;
}
.main4 {
float:left;
margin: 360px 0 0 5px;
border: 1px solid white;
padding:0; /* если значение одно, не надо расписывать для каждой стороны */
}
.main5 {
clear:left;
/*float:left;*/
margin: 190px 0 0 320px;
border: 1px solid white;
padding:0 0 0 0px;
}

мой доктайп

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

я правда не понял, зачем столько отрицательных маргинов

Автор: verstalishik 21.2.2008, 16:22

без "отрицательных маргинов" эти ссылки (которые вы поправили ) съехала на пикселов 880 вниз

Добавлено через 36 секунд
может через padding попробывать??

Добавлено через 3 минуты и 32 секунды
все съехало с этими параметрами и в IE и в FF

Автор: NDenis 21.2.2008, 16:44

...жесть, без цели пытаемся понять цель...
как глухой с немым и без макета

Автор: verstalishik 21.2.2008, 16:46

вот что должно по идеи получится

Автор: NDenis 21.2.2008, 17:36

простейшая 3-колоночная верстка (даже таблицами)
хех, смотрите

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Венский Бал1</title>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
* {
 margin:0;
 padding:0;
 }
html, body {
 width:100%;
 }
body, input, select, textarea {
 background-color: #ffffff;
 }
#content {
 width:100%;
 }
/* центральная колонка */
#content {
 float:left;
 width:100%;
 margin-right:-200px; /* отступы для левой и правой колонки */
 }
#center {
 margin:0 200px;
 }
#left, #right {
 width:200px; /* размер под картинки */
 }
/* левая колонка */
#left {
 float:left;
 }
/* правая колонка */
#right {
 float:right;
 }
.main1 {
 text-align:center;
 }
.main1 img {
 margin: 0 15px; /* отступы от картинки до ссылок */
 }
.main5 {
 text-align:center;
 }
.main6 img {
 float:left;
 margin: 0 5px; /* отступы между картинками */
 width:100px;
 height:100px;
 }
a.nav{
font-family:Coronet;
text-decoration:none;
font-size:16px;
}
</style>
</head>
<body>

<div id="content">
 <div id="left"><img src="image/shtora1.gif"/></div>
 <div id="center">
  <div class="main1">
   <a class="nav" href="#">Алматы</a>
   <img src="image/VB_KZ1.gif"/>
   <a class="nav" href="#">Астана</a>
  </div>
  <div class="main5">
   <a class="nav" href="#">Заполнить анкету Дебютанта</a>
  </div>
  <div class="main6">
   <img src="image/baden-baden.jpg"/>
   <img src="image/BallWienLogo.gif"/>
   <img src="image/v_moskve.jpg"/>
  </div>
  </div>
 </div>
 <div id="right"><img src="image/shtora2.gif"/></div>

</body>
</html>

Автор: pythonwin 22.2.2008, 19:04

Цитата(NDenis @ 21.2.2008, 20:36

)

простейшая 3-колоночная верстка (даже таблицами)

прошу прощения, если вмешиваюсь в тему, но этот вариант не резиновый :(

Автор: verstalishik 22.2.2008, 21:04

NDenis, не хочу показаться не благодарной, но
pythonwin прав

Автор: NDenis 23.2.2008, 22:25

verstalishik, да ничего страшного, мне все-равно тогда делать было нечего
тогда объясните мне, пожалуйста, что в вашем понятии резиновый и с какой целью спрашивали как сделать резиновость при этом выкладывать заведомо не резиновый макет? smile

Автор: Wowa 23.2.2008, 23:22

Цитата(NDenis @ 23.2.2008, 21:25

)

огда объясните мне, пожалуйста, что в вашем понятии резиновый

я думаю они имели ввиду, что сайт должен на всю ширину экрана раздвигаться.

Автор: pythonwin 25.2.2008, 11:22

Цитата(Wowa @ 24.2.2008, 02:22

)

я думаю они имели ввиду, что сайт должен на всю ширину экрана раздвигаться.

нужно сделать сделать страничку, которая будет на всё высоту и ширину экрана. странно - ширина получатся, а вот высоту - пробовал - не выходит: для 1024x768 есть вертикальный скроллинг, а для 1280x1024 внизу много свободного места.

Автор: NDenis 26.2.2008, 14:53

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Венский Бал1</title>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
* {
 margin:0;
 padding:0;
 }
html, body {
 height:100%; /* растягиваем "главный" контейнер */
 width:100%;
 }
body, input, select, textarea {
 background-color: #ffffff;
 }
#content {
 width:100%;
 }
/* центральная колонка */
#content {
 background:#ccc; /* фон для центральной колонки (для наглядности) */
 float:left;
 height:100%; /* растягиваем контейнер для центральной и левой колонки */
 width:100%;
 margin-right:-200px; /* отступы для левой и правой колонки */
 }
#center {
 margin:0 200px;
 }
#left, #right {
 background:#666;
 height:100%; /* растягиваем левую и правую колонку */
 width:200px; /* размер под картинки */
 }
/* левая колонка */
#left {
 float:left;
 }
/* правая колонка */
#right {
 float:right;
 }
.main1 {
 text-align:center;
 }
.main1 img {
 margin: 0 15px; /* отступы от картинки до ссылок */
 }
.main5 {
 text-align:center;
 }
.main6 img {
 float:left;
 margin: 0 5px; /* отступы между картинками */
 width:100px;
 height:100px;
 }
a.nav{
font-family:Coronet;
text-decoration:none;
font-size:16px;
}
</style>
</head>
<body>
<div id="content">
 <div id="left"><img src="image/shtora1.gif"/></div>
 <div id="center">
  <div class="main1">
   <a class="nav" href="#">Алматы</a>
   <img src="image/VB_KZ1.gif"/>
   <a class="nav" href="#">Астана</a>
  </div>
  <div class="main5">
   <a class="nav" href="#">Заполнить анкету Дебютанта</a>
  </div>
  <div class="main6">
   <img src="image/baden-baden.jpg"/>
   <img src="image/BallWienLogo.gif"/>
   <img src="image/v_moskve.jpg"/>
  </div>
  </div>
 </div>
 <div id="right"><img src="image/shtora2.gif"/></div>
</body>
</html>

а так? у меня в FF, IE, Opera работает

Автор: pythonwin 26.2.2008, 18:56

NDenis, резинового дизайна по вертикали - нет, да и с горизонталью проблема - правый большой рисунок куда-то вылез + место снизу для большего экрана так и осталось пустым, а для экрана 1024x768 и меньше - не помещается.
вопрос: можно ли вообще сделать чтобы рисунки (не фон) растягивались/сжимались на весь экран по высоте?

Автор: NDenis 27.2.2008, 10:51

Цитата(pythonwin @ 26.2.2008, 18:56

)

NDenis, резинового дизайна по вертикали - нет

скрин в студию
у меня тот код, который я вам выложил работает во всех трех браузерах

Цитата(pythonwin @ 26.2.2008, 18:56

)

правый большой рисунок куда-то вылез

рисунок больше чем ширина дива? а подогнать размер?