ugrás a tartalomhoz

Frame vagy Div újra...

Pepita · 2011. Feb. 26. (Szo), 13.25
Üdv mindenkinek!

Az elmúlt hetekben igen sokat böngésztem ezt az oldalt - és sok mást is - mégsem jutok "dűlőre".
Web területen kezdőnek számítok, csak helyi gépre fejlesztettem eddig (Delphi).
Nagyon sok fórumtémában olvastam, hogy "frame-et ne használj, frame elavult, stb.", de igazán "épkézláb" magyarázatot nem találtam a vakok problémáján kívül.
Azt látom, hogy "nagyon nem divat", de mi a konkrét technikai oka?
Ha úgy tetszik: "divatból" div-ekkel szeretném megoldani az alábbi "frame-szerkezetet":

---------------------------------------
TOP
---------------------------------------
----|
----|
----|
----|
LEFT| MAIN
----|
----|
----|
----|

ahol TOP és LEFT 130px magas ill. széles, TOP kitölti a lap szélességét, LEFT a TOP alatti maradék magasságot, MAIN pedig a maradék területet.
TOP csak fejléc, LEFT egy menüsor, MAIN a tartalom, továbbá MAIN függőlegesen görgethető, vízszintesen "betördeli" (wordwrap) magát.
Ha div-vel lehet ilyet, pontosan hogyan?
Azt még nem döntöttem el, hogy a "kereteket" include-oljam a lapokba, vagy index.php "lapozzon". Talán az előbbi lesz, vagy is-is.
És ha div-be include minden menüclickre, mi a helyzet a menüvel? Vagyis ahova kattintott, az megmarad-e a:active-nak? (LEFT-ben lenne menü, CSS-el kevés képpel is szépet lehet az a:xxx tulajdonságokkal, de ott érdekes lenne, hogy include után is active "maradjon" az, ahova klattyolt a T.Júzer.)
Van egypár CSS tulajdonság, ami nemigazán tiszta (pl. Z-index), ha van jó CSS doksi (esetleg magyar), kérnék hozzá linket.
(Számomra a jó azt jelenti, hogy A-Z-ig összes elérhető tulajdonság, minden hozzájuk rendelhető érték, magyarázattal.)

Remélem a probléma megfogalmazása megüti a tűrhetőt.
Segítségeteket előre is nagyon köszönöm!
‹ Két ciklus egyesítése keresőbarát urlek - htaccess vagy php? ›
 ■
1

Nagyon sok fórumtémában

Poetro · 2011. Feb. 26. (Szo), 15.32
Nagyon sok fórumtémában olvastam, hogy "frame-et ne használj, frame elavult, stb.", de igazán "épkézláb" magyarázatot nem találtam a vakok problémáján kívül.
Azt látom, hogy "nagyon nem divat", de mi a konkrét technikai oka?

  • Tegyük fel, hogy el akarsz menteni egy könyvjelzőt az oldalhoz. Ez frame-ek esetén nem lehetséges, mert a frame-ek állapota nem látszódik a böngésző címsorában.
  • A keresőmotorokban tárolt link nem fogja tartalmazni az oldal egyes komponenseit, például a menüt, vagy a fejlécet, mivel az másik oldalon van.
  • Billentyűzettel nem kényelmes végignavigálni az oldalon, ugyanis az az egyes frame-eken belül előbb végigjárja az összes hivatkozást, mielőtt a következő frame-re ugrana.
  • És fontos hozzátenni, hogy ez nem divat kérdése. Hanem szemantika, hozzáférhetőség, kényelem és még sok egyéb indok áll e mellett.
  • Főleg az AJAX korában nem érdemes olyan elavult technikákat használni, amik ráadásul azóta kikerültek a HTML5 specifikációból is valamint az XHTML 1.1-ből, és XHTML 1.0 esetén is külön DOCTYPE kellett hozzá.
2

És a többi?

Pepita · 2011. Feb. 26. (Szo), 15.51
Köszönöm szépen a válaszodat, így már nem "divatból" mellőzném a frame-eket, <b>nagyon meggyőztél</b>.
Meg tudnád mondani, hogy oldjam meg div-ekkel? Fix méretekig eljutottam, de az nem megoldás különböző felbontások ill. böngészők miatt. Nem tudok mit kezdeni a "maradék" területekkel.
Esetleg CSS doksi?

Miért nem műkszik itt a "<b>"?
3

SitePoint CSS Reference W3C

Poetro · 2011. Feb. 26. (Szo), 16.17
SitePoint CSS Reference
W3C Cascading Style Sheets, level 2 CSS2 Specification

Miért nem műkszik itt a "<b>"?

Lásd a hozzászólás mező alatti szöveget, és a További lehetőségek linket.
4

alapvetően pár megközelítés nem a legjobb

therest · 2011. Feb. 26. (Szo), 17.40
Azt írod, hogy a left div egy menü, és fix magassággal dolgozik. Csak úgy mint frame-eknél itt is kimarad az alatta levő terület, és az szerintem gagyi hatást kelt. Csak úgy mint a külön scrollozható main.

Kiindulási alapnak ez jó:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body {
	padding:0px;
	margin:0px;
}

#topDiv {
	width:100%;
	height:130px;
	background-color:#060;	
}

#leftDiv {
	width:130px;
	float:left;
	background-color:#0C9;
}

#mainDiv {
	background-color:#093;	
}
</style>

<body>
<div id="topDiv">top div</div>
<div id="leftDiv">
left div
left div
left divleft divleft divleft divleft divleft divleft divleft divleft div
</div>
<div id="mainDiv">main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div main div </div>
</body>
</html>
Ha midnenképpen scrollozható maint akarsz, akkor a css-ben kell magasság (ezzel sok variáció van pixel széles, %-os, külön témát érdemelne), és egy overflow tulajdonság;

#mainDiv {
height:200px;
overflow:auto;
background-color:#093;	
}
Gondolom azt akarod elérni hogy menü meg a fejléc mindig a képernyőn maradjon. Szerintem fölösleges. Gondolkodj el azon, hogy sem a weblabor, sem az index (és még sorolhatnánk) nem használ ilyen struktúrát, ez nem lehet véletlen. :)

Ha valamit fixen kint akarsz tartani a képernyőn egy divben akkor azt lentihez hasonló css-el lehet, de a régebbi böngészőknél elég nagy káosz van e téren. Az z-index a térbeli elhelyezkedést jelenti, minél nagyobb a z-index, annál "fentebb" van az elem. Az 5-ös indexű, kitakarja a 4-es indexűt.

<stlye>
#floatingDiv:
{
postion:fixed;
z-index:1;
top:100px;
left:100px;
widht:300px;
height:300px
background-color:#0F0;
}
</style>
Szóval CSS a lelke ennek, remélem a fentiak alapján el tudsz indulni.
5

Mindenkinek köszönöm

Pepita · 2011. Feb. 26. (Szo), 21.25
Mindenkinek köszönöm a segítséget, így már el tudok indulni.
Csak ()-ben kérdezném, Poetro, nem kötöszködni akarok:
Ha frame esetén include rakja be mindhárom tartalmat, akkor se "látja" a menüt keresőmotor, bookmark, stb?
Bocs, ezt elnéztem, include-dal a próbában csak a src="..."-ot raktam a frame-be...
OK, ha fene-fenét eszik is, DIV. Majd megalkuszom valamiben, bár nem szokásom alkudni... Hajrá CSS, mégegyszer köszönöm!

Majd' el felejtem...
Volt/van egy B tervem:
Úgyis lesz session-azonosítás (látogatottság miatt), ezért ha "most jött" user, elsőre pici JavaScript-et kap, ami rögtön vissza is hívja a lapot screen.Width ill. .Heigth értékekkel. Ezt el tudom menteni $_GLOBALS-ba vagy kukiba, és új menü betöltések előtt ebből "kiszámolom" a divek hiányzó méreteit.
Miért nem jó ez szerintem:
  • A screen.Width, stb a képernyő mérete, nem a böngésző "clientwidth", nem lehet belőle pontosan számolni
  • AZ előre küldött Java lassítja az első lapnyitást
  • Ha ki van kapcsolva neki a Java, nem kapok vissza adatot, de ilyenkor azért tudok default-ot használni. (Java nélkül nem is fog tudni képeket sem nézegetni itt)
  • És lehet, hogy még sok hátrány van, de ez is elég ahhoz, hogy inkább a CSS-ben próbáljak valami okosabbat "bűvészkedni".
6

Amit leírtál a hozzászólásod

Joó Ádám · 2011. Feb. 27. (V), 02.32
Amit leírtál a hozzászólásod második felében, azt hívják gányolásnak. Ha nem tudod megoldani CSS-ben az elképzelésed, akkor jó eséllyel rossz az elképzelés, vagy csak nem értesz eléggé a CSS-hez. De ha már mindenképp JavaScripttel (ami egy teljesen más nyelv, mint a Java) akarsz rajta igazítani, akkor minek elküldeni a kiszolgálónak, egyből változtasd meg a böngészőben.

Ha pedig egy képnézegető nem működik JavaScript nélkül, akkor ott nagyon, nagyon, nagyon nagy bajok vannak.
8

Kedves Öcsém

Pepita · 2011. Feb. 27. (V), 17.05
, azt hívják gányolásnak.

, vagy csak nem értesz eléggé a CSS-hez.

...és akár az egész.
Látom, te egy igen okos srác vagy, én meg egy gányoló.
Szoktál pozitív dolgokat is írni, vagy azt csak magadról?
Nem vetted észre, hogy amit írtam, az egyfajta önkritika, felesleges tovább kritizálni. Azért írtam le, mert én belefutottam, eltöltöttem vele felesleges x időt, és nem akarom, hogy más is belefusson. Láttam a te "személyes oldalad", az aztán FULL.
9

Azt csinálsz, amit akarsz.

Joó Ádám · 2011. Feb. 27. (V), 17.52
Azt csinálsz, amit akarsz.
10

+1

zzrek · 2011. Feb. 27. (V), 22.46
(Ez a válaszod tetszett, már kezdem megszokni a facebookon a like-olást, kár hogy itt nincs)
7

Ami lett

Pepita · 2011. Feb. 27. (V), 16.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="hu"><head>
  <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type">
  <title>index</title>


  <style type="text/css">
  body { margin: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(51, 102, 255);
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    overflow: auto;
    }

  .top { border-color: rgb(96, 96, 96);
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    background-color: rgb(66, 168, 68);
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    height: 130px;
    position: absolute;
    z-index: 4;
    }

  .left { border-color: rgb(96, 96, 96);
    border-width: 0px;
    margin: 0px;
    padding: 130px 0px 0px;
    background-color: rgb(144, 125, 168);
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    width: 130px;
    position: absolute;
    z-index: 3;
    height: 100%;
    top: 0px;
    }

  .main { border-color: rgb(96, 96, 96);
    border-width: 0px;
    margin: 130px 0px 0px 130px;
    padding: 10px;
    background-color: rgb(235, 221, 197);
    z-index: 2;
    visibility: visible;
    bottom: 0px;
    right: 0px;
    overflow: visible;
    position: relative;
    top: 0px;
    left: 0px;
    }


  </style></head>
<body>
<div class="top" id="top1"><?php include('_private/oldal1.htm'); ></div>

<div class="left" id="left1"><?php include('_private/oldal2.htm'); ?></div>

<div class="main" id="main1"><?php include('_private/hospincer.htm'); ?></div>
<?php
//include('_private/hospincer.txt');
?>
</body></html>


Szóval ez lett belőle, aki szerint gányolás, azt harapja meg a krokodil.
Megjegyzem, a js ötletet azért írtam le fentebb, mert láttam már ezen az oldalon hasonló problémára olyan "profik" által adott választ, amiben mindenütt fix pixel értékek szerepeltek (gondoljunk arra, hogy laptop-ot ma már majdhogynem kizárólag wxga kijelzővel vehetsz, ellenben asztalin még mindig az xga a többség); és ha valaki hasonló cipőben jár, NE akarjon ilyen csiki-csukiba menni, mert lassú lesz.