Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка по див-ам, несколько мелких вопросов! 
V
    Опции темы
Forsaken
Дата 9.2.2009, 17:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



PM MAIL   Вверх
NNaarreekk
Дата 9.2.2009, 18:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Если честно мне
Код

#left {background-color:green; width:250px; height:100%;float:left;}
   #right {background-color:red;height:100%;margin-left:250px;}

вот столько достаточно, но считаю что считаю что дискуссия должна продолжится раз есть проблема, так сказать для будущих поколений)

А по теме, когда добавляю:
Код

<!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>

то 3 пикселя пропадают, но зато height:100% не работает!
PM MAIL WWW   Вверх
Violator
Дата 9.2.2009, 19:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Forsaken, 
нууу, например, вставить в правой колонке внутренний блок с float и растянуть на 100%
PM MAIL   Вверх
Forsaken
Дата 9.2.2009, 20:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



NNaarreekk, 
Правильно что неработает) Раз уж взялись соблюдать стандарты XML(XHTML) делайте это доконца) и для body добавьте height:100%
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">


Добавлено @ 20:52
Violator, 

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> 
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px;}
   #left {background-color:green; width:250px; height:100%;float:left;}
   #right {background-color:red;height:100%;margin-left:250px;}
   </style>
</head>
<body>
   <div id="left"></div>
   <div id="right"><div style="width:100%"></div></div>
</body>
</html>


Неработает. 
И для левого если вставить и растянуть тоже небудет работать... (да и как это может помочь если он займет 100% блока который имеет непонятный отступ 3px от соседа)

Это сообщение отредактировал(а) Forsaken - 9.2.2009, 21:55
PM MAIL   Вверх
Violator
Дата 9.2.2009, 21:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Forsaken, 
блок с float и растянуть на 100%

ps хотя да, проверил не работает, но думаю решение найти можно

Это сообщение отредактировал(а) Violator - 9.2.2009, 21:13
PM MAIL   Вверх
Forsaken
Дата 9.2.2009, 21:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Violator, 
Я Вас очень понимаю.. неуклюжая конструкция.. 

А если посмотреть что предлагают -чтобы это в IE Mac заработало, можно просто охренеть... -какие уж там стандарты W3C

Это сообщение отредактировал(а) Forsaken - 9.2.2009, 21:23
PM MAIL   Вверх
Violator
Дата 9.2.2009, 21:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Forsaken, 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px;}
   #left {background-color:green; width:250px;float:left;}
   #right {background-color:red;margin-left:250px;}
   #right div {float:left;background:gray;width:100%;}
   </style>
</head>
<body>
   <div id="left">123</div>
   <div id="right">
     <div>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/></div>
   </div>
</body>
</html>

PM MAIL   Вверх
NNaarreekk
Дата 9.2.2009, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Violator, Я уж не могу уследить за вашем с Forsaken разговором, но последнее написанное не работает в ИЕ7(не работает высота 100%).
Люди я шас заплачу уже, неужели это такая сложная задача??
С внутренним дивом тоже не работает! smile 
PM MAIL WWW   Вверх
Forsaken
Дата 9.2.2009, 21:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



NNaarreekk, 
для body сделайте height:100% в XHTML нужно указывать размер body по выстоте явным образом (как для div блоков)

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px;height:100%}
   #left {background-color:green; width:250px; height:100%;float:left;}
   /* "* html #right" сработает только для ie6 и более ранних, в т.ч. для ie под mac os.. "к сожалению" там нет этого бага, 

однако его уже практически не испольуют */
   * html #right {position:relative; left:-3px; margin-right:-3px;}
   #right {background-color:red;height:100%;}
   </style>
</head>
<body>
   <div id="left"></div>
   <div id="right"></div>
</body>
</html>


Violator

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px; height:100%}
   #left {background-color:green; width:250px;float:left;height:100%}
   #right {background-color:red;margin-left:250px;height:100%}
   #right div {float:left;background:gray;width:100%;}
   </style>
</head>
<body>
   <div id="left">123</div>
   <div id="right">
     <div>123<br/>123<br/>123<br/>123<br/>123<br/>123<br/></div>
   </div>
</body>
</html>

Стоит в Ваш код добавить height:100% для блока спарва как все развалится (потому что баг в ie почемуто непроявляется с минимальным значением height)

Это сообщение отредактировал(а) Forsaken - 9.2.2009, 22:12
PM MAIL   Вверх
NNaarreekk
Дата 9.2.2009, 22:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Forsaken, последний код в ИЕ7 тоже не пашет smile 
PM MAIL WWW   Вверх
Violator
Дата 9.2.2009, 23:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



NNaarreekk, 
html {height:100%}


Forsaken, 
хм... ну значит для ие6 таки придется использовать предложенный вами способ smile 
PM MAIL   Вверх
Forsaken
Дата 9.2.2009, 23:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



NNaarreekk, 
я порой в шоке от себя.. только что тут распинался о xhtml стандартах... smile 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
   <title>V</title>
   <style type="text/css">
   html, body {margin: 0px; padding: 0px;height:100%}
   #left {background-color:green; width:250px; height:100%;float:left;}
   * html #right {position:relative; left:-3px; margin-right:-3px;}
   #right {background-color:red;height:100%;}
   </style>
</head>
<body>
   <div id="left"></div>
   <div id="right"></div>
</body>
</html>


Violator
Там в сети этих способов столько было, что  я уверен в том что этот способ еще чейто уже давно..)

Прошу прощения всех за мой тупняк.. я больше небуду!

Это сообщение отредактировал(а) Forsaken - 9.2.2009, 23:22
PM MAIL   Вверх
NNaarreekk
Дата 9.2.2009, 23:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Forsaken, Violator, спасибо за помощь!
Последний код работает как надо. Долгими стараниями мы пришли к нему)

Хотел тему отметить решенным, а оказалось давно это сделал smile 
PM MAIL WWW   Вверх
pasha4ur
  Дата 23.8.2009, 12:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


дизайнер



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

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



Всем привет.
Напишу здесь, чтобы не создавать новую тему. На другом форуме ничем особо не помогли http://demiart.ru/forum/index.php?showtopic=100755&st=0 Там даже ответов не дождешься.

Только начал это все изучать. Таблицами верстать даже легко показалось, а вот блоками :(((.
Сайт: http://pasha4ur.narod.ru/
Правда уже рдин человек помог. Спасибо ему за это. До него норально вели себя только облака.

Проглядывал статьи по блочной верстке.

Есть много тупых вопросов.

1. 3-ех колоночный дизайн:
Код

.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;
}

Это позволяет не расплываться слоям. Как оно работает? Граница браузера просто наезжает на 150 на сам слой и поэтому он не соскакивает вниз?

и цитата с другого форума:

Цитата(Agnessa)
pasha4ur, Ситуации, которые вы наблюдаете показывайте кодом, а не объяснительным текстом, из которого мало что понятно... Код выкладывайте!

http://pasha4ur.narod.ru/
Цитата
1. №1 зависит от №2 (не пойму как это зависит от позиционирования). Плюс, что растягивается больше 100%, если №2 большой. Минус, что становится меньше 100%, если №2 маленький и я хз как это побороть.  
2. №2 просто вылазит самостоятельно за границы №1.

Вторую проблему исправили хз как. У меня было все абсолютно выровнено. Заменили часть на относительное.
Цитата
Что вы все к процентам привязываетесь? 100 процентов ЧЕГО? Вам в школе не объясняли что проценты - величина относительная?

На весь экран, когда контент меньше 100% от кол-ва пикселей на экране пользователя. Как пустой слой растянуть на 100%, а когда много содержимого, то чтобы он растягивался вместе с ним :я не знаю: 

И вот это интересно:
Цитата
4. На локальной машине все ок, но на хостинге браузеры ОЧЕНЬ напрягаются при первой загрузке.


Читал много раз, но еще путаюсь в относительном/абсолютном. 

Относительное - винимается из основного потока и перемается на заданное смещение относительно того места, на котором должен был быть. Следующие слои располагаются как-будто он на своем месте был.

Абсолютное - винимается, выравнивается от границ родительского элеента. Не влияет на расположение других.

Все правильно?
PM MAIL WWW ICQ Skype   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0530 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.