Egy sminket keszitek.
Az osszes node tipusu tartalmat kulon keretbe szeretnem rakni.
A keret harom reszbol al:
- ptop.jpg (felso resz)
- pbg.jpg (hatter)
- pbot.jpg (also resz)
Itt lathato: http://dl.dropbox.com/u/1924024/node.jpg
A CSS Mastery konyv alapjan az igy kene lekodolni:
<style type="text/css" media="screen"> #box { width: 180px; background: url("pbg.jpg") repeat-y; } #box h2 { padding-top: 20px; background: url("ptop.jpg") no-repeat left top; } p.last { padding-bottom: 20px; background: url("pbot.jpg") no-repeat left bottom; } #box h2, #box p { padding-left: 10px; padding-right: 10px; } </style> </head> <body> <div id="box"> <h2>Heading</h2> <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </body>
Az alap megvan csak a kodot kell atirni drupalra.
A drupal node igy nez ki:
page.tpl.php:
<div id="main">
<div id="content">
<?php print $content; ?>
</div> <!-- /#content -->
</div>
<div id="sidebar">
</div><div id="main"> <div id="content"> <div id="node-1" class="node clear-block"> <h1>Node cim</h1> <div class="meta">...</div> <div class="content">...</div> <ul class="links inline">...</div> </div> </div> <!-- /#content --> </div> <!-- /#main -->
Ra birom rakni a .node -ra a hatteret (pbg.jpg), es a h1 -re a felso reszt (ptop.jpg).
Az also resznek letre fogok hozni egy kulon DIV-et, mert a ul class="links inline" nem mindig az utolso elem. Talan a h1 helyere is DIV kene, mert a node egyes helyzetekben nem jeleniti meg a H1-et.
A problema az, hogy paddingolni szeretni az elemeket. Mindegyiket kulon paddingoljam ? Szerintem elege bena megoldas:
.node h1, .node meta, .node content, .node .links {
padding: 0 0 0 20px;
}
Nem lehetne az osszeset egyszere paddingolni? Ti hogyan irnatok meg a markupot? Hasznos lenne par otlet. Koszonom!
Minek három kép? Csusszanós ajtók nem ismertek? :D
Emitt:
http://www.alistapart.com/articles/slidingdoors/
csak forgasd el az egész elgondolást kilencven fokkal. (mindegy merre. :D)
pp
(a csusszanós ajtókért meg külön bocsánat.)
Palócz István
https://palocz.hu | https://tanarurkerem.hu
Nem igazan ertem ezt a
Nem igazan ertem ezt a modszert. Tudamasom szerint menuknel hasznaljak.
nem csak ott
Pedig nem csak ott. :)
Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés
mindegy, majd utananezek bar
mindegy, majd utananezek bar en nem kertem alternativ megoldasokat. Engemet nem erdekel hany kep van, csak mukodjon. A node pedig nem fix meretu, peldaul ha berakok 3 oldalnyi szoveget nem akarok 500000px hosszu JPG-t legyartani.
Bocs.
Tényleg ne haragudj. Elnézést.
pp
Palócz István
https://palocz.hu | https://tanarurkerem.hu
na ne mar...
jaaa, akkor bocs. csináld ahogy akarod. nem értem mi a probléma vagy a kérdés. :)
(ugye feltűnt, hogy ez itt nem egy fizetős support szolgáltatás, általában annak illik örülni amit kapsz.. mindenki csak segíteni akar, elég modortalanság ilyen stílusban reagálni, de te tudod)
hát egyrészt 3 oldalnyi szöveget nem biztos hogy folyószövegként raknék egy weboldalba, kutya se fogja ugyanis elolvasni valószínűleg, másrészt 3 oldal az még korántsem ötszázezer pixel, de még csak ötezer se, harmadrészt meg mi is lenne a baj egy félmillió pixel hosszú képpel? gifként tökéletesen ugyan akkora lenne a filemérete, mintha 5 pixel hosszú lenne. (na jó nem, de minimális lenne a különbség, ki is próbálom lehet:)
ezen azért gondolkodj el.. :) két kép az két http lekérés, három kép az meg három, tehát pont másfélszer annyi.. nem mindegy egyátalán. ccs spriteok se véletlenül vannak ám a világon...
-
clear: both;
Ha mar szoba jott a "Sliding
Ha mar szoba jott a "Sliding doors" orultem volna par otletnek. Nem kertem kodot csak annyit akartam tudni, hogy kene szeletelni a kepet sliding doors eseten es kb. milyen divekhez ragasztani.
harom kep helyett ketto,
es pont ugy mint a sliding doors, csak fuggolegesen. de ha jol emlekszem erre is van pelda a css masterybe.. (van benne vagy negyfele lekerekitesi technika)
ami eddig kulon volt ptop meg pbg, azok leszenk osszevonva egy kepbe, ami mondjuk 5K pixel magas.
-
clear: both;
nincs pelda, csak vizszintes
nincs pelda, csak vizszintes menure de ott is az egyik kepnek van egy bizonyos hosszusaga (tab-right.gif). Ha peldaul a tab hosszab mint 500px, kifut a kep. Ez pedig gondolom a sliding doors egyik hatranya.
A regi modszerel a pbg.jpg-nek adhatok egy repeat-y opciot es ezel vegtelenig nyulhat, csak a fuggoleges szovegtol fug.
page és teaser nézet külön formázandó!
Ha a node page nézetét akarod megformázni, akkor Te nem a node-ot akarod megformázni, hanem az oldalt. Az oldalban pedig vannak még divek jócskán nem? Itt persze, hogy nem fogsz sliding doorssal formázni. Ebben igazad van.
Ha pedig a node teaser nézetét akkor meg nyílván nem lesz egy bizonyos értéknél nagyobb a szöveg hossza. Ekkor könnyedén használhatod a már említett technikát.
pp
Palócz István
https://palocz.hu | https://tanarurkerem.hu
Hasonlot szeretnek:
Hasonlot szeretnek: http://dl.dropbox.com/u/1924024/nodek.jpg
Az ilyesmire gondolom nem jo a Sliding doors, ugye?
de
erre _pont_ az jo.
ha kuldesz egy olyan jpgt, amin nincsenek szovegek csak a hatterkepek, levagom neked es megmutatom.
-
clear: both;
http://dl.dropbox.com/u/19240
http://dl.dropbox.com/u/1924024/kep.jpg
Elore is koszonom!
Szerintem pp-nek igaza van. A
Szerintem pp-nek igaza van.
A CSS Mastery-ben az osszes (sliding doors) pelda olyan JPG fajlot hasznal amelynek van egy fix hossza (fuggolegesen vagy vizszintesen) es azt a kepet takarja egy masik.
aboros, ha megcsinalod tenyleg kivancsi vagyok, de szerintem itt valami felreertesrol lehet szo. Lehet, hogy nem voltam elege vilagos az elejen.
igy van!
en se mondtam mast. azt kell neked is megcsinalni, amit ott latsz. foleg, ha node teasereket akarsz igy. pontosan ezt csinaltam volna meg en is, de akkor msot mar vilagos remelem, hogy mit kell tenned.
-
clear: both;