CSS vs Böngészők vs 3oszlop középen

laccc · 2008. Már. 11. (K), 11.51

Hi!

Egy ilyen primitív dolgot szeretnék megoldani:
http://bmfnik.hu/lacc/oldal.html

napok óta küzdök vele, de nem sikerült olyan megoldást tallálni, ami megfelelően működik FF, és IE6 alatt is.
Tudna valaki segíteni?

■

HTML, CSS, JavaScript, Ajax

csirip

milliószor előjött

gex · 2008. Már. 11. (K), 12.43

ez a probléma minden héten előjön, használd a keresőt. "nyúlós div", "oszlopok magassága" meg hasonló szóösszetételekkel együtt szokott előfordulni.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

DIV minden mennyiségben

griphons · 2008. Már. 11. (K), 13.03

Én így szoktam csinálni:

main oldal body része:

<center>
<div class='full_oldal'>
<div class='head'>
</div>
<div class='full_content'>
<div class='bal_oszlop'>
<div class='tavtarto'></div>
</div>
<div class='kozepso_oszlop'>
<div class='tavtarto'></div>
</div>
<div class='jobb_oszlop'>
<div class='tavtarto'></div>
</div>
</div>
<div class='foot'>
</div>
</div>
</center>


<center>
<div class='full_oldal'>
    <div class='head'>
        <!-- fejléc tartalma -->
    </div>
    <div class='full_content'>
        <div class='bal_oszlop'>
            <div class='tavtarto'></div>
            <!-- bal oszlop tartalma -->
        </div>
        <div class='kozepso_oszlop'>
            <div class='tavtarto'></div>
            <!-- középső oszlop tartalma -->
        </div>
        <div class='jobb_oszlop'>
            <div class='tavtarto'></div>
            <!-- jobb oszlop tartalma -->
        </div>
    </div>
    <div class='foot'>
        <!-- lábrész tartalma -->
    </div>
</div>
</center>

és a css hozzá:

div {
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
div.tavtarto {
width: 0px;
height: 550px;
float: left;
}
div.full_oldal {
width: 1000px;
margin: 0px auto 0px auto;
}
div.head {
width: 1000px;
height: 200px;
}
div.full_content {
width: 1000px;
}
div.bal_oszlop {
width: 150px;
float: left;
}
div.kozepso_oszlop {
width: 700px;
float: left;
}
div.jobb_oszlop {
width: 150px;
float: left;
}
div.foot {
width: 1000px;
height: 100px;
}


div {
	position: relative;
	top: 0px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}
div.tavtarto {
	width: 0px;
	height: 550px;
        float: left;
}
div.full_oldal {
	width: 1000px;
	margin: 0px auto 0px auto;
}
div.head {
	width: 1000px;
	height: 200px;
}
div.full_content {
	width: 1000px;
}
div.bal_oszlop {
	width: 150px;
        float: left;
}
div.kozepso_oszlop {
	width: 700px;
        float: left;
}
div.jobb_oszlop {
	width: 150px;
        float: left;
}
div.foot {
	width: 1000px;
	height: 100px;
}

Ez működik IE és FF alatt is. Az ie akkor bolndul meg általában (7.0 alatt) amikor margin és padding értékeket állítok be a divnek, mert ő azt beleszámolja a teljes width/height értékbe (hibásan), a ff viszont nem. Ezért ezeket az értékeket jobb 0-án tartani.

A full oldal marginjában az auto értékek a középre igazítást szolgálják, a html részben lévő <center> szintén. Ez utóbbit az ie kedvéért kell betenni, ugyanis ő nem veszi figyelembe az auto-kat.

Ja igen: lábrészt - ami lezárja az egészet - érdemes betenni, mert ha grafikus hátterűek a div-jeid, akkor az kicsit gatyába rázza a cuccot :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

urban legend

gex · 2008. Már. 11. (K), 16.26

Az ie akkor bolndul meg általában (7.0 alatt) amikor margin és padding értékeket állítok be a divnek, mert ő azt beleszámolja a teljes width/height értékbe (hibásan), a ff viszont nem.

évek óta olvasom ezt a hülyeséget...
1. a szabvány szerint egy elem által elfoglalt terület a margin, border, padding és szélesség/magasság összege
2. az ie6 (5,4,3,...) magától nem viselkedik szabványosan
3. a strict doctype szabványos módba kapcsolja az ie6-ot

nem kell félni sem az ie6-tól, sem a margintól és paddingtól. egyszerűen csak ismerni kell az eszközöket amivel dolgozunk, nem rémhíreket terjeszteni.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

A centeresdi meg a lábrészes dolog sem kevésbé hülyeség,..

Fraki · 2008. Már. 11. (K), 17.25

A centeresdi meg a lábrészes dolog sem kevésbé hülyeség, jobb lett volna, ha ez a hozzászólás meg sem születik.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

okoska

griphons · 2008. Már. 12. (Sze), 10.18

Ne kritizalj, írj jobbat.
Olyat én is tudok írni, hogy ez baromság. csak annak se eleje, se vége, se értelme.

Aha látom csillogtatsz. Helyes.
A megközelítés gyakorlatilag ugyanaz. Én azért használtam távtartókat, mert a min-height nem megy ie6 alatt, és nem szeretek feles sorokkal telerakni css-t. Ezen túl a te megoldásod ugyanazzal az eredményel jár mint az enyém, nem tudom miért kellett szívóskodni.

A lábrészes dolog egyáltalán nem hülyeség, főleg ha a design megkívánja, és elegánsabb is tőle a lap. Kérlek ne itt kompenzálj, ez nem verseny.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ezt is fölösleges

Wabbitseason · 2008. Már. 12. (Sze), 10.35

Írtak jobbat, csak te nem olvastad el vagy talán nem is értetted. Így jártál.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

dinamikus magasságú oldalsó sávra van szükségem

laccc · 2008. Már. 11. (K), 20.47

Az a baj, hogy itt a távtartó határozza meg a bal oldali oszlopok magasságát. A kozepso_oszlop -nak kellene meghatároznia, mert az oldalsó oszlopokban lévő háttérképnek egészen addig kell lenyúlnia, amíg a kozepso_oszlop tart. Most fix 550px magas, és nem dinamikusan változó.
Itt a tied, kicsit kiszíneztem :)
http://bmfnik.hu/lacc/oldal2.html

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nem fix, minimum

griphons · 2008. Már. 12. (Sze), 10.11

Nem fix 550px magas, hanem minimum 550px magas. Kis különbség. Állítsd be magadnak, vagy vedd ki, úgyis mindoig a design szablya meg milyen technikával éred el a hatást.

Amúgy szivesen, máskor majd bölcsen hallgatok, old meg magadtól, bocs, hogy segíteni próbáltam ellentétben itt sokakkal, akik csak kritizálni szeretnek.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

azonos magasságú divek

fiokposta · 2008. Már. 12. (Sze), 01.07

Ha jól értem akkor egymás magasságát követő divekre divekre van szükséged.
Ha igen akkor ajánlom a Onetrulayout technikát (google) vagy magyarul
itt.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

azonos magasságú divek

fiokposta · 2008. Már. 12. (Sze), 01.09

helyesebben: OneTrueLayout.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Problematikus megoldás

yaanno · 2008. Már. 12. (Sze), 09.02

Nem érdemes a kezdőt ennyire mély vízbe dobni, ennek a technikának elég sok hátulütője van. Komplex szerkezeteknél, sok DOM manipulációnál egyenesen életveszélyes. Ha ezektől eltekintünk, nagyon elegáns és sok jó dolgot motivált a későbbiekben.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

válasz

fiokposta · 2008. Már. 12. (Sze), 15.08

Teljesen igazad van, de úgy tűnt - első ránézésre és ebben az elrendezésben - hogy itt az a legcélszerűbb megoldás.
Különös tekintettel a háttérképekre....
De itt szerepel egy jó javaslat - a sav_alul div meg abban is megoldható,ha jól látom, mondjuk egy
-hasraütve- egy top értékkel a felső banneres divhez képest....

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nézd meg itt!

PogiG · 2008. Már. 11. (K), 21.08

http://www.dynamicdrive.com/style/layouts/category/C13/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Elég egyszerű eset, és alig van böngészőspecifikus vonzata

Fraki · 2008. Már. 12. (Sze), 04.16

Elég egyszerű eset, és alig van böngészőspecifikus vonzata.

Kicsit regélek. A többoszlopos layoutok akkor szoktak problémát okozni, ha több oszlop egyaránt képes nyújtani a layoutot. CSS2.1-ben nem lehet leírni azt a viselkedést, hogy két oszlop közül a rövidebbik vegye fel a hosszabik magasságát, merthogy ismeretlen, hogy melyik a rövidebbik.

Azt a viselkedést viszont természetesen le lehet írni, hogy akárhány oszlop közül egy nyúlik, és a többi igazodik hozzá. Nálad ugye erről van szó.

A recept a következő. A felső sárga rész nem játszik, vehetjük úgy, hogy nincs ott. Végy egy divet, ami nyúlik. Ez a piros. Szélessége fix. Magasság min-height-os, és tudjuk, hogy IE6-ban nincs min-height, viszont alapból a height ugyanúgy viselkedik, mint a min-height:

#kozep {
...
min-height: 500px;
_height: 500px;
}


#kozep {
  ...
  min-height: 500px;
  _height: 500px;
}

Most szükségünk van két oldaldobozra, amelyek követik a piros magasságát. A magasságot ugye a CSS-ben tartalmazással lehet örököltetni, tehát a két doboz divje kicsit aszemantikusan (nézőpont kérdése) a piroson belül lesz. Az örököltetés egyik szabálya az, hogy a szülőnek pozicionáltnak kell lennie:

#kozep {
...
position: relative;
}


#kozep {
  ...
  position: relative;
}

...és természetesen a gyermekeknek (két zöld sáv) is. Ők absolute-ok lesznek, mert a középrész tartalmától független elemek, és nem befolyásolhatják azt.

#balsav, #jobbsav {
position: absolute;
top: 0;
height: 100%;
}


#balsav, #jobbsav {
  position: absolute;
  top: 0;
  height: 100%;
}

Mostmár csak ki kell őket tolni a helyükre:

#balsav {
...
left: -100px;
}
#jobbsav {
...
right: -100px;
}
#kozep {
...
overflow: visible;
}


#balsav {
  ...
  left: -100px;
}
#jobbsav {
  ...
  right: -100px;
}
#kozep {
  ...
  overflow: visible;
}

Mivel nem float-ozunk, ezért azokat ki kell venni, és a középre igazításhoz szimmetrizálni kell a margókat.

#kozep {
...
margin-right: 100px;
}


#kozep {
  ...
  margin-right: 100px;
}

http://serverus.hu/sarim/oldal.html

A hozzászóláshoz regisztráció és belépés szükséges
új téma

még egy div kéne nyúlósra

laccc · 2008. Már. 12. (Sze), 09.50

Jónak tűnik, kipróbálni csak este tudom otthon, de amit még kéne, hogy a sav_alul div a bannerek alatt kezdődik, és lenyúlik azis a befoglaló div aljáig. Azért van erre szükségem, mert a sav_alul divben kép van háttérként, ami a bannerek aljától kellene kezdődjön egészen a befoglaló div aljáig, azaz a piros aljáig.
Köszi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hát azt max így lehet (link az előző hsz-ban), vagyis úgy,.

Fraki · 2008. Már. 12. (Sze), 17.51

Hát azt max így lehet (link az előző hsz-ban), vagyis úgy, hogy a sav_alul 100%-os magasságú, és a sötétzöld anyasáv alján alábukik. Ez vszeg nem okoz gondot.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

jo megoldás

laccc · 2008. Már. 16. (V), 20.35

Köszönöm, evvel a megoldással sikerült megoldanom a problémát.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

css framework

yaanno · 2008. Már. 12. (Sze), 15.33

ha nem fázol a css frameworköktől, akkor szerintem ez kell neked - pont azt tudja amit te szeretnél, szabványos, hackmentes, böngészőfüggetlen...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés