Zaloguj się

bor1904 · 19-03-2013, 05:00

Engine · 19-03-2013, 05:07

poczytaj o overflow:hidden; i clear:both; oraz po testuj u siebie a problem zniknie.

bor1904 · 19-03-2013, 07:37

(19-03-2013, 05:07)Engine napisał(a): poczytaj o overflow:hidden; i clear:both; oraz po testuj u siebie a problem zniknie.

Nadal nie bardzo sytuacja się zmieniła.
Po dodaniu porządkującego diva z clear both przed stopką zmienia tyle że stoka jest przyklejona do najbardziej odległego w dół słupka który wyskoczył poza diva rodzica.

overflow: hidden zastosowany do wystających słupków niczego nie zmienia. Jeśli jednak zadziałałby to nie bardzo interesuje mnie ukrywanie treści...

proszę o dalsze wskazówki, dziekuje

Engine · 19-03-2013, 14:56

to naprawdę jest takie trudne powklejać sobie "overflow" w rożnych miejscach i poobserwować jak zachowuje się layout

Kod:
<html style="height: 100%">

<head>

</head>

<body style="height: 100%;">

    <div style="width: 1000px; margin: 0px auto; background: orange; height: 100px;">NAGŁÓWEK</div>

    <div style="width: 1000px; margin: 0px auto; background: yellow; min-height: 100%; overflow:hidden;">

        <div style="width: 200px; float: left; background: blue; height: 100%; padding-left: 5px; position: relative">

          <div style="width: 160px;   background: black; color: white" >

          <br><br><br>

          MENU ROZSUWANE

          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

          </div>

          <div style="width: 160px;  background: red; height: 100%">

               REKLAMA (100% height )

          </div>

        </div>

        <div style="float: right; overflow:hidden;">

                        <div style="width: 700px;background: red; height: 200px">

                BANER

            </div>

            <div style="width: 700px; overflow:hidden;">            

                <div style="width: 500px;float: left;background: blue;">

                TREŚĆ WSZYSTKO ROZCIĄGA W DÓŁ

                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                </div>                

                <div style="float: right;height: 100%;background: black;width: 200px;">

                PASEK Z INFO (100% height )

                </div>

            </div>

        </div>

    </div>

    <div style="width: 1000px; margin: 0px auto; background: orange; height: 100px; clear:both;"></div>

</body>

</html>

bor1904 · 19-03-2013, 15:26

Dziekuje bardzo za zainteresowanie ale to dalej nawet w 10% nie rozwiązuje problemu. Dalej paski się nie dociągają i znika zawartość divów (hidden).

Może inaczej zapytam.
Czy da się zrobić ...a zapewne da i w jaki sposób layout jak w załączniku?

Strzałkami zaznaczyłem pola które bedą się różniły długością... po lewej rozwijane menu a po prawej content strony.

Finalnie chce żeby bez ukrywania (overflow:hidden) zawsze wszystkie prostokąty konczyły się lub zaczynały na liniach przerywanych.

Walcze już 3 dzień i nawet z jquery i opcjami offset i height nie moge sobie poradzić na różną interpretację przeglądarek i błędne szacowanie faktycznej wysokości.

Bardzo proszę o wskazówki

Engine · (Ten post był ostatnio modyfikowany: 19-03-2013, 15:55 przez Engine.)

to nie prościej dać div-owi obejmującemu (dwa divy-y) tło o szerokości i koralach tych div-ów: background:url(bg.jpg) repeat-y;

np.
<div style="background:url(bg.jpg) repeat-y; overflow:hidden;">
<div style="width: 200px; float: left;">zawartość</div>
<div style="width: 200px; float: left;">zawartość</div>
</div>

**Kartofelek** · 19-03-2013, 16:49

Niestety ten layout jest błędnym podejściem do tworzenia stron Sad

. Tak jak powyżej robiło się kiedyś na tabelkach. Teraz stron nie robi się na daną wysokość, która w webie nie istnieje!

Inaczej mówiąc. Jak tworzysz layout powiedzmy kolumnowy, to masz różne kolumny które ROZCIĄGAJĄ layot w dół. Ale każda kolumna jest niezależna.

No niestety trzeba się nauczyć tego innego podejscia do robienia layoutów Sad

U ciebie belka boczna powinna mieć swoje tło. Elementy belki powinny rociażgać tą belkę w doł. Tak samo powinno być z contentem (patrz popularne laje do wordpressa). ALE TE ELEMENTY nie powinny budować tła layoutu.

Jakby ci to lepiej powiedzieć. Gdyby belka boczna cała miała żółte tło, ale jej elementy były by bez tła (żadne czarne i czerwone), a tylko rociągały belkę to nie musiał byś stosować ani height:100%, ani podobnych głupot. A layout by się ładnie rozciagał.

Ps. Height 100% działa wtedy, gdy element nadrzędny ma ustawioną stałą wysokość, więc jest to praktycznie nie użyteczne.
Ps2. A może ta technika ci pomoże? http://tympanus.net/codrops/ (zbada firebugiem jak jest zbudowana tutaj boczna belka)

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie