Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > скажите почему правый float сваливается


Автор: supervladislav 28.2.2011, 21:31
Скажите  почему флоат правый сваливается )))) в #main  min-width  но он не помогает сезжает флоат при сужении окна )))как можно с этим бороться 

Код

div#main{min-width:1000px;background-color:#fff2e9; }
div#left {float:left; width:20%;min-height:1000px;min-width:286px;}
div#left ul{padding-top:-10px; }
div#left li{ }
div#left A{background-image:url(../img/knopka.png);background-repeat:no-repeat;width:286px;height:61px;display:block;padding-top:0px;}
div#right {float:left;width:80%;background-color:#e7edea;min-height:1000px;}
div#right p{text-align:justify;font-size:1.6em;padding-right:30px;padding-left:25px;line-height:25px;}


Автор: LeD4eG 1.3.2011, 21:46
потому что mix(max)-width(height) поддерживается не всеми браузерами. размеры окна меняются. всё не влезает. блоки у тебя плавающие. по правилам, если два плавающих элемента на влезают на один уровень, тот блок, что определён позже, двигается вниз на такое расстояние, пока по ширине не влезет полностью.

Автор: supervladislav 1.3.2011, 22:12
LeD4eG, это в браузерах которые потдерживают данныое свойство ))))я выставляю для верхнего дива минимальный размер <так раньше работало а сейчас сезжает 

Автор: ayax2005 1.3.2011, 23:29
supervladislav, ну если 
Цитата(supervladislav @  1.3.2011,  22:12 Найти цитируемый пост)
в браузерах которые потдерживают данныое свойство 
, то почему бы не обратиться к файрбагу?

Автор: supervladislav 1.3.2011, 23:42
Народ вот почему бы не посмотреть http://www.maritime-masters.com/
точно такой же сайт с такой же структурой )))там всё работает 
почему/???

Добавлено через 8 минут и 3 секунды
ayax2005 а кто такой 

Автор: blah 2.3.2011, 04:07
supervladislav,
Попробуй посчитать насколько 286px больше 20% от 1000px.

Автор: LeD4eG 2.3.2011, 10:22
ну так правильно!
у тебя задано min-width 286px, полная ширина страницы 1000px.
ты задаешь для левого блока ширину в 200px (20%), но минимальная ширина этого блока (и это сделал тоже ты) - 286px.
для правого блока (я так понимаю, под контент) ты выделяешь 80%, то бишь - 800px.
а теперь берём гаркулятор и делаем следующее: 286px+800px = 1086px.
вот и начинается картина, которую я описывал ранее. потому что ты не задал ширину страницы. в отсутствие этой ширины за ширину страницы принимается min-width. 

когда ты работаешь с параметрами min(max)-width(hieght) ты указываешь реальный размер страницы больший (в случае с min) размер. ты, как бы говоришь: "я задаю странице ширину в 2000px, но если разрешение пользователя не позволяет, то ширина страницы должна быть 1000px"

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

Автор: supervladislav 2.3.2011, 13:49
LeD4eG вот можешь скачать и посмтреть что у меня не так я честно говоря ума не приложу ))думал что из-за свойства 
word-wrap:break-word; 
но нет я его добавил всё работает 
Вот глянь мой макет овёрстанный что там не так про размеры там всё соблюдено 

Автор: LeD4eG 2.3.2011, 14:32
supervladislav, ты хотя бы скажи: с шириной пробовал работать?

лан, с работы вернусь - гляну. ты бы пока за это время выложил бы макет того, что ты хочешь получить (чтобы я мог ориентироваться)

Автор: supervladislav 2.3.2011, 14:36
Работал я с шириной ставил аш 1400px

Автор: LeD4eG 2.3.2011, 16:48
supervladislav, жду тогда макета от Вас.

Автор: LeD4eG 2.3.2011, 19:58
supervladislav, держите Ваше творение и будьте впредь внимательнее и ПРИСЛУШИВАЙТЕСЬ к тому, что Вам пишут на форуме, а иначе зачем выносить проблему на форум?  smile 
читайте комментарии внимательно. я там описал, что было сделано.

Код

/* Убрал я все твои эксперименты с min-width, потому что они, как я и говорил, мешают. 
наведи порядок с ними, как я тебе описывал в посте на форуме*/

body,html,{
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
}
*{padding:0px;
    margin:0px;}
    
div#main{
    min-width:1100px;
    background-color:#fff2e9;
    }
    
div#logo{
    display:inline;
    }
div#menu {
    background-image:url(../img/seredmenu.png);
    background-repeat:repeat-x;
    width:100%;
    height:52px;
    clear:both;
    }
    
div#menu ul{
    font-family:sans-serif;
    padding:1% 12%;
    display:block;
    font-size:1.3em;
    font-weight:bold;
    min-width:1000px;
    }
    
div#menu li{
    float:left;
    padding-right:10%;
    list-style-type:none;
    list-style-image:url("../img/kruglay.png");
    padding-left:5px;
    }
    
div#menu a{
    text-decoration:none;
    color:#28709b;
    }
    
h1{
    font-size:1.5em;
    text-align:center;
    padding:15px;
    }
div#sered{
    background-color:#fff2e9;
    /*clear:both;*/ /* <- а вот и твоя ошибка!*/
    } 
div#left {
    float:left;
    width:20%;
    /*min-height:1000px;*/
    /*min-width:286px;*/
    /*word-wrap:break-word;*/
    }
div#left ul{
    padding-top:-10px;
    }
div#left li{ }

div#left a{ 
    background-image:url(../img/knopka.png);
    background-repeat:no-repeat;
    width:286px;
    height:61px;
    display:block;
    padding-top:0;
    }
div#right {
    float:left;
    width:70%; /* для увеличения поля слева (чтобы контент не прилипал к сайдбару), надо уменьшить ширину контента. так как при 
                               при ширине 80% он не влезал по ширине и контент опять сползал, уменьшаем ширину контента*/
    background-color:#e7edea;
    margin-top: 68px; /* делаем немного поля сверху, чтобы часть контента была чуть ниже (поле контента было вплотную
                                         к главной навигации)*/
    margin-left: 55px; /* сдвигаем поле контента вправо, чтобы был небольшой зазор между полем ссылок и контентом*/
    /*min-height:1000px;*/
    /*min-width:800px;*/}
    
div#right p{
    text-align:left;
    font-size:1.6em;
    padding-right:30px;
    padding-left:25px;
    line-height:25px;
    }


решил немного пояснить тебе твою ошибку. Вы установили для родительского элемента #sered свойство clear: both. это свойство запрещает обтекание. все потомки унаследовали это свойство, но также они были float: left.
получается следующая картина: прижаться к левому краю, но не давать обтекать себя другим элементам. вот и получалось, что они прижимались к левой границе друг под другом. 

но с шириной Вам всё равно надо поработать более подробно. Вы там немного перемудрили smile 

Автор: supervladislav 2.3.2011, 22:28
LeD4eG, большое спасибо что уделили время моей проблеме ,но только мне не понятно почему на 
http://maritime-masters.com/  точно такая же технология ,и там текст не сползает ,а у меня в проекте сползает ,мне понимаете правую колонку на 100% надо растянуть тоесть на полный экран резиново ,вот я раньше работал с min-width  , а тут  сколько его не использую всёравно сползает и кстате говоря обратите внимание ,что в выше указанном сайте у меня clear:both;
стоит в центровом слое

Автор: LeD4eG 3.3.2011, 08:21
supervladislav, а у Вас и не получится растянуть этот блок на 100%, потому что центральный блок у Вас делят между собой сайдбар и блок контента. значит играйте с шириной этих блоков. поставьте ширину такую, пока блок контента опять не сползёт вниз. 
и, кстати, у них блок контента не занимает 100% отведённого пространства......там тоже около 75% ширина.

Вас что же, не устраивает моё решение?

Автор: supervladislav 3.3.2011, 14:35
Ну а с правой стороны ,который left)))как его растянуть 
вы имеете ввиду поставить корневой див min-width 

Автор: LeD4eG 3.3.2011, 18:55
я имею в виду увеличение для правого блока его ширины.

supervladislav, а опишите как Вы вообще понимаете понятие "плавающий макет"?

Автор: LeD4eG 4.3.2011, 10:02
можно также в принципе удалить раздел #right. левый сайдбар пусть будет плавающим, текст будет его обтекать и занимать всё отведённое браузером место......

Автор: supervladislav 4.3.2011, 12:13
LeD4eG, может просто убрать свойсво float 

Автор: supervladislav 4.3.2011, 13:19
LeD4eG, убрал float у меня текст не обтекает левый див а накладывается на него 

Автор: LeD4eG 4.3.2011, 21:39
supervladislav, ну либо, да, флоат убрать.
попробуйте увеличить правое поле (margin-right) для #left.

Автор: supervladislav 4.3.2011, 23:33
мне не совсем понятно почему оно наезжает на левое поле 

Автор: LeD4eG 9.3.2011, 10:38
supervladislav, глюки при рендеринге страницы разные бывают. это, кстати говоря, как раз таки и может быть связано с отсутствием точных размеров. правилом хорошего тона считается при использовании плавающих элементов, указывать размеры этого блока.

Автор: supervladislav 9.3.2011, 13:13
LeD4eG, ты имеешь ввиду через min width 

Автор: LeD4eG 9.3.2011, 18:28
supervladislav, я уже объяснял разницу между min-width и width. и я думаю, что однозначно объяснил, что подразумеваю под размерами страницы.

Автор: supervladislav 9.3.2011, 21:11
LeD4eG, width  в процентах 

Автор: vatolinn 9.3.2011, 23:39
А где сама структура (кусок кода HTML)? Ссылка на сайт пример не работает...

Автор: colodinden 10.3.2011, 20:47
Вопрос то решился?

Автор: supervladislav 11.3.2011, 00:31
ну да 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)