ugrás a tartalomhoz

CSS lépésről-lépésre: dobozolás

Bártházi András · 2005. Jan. 12. (Sze), 00.30
CSS lépésről-lépésre: dobozolás
Weblapok készítésekor az egyik leggyakoribb feladat különböző dobozok megvalósítása. A "hagyományos" módszer táblázatok használata, a rosszabb esetben több táblázat cellát is használva a keretek összeállításához. A mai cikkünkben ezt a témakört fogjuk végigjárni, azaz megnézzük, hogyan tudunk kialakítani különböző jellemzőkkel rendelkező (fejléces és fejléc nélküli) dobozokat CSS, és szemantikus HTML segítségével.

A cikk anyaga az első szakmai Weblabor találkozón elhangzott előadásra fog építeni, de a kérdést egy kicsit részletesebben, illetve egy kicsit mélyebben járja körül.

Először vegyük sorra követelményeinket, tisztázzuk a céljainkat! Azt szeretnénk, ha a végeredmény a népszerű böngészők legfrissebb verzióban hibátlanul jelenne meg, azaz célunk, hogy Internet Explorer 6.0, Firefox 1.0 és Opera 7.5 alatt működjenek megoldásaink. Ez persze nem jelenti azt, hogy ne működne más böngészőkkel - nem fogunk hack-et, vagy böngésző specifikus elemeket használni -, így ha egy böngésző helyesen támogatja a HTML és CSS szabványt, akkor működni fog a megoldásunk is rajta. A nagyon régi böngészők esetében, mint a Netscape 4.x széria, a stíluslap nem fog megjelenni, régebbi Internet Explorerek és egyéb böngészők esetén pedig a tartalom mindenképpen látható lesz, legrosszabb esetben nem pont úgy, ahogy azt szerettük volna. Ennyi bevezető után lássuk a feladatot!

Első feladat

Két feladatot fogunk kitűzni magunk elé, s maradéktalanul megvalósítani, az első egy doboz megjelenítése lesz. A doboz fix szélességgel (283 pixel) rendelkezik, a magassága bizonyos határok között rugalmas (azaz a tartalomtól függ). Egy ilyen kimenetet szeretnénk:

Egy egyszerű doboz


Megjegyzendő, hogy a CSS 3 nagyszintű elterjedtsége esetén, vagy ha csak az lenne a követelmény, hogy Mozilla alapú böngészőkben jól jelenjen meg a végeredmény, pár CSS beállítással (border-radius) elérhetnénk a kívánt célt. Mivel azonban ez manapság nem áll fenn, illetve a lehető legtöbb böngészőt támogatni szeretnénk, egy képet is fel fogunk majd használni a megvalósításhoz.

Célunk eléréséhez először vegyük a következő HTML részletet:

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit. Suspendisse et diam at arcu lacinia varius. Quisque
  volutpat. Phasellus pulvinar felis.</p>
  <p>Morbi et lacus. Curabitur a purus quis orci elementum
  adipiscing. Curabitur consequat diam vel arcu. Ut lacinia.
  Pellentesque porttitor varius.</p>
</div>
A megoldás egy div elemre épít, ezen belül vannak a paragrafusaink - p elemeken belül. A div elemet egy box osztályba soroltuk a class tulajdonságának a beállításával. Ezzel azonosítottuk be, s ezáltal fogunk tudni stílust rendelni CSS-ből. Használhattuk volnak az id tulajdonságot is, de esetünkben ez nem megfelelő, mert ilyen dobozból szándékaink szerint előfordulhat, hogy többet is elhelyezünk egy oldalon belül.

Ha megtekintjük, hogyan néz ki most a kódunk egy böngészőben, semmi különlegesen nem fogunk látni, csak a szövegünket:

Stílus nélküli megjelenés


Elsőként adjunk neki stílust, hogy láthassuk az egyes elemeket! A box osztályba sorolt elemeknek a kívánt szélességet fogjuk beállítani, továbbá egy szürke hátteret és egy fekete keretet rendelünk hozzá. A box osztályú elemeken belüli paragrafusoknak egy piros keretet fogunk beállítani:

.box {
  width: 283px;
  background: #bbb;
  border: 1px solid #000;
}

.box p {
  border: 1px dotted #f00;
}
A megjelenés ekkor így alakul:

Egyszerű stílussal


A paragrafusnak alapértelmezett esetben van egy felső és alsó margója, melyek miatt így elválik függőlegesen a doboztól. A többi tulajdonság talán magától értetődő: amit beállítottunk, azt kaptuk.

Mint említettem, egy képre lesz szükségünk a lekerekítésekhez. Ez a kép tartalmazni fogja az összes, mind a négy sarokban levő lekerekítést. Az egyszerűség kedvéért egy a kívánt dobozunkhoz nagyon hasonló, de a kívánt maximum magasságnál jóval magasabb doboz képét fogjuk használni:

Doboz háttér


A dolog szépségét az adja, hogy ilyenkor nekünk, vagy a grafikusnak egyszerű megmondani, hogy mit rajzoljon: egy olyan dobozt, amit szeretne látni. Nem kell darabolni, nem kell apró fájlokkal törődni, csak egy darab képünk lesz. Hogy hogyan? Kezdjünk neki!

Először is, ezt a képet be fogjuk állítani a div elem hátterének. Ezzel jelentősen közelebb kerülünk a célunkhoz. A CSS-ünk a következő lesz (a korábbi doboz formázásokat eltávolítottuk):

.box {
  width: 283px;
  background: url(kepek/mohu_box_bg.gif);
}

.box p {
  border: 1px dotted #f00;
}
Ennek hatására a következő fog megjelenni:

Kezd alakulni....


Tényleg kezd alakulni, de a doboz alja még hiányzik. A doboz aljának megjelenítéséhez egy trükköt fogunk alkalmazni. Egy újabb div elemet vezetünk be, melyet - jobb híján - a content osztályba sorolunk. Ennek kapcsán HTML-ünk így alakul:

<div class="box">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Suspendisse et diam at arcu lacinia varius. Quisque
    volutpat. Phasellus pulvinar felis.</p>
    <p>Morbi et lacus. Curabitur a purus quis orci elementum
    adipiscing. Curabitur consequat diam vel arcu. Ut lacinia.
    Pellentesque porttitor varius.</p>
  </div>
</div>
A trükk pedig annyi, hogy ennek a div elemnek szintén beállítjuk a hátteret, de most úgy, hogy az aljához legyen igazítva a kép:

.box {
  width: 283px;
  background: url(kepek/mohu_box_bg.gif);
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
}

.box .content p {
  border: 1px dotted #f00;
}
A kimenetünk nem lesz sokkal jobb, mint az előző esetben, hiszen most bár mind a felülre igazított képünk az ábrán van (lenne), mind az alulra igazított, ebből csak az utóbbi látszik, mivel eltakarja az alatt levőt:

Most alulra van igazítva


Hogy ez ne így legyen, a külső div elemnek beállítunk egy felső kitöltést, így a belső, content osztályú div már annyival lejjebb fog kezdődni, nem fogja eltakarni. Ekkor a CSS-ünk a következő:

.box {
  width: 283px;
  background: url(kepek/mohu_box_bg.gif);
  padding-top: 10px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
}

.box .content p {
  border: 1px dotted #f00;
}
A kódunk megjelenítése már kezd végleges formát önteni, van felső és alsó lekerekítésünk is:

Már felül és alul is van lekerekítés...


Most már nincs más hátra, mint foglalkozni egy kicsit a paragrafusokkal is, be kell állítani a megfelelő távolságokat számukra, ugyanis nem túl szép, hogy a két szélükön és alul hozzáérnek a dobozhoz. A külső div esetében a kitöltést állítottuk be, ugyanezt a belső esetében is megtehetjük, itt azonban alul lesz rá szükségünk. Ha beállítjuk, akkor a bal és jobb oldalt is beállíthatjuk. A paragrafusok alapértelmezett margóját pedig - hogy legyen távolság a paragrafusok között - felül és alul 10px-re, a két oldalon pedig 0 pixelre fogjuk állítani. A következő CSS-t kapjuk:

.box {
  width: 283px;
  background: url(kepek/mohu_box_bg.gif);
  padding-top: 10px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
  padding: 0 10px 10px 10px;
}

.box .content p {
  border: 1px dotted #f00;
  margin: 10px 0;
}
A kódunk megjelenése pedig a véglegeshez nagyon közeli lesz:

A majdnem végeredmény


A következő lépés a szaggatott keret eltávolítása lesz, s meg is kaptuk a célul kitűzött megjelenést. Azaz nem, van még a margók kapcsán pár különbség. Ennek kapcsán a CSS a következőképpen fog alakulni (a változások megtekintését és a miérteket az olvasóra bízom - lehet próbálgatni, kicsit csaltam pár helyen):

.box {
  width: 283px;
  background: url(kepek/mohu_box_bg.gif);
  padding-top: 10px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
}

.box .content p {
  margin: 0;
  padding: 0 10px 10px 10px;
  font-size: 0.8em;
}
A megjelenés az, amit elképzeltünk:

Egy egyszerű doboz

Második feladat

A második feladat az előzőhöz nagyon hasonló, a különbség, hogy egy fejlécet is szeretnénk kialakítani a doboznak. Egy ilyen végeredményt szeretnénk kapni:

A fejléces végeredmény


Ehhez a következő HTML fájlból indulunk ki (ez is változni fog menet közben, bár nem sokat):

<div class="box">
  <h2 class="fokuszbanarchivum">Fókuszban archívum</h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
    Suspendisse et diam at arcu lacinia varius. Quisque 
    volutpat. Phasellus pulvinar felis.</p>
    <p>Morbi et lacus. Curabitur a purus quis orci elementum 
    adipiscing. Curabitur consequat diam vel arcu. Ut lacinia. 
    Pellentesque porttitor varius.</p>
  </div>
</div>
Az alap itt is egy box osztályú div, ezen belül egy h2 elem szerepel - ez lesz a fejléce a dobozunknak, s ez mellett pedig az előző megoldásban is ott levő content osztályú div, s benne a paragrafusok. Azért használunk címsor elemet erre a célra, mert ez a címe, fejléce a dobozunknak, ez alapján tudják a felolvasószoftverek megtalálni az oldalunk kulcselemeit, ez alapján fogja tudni egy kereső megfelelően leindexelni az oldalunk tartalmát. Használhatnánk képet is erre a feladatra, de pont ezek miatt a szempontok miatt nem lenne ilyen jó megoldás.

A megoldásunk hasonlítani fog a fejléc nélkülire, ezért a CSS tekintetében mindjárt egy részeredménnyel indulunk (hasonlítsuk össze az előző megoldással!):

.box {
  width: 283px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
  font-size: 0.8em;
  padding: 5px 0 0 0;
}

.box .content p {
  padding: 0 10px 10px 10px;
  margin: 0;
}
Aminek a következtében a megjelenés így alakul:

Fejléc nélkül


Egész jó, de pont a fejléc van még hátra. Először kiegészítjük a CSS-ünket az alábbiakkal. Ezzel a 0 margót, 0 kitöltést, a 30 pixel magasságot állítjuk be fejlécünknek, továbbá azt mondjuk meg, hogy ha a szöveg túl hosszú lenne, akkor ne lógjon túl a doboz szélességén, hanem vágja le a böngésző.

.box h2 {         
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 30px;
}
A megjelenés nagyon nem változik, csak méretileg:

Fejléc apró módosításokkal



A CSS-hez ha hozzácsapnánk a következőt, egész jól állnánk:

.box h2.fokuszbanarchivum {
  background: url(kepek/mohu_box_fokuszbanarchivum.gif);
}
A megjelenés:

Már csak a szöveg zavaró


Ekkor azonban valamilyen módszerrel el kell tűntetnünk a szöveget, mert útban van. Ha a szöveg behúzást megfelelő nagyságú negatív értékre fogjuk állítani, a szövegünk egyből el is tűnik, s azt gondolnánk, hogy a végleges megoldás sincs távolt. A CSS-ünk így alakul:


.box {
  width: 283px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
  font-size: 0.8em;
  padding: 5px 0 0 0;
}

.box .content p {
  padding: 0 10px 10px 10px;
  margin: 0;
}

.box h2 {         
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 30px;
  text-indent: -1000em;
}

.box h2.fokuszbanarchivum {
  background: url(kepek/mohu_box_fokuszbanarchivum.gif);
A megjelenés már tökéletes:

A fejléces végeredmény


A viselkedés sajnos még nem. Ha egy olyan böngészőben nézzük ugyanis az oldalt, amely a CSS-t támogatja, de a képek éppen ki vannak kapcsolva, akkor a fejléc szövegéből nem fogunk látni semmit sem. Ehhez sajnos egy új HTML elemet kell bevezetnünk, de ezzel megoldjuk ezt a problémát. A HTML forrásunk így nyeri el végleges formáját:

<div class="box">
  <h2 class="fokuszbanarchivum">
    <span></span>
    Fókuszban archívum
  </h2>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Suspendisse et diam at arcu lacinia varius. Quisque 
    volutpat. Phasellus pulvinar felis.</p>
    <p>Morbi et lacus. Curabitur a purus quis orci elementum 
    adipiscing. Curabitur consequat diam vel arcu. Ut lacinia. 
    Pellentesque porttitor varius.</p>
  </div>
</div>
Egy apró változás van: egy üres span elem. Ezt fogjuk felhasználni a fejléc képének megjelenítéséhez. A szöveg marad a helyén - a span elemet viszont úgy állítjuk be, hogy a szöveg elé kerüljön. Beállítjuk neki a megfelelő hátteret, s így szépen el fogja takarni a szöveget. Ez így már jó lesz. Ehhez a következő CSS-re lesz szükségünk:

.box {
  width: 283px;
}

.box .content {
  background: url(kepek/mohu_box_bg.gif) bottom;
  font-size: 0.8em;
  padding: 5px 0 0 0;
}

.box .content p {
  padding: 0 10px 10px 10px;
  margin: 0;
}

.box h2 {         
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 30px;
}

.box h2 span {
  position: absolute;
  width: 283px;
  height: 30px;
}

.box h2.fokuszbanarchivum span {
  background: url(kepek/mohu_box_fokuszbanarchivum.gif);
}
A span elem jó pozícióban van, a position: absolute, azaz az elhelyezkedésének abszolútra állítása azért szükséges, hogy be tudjon folyni alá a szöveg. Bár a szöveg az később van, mint ez az elem, mégis a háttérbe kerül, mivel maga a span később van, mint a h2 elem. A span-nak ezen kívül még szélességet és magasságot állítottunk, mivel alapértelmezett esetben nem foglalna el semennyi helyet. A hátteret egy külön szabállyal állítottuk, ilyenből van szükségünk többre, ha több fejléccel szeretnénk megjeleníteni majd a dobozt. A HTML-ben a különbség a h2 elem osztálya lesz.

Nos, most már mind a megjelenés, mind a viselkedés tökéletes lesz:

A fejléces végeredmény

Házi feladat

Végezetül legyen egy házi feladat is, aki szeretne egy kicsit foglalkozni a témával, s a lehetőségekkel: alakítsunk ki egy olyan megoldást, mely lehetővé teszi, hogy ugyanazzal a CSS-sel egyszer fejléccel, egyszer pedig fejléc nélkül jelenhessen meg a doboz. A HTML-ben lehetőség szerint minél kevesebb különbség legyen, azaz gyökér elemként mindenképp a box osztályú div szerepeljen, s az egyik esetben legyen egy h2 elem, a másik esetben pedig ne. Aki ezt meg tudja valósítani, biztos vagyok benne, hogy megértette, hogy hogyan működnek a fentiek. Jó próbálgatást!
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

apró megjegyzés

Dohány Tamás · 2005. Jan. 12. (Sze), 01.10
Bár doctype-ról nem szólt a cikk, de a span elem tudtommal nem maradhat üres, pedig sok más helyen is látni így...

Mivel a stíluslap nélküli megjelenítésnél gondot okozna bármilyen karakter jelenléte, ezért jobb híján egy méretminimalizált megjegyzést lehetne barakni:
<span><!----></span>
Még annyi, hogy az egyik css kódban a végső lezárás elmaradt.

[ dtamas ]
3

Üres span elem

Bártházi András · 2005. Jan. 12. (Sze), 10.15
Ez legjobb tudomásom szerint nem igaz. A span elem igenis lehet üres. Akkor gond, hogy üres, ha egy XSLT transzformáció állítja elő, ilyenkor ugyanis <span /> lesz belőle, ha egy XML kimenetet választunk, s ha a generált XHTML-t nem XHTML fejléccel szolgáljuk ki, akkor ezt a böngésző úgy fogja értelmezni, mintha nyitó elem lenne, s a szöveg a span elembe, s nem utána kerül.

Az üres span elem teljesen érvényes.

-boogie-
9

igaz

Dohány Tamás · 2005. Jan. 12. (Sze), 14.28
Utána néztem, és tényleg igazad van. Ennek ellenére a Firefoxba épülő Tidy alapú html-validator kiterjesztés 0.4.1-es verziója warningol rá, sőt a forrás tisztításakor szó nélkül el is távolítja!

[ dtamas ]
10

"Felesleges"

Bártházi András · 2005. Jan. 12. (Sze), 14.50
Mert nem ilyen kódhoz van szokva, s a felesleges dolgokat eltávolítja...

-boogie-
14

Nem ismeri a célját

Hojtsy Gábor · 2005. Jan. 12. (Sze), 15.36
Hát ha egy HTML állományban van egy üres span, az tényleg rossz. De ha azt szkriptelési vagy még inkább CSS célra használja valaki, akkor igenis van célja. Ezt a HTML tidy nem tudhatja... Szkriptelésre mondjuk nincs sok értelme, mert akkor szkriptből is létrehozhatod az elemet, ugye :)
42

Üres span elem

arvaidani · 2009. Júl. 9. (Cs), 12.47
Mivel nem empty-ként van definiálva, nem helyes a span rövidített használata (<span />), de ha nem írunk bele semmit (<span></span>), az nem hibás, csak semmi értelme, vagy elfelejtettük beírni a szöveget.
43

A <span></span> jelölést

Török Gábor · 2009. Júl. 9. (Cs), 13.45
A <span></span> jelölést CSS-ből klasszul meg lehet címezni, és számos trükkre felhasználható, ld. Gilder/Levin módszer.
2

doctype es z-index

Jano · 2005. Jan. 12. (Sze), 02.07
En apro kiegeszitesem:

1)
Fontos, hogy IE6 is csak akkor kezeli a doboz modellt helyesen ha ugynevezett strict doctype-ot hasznalunk! Kulonben a doboz szelessege eltero lesz a doboz-modell eltero kezelese miatt!

2)
"Bár a szöveg az később van, mint ez az elem, mégis a háttérbe kerül, mivel maga a span később van, mint a h2 elem."

Ez igy nem teljesen pontos. A span nem kesob van hanem benne. Masreszt a pozicionalt dolgok egy magasabb "retegzesi kategoriaba" (stacking-context) mint a sima elemek.

3)
Ha valaki megremulne, hogy mekkora hatalmas kepet kell neki eloallitani, es a tablazatos megoldasnal pici 1px-es kepek voltak csak, az nyugodtan hasonlitsa ossze a fajl mereteket. Masreszt az sem elhanyagolhato, hogy a bongeszonek mindossze 1 kepet kell letoltenie (meg cachelesnel csak 1-szer kell zargatni a szervert) es nem 6-8-szor!

4)
Az angol "box" es "content" elnevezes helyett jobb lenne a magyar doboz es tartalom elnevezes, hatha van itt aki nem ert angolul.
4

Apróságok

Bártházi András · 2005. Jan. 12. (Sze), 10.19
1) Teljesen igazad van, azonban ha a példákat megnézed, itt nincs megadva egyszerre szélesség és keret, kitöltés, margó (csak a legelején, de a végeredményeknél nem). Ez azt jelenti, hogy ezzel ki van küszöbölve az IE doboz modelljének hibája.

2) Egy kicsit jobban utánanézek, és igyekszem javítani. Valóban pontatlanul fogalmaztam.

3) Így van.

4) Jogos, de a szakmában nem fog tudni eredményeket elérni, ha nem tanul meg angolul. Talán itt és most tanulja meg, hogy a box jelentése doboz, a content jelentése pedig tartalom. :)

-boogie-
12

tények

Anonymous · 2005. Jan. 12. (Sze), 15.10
"Ha valaki megremulne, hogy mekkora hatalmas kepet kell neki eloallitani, es a tablazatos megoldasnal pici 1px-es kepek voltak csak, az nyugodtan hasonlitsa ossze a fajl mereteket."

Nos én megtettem:
az eredeti kép mohu_box_bg.gif 4 színt tartalmaz mérete: 1352 byte

készitettem ebből három kis képet:

felso.gif 283x10px mérete 135 byte
csik.gif 283x1px mérete 55 byte
also.gif 283x10 mérete 144 byte ( ez a felso.gif -ből lett IM -mel convertálva rotate 180)

Mindhárom kép palettája 4 szint tartalmaz.

Ebből a három képből felépíthető a doboz hátere. Az also és felső gifek tartalmazzák az íveket.
A méret pedig csak 1/4 a nagy képnek.

Üdv,
Bongyi
13

Nem a kép file!

sajt · 2005. Jan. 12. (Sze), 15.25
Hanem a html + css + kép file-ok méretét nézzd! (ha lehet)
16

Gondolod, hogy a megspórolt

Anonymous · 2005. Jan. 12. (Sze), 15.47
Gondolod, hogy a megspórolt 1 Kb nem elegendő a képek összeillesztésére?
Ha van, konkrét eredményed, nosza oszd meg velünk!
(ha lehet) nélkül :)

Üdv,
Bongyi
18

ok

Jano · 2005. Jan. 12. (Sze), 16.01
A 3 kepet 3 elemhez rendeled hozza. A cikkben is felhasznaltunk 2-t ezert tegyuk fel hogy mindossze 1 divvel tobbel megoldod. Ez az 1 div csak ugy pluszban ott lesz a kododban csak azert hogy pl a felso lekerekitest betegyed. Azert a felso mert igy ha minden bongeszo tamogatna akkor a :first-child elemmel tudsz is ra egyszeruen hivatkozni. Vagyis a kodban nem kell class-t hasznalni igy legegyszerubb esetkent egy ures div parost helyezel el a kodban.

Ez 5+6 kakakter osszesen 11byte.

Az 1Kb-t amit a kepeken 1-szer megsporolsz arra eleg, hogy a HTML-ben 93-szor szerepeljen az ures DIV.

Azt hiszem te is latod, hogy egy surun latogaott oldalnal, ahol valoszinuleg tobb ilyen doboz is van egy lapon, boven megterul ha a HTML-t csokkented jobban mint a kepeket!

Es ne feledjuk el azt se, hogy amikor cachebol jon a kep akkor is van egy rovid parbeszed a kliens es szerver kozott, hogy nem-e valtozott a kep! Ezis nehany bytnyi kommunikacio, nehany ms varakozasi ido...
19

persze az igaz, hogy ezt az 1

Anonymous · 2005. Jan. 12. (Sze), 16.18
persze az igaz, hogy ezt az 1Kb -t csak egyszer spórolja meg az ember, mivel utána a cache -ből jön a kép. És ha sok ilyen doboz van, akkor a "bőbeszédübb" html, css forrás miatt esetleg nagyobb lesz a letöltendő méret.
15

valoban

Jano · 2005. Jan. 12. (Sze), 15.41
hoppa, igy jar az ember ha nem ellenorzi le amit ir :)

ebben az esetben ugy latszik valoban novekedett a meret.

Akkor kicsit atfogalmazom:
- altalaban tobb kep egymas melle mentese eseten csokken a fajlmeret
- nagy homogen feluleteket tartalmazo kep eseten a kep lathato meretenek nagy novekedese sokkal kisebb fajlmeret novekedest eredmenyez a tomorito algoritmusok elvenek koszonhetoen.

A konkret nagy kepet egyebkent png-be lenne erdemes menteni mert ugy felet, kb 560byte-ot foglal csak :)
39

a képek száma is fontos, nem csak a méretük...

Anonymous · 2006. Aug. 23. (Sze), 15.39
Igen nyertél a képen valamit, de ezt elveszted a vámon: innentől ui. 4 képkérés megy el a szerver felé, és ha a kommunikáció overhead-jét is hozzáveszed, akkor máris többet töltesz így és többet is fogsz várni az eredményre... (Nyözö)
5

3 divvel?

Dualon · 2005. Jan. 12. (Sze), 13.21
A cikk egy picit nekem szájbarágós volt, de nyilván sokaknak így jó (és remélem, ez segít elterjeszteni a CSS-sel kapcsolatos szemléletmódot - emiatt is tartom nagyon jó ötletnek, hogy a különféle CSS alapú megoldásokkal foglalkoztok).

Ha ilyen fejléc-tartalom-lábléces, fix szélességű dobozos dolgokkal futok össze, azt szoktam csinálni, hogy három div-be helyezem el a dolgokat, felső a fejléc, középső a tartalom (háttérképként a kerettel, ha annak különlegesnek kell lennie), alsó a lábléc. Mit gondoltok erről? Bevallom, a cikkből nem jött le, mi az előnye az ott olvasható módnak pl. az általam vázolt megoldással szemben; a képek mérete nálam így kisebb szokott lenni, és bár kettő (h.f.: egy :) ) helyett három képet használok, szerintem az egyszeri letöltési adatmennyiség kevesebb, utána meg cache-ből dolgozik a böngésző. Igaz ez?
6

3 képpel

Bártházi András · 2005. Jan. 12. (Sze), 13.31
A különbség a te megoldásod, s a cikkben vázolt megoldás között nem az, hogy 3 divről vagy más mennyiségű divről van szó, hanem hogy a bemutatott megoldás egy darab (maradjunk az első feladatnál), míg a te általad írt három darab képet használ.

A bemutatott megoldás a következő előnyökkel rendelkezik:
  • Szemantikus, azaz a fejléc szöveghez h2 elemet használ, a div-eket értelmesen nevezi el. Ez a tieddel is megvalósítható.
  • Egy képet használ. Ezt a lehető legegyszerűbb legyártania a designernek, s kezelned neked (egy képet kell cserélni, másolni, letölteni, feltölteni, stb.), illetve a böngészőnek is csak egy kapcsolatot kell a szerver felé megnyitnia.

Az általad írt megoldás azzal az előnnyel rendelkezik, hogy bármilyen hosszú lehet a doboz. A böngésző mindkét esetben cache-ből dolgozik, tehát ez igazából mindegy.

Ami a bemutatott második megoldást illeti, egyszerűen meg lehetne csinálni, hogy egy képpel működjön (a két kép összevonásával), de a céloldalon sok ilyen doboz szerepelt, így az volt inkább a célszerű, hogy a különböző fejlécek csak annyi helyet foglaljanak, amennyit mindenképpen kell (azaz itt az összméret volt a döntő). Még annyit lehetne trükközni, hogy az oldalon előforduló összes dobozfejlécet egy képbe lehet tenni.

A cikknek az volt a célja, hogy szájbarágós legyen, próbáltam minél érthetőbben fogalmazni, hogy a kezdőbbek is megérthessék. Természetesen ha valakinek nem világos valami, csak szóljon, s segítünk!

-boogie-
7

Köszönöm!

Dualon · 2005. Jan. 12. (Sze), 13.50
Igen, a legfőbb problémám az volt, hogy a boxok hosszánál lehet egy "kritikus határ".
Köszönöm a választ, most már tisztán látom mindegyik megoldás előnyeit, hátrányait.

Azt elfelejtettem hangsúlyozni, hogy nem baj a szájbarágós leírás, pusztán nekem nem stílusom. De attól még a cikk jó, és kiváló alternatívát jelent a boxok megvalósítására.
24

CSS Rulez

monghuz · 2005. Feb. 15. (K), 00.49
Szevasztok!

Nekem nagyon tetszett ez a "szájbarágós" leírás, a hülye is megérti... (csak félig gondoltam magamra :)

Ha lesznek hasonó szövegelrendezéssel kapcsolatos CSS leírások akkor annak szerintem csak örülni fog a tömeg.

-= monghuz =-
25

Így van!

hoczi · 2005. Már. 4. (P), 12.36
Így van!
8

szemleletbeli kulonbseg

Jano · 2005. Jan. 12. (Sze), 14.19
Nem a divek, kepek szama a legfontosabb kulonbseg, hanem az elemek hasznalatanak modja.

A te megoldasodnal 2d-ben gondolkozol, a cikkben leirtnal pedig 3d-ben.

Te egymas melle helyezel elemeket. Vagy ugy is mondhatom, hogy fogsz 1 lapot es felosztod 3 reszre majd ezeknek allitasz be hatteret.
Ez a tablazatos megoldashoz van kozel.

A cikkben leirt technika ehhez kepest egymasba agyazott elemekkel dolgozik. Ilyenkor a belul levo elem a kivul levo elott/felett jelenik meg. Olyan mintha vennel 2 lapot es egymasra tenned.
Az also lap a "box" a felso lap pedig a "content".
Amig nem adunk meg kitoltest addig a belso (felso) lap ugyanakkora mint a kulso, ezert teljesen eltakarja es a hatso lapbol nem latszik semmi. Amikor a padding-top alitasra sor kerul, akkor valojaban lejjebb toljuk az elol levo lapot es lathatova vallik a mogotte levonek a teteje a lekerekitett sarkokkal.

Miert jobb ez? Azert mert MEGLEVO elemekhez rendel hozza CSS szabalyokat. Nem irunk bele csak azert a HTML-be ujabb elemeket, mert a design miatt ott kene egy lekerekites.
Ha az elso peldat nezzuk akkor szigoru ertelemben a 2 befoglalo DIV felesleges, de a masodik peldanal mar teljesen jogos a content hasznalata.
20

nekem tetszik...

gerzson · 2005. Jan. 12. (Sze), 23.18
Nekem nagyon tetszik ez a cikk, és a tárgyalás mód is kedvemre való. Lehet, h. nem feltételez sokat elsőre az olvasóról, legalább alaposan adja elő a témát így biztos, mindenki megérti. Kösz, Boogie!

Azért is jó ez a fajta megközelítés, mert a CSS átírásával és a képek feldarabolásával könnyen nyújtózkodóra alakítható a dobozunk.

Más. Tény és való, hogy nagyon kevés HTML elemmel dolgozik ez a megoldás, de ha eltekintünk minden földi kötöttségtől és az ideák világába lépünk, ahol :
Nem irunk bele csak azert a HTML-be ujabb elemeket, mert a design miatt ott kene egy lekerekites.
megállapítás nem áll meg teljesen. Valójában elégnek kellene lennie ennyinek is:

<div class="box">
  <h2>cimsor</h2>
   <p>Lorem ipsum ... </p>
   <p>Nullam sagittis mi.</p>
</div>
Nem?
11

szavazas?

Anonymous · 2005. Jan. 12. (Sze), 15.06
hali! nem tudom lesz-e meg hasonlo temaju cikk, de szivesen vennek egy ilyen szajbaragos tutorialt arrol, hogyan lehet korrekten css-el egymas mellett levo dobozokat megjeleniteni. gondolok itt pl. egy szavazas dobozra, ahol a kerdes alatt a valaszok es a radio gombok, ill. szavazas utan a valaszok es az eredmenyek egymas mellett szoktak lenni. Ez tablazattal konnyen megy, de tisztan css-el en mindig szenvedek vele hogy minden bongeszon ugyanugy nezzen ki.
17

szavazás

Bártházi András · 2005. Jan. 12. (Sze), 15.54
Lehet, hogy a jövőben lesz ilyen cikkünk, de addig megnézheted, hogy itt a Weblaboron hogyan oldottuk meg, az hátha segít. :)

-boogie-
21

átlátszó háttérrel

gerzson · 2005. Jan. 18. (K), 23.26
A cikk nem említi, legalábbis nem emlékszem rá, h. ez a kitétel szerepelt volna-e az elején, de a doboz hátteréül szolgáló képnek a dobozon kívüli része nem lehet átlátszó, és csak egy színű háttérrel együtt élvezhető.

Azonban egy kis trükközéssel ez könnyen áthidalható. A belső .content <div>-et annyi pixellel lejjebb kell csúsztatni ahány pixel magas a sarkok lekerekítése (ami áttetsző):

.box .content {
    position    : relative;
    bottom      : -10px;
}
Nekem ragyogóan működik.
22

Ez is jó

Bártházi András · 2005. Jan. 19. (Sze), 07.03
Ez is jó megoldás, és akkor ha jól látom, megmarad a képcsere eljárás előnye, miszerint akkor is látszik a szöveg, ha ki van kapcsolva a kép. Egy másik lehetőség, hogy az elsőként bemutatott negatív behúzásos technikát használod a szöveg eltüntetésére, ekkor nem zavar be.

-boogie-
23

Szabványos fix IE-hez

gerzson · 2005. Jan. 21. (P), 20.23
Kedvenc böngészőnk, IE (6 SP?), "legnagyobb szövegméret" beállítás esetén a div.content háttérképét a div.box-hoz képest kicsit oldalra csúsztatva jeleníti meg, amivel széttöri a képek egymásra helyezésével kialakított körvonalat. Ez többnyire az adott tartalomtól és a benne levő elemektől is függ(het). (Sajnos, képet nem tudtam mellékelni.) Ezen segít, ha a háttérképekre megadjuk a teljes background-position-t:
div.box {
    background-position : top left;
}

div.content {
    background-position : bottom left;
}
Jó tudni, csak a "left" értékkel sikerült a hibát kiküszöbölnöm, valószínű más esetben is ez a helyzet.
26

Szöveg megjelenítése

paal · 2005. Már. 28. (H), 19.49
Üdv,

Hasznos leírás volt számomra.
Ha szeretném módosítani, hogy a fejléc szöveget kiírja, és csak háttérképként használja a fejléc képet, hogy tegyem?

Annyi megvan, hogy a szöveget a span elemek közé átrakom:
<h2 class="fokuszbanarchivum"><span>Fókuszban archívum</span></h2>

De hogy kell pozícionálnom, hogy na a bal-felső sarokba igazítsa a fejléc szöveget?

Kösz, Pali
--
Palkó Koma
27

Szöveg háttérrel

Bártházi András · 2005. Már. 29. (K), 11.20
A szöveg háttérrel nagyságrendekkel egyszerűbb. A h2 elemnek állíts be egy hátteret, margót, kitöltést, betűméretet a kívánságaid szerint.

-boogie-
28

pont erre a cikkre volt szükségem

Anonymous · 2005. Júl. 28. (Cs), 17.10
pont erre a cikkre volt szükségem...

a jó tanító mindig a diák fejével gondolkodik...
András jó tanító! ezt onnan tudom, hogy mindig mindig mások fejével gondolkodom.

Izabella hercegnő
29

Dobozok egymás mellett

Anonymous · 2005. Júl. 28. (Cs), 18.33
András uram. Ezt a dobozolás technikát bemutatnád úgy is, hogy több doboz van egymás mellett vízszintesen. Kettő, vagy felőlem 3 is a példa kedvéért... Gondolom ezt amolyan folytatásnak. Tehát egy dobozt már elmyagyaráztál, nevezzük fejlécnek, vagy logonak, de a menügombok doboza és a tartalom doboza hogyan fog egymás mellé kerülni???

Ugye nem kell egy + layert a 3. dimenzóban felhúzni (asszem z irányba)
-egy tabulátorral elátott layernek hogy megtudjam oldani a kérdést...

Persze hogy nem, hiszen erre találták ki a css-t...
30

Terv

Bártházi András · 2005. Júl. 28. (Cs), 18.38
Többek között egy három oszlopos oldalkialakítás cikk - ami nagyon hasonló az általad vázolt problémához - tervbe van véve, idő kérdése a dolog. A float: left beállítása mindkét doboznak a dolog nyitja különben. Ha a fórumban felteszed mint kérdést, biztos a hosszabb lélegzetű írás elkészülte előtt megkapod a választ. :)

-boogie-
31

maximális magasság?

Marcell · 2006. Feb. 8. (Sze), 11.53
Ahogy néztem az egy képes megközelítés akkor mond kudarcot, ha a kívánt tartalom magasabb, mint az egyetlen kép magassága. Szóval én maradok a 2 képes+közte kitöltős módszernél.

Nekem jól jött a cikk, épp most cserélem táblázataimat CSS-re és persze elsőre semmi sem úgy van, ahogy kis naívan gondoltam.

Most csatlakoztam a Weblaborhoz és ahogy nézem rászáltatok a CSS-re... és ez jó, mert így mindenkihez eljut, mint anno a PHP!!!

Aminek szerintem sokan örülnének, egy olyan cikk, amely az átlag portál felépítését taglalja: 3 sáv középre igazítva, fejléc, lábléc, 100% magasság akkor is, hakevesebb a cikk magassága (talán pont ezt említetted előbb).

Csak így tovább!
32

átlátszó kép használata doboznak!

Anonymous · 2006. Ápr. 1. (Szo), 17.47
Nem vagyok valami tul jártas a témában csak ugy rátaláltam, erre a cikkre és érdekelt, mert hogy jól megvalósítható vele az általam elképzelt oldal, ámde én átlátszó képet használok doboznak, na most hosszabb szöveg esetén, ugye ahol a két doboz fedi egymást ott már az átltászóság is csökken, van valami megoldás erre?
33

3 doboz...

Marcell · 2006. Ápr. 2. (V), 12.32
Nem hinném, hogy ez 1 vagy 2 dobozzal megoldható lenne, mert akkor át kell fedniük egymást... csinálhatod viszont 3 dobozzal, egyet a kezdőnek - felső lekerekítés, egyet a tartónak - sima átlátszó háttér, egyet a végére - alsó lekerekítés.
34

Lásd #21

Bártházi András · 2006. Ápr. 2. (V), 17.58
A 21. hozzászólásnál pont erről volt szó. A cikkben bemutatott megoldás valóban nem jó átlátszó hátterű képek esetén.
35

Korlátlan méretű doboz

Anonymous · 2006. Május. 10. (Sze), 14.18
Sziasztok!

A következő lenne a problémám: Nem tudom konkrétan a dobozom méretét, mert mindig változik, méghozzá elég széles határok között. A honlapom nem rögzített szélességű, hanem mindig az ablakhoz méreteződik (százalékban adom meg a méreteket). Úgy gondolom, hogy ezzel nem zárom ki egyik képernyő felbontást sem, de mivel nincs túl sok tapasztalatom, nem tudom helyes-e ez a megoldás. Az első kérdésem tehát a milyen előnyökkel, hátrányokkal jár a rögzített szélességű honlap? A következő: hogy lehet legegyszerűbben lekerekíteni egy dobozt? Kitaláltam egy ötletet, de nem tudom, hogy kell kivitelezni. Ebben kérném még a segítségeteket. Szóval van az oldalnak egy háttere és a doboznak is. Készítek egy sarkot, amely átlátszó, csak a sarkon kívüli rész háttér színű (tehát a homorú alakzat), a másik mivel átlátszó felveszi a doboz hátterét. Ezt a sarkot kéne a doboz négy sarkába bevarázsolni, úgy, hogy minden sarokban az előzőhez képest 90°-al legyen elforgatva. Így egy képpel megoldható az egész és bármekkora lehet a dobozom.
Azt tudom, hogy háttérként, hogy lehet a sarkot a négy sarokba betenni. Hogy kell elforgatni illetve egyszerre a négy hátteret kezelni?

doboz
{
background-image: url(sarok.gif);
background-position: top left;

background-image: url(sarok.gif); 90°-kal elforgatva
background-position: top right;

background-image: url(sarok.gif); 180°-kal elforgatva
background-position: bottom left;

background-image: url(sarok.gif); 270°-kal elforgatva
background-position: bottom right;
}


Előre is köszönöm a segítségeket.

Üdv.: Jeti
36

re: Korlátlan méretű doboz

talger · 2006. Május. 10. (Sze), 15.17
sztem nem lehet sem elforgatni, sem többet megadni (mert mindig felülírja az előzőt)

sztem nézz körül itt van rengeteg megoldás (talán blogkmarkok közt (is) volt)
"CSS Rounded Corners 'Roundup'"
37

Rögzített szélességű honlapok

jeti · 2006. Május. 12. (P), 10.40
Köszönöm, de ahogy néztem egy-kettőt ott is fix méretűek a dobozok. A rögzített szélességű honlapokról mi a véleményed?
A többiek véleményét is szívesen várom.
45

Korlátlan méretű doboz (ötlet)

Csicseri · 2011. Jan. 20. (Cs), 14.35
Eddig ha jól emlékszem 2-3 képpel csinálták meg a doboz háttérképét. Ha nem megy valami kevéssel, akkor többel talán megy. Hadd fokozzam, lehet 10 képből is összerakni egy doboz háttérképét. A fotoshop-ban fel lehet darabolni a lekerekített sarkú képet. Van a négy sarok, ha le van kerekítve, és vannak a sarkokat összekötő oldalak. A megfelelőket lehet ismételni. Az ismétlésre szánt kép szélessége akár 1px-es is lehet. Kb olyan 10 apró képből meg lehet csinálni a doboz háttérképét.
Én most tanulom a css-t, és most próbálom összehozni a doboz háttérképét css-ben. Én nem vagyok olyan gyors, és vannak nálam itt sokkal okosabbak. Mivel táblázatosan már megcsináltam a lekerekített sarkú háttérképet (táblázatban raktam össze a képeket), így biztosan át lehet ültetni css-be is. 50-400 bájnyi képeket használok (a sarkok a nagyobbak, az ismétlésre használt vonalak a kisebb méretűek), és kb. 10 kép letöltése igen gyors a kis méretek miatt. Bocs a pongyola fogalmazás miatt. Még nem ismerem a szakzsargont, pedig még vizsgáznom is kell. Erre a honlapra tanulni járok, s ne kívánja senki, hogy tudományosan meg is magyarázzam a leírtakat. A lényeget próbáltam elmagyarázni tőlem telhetően.
38

kép mögött írás

Anonymous · 2006. Aug. 3. (Cs), 13.04
Azért használunk címsor elemet erre a célra, mert ez a címe, fejléce a dobozunknak, ez alapján tudják a felolvasószoftverek megtalálni az oldalunk kulcselemeit, ez alapján fogja tudni egy kereső megfelelően leindexelni az oldalunk tartalmát.


Ez a kép mögött lesz.
Úgy tudom, hogy a keresők lepontozzák azokat az oldalakat ahol ilyet találnak.

Nem?

vazi
40

doboz

tibee88 · 2008. Júl. 21. (H), 16.46
Nagyon jó ez a cikk, még kezdő vagyok, de lépésröl lépésre sikerült elkészítenem. Az oldalamon elhelyeztem 6 ugyan ilyen dobozt
3-at egymás mellet meg még 3-mat alatta. Az lenne a kérdésem, hogy a dobozok között, (jobbra, ballra) miként tudok pár pixel helyet kihagyni, illetve alul és felül ugyan ezt megenni.
Köszönöm
41

Elhelyezés

Lacyka · 2008. Júl. 27. (V), 12.45
Sziasztok! Szeretném, megkérdezni, hogy lehet 2 vagy 3 dobozt elhelyezni, egymásmellett. Pl: 1 bal 2 közép 3 jobb oldalon?
44

korlátolt méretű box

engineer · 2010. Már. 4. (Cs), 15.41
Szerintem egy megoldás lehet a túl hosszú szövegre az, hogy először készítünk egy kellően nagy (de nem túl nagy) képet amibe a legtöbb esetben elfér a szöveg, a content divet pedig egy max-height: xxx; overflow: auto; -val egészítjük ki.

Igaz a megoldás nem túl szép, de kizárja hogy egy véletlen bekerült hosszabb szöveg túlcsorduljon vagy olvashatatlan legyen.