VPF::верстка на div-ах - резиновость - Форум программистов

verstalishik

Дата 20.2.2008, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

доброго времени суток, есть пример свёрстаной страницы(приблизительно)
так вот проблемы:
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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

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

verstalishik

Дата 20.2.2008, 14:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

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

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

NDenis

Дата 20.2.2008, 14:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

А абсолютное позиционирование обязательно??
Вот тут почитайте, хорошая статья.

verstalishik

Дата 20.2.2008, 15:05 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

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

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

NDenis

Дата 20.2.2008, 15:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

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

Цитата

Хочу обратить внимание на блок поиска. В 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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

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

verstalishik

Дата 21.2.2008, 06:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

Цитата

margin: -116 0 0 28em;

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

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

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

Это сообщение отредактировал(а) NDenis - 21.2.2008, 11:11

verstalishik

Дата 21.2.2008, 14:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

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

verstalishik

Дата 21.2.2008, 15:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 97
Регистрация: 11.9.2007

Репутация: нет
Всего: нет

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

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

ilyaILF

Дата 21.2.2008, 15:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

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

Это сообщение отредактировал(а) ilyaILF - 21.2.2008, 15:59

NDenis

Дата 21.2.2008, 16:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

немного поправил стили для 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">

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »