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

verstalishik

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

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

Загрузка ...

Шустрый

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

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

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

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

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

NDenis

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

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

Загрузка ...

Опытный

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

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

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

verstalishik

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

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

Загрузка ...

Шустрый

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

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

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

Присоединённый файл ( Кол-во скачиваний: 20 )

tpoic.png 40,20 Kb

NDenis

Дата 21.2.2008, 17:36 (ссылка)

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

Загрузка ...

Опытный

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

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

простейшая 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>

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

pythonwin

Дата 22.2.2008, 19:04 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

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

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

)

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

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

--------------------

портал по Python
раздел на винграде по Python
язык Python

verstalishik

Дата 22.2.2008, 21:04 (ссылка)

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

Загрузка ...

Шустрый

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

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

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

NDenis

Дата 23.2.2008, 22:25 (ссылка)

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

Загрузка ...

Опытный

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

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

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

Wowa

Дата 23.2.2008, 23:22 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

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

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

)

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

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

pythonwin

Дата 25.2.2008, 11:22 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

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

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

)

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

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

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

--------------------

портал по Python
раздел на винграде по Python
язык Python

NDenis

Дата 26.2.2008, 14:53 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


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

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

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

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

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

--------------------

портал по Python
раздел на винграде по Python
язык Python

NDenis

Дата 27.2.2008, 10:51 (ссылка)

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

Загрузка ...

Опытный

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

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

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

)

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

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

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

)

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

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

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