Téma: xhtml VS. józan ész

XHTML-ben egy teljesen átlagos, mondjuk lekerekített sarkú, dinamikus méretű konténer doboznak csak fejlécét 2-3 egymásba ágyazott, háttérképpel rendelkező DIV-el lehet megoldani.
Én itt hagytam abba azt, hogy értelmet vagy logikát keressek az XHTML / CSS-ben.

Nekem az egészből az jött le, hogy akik ezt kitalálták, azok soha nem csináltak mondjuk egy átalgos portál-dizájnt.

Volt 1 fél évem amíg vért izzadtam, hogy pure XHTML / CSS oldalakat csináljak, végignyálaztam a szakkönyveket, de aztán rájöttem, hogy értelme nincs, csak magamat szivatom vele nem kicsit.

Alapjaiban alkalmatlan az egész koncepció grafikai elemeket mint dizájnelemet tartalmazó oldalszerkezet készítésére.

Az egész számra egy amolyan "igértes skicc, de most már neki kéne ülni rendesen kidolgozni" állapotban van a mai napig...


Luxi

http://www.hongkiat.com/blog/20-usef...for-beginners/

helyet kapott itt az altalad emlitett kerekitett sarku boxmodell problema is, szamomra volt benne egy par ujdonsag, ajanlom mindenkinek! )

Szia,

Köszönöm, legjobb példa volt

Itt egy legegyszerűbb, grafikus konténer doboz (ami ugye egy portál eseten az egyik legsűrűbben használt elem) 5 DIV-ből, 43 sornyi CSS-ből, 7 stílusból, és 6 grafikai elemből (kép) áll.

Hát ezért vicc az egész CSS...

Luxi

hápi eredeti hozzászólása

http://www.hongkiat.com/blog/20-usef...for-beginners/

helyet kapott itt az altalad emlitett kerekitett sarku boxmodell problema is, szamomra volt benne egy par ujdonsag, ajanlom mindenkinek! )

en a jutubnal, es googles alkalmazasoknal talalkoztam olyan erdekessegekkel, hogy pl mikor leakarom kerni a hatterkepet, akkor az egesz interfesz jon be egy png kepen (lsd. mellekelt kep) ilyenkor ezt darabolja a szoftvere, vagy hogyvanez?

Ezt én is mostanában láttam valahol, és el is kezdtem használni.
Egy képen van több elem (ikonok pl.), és a képet úgy pozicionálja, hogy a top-ja és left-je mínusz sok, (a kívánt ikon poziciója), a szélessége és magassága meg a kívánt ikonével egyezik meg.

Ennek két nagy előnye, hogy több (akár az összes) ikon megvan egy http request-el, valamint ha péládul így van megoldva, egy képen van egy menüpont-nak a hover és normál állapota, akkor megspórolja az összes javascriptes Image PreLoad szüttyögést.

Jó módszer, nekem tetszik!
(kíváncsi lennék, a renderelésnél van-e performancia hátránya)

Üdv, Luxi

hápi eredeti hozzászólása

en a jutubnal, es googles alkalmazasoknal talalkoztam olyan erdekessegekkel, hogy pl mikor leakarom kerni a hatterkepet, akkor az egesz interfesz jon be egy png kepen (lsd. mellekelt kep) ilyenkor ezt darabolja a szoftvere, vagy hogyvanez?

egyelore ez nekem meg magas, meg kene tudnom a technologia nevet, hogy utana olvassak valahol, es talan elkezdenem en is gyakorolni, mert nem egy buta otlet, akar boxmodellek szempontjabol sem

Tök világos az a egész.

Vegyük a legegyszerűbb esetet, egy hoveres menüpontot.
Ekkor a menüpont képe imigyen néz ki:
http://szerszampiac.hu/gfx/menuHirdetesek.gif

a html:

[div id="menuHirdetesek" class="vt" style="width:153px;height:30px"]
[a href="http://szerszampiac.hu" style="height: 30px; line-height: 30px;"/]
[/div]

a css:

div#menuHirdetesek{background-image:url(../../gfx/menuHirdetesek.gif);background-repeat:no-repeat;background-position:0px 0px}
div#menuHirdetesek :hover{background-image:url(../../gfx/menuHirdetesek.gif);background-repeat:no-repeat;background-position:-153px 0px}

A lényeg a background-position-ban van.
Az egyik kép esetében nulla, a másik kép esetében pedig -153.
Mivel ez egy fix széles, 153px széles div-ben van, és az image szélessége ennek pont a duplája, 306 pixel, így a hovertől függően vagy az első fele, vagy a második fele látszik.

A működő eredményt látod a szerszampiac.hu oldalon.

Üdv, Luxi

hápi eredeti hozzászólása

egyelore ez nekem meg magas, meg kene tudnom a technologia nevet, hogy utana olvassak valahol, es talan elkezdenem en is gyakorolni, mert nem egy buta otlet, akar boxmodellek szempontjabol sem

ezer koszonet! felnyitottad a szemem eme egyszeru peldaval, asszem asszony estere lemondva, es megvan az uj program

hápi eredeti hozzászólása

egyelore ez nekem meg magas, meg kene tudnom a technologia nevet

Egy példa:

A menu.gif 190 széles, 100 magas. A felső 50 px az alap állapot, az alsó a hover.

.menu a {
background: url(imgs/menu.gif) no-repeat;
width: 190px;
height: 50px;
display: block;
margin: 0px auto 0px auto;
text-decoration: none;
text-indent: -100px;
overflow: hidden;
}
.menu a:hover {
background-position: 0 -50px;
}




"Itt egy legegyszerűbb, grafikus konténer doboz (ami ugye egy portál eseten az egyik legsűrűbben használt elem) 5 DIV-ből, 43 sornyi CSS-ből, 7 stílusból, és 6 grafikai elemből (kép) áll."

Luxi, örülök, hogy nem vagyok egyedül mégsem. Nekem nem jutott eszembe a kerekítés hiánya, de teljesen igaz, miért ne lehetne ezt teljesen egyszerűen megoldani?

#xy {
corner: rounded 5px;
}

#xy {
corner: rounded 5px;
}

vagy:
#box{
corner: rounded;
corner-radius:5px;
}