Застъпване на елементи

V

Vladkata

Registered
Добър вечер! Ползвам тази грид система. Ползвам я, защото е Fluid GridSystem и се смалява до някакви пиксели, като винаги остава място отстрани, мисля че се сещате...

Имам .grid_2 и .grid_10:
HTML: 
<div class="grid_2">...</div>
<div class="grid_10">...</div>

В CSS-а на грид системата, всеки грид си има float: left;, за да се "лепне" за другия, както става с тези двата по-горе. На body-то съм задал: min-width: 1000px; (за да не се сгъва повече), в .grid_2 има <div> с строго определена ширина 220px.

Но като намаля резолюцията и съответно всичко се смали до 1000px .grid_10 отива върху .grid_2, а не се смалява само отдясно.

Това е нормалното поведение, а това става при намаляване...

Пробвах с clearfix не става. Някакви идеи?

Edit: overflow: hidden; не върши работа, защото така се закрива застъпената част и половината <div> го няма...
 
Jorko каза:
Ми нормално ако на 2-та дива ширината общо е по-голяма от 1000 px
Увеличете...

Това става при смаляване на резолюцията - на прозореца на браузъра, т.е. широчините им намаляват. Като махна min-width пак се получава...
 
body, .grid_2, .grid_10, .container_12:
[css]
body{
background-image: url('../img/bg_light.png');
background-repeat: repeat-x, y;
min-width: 1000px;}

.grid_2,.grid_10{
display:inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}

.container_12 .grid_2 {
width:13.2%; /* original - 14.667 */
}

.container_12 .grid_10 {
width:81.555%; /* original - 81.333 */
}

.container_12 { /* и двата grid-а са в този <div> */
width: 92%;
margin-left: 4%;
margin-right: 4%;
}
[/css]

В .grid_2:
[css]
.sidebar{
background: #f1f1f1;
width: 220px;
height: 800px;
position: relative;
z-index: 200;
}
[/css]

В .grid_10:
[css]
.statistics{
background-image: url('../img/statistics.png');
background-repeat: repeat-x;
min-width: 780px;
height: 80px;
position: relative;
z-index: 100;
}

.content{
min-width: 780px;
height: 720px;
position: relative;
z-index: 100;
}
[/css]
 
Jorko каза:
я пробвай да им махнеш position: relative; би трябвало да се оправи проблема
Увеличете...

Махнах навсякъде където имаше position-инг по тези <div>-ове, но пак така... Отгоре над тях имам .grid_12, който си се сгъва нормално - само от дясно на ляво, от лявата страна не мърда...
 
[css]
.container_12 { /* и двата grid-а са в този <div> */
width: 92%;
margin-left: 4%;
margin-right: 4%;
}
[/css]

проблема идва от тука трябва width на тоя контейнер да е 100% и няма да се застъпват : )

Защото загледай се 2-та ти дива имат обща ширина 1000 px

а тоя див във който стоят има 92% от ширината само за това се получава така

ако направиш така не би трябвало да се застъпят
[css].container_12 { /* и двата grid-а са в този <div> */
width: 100%;
/*margin-left: 4%;
margin-right: 4%;*/
}[/css]

а за маргина незнам точно после как ще го изнемогнеш но с тея проценти де са вика таш** работа това е от мене :)
 
Jorko каза:
...
Увеличете...

Пак се застъпват, но по-малко. Пробвах с различни стойности за margin-ите, но не става. Пробвай въобще да няма width пак не става... Интересно защо се получава, дали не е заради сайдбара защото е фиксирана широчина и не са мърда?
 
http://dwnl.vladchooo.com/structure/ това е структурата. Червеното е header, зеленото е body header, жълтото е sidebar (който трябва да е фиксирана ширина, ако я махна и е добре, обаче трябва да е фиксирана), синьото и оранжевото са съдържанието и като смаляваш прозореца ще видиш как отиват върху sidebar-а (с 0.8 oapcity съм ги направил)
 
Ами единствения начин да не се застъпват е да ги направиш с фиксирана ширина 2-та грида или да има зададе общ збор от ширина 88%
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе