Jump to content
  • 0

Фиксированный-резиновый DIV

Antonov124

Asked by Antonov124,

 Share

Question

Antonov124 Explorer

Antonov124

Posted
Posted (edited)

Здравствуйте Уважаемые !!!

Пытаюсь перейти на DIV верстку, но все никак врубиться в нее не могу. После таблиц никак не получается.

Уже пытаюсь по рекомендациям с сайта, все выкинуть из головы про таблицы и на пустую голову все сделать.

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

Вот пробую с фиксированным расположением сделать, не получается footer вниз опустить, А как сделать, никак не могу понять. Смотрел много работ и примеров по "резиновой" верстке, все на float. Хочу без float обойтись.

Если привязываю footer к "content", то он опускается, но при наполнении "right" остается на месте перекрывая данные в правом поле. Обратная ситуация получается при привязке к footer'а к "right".

Пробовал еще один внешний DIV сделать, который охватывает все, но все равно footer не опускается. ;)

Посмотрите пожалуйста код, подскажите косяки пожалуйста.

Вот я тормоз... :D

Увлекся писаниной, а про ссылку забыл...

http://www.3dflight.ru/fixed-index.html

Edited by Antonov124
Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
Здравствуйте Уважаемые !!!

Пытаюсь перейти на DIV верстку, но все никак врубиться в нее не могу. После таблиц никак не получается.

Уже пытаюсь по рекомендациям с сайта, все выкинуть из головы про таблицы и на пустую голову все сделать.

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

Вот пробую с фиксированным расположением сделать, не получается footer вниз опустить, А как сделать, никак не могу понять. Смотрел много работ и примеров по "резиновой" верстке, все на float. Хочу без float обойтись.

Если привязываю footer к "content", то он опускается, но при наполнении "right" остается на месте перекрывая данные в правом поле. Обратная ситуация получается при привязке к footer'а к "right".

Пробовал еще один внешний DIV сделать, который охватывает все, но все равно footer не опускается. ;)

Посмотрите пожалуйста код, подскажите косяки пожалуйста.

Не волнуйся дружище, мы тебя без рабочего варианта не оставим http://psywalker.ru/Forum/shadow/Untitled-1.html

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Спасибо за помощь.

Исправил сообщение, там пример...

Там жуть а не пример, Лучше бери вариант рабочий и в нем уже дотачивай. У твоего помимо этого будут обязательные косяки в дальнейшем.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Спасибо за помощь.

Исправил сообщение, там пример...

Да не за что, ерунда. А про свою ссылку забудь, я тебе дал рабочий пример, на нём и потренируйся, сделай свой вариант, а потом и покажешь уже. ;)

Link to comment
Share on other sites
  • 0
Antonov124 Explorer

Antonov124

Posted
  • Author
Posted
Там жуть а не пример,У твоего помимо этого будут обязательные косяки в дальнейшем.

А можно подробней почему так все страшно?

Вот малость переделал, сделайте пожалуйста конкретные замечания что не правильно?

http://www.3dflight.ru/fixed-index2.html

Если есть примеры, ткните пальцем на резиновый макет с колонкой стправа полностью фиксированный.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
А можно подробней почему так все страшно?

Вот малость переделал, сделайте пожалуйста конкретные замечания что не правильно?

http://www.3dflight.ru/fixed-index2.html

Если есть примеры, ткните пальцем на резиновый макет с колонкой стправа полностью фиксированный.

Совершенно неверный подход к делу. Чтобы подвал был всегда внизу, для начала ему нужен для этого контейнер, который будет релативом, либо сам растягиваться на всю высоту, а подвал чтобы был под ним и мог свободно отриц. марджином оказаться на своём месте. В общем в примере, который я тебе выше дал, как раз показан один из правильных вариантов.

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted

Вот зачем усложнять жизнь? Зачем там все блоки надо позиционировать??? Юзайте, флоат. Если бы хеадер был фиксед, а так никакого смысла. Футер всераво не на месте. Макет с одной фиксированой по ширине колонкой, а второй резиновой так не делают.

Link to comment
Share on other sites
  • 0
Antonov124 Explorer

Antonov124

Posted
  • Author
Posted
Чтобы подвал был всегда внизу, для начала ему нужен для этого контейнер, который будет релативом, либо сам растягиваться на всю высоту, а подвал чтобы был под ним и мог свободно отриц. марджином оказаться на своём месте.

Вот это уже конкретная рекомендация. Попробую, правда я пробовал, но опустить пока не получилось.

Вот зачем усложнять жизнь? Зачем там все блоки надо позиционировать??? Юзайте, флоат. Если бы хеадер был фиксед, а так никакого смысла. Футер всераво не на месте. Макет с одной фиксированой по ширине колонкой, а второй резиновой так не делают.

А вообще возможно ли сделать "резину" фиксированной? Просто я занялся подобным, чтоб усложнить себе жизнь и таким способом попробовать подробнее вникнуть в DIV. Пока не очень получается, но любая проблема развивает. С float вроде все получается, но мне не нравится дикая вложенность при использовании фона справа и слева. Хотел попробовать чтоб код был проще и нагляднее. С флоат много примеров в сети как и сверстаных сайтов впрочем.

Например - «Резиновая вёрстка»: используем отрицательные поля,

В поисках Святого Грааля.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Вот это уже конкретная рекомендация. Попробую, правда я пробовал, но опустить пока не получилось.

А вообще возможно ли сделать "резину" фиксированной? Просто я занялся подобным, чтоб усложнить себе жизнь и таким способом попробовать подробнее вникнуть в DIV. Пока не очень получается, но любая проблема развивает. С float вроде все получается, но мне не нравится дикая вложенность при использовании фона справа и слева. Хотел попробовать чтоб код был проще и нагляднее. С флоат много примеров в сети как и сверстаных сайтов впрочем.

Например - «Резиновая вёрстка»: используем отрицательные поля,

В поисках Святого Грааля.

Покажи мне скриншот того, что хочешь получить.

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted
А вообще возможно ли сделать "резину" фиксированной?

Гм))) от куда вылез такой вопрос? Если из " Если бы хеадер был фиксед"

то вообщето здесь имеется ввиду fixed. Если, не знаете что это, почитайте.

Link to comment
Share on other sites
  • 0
Antonov124 Explorer

Antonov124

Posted
  • Author
Posted
Покажи мне скриншот того, что хочешь получить.

Обычный "резиновый" двухколоночный макет страницы (пример).

Хотел урезать подобный код:

<div id="wrapper">

<div id="container">

<div id="content">

Попарюсь еще недельку, не пройдет моя идея буду пользовать стандартные методы.

Просто везде пишут, что див'ы круче, компактней код и т.д.

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

Для сравнения:

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

<div id="wrapper">

<div id="container">

<div id="content">

</div>

</div>

</div>

Или я чет не понимаю, или... ;)

Link to comment
Share on other sites
  • 0
Antonov124 Explorer

Antonov124

Posted
  • Author
Posted
Гм))) от куда вылез такой вопрос?

Я не правильно выразился. Имел ввиду position: absolute и relative при "резиновой" верстке без использования float.

А вообще www.htmlbook.ru очень хороший сайт (часто использую как справочник).

Так ясно, а ты тут был? http://stepbystep.htmlbook.ru/

Кончено был, все перелапатил. Уще не утреслось, но уже блзко.

Наверное у меня проблема с этим:

Слои не таблицы

Несмотря на банальность подобного утверждения, многие разработчики своим трудом опровергают его вновь и вновь. Но стоит только осознать, что это разные инструменты и элементы конструктора, как сразу станет легче и проще. Действительно, таблицы и методы верстки с их помощью лучше применять в одном случае, а слои — в другом. И четко разделять подходы и принципы верстки. Тогда нам не понадобится загонять творческую мысль в прокрустово ложе антагонистичной технологии. Надо просто пойти другим путем.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Да уж. У тебя табличная болезнь))) Возьми для начала просто сделай двух колоночный макет, необязательно с одинаковыми колонками и резиной, просто для начала сделай фикс - 1000пк выровненный по середине с двумя колонками внутри. Правая 300пк, а левая на всю оставшуюся ширину. Потом покажешь, что вышло.

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted (edited)
Но чтоб сделать просто две колонки одной высоты требуется столько мароки, да еще проблемы с кроссбраузерностью, которых в таблицах практически нет.

Для сравнения:

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

<div id="wrapper">

<div id="container">

<div id="content">

</div>

</div>

</div>

Или я чет не понимаю, или... ;)


<div class="wrap">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

Ну и где кода меньше? :D

Edited by gesandte
Link to comment
Share on other sites
  • 0
Antonov124 Explorer

Antonov124

Posted
  • Author
Posted

Вот нашел неплохой вариант выполнения без float и без position.

Ссылка на статью.

Попробовал, вот что у меня получилось...

Ссылка на результат.

Список возможных значений атрибута Display у IE очень мал судя по мануалу рушил проверить на деле через Browsershots.org.

Все получилось вроде хорошо. В IE 5.5. и 6.0 background только на размер наполнения, но дак это в DIV норма.

Что скажите про такое решение?

Правая 300пк, а левая на всю оставшуюся ширину. Потом покажешь, что вышло.

Вот сделал по примеру, хороший вариант, но footer не привязан. :unsure:

Content наполнен больше чем Menu и Content наполнен меньше чем Menu.

Помучался, мое мнение что просто не привязать Footer в 2-х, 3-х колоночном варианте если хоть один слой имеет position: absolute;

Оно сразу теряет привязку к внешнему слою. ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept