Alfa Romeo, abszolúte
2006 november 28. | Szerző: Holli
Alakítgatok majd néhány dolgot az alapsémán, de ezt az autósat még a béta verzióval csináltam.
A koncertes variációnál látni, hogy Firefox böngészővel a float tulajdonság bezavar kicsit a honlap kinézetébe. Van rá többféle megoldás, nekem az tetszik a legjobban, ami szerint egy új div-elemet kell betenni a dokumentum végére – gondolom, emiatt is használnak olyan sokan látszólag értelmetlen láblécet.
Szóval lesz majd egy láblécem is. És lassan a szabványt is lecserélem, vele együtt a forráskód elején lévő sorokat is.
Na és akkor az Alfa Romeo.
Van egy fix háttérképem. Elég kicsire kell állítani a megnyíló ablakot, hogy megjelenjenek a gördítősávok, de akkor látni, hogy a kép nem mozog, csak a szöveg. (Kicseréltem most a blogos hátteremet is, ezen jobban feltűnik, mivel eleve nem fér ki a szöveg a képernyőre.) Az alapbeállítások így néznek ki:
body {
background-color: #221100;
background-image: url(“https://stilus.cafeblog.hu/files/alfa2.jpg“);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
color: #DDCC88;
}
A szöveggel további érdekes dolgok történtek. Például a dokumentum elején lévő cím lekerült a jobb alsó sarokba. Ilyesmit nem nagyon tudnék előidézni float tulajdonsággal, ott ugyanis szépen egymás után jönnek az elemek, ahogyan kiférnek a nekik kijelölt helyre.
Abszolút pozíciót kapott a szöveg is, a linklista is, és a cím is. A szöveg formázása például így néz ki:
#szoveg {
width: 600px;
height: 400px;
position: absolute;
top: 0px;
left: 10px;
padding: 20px 30px;
margin: 0px;
}
vagyis felülről 0 pixel, balról 10 pixel távolságra van a lap szélétől (persze a szöveghez hozzájön még a padding). A linkfalat jobbra felülre igazítottam, a címet pedig jobbra alulra.
Ez a honlap 800×600-as felbontású képernyőn nem mutat olyan jól, egyszerűen nem fér ki a kép. Attól persze még olvasható az összes szöveg, legalábbis nálam nem jelentkezett semmi ilyen probléma.
A színekkel egy kicsit variálni kellett. Logikus lett volna a felső sötétbarna színt használni alul a címnél. Csakhogy a honlap háttére is sötétbarna – éppen a kép miatt, ugyanis a sötét részbe esik a világos szöveg -, így akinél nem jelenik meg a háttérkép, nem látná az ugyancsak sötét címet. Ez a mostani szín sötét és világos háttérnél is olvasható. (Az akadálymentes honlapokról is írni kellene…)
A stíluslap-validátor figyelmeztetést szokott kiírni, ha a háttérszín mellé nincs megadva szín, vagy fordítva. Éppen az ilyen eseteknél érdemes megnézni, hogy kép nélkül is használható-e az oldal a megadott háttér- és betűszínekkel.
Jóéjszaka
2006 november 28. | Szerző: Holli
Összehoztam végre ezt az autós oldalt, de képtelen vagyok leírást mellékelni hozzá. Majd holnap. Vagyis még ma, valamikor. (Viszont máris lehet vele játszani, tologatni az ablak széleit ide-oda… :D)
Meggondoltam magam
2006 november 26. | Szerző: Holli
Szeretnék egy linkgyűjteményt, mondtam én. Itt van egy jó kis oldal, mondták nekem. Hátööö… nem pont ilyet szeretnék, gondoltam, ahol azzal kezdik, hogy tegyem ki az ikonjukat az eszköztáramba, az előző gépemen annyi marhaság volt, hogy már alig maradt üres hely a monitoron. Majd csinálok magamnak egyet, olyanra formázom, amilyenre akarom.
Olyasmi kellene nekem, mint mondjuk a lap.hu, csak sorba rendezve. Máskor bosszankodva csukom be az ilyen linkfelsorolós oldalakat, mikor a google-ból oda jutok, most bezzeg egyetlen darab se akart a szemem elé kerülni, hogy szétnézhessek a forráskódjában. Így aztán mégis tettem egy kört a del.icio.us oldalon.
Rettentő nagy találmány, még az ikonjuknak is hajlandó lennék új sort nyitni az eszköztárban, de az összes segítség felhasználásával se sikerült előcsalogatnom, no nem létkérdés.
Van tehát egy linkgyűjtemény-kezdeményem: http://del.icio.us/hollita. Az benne a legjobb, hogy a linkek címkézhetőek. Ennek most nálam nem látni az előnyét, de ha valaki benéz például a http://del.icio.us/weblabor_forum linkekhez, nagyon fogja értékelni ezt a szolgáltatást.
Lehet, hogy rengeteg ilyen oldal létezik a neten, de én eddig kizárólag sima, címkézetlen linkgyűjteményekkel találkoztam, úgyhogy eszem ágában sincs saját honlapot csinálni ilyen célra, ez tökéletesen megfelel. Már csak tele kéne irkálni…
Asse tudom, hova kapjak
2006 november 25. | Szerző: Holli
Rengeteg mindent kellene most csinálnom. Úgy értem, a szokásos szombati mosás-főzés-gyerekezés mellett (vagy inkább után)…
Van például egy szép kis alfa romeo-s képem, abból nem lehet nem csinálni honlapot.
Aztán. Összeszedtem rengeteg hasznos oldalt, szeretném őket kiolvasni, de legalább felsorolni, ahhoz meg nem ártana körbenézni, hogyan csinálnak mások nemtáblázatos linkgyűjteményt.
Jó lenne elmélyedni a méretezésben, van a pixelnél barátságosabb mértékegység is.
A tagoláson is ideje már elgondolkodni, azóta se jártam a végére, hogy mikor kell nekem id, és mikor class, sőt mikor span.
Na meg a szabványok ugye. XHTM lesz, annyit már kisütöttem, de még mindig van miből válogatni.
Jó reggelt kívánok 🙂
Ihhihihi, ráncba van szedve a Firefox!
2006 november 24. | Szerző: Holli
Jó lenne, ha mindig ilyen gyorsan oldódna meg minden probléma…
Az előző bejegyzésben említett gondom máris felszámolódott. Javítottam a kódot, a koncertes honlapom most teljesen egyformán néz ki mindhárom böngészővel.
Hát nagyon érdekes megoldást javasoltak nekem, ez is olyan, hogy ítéletnapig gondolkodhattam volna rajta. Az egeszhonlap-os divbe beillesztettem egy overflow: hidden; sort, így már nincs szükségem a kétféle border-utasításra:
#egeszhonlap {
width: 760px;
margin: 10px auto;
padding: 0;
border: 2px solid #ff3333;
overflow: hidden;
}Ez az overflow tulajdonság egyébként a túlcsordulásra vonatkozik, vagyis hogy mi történjen akkor, ha a tartalom nem fér bele a neki szánt helyre – például most ebben a szerkesztőablakban is itt vannak a gördítősávok, jobboldalt és alul.
Nem egészen értem, miért éppen ez a megoldás, de egyrészt nem kell nekem mindent értenem a böngészők bonyolult lelkével kapcsolatban, másrészt meg a lényeget mégiscsak sikerült felfognom: ha egy elemnek float tulajdonságot adok, akkor ennek az elemnek a mérete nem befolyásolja az őt körülvevő elem méretét. Márpedig nálam a szöveg is, és a link is floatolva van, és mindkettő az egeszhonlap-on belül helyezkedik el.
Szóval egészen röviden: ha a keret nem jó helyen van Firefoxban, tessék overflow: hidden-nel próbálkozni 🙂
No itt egy honlapocska
2006 november 24. | Szerző: Holli
Ez a honlap se egészen olyan, mint amilyennek szeretném, de ebben az állapotában is élvezhető. Tessék, itt a koncertes weboldal.
A felépítése nagyon hasonló a virágoséhoz. A háttér befeketült, az éppen beegerészett linknél pedig felcserélődik a háttér és a betű színe:
a:hover {
background-color: #FF3333;
color: #000000;
font-weight: bold;
}
A címben van a legtöbb formázás. A magasságot 360 pixelre vettem, hogy kiférjen a háttérkép. A háttérkép fentre középre igazodik, nem ismétlődik. A szöveg jobbra zár, a betűk 40 pixel nagyságúak, a betűk között 4 pixel üres hely van. Az egész főcímes blokk alul-felül 20 pixel, kétoldalt 40 pixel távolságra van a honlap szélétől. (Ezt Explorerben látni, ott van ugyanis a honlap bekeretezve.)
h1 {
height: 360px;
text-align: right;
font-size: 40px;
letter-spacing: 4px;
margin: 20px 40px;
background-image: url(“https://stilus.cafeblog.hu/files/koncert.jpg“);
background-position: top center;
background-repeat: no-repeat;
}
A keretnél megint ezt a kettős formázást alkalmaztam, mint a múltkor: Explorerhez jár keret, a többi böngészőhöz nem jár. Ennek a Firefox az oka, ott valami miatt az egész honlapra kiterjedő tulajdonságok némelyike teljesen extrém módon jelenik meg. Megpróbálom majd kideríteni, miért nem szeret engem a Firefox.
#egeszhonlap {
width: 760px;
margin: 10px auto;
padding: 0;
border: 0 !important;
border: 2px solid #ff3333; /*IE*/
}
Hát ennyi az egész, a teljes forráskód a szokott helyen megtalálható.
Két fontos közlendőm van:
Ezt a honlapkészítésre csábító felvételt BB-től kaptam, köszi 🙂
Társam is akadt, Secima szintén kedvet kapott a honlapozáshoz 🙂
Zárójelben
2006 november 23. | Szerző: Holli
Néha olyasmit találok keresgélés közben, aminek egyáltalán nem örülök.
Próbálom most összeszedni azokat az oldalakat, ahol a különböző webes szabványokról írnak. Mert még mindig nincs elég információm róla, hogy melyik szabványhoz is érné meg nekem igazodni, valamelyik HTML-eshez, vagy inkább egy XHTM-eshez.
Ahogy elnézem, mások se mindig könnyen döntenek. Itt van például egy oldal, a weblaborból, ahol különben is rengeteg okosodnivaló van. Az oldal természetesen tetszik. Na de a címe… le vagyok lombozva, mint a bili füle vagy micsoda, tragédia, hogy másnak is eszibe jutnak ilyesmik, sóhajsóhaj…
Na jó, de hol az eleje?
2006 november 22. | Szerző: Holli
Tök érdekes ez az egész, csak azt nem tudja, aki erre téved, hogy hol kellene kezdenie a html-ezést.
Van egy csomó járható út. Úgy is lehet, hogy keresztülrágom magam az elméleten, a végére szép kerekké áll össze az egész, akkor megpróbálom a tudományt átültetni a gyakorlatba.
Úgy is jó, hogy ahogy halad előre az online tananyag, úgy haladok a kipróbálgatásokkal.
Nekem ezek nem váltak be, írtam az elején. Talán túl türelmetlen vagyok hozzá.
De – és ez viszont bevált -, úgy is lehet, hogy egy teljesen kész honlappal kezdek ismerkedni, átállítgatom benne a betűtípust például, vagy a háttér színét, mindig egy kicsit többet. Ezt csak úgy tudom megtenni, hogy vagy ráérzek, vagy kibogarászom innen a netről.
A honlapok forráskódja letölthető (persze ha nincs letiltva), ilyenkor csak az okoz nehézséget, hogy olyan honlapot találjak, amelyik minden szempontból megfelel: nem túl bonyolult, elérhető a stíluslapja, és lehetőleg szabványos.
Az is egy megoldás, hogy szétkapom ezt a blogot, darabjaira, aztán újból összerakom. És persze megírom. De ez nagy munka, annyira még nem mozgok itt otthonosan, hogy lazán menjen az ilyesmi 🙂
Itt egy lehetséges kiindulási pont, azonnal végrehajtható:
Baloldalt van nekem kilinkelve a piros virágos apró honlapom. Annak a forráskódja letölthető jegyzettömbbe, ott valamilyen néven el lehet menteni, html kiterjesztéssel. És szét lehet szedni, átalakítani, elolvasni a hozzá tartozó bejegyzést.
Vagy ott van alatta ugyanennek a honlapocskának a formázatlan változata, lehet neki formát adni, az online stíluslap-tanfolyamok alapján. Természetesen az alapforma tetszőlegesen módosítható, újabb bekezdésekkel, más rovatokkal, a szöveg is lecserélhető.
Linkgaléria óvatos duhajoknak
2006 november 21. | Szerző: Holli
Sablonhoz passzoló linklistát előállítani nem nehéz, csak picit másolgatni kell hozzá.
A tegnapi bejegyzésben leírtam, hogy ha a címeket h-s tagek közé, a linkeket pedig li-s tagek közé tesszük, akkor egészen aranyos linklistához lehet jutni. (Megtekinthető nálam, a Magamról rovatban, ha a bejegyzés címére kattintotok.) Van ugyanis a blognak előregyártott stíluslapja, ott van a nyoma a sablon tetején, külön fájlban található, ezért csak a hivatkozást lehet belőle látni:
<link rel=”stylesheet” href=”template_files/style.css” type=”text/css”>
<link rel=”stylesheet” href=”template_files/template.css” type=”text/css”>
Tulajdonképpen ez a klasszikus stíluslap, teljesen elkülönül a html-kódoktól. Ebben a formában nem módosítható, de ez talán nem is baj. Lényeg, hogy itt találhatók a blogra vonatkozó formázások, például az is, hogy milyen betűtípussal íródjanak ki a linkek. Ezért formázódik meg magától a linklistánk.
De ennél is tovább lehet menni úgy, hogy semmit nem kell konyítani a kódokhoz. Kell viszont valami szövegszerkesztő vagy jegyzettömb, ahová másolgatunk.
A Beállítások – Sablon – Sablondarabok közt van egy olyan, hogy Linkgaléria kerete. Erre kattintva előjön egy kódtömeg, ezt az egészet kimásolom egy word-dokumentumba vagy egy jegyzettömbbe.
Van egy olyan sor benne, hogy <!ciklus!>, ezt kitörlöm, és ennek a helyébe bemásolok egy másik kódtömeget. Ezt a másikat ugyanabban a menüpontban, a Linkgaléria sorai-nál találom. Most így néz ki ez az egész:
<tr><td height=”37″ class=”template_frame_title” align=”center” valign=”middle”>
Linkgaléria
</td></tr>
<tr><td align=”center”><div class=”template_default”><!M!linkg.cim!>
<table width=”185″cellpadding=”3″ cellspacing=”0″ border=”0″>
<tr><td width=”5″ valign=”middle”><img src=”template_files/potty.gif” width=”4″ height=”4″ border=”0″></td>
<td valign=”middle” width=”180″><a href=”<!M!link.url!>” class=”template_linkgaleria”><!M!link.leiras!></a></td></tr>
</table>
</div></td></tr>
Ezt a második beillesztett sort annyiszor pakolom be egymás után, ahány linket ki szeretnék tenni a blogomba.
Soronként kitörlöm a <!M!link.url!>-t, helyette beírom az oldal URL-jét, a <!M!link.leiras!> helyére pedig a linklistában megjelenő elnevezést írom be. Aztán ezt az egészet bemásolom például a Blog leírása rovatba. Most nálam is ki van téve a jobb oldali oszlopban.
Csoportokat úgy tudok csinálni, hogy az első három sor kivételével mindent megismétlek. Nekem most ilyen az a rész, amit beillesztettem a Blog leírásába (Beállítások menüpont):
<tr><td height=”37″ class=”template_frame_title” align=”center” valign=”middle”>
Linkgaléria
</td></tr>
<tr><td align=”center”><div class=”template_default”>első csoport
<table width=”185″cellpadding=”3″ cellspacing=”0″ border=”0″>
<tr><td width=”5″ valign=”middle”><img src=”template_files/potty.gif” width=”4″ height=”4″ border=”0″></td>
<td valign=”middle” width=”180″><a href=”http://cafeblog.hu” class=”template_linkgaleria”>cafeblog főoldal</a></td></tr>
<tr><td width=”5″ valign=”middle”><img src=”template_files/potty.gif” width=”4″ height=”4″ border=”0″></td>
<td valign=”middle” width=”180″><a href=”https://stilus.cafeblog.hu” class=”template_linkgaleria”>stílusosan</a></td></tr>
</table>
</div></td></tr>
<tr><td align=”center”><div class=”template_default”>második csoport
<table width=”185″cellpadding=”3″ cellspacing=”0″ border=”0″>
<tr><td width=”5″ valign=”middle”><img src=”template_files/potty.gif” width=”4″ height=”4″ border=”0″></td>
<td valign=”middle” width=”180″><a href=http://cafeblog.hu class=”template_linkgaleria”>főoldal</a></td></tr>
<tr><td width=”5″ valign=”middle”><img src=”template_files/potty.gif” width=”4″ height=”4″ border=”0″></td>
<td valign=”middle” width=”180″><a href=https://stilus.cafeblog.hu class=”template_linkgaleria”>stílus</a></td></tr>
</table>
</div></td></tr>
Egyáltalán nem vagyok biztos benne, hogy ez a legegyszerűbb módja a linklista készítésének, de ha van egy erre szolgáló menüpont, azt eddig még nem találtam meg 🙂
Hümmögés
2006 december 1. | Szerző: Holli
Ez most a lehető legrémesebb – halványkék blog középzöld háttérrel… brrrr 🙂
Voltak itt szép háttérképek. A nem ismétlődő, fix képekkel az a gond, hogy fixek. A leggyakoribb, 1024×768-as képernyőhöz vannak méretezve, így aztán ennél kisebb monitorról lemarad egy részük, a nagyobb monitoroknál meg üres lesz a háttér egy része.
Meg amiatt is szólt valaki, hogy ezektől a háttérképektől lelassul a letöltés, és utána is akadozik a görgetés. Sajnos ezt nem tudom tesztelni, a letöltési sebesség változása nálam nem tűnik fel.
Egyelőre nem tudni, mi az oka, de pont most eltűnt a blogomnak a főoldali sablonja, így aztán nem tudok másmilyen típusú háttérképet bepakolni. Marad most ez az állapot, hogy lehetetlen zöld-kék párosítást nézünk, amíg nem jön valaki szakember visszaadni a sablonomat 🙂
Már úgyis mindegy, szétszedtem akkor az archívum oldal sablonját: töröltem a táblázatos sorokat, és a meglévő stíluslapokat is. Most elég kutyául néz ki (a jobb oldali menüoszlopból lehet oda eljutni, az archívumban a novemberre kattintva. A bejegyzések fordított sorrendben jelennek meg.), ez a kisebbik rossz hír. A nagyobbik, hogy most így is marad, mert álmos vagyok 🙂 Hétvégén folytatom.
Oldal ajánlása emailben
X