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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> скажите почему правый float сваливается, првый флоат сваливается с Min width 
V
    Опции темы
supervladislav
Дата 28.2.2011, 21:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



Скажите  почему флоат правый сваливается )))) в #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;}



Это сообщение отредактировал(а) supervladislav - 28.2.2011, 21:37
PM MAIL   Вверх
LeD4eG
Дата 1.3.2011, 21:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



потому что mix(max)-width(height) поддерживается не всеми браузерами. размеры окна меняются. всё не влезает. блоки у тебя плавающие. по правилам, если два плавающих элемента на влезают на один уровень, тот блок, что определён позже, двигается вниз на такое расстояние, пока по ширине не влезет полностью.
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 1.3.2011, 22:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, это в браузерах которые потдерживают данныое свойство ))))я выставляю для верхнего дива минимальный размер <так раньше работало а сейчас сезжает 
PM MAIL   Вверх
ayax2005
Дата 1.3.2011, 23:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


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

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



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



--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
supervladislav
Дата 1.3.2011, 23:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



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

Добавлено через 8 минут и 3 секунды
ayax2005 а кто такой 
PM MAIL   Вверх
blah
Дата 2.3.2011, 04:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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



supervladislav,
Попробуй посчитать насколько 286px больше 20% от 1000px.
PM MAIL ICQ   Вверх
LeD4eG
Дата 2.3.2011, 10:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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

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

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

Это сообщение отредактировал(а) LeD4eG - 2.3.2011, 10:31
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 2.3.2011, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



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


Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  yaroslav.rar 222,22 Kb
PM MAIL   Вверх
LeD4eG
Дата 2.3.2011, 14:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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

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

Это сообщение отредактировал(а) LeD4eG - 2.3.2011, 14:34
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 2.3.2011, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



Работал я с шириной ставил аш 1400px

PM MAIL   Вверх
LeD4eG
Дата 2.3.2011, 16:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



supervladislav, жду тогда макета от Вас.
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
LeD4eG
Дата 2.3.2011, 19:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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 

Это сообщение отредактировал(а) LeD4eG - 2.3.2011, 21:23
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 2.3.2011, 22:28 (ссылка)    | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, большое спасибо что уделили время моей проблеме ,но только мне не понятно почему на 
http://maritime-masters.com/  точно такая же технология ,и там текст не сползает ,а у меня в проекте сползает ,мне понимаете правую колонку на 100% надо растянуть тоесть на полный экран резиново ,вот я раньше работал с min-width  , а тут  сколько его не использую всёравно сползает и кстате говоря обратите внимание ,что в выше указанном сайте у меня clear:both;
стоит в центровом слое
PM MAIL   Вверх
LeD4eG
Дата 3.3.2011, 08:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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

Вас что же, не устраивает моё решение?
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 3.3.2011, 14:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



Ну а с правой стороны ,который left)))как его растянуть 
вы имеете ввиду поставить корневой див min-width 
PM MAIL   Вверх
LeD4eG
Дата 3.3.2011, 18:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



я имею в виду увеличение для правого блока его ширины.

supervladislav, а опишите как Вы вообще понимаете понятие "плавающий макет"?
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
LeD4eG
Дата 4.3.2011, 10:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



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


Это сообщение отредактировал(а) LeD4eG - 4.3.2011, 10:02
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 4.3.2011, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, может просто убрать свойсво float 
PM MAIL   Вверх
supervladislav
Дата 4.3.2011, 13:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, убрал float у меня текст не обтекает левый див а накладывается на него 
PM MAIL   Вверх
LeD4eG
Дата 4.3.2011, 21:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



supervladislav, ну либо, да, флоат убрать.
попробуйте увеличить правое поле (margin-right) для #left.
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 4.3.2011, 23:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



мне не совсем понятно почему оно наезжает на левое поле 

PM MAIL   Вверх
LeD4eG
Дата 9.3.2011, 10:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



supervladislav, глюки при рендеринге страницы разные бывают. это, кстати говоря, как раз таки и может быть связано с отсутствием точных размеров. правилом хорошего тона считается при использовании плавающих элементов, указывать размеры этого блока.
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 9.3.2011, 13:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, ты имеешь ввиду через min width 
PM MAIL   Вверх
LeD4eG
Дата 9.3.2011, 18:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



supervladislav, я уже объяснял разницу между min-width и width. и я думаю, что однозначно объяснил, что подразумеваю под размерами страницы.
--------------------
Ты не успел стать для кого-то главным, кому-то очень нужным.....
PM MAIL   Вверх
supervladislav
Дата 9.3.2011, 21:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



LeD4eG, width  в процентах 
PM MAIL   Вверх
vatolinn
Дата 9.3.2011, 23:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



А где сама структура (кусок кода HTML)? Ссылка на сайт пример не работает...
PM MAIL   Вверх
colodinden
Дата 10.3.2011, 20:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Вопрос то решился?
PM MAIL   Вверх
supervladislav
Дата 11.3.2011, 00:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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



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


 




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


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

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