Показано с 1 по 16 из 16

Тема: float в осле

  1. #1

    Регистрация
    14.04.2007
    Сообщений
    136
    Есть две колонки. статического размера.Одна колонка флоутнутая влево. назначен статический размер. Вторая колонка просто подтянута с указанием левого маргина.
    Применен способ неймоверного удлинения вниз, чтобы сравнять колонки. кажется все хорошо, но в осле, вторая колонка (правая) съежает вниз под первую. получается вроде этого:
    ________________________
    |********|**************|
    |*блабла*|**************|
    |*блабла*|**************|
    |*блабла*|**************|
    |********|***основной***|
    |********|****контент****|
    |________|______________|
    (пробелы форум режет, пришлось звездочками)
    т.к. в левой колонке контент генерируемый, то обычным минусовым верхним магрином не отделаешся. спасибо за внимание.

  2. #2

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Зачем пользоваться способом неимоверного удлинения вниз? Имхо, извращение это. Тем более, что при использовании данного метода не получится прижать футер к низу (при небольшом контенте). Faux Columns рулят...

  3. #3

    Регистрация
    14.04.2007
    Сообщений
    136
    ну это отношение к делу не имеет ,потому что даже если убрать padding-bottom:32767px;margin-bottom:-32767px; то все равно проблема остается. в данном случае метод ложных колонок не подошел бы. А так юзаю Faux Columns.

  4. #4

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Тогда код в студию... Только, пожалуйста, без всякой лишней, не имеющей отношения к проблеме детализации...

  5. #5

    Регистрация
    14.04.2007
    Сообщений
    136
    Код:
    ****<div id="main">
     *<div id="left">
    
     *</div>
     *
     *<div id="content">
    
     *</div>
    ****</div>
    Это HTML. Все стандартно.

    Код:
    #main {overflow:hidden;margin:0px auto;width:950px;}
    #content {margin-left:211px;width:740px;border-left:solid 1px #FFF;padding-top:15px;padding-left:30px;background:transparent url(&#39;images/content.jpg&#39;) left top repeat-x;}
    #left {padding-bottom:32767px;margin-bottom:-32767px;float:left;height:100%;width:210px;border-right:solid 1px #786c59;background:transparent url(&#39;images/column.jpg&#39;) left top repeat;}
    Это части кода, которые относятся только к колонкам.

  6. #6

    Регистрация
    06.02.2007
    Адрес
    Kazan
    Сообщений
    186

    Смущение

    если вам нужен "эффект таблиц", то можете воспользоваться следующим шаблоном

  7. #7

    Регистрация
    14.04.2007
    Сообщений
    136
    это вы к чему? к border-left:solid 1px #FFF; и border-right:solid 1px #786c59;?

  8. #8

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Вообще замечательно...
    И почему интересно же у Вас контент съезжает?
    Как можно, спрашивается, в контейнер шириной 950px запихнуть содержимое шириной 982px ???
    И вообще, зачем задавать блоку #content ширину? Какая необходимость?

  9. #9

    Регистрация
    14.04.2007
    Сообщений
    136
    ошибку нашел. стыдно, чесс слово. а если у бокса шириной 200пикселей стоит левый бордер (к примеру) шириной в 1 пиксель, то ширина бокса будет 201рх?

  10. #10

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    конечно)

    Это же основа блочной модели. Ширина блока = width + боковые paddings + боковые borders + боковые margins...

  11. #11

    Регистрация
    14.04.2007
    Сообщений
    136
    боковые margins??? Это же отступ от границы бокса до другого бокса. Или я чет не понимаю?
    Вродь только с паддингами нада играться (изменять ширину и прочее), а с маргинами все норм...

    Добавлено спустя....
    После експериментов понял (возможно и неправильно понял), что маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе. Но если не уместится, маргин выйдет за пределы родителя (ситуация описывается в статьи [Только зарегистрированные пользователи могут видеть ссылки. ]). думаю, со мной согласятся, ведь если закрасить бокс шириной в 100рх и с маргинами бо бокам в 20, то будет закрашено только 100рх, а если с паддингами в 20пикселей, то будет 140рх закрашено. Как я понял, закрашеная область в этом случае и будет шириной бокса.

  12. #12

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Ну и наговорили же Вы всякой ереси... ))

    маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе
    Черное – это вроде бы белое, но в то же время белое – это вроде бы как бы и не черное... Масло маслянное, не находите? )

    Результирующей шириной бокса будет сумма самой непосредственной ширины (width) и всех боковых полей, рамок и отступов. В принципе, Вы вроде бы все правильно усвоили, только вот нагородили лишнего... )

    А разница между маргином и паддингом только в том и заключается, что на маргин (в отличие от паддинга) фоновый цвет не распространяется. И располагается маргин соответственно "после" бордера, а паддинг – "до"...

  13. #13

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by KukMan@Aug 6 2007, 20:54
    боковые margins??? * Это же отступ от границы бокса до другого бокса.* Или я чет не понимаю?
    Вродь только с паддингами нада играться (изменять ширину и прочее), а с маргинами все норм...

    Добавлено спустя....
    После експериментов понял (возможно и неправильно понял), что маргин - не влияет на ширину самого бокса, однако нужно учитывать ширину бокса + маргин, чтобы он уместился в родительском боксе. Но если не уместится, маргин выйдет за пределы родителя (ситуация описывается в статьи [Только зарегистрированные пользователи могут видеть ссылки. ]). думаю, со мной согласятся, ведь если закрасить бокс шириной в 100рх и с маргинами бо бокам в 20, то будет закрашено только 100рх, а если с паддингами в 20пикселей, то будет 140рх закрашено. Как я понял, закрашеная область в этом случае и будет шириной бокса.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]

    ширина блока = width + margin + padding + border

    кстати, кому интересно, можно поиграть вот с такой штукой.
    Чтобы заставить другие браузеры считать паддинги внутрь как IE, можно в стилях добавить
    Код:
    * { box-sizing: border-box; -moz-box-sizing: border-box; }
    Причем доктайп ставить не надо, а то IE переключается в standard mode.

    но это ток в качестве эксперимента =)

  14. #14

    Регистрация
    14.04.2007
    Сообщений
    136
    а. ну если так, то так. Я думал, что ширина это растояние от левой границы бокса до правой. паддинг в это растояние входит, а маргин - за границей. Терь поменял свою точку зрения...

  15. #15

    Регистрация
    14.04.2007
    Сообщений
    136
    Чтобы заставить другие браузеры считать паддинги внутрь как IE
    А что, осел по другому както паддинги считает? не замечал...

  16. #16

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Zigzag@Aug 7 2007, 00:34
    но это ток в качестве эксперимента =)
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Ой, Павел... Слов нет... ))
    Да не сбивал бы ты с пути истинного отроков неразумных... )

    Originally posted by KukMan@Aug 7 2007, 00:40
    А что, осел по другому както паддинги считает? не замечал...
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Доктайп уберите (или неправильный поставьте), тогда IE6 будет все внутрь считать...

Похожие темы

  1. float left в IE6-7
    от Kiosuki в разделе Вёрстка сайта
    Ответов: 1
    Последнее сообщение: 05.08.2010, 00:12
  2. Ответов: 2
    Последнее сообщение: 09.08.2009, 23:33
  3. Растяжение родительского блока для float в IE6
    от Kiosuki в разделе Вёрстка сайта
    Ответов: 2
    Последнее сообщение: 09.06.2009, 21:42
  4. Обтекание текстом float-а в IE
    от Aykroyd в разделе Вёрстка сайта
    Ответов: 64
    Последнее сообщение: 15.10.2008, 17:10
  5. Float-разметка при печати страницы
    от Cheese в разделе Вёрстка сайта
    Ответов: 3
    Последнее сообщение: 24.09.2007, 17:06

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •