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)
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 🙂
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ő.
!fontos; linkek
2006 november 19. | Szerző: Holli
Egy linkről akkor ordít a linkség, ha kék színű, és alá van húzva. Csak ilyenkor nem elég szép, az a baj.
Lehet a linkekkel sok mindent csinálni, eltüntetni az aláhúzást, kiszínezni, képekkel helyettesíteni, villogtatni, mittudomén. Azért arra jó vigyázni, hogy az arra járók sejtsék, hogy amit látnak, az nem sima szöveg, hanem egy link.
Az enyém egy aranyos kis honlapocska, különben is oda van írva, hogy “Linkek”, úgyhogy nem gond, ha ezeket is pirosra színezem, megvastagítom, és eltüntetem az aláhúzást:
a {
text-decoration: none;
font-weight: bold;
color: #CC0033;
}
Másmilyen kinézetet szeretnék azoknak a linkeknek, amire mostanában rákattintott a látogató, ezért a látogatott linkek szürkék lesznek:
a:visited {
text-decoration: none;
color: #888888;
}
Amelyik link felett éppen ott áll az egér, az legyen aláhúzva:
a:hover {
text-decoration: underline;
color: #CC0033;
weight: bold;
}
Most még magát a link-blokkot kell megformáznom. Nem szeretném az elejükre a mostani kis pöttyöket, és a cím alá akarom őket igazítani, mert most jobbra be van húzva az összes linkem. Nullára állítom a margót:
ul {
margin: 0;
list-style-type: none;
}
Így most akkor minden oké, a pöttyök eltűntek, a piros, félkövér betűs linkek balra igazodnak, egérrel föléjük állva aláhúzódnak, látogatva beszürkülnek. Explorerrel.
Az Opera és a Firefox behúzva hagyta a listát. Egy érdekes trükk jön, amire magamtól soha az életben rá nem jöttem volna, viszont már találkoztam vele: nem ugyanazt az utasítást kapja az Explorer, mint a többi böngésző. Két margós sorom lesz:
ul {
margin: 0 0 0 -35px !important;
margin: 0; /*IE*/
list-style-type: none;
}
Az “!important” jelzés semmit nem mond az IE6-nak, ezért tovább ugrik a következő sorra. A többi böngésző is tovább ugrana, és az utolsó variációt fogadná el, csakhogy nekik szóltam, hogy az újabb utasítással ne foglalkozzanak, mert az első a fontos. Így most nálam mindhárom böngészővel egyforma a kinézet, itt lehet megnézni.
A tutorial-on találtam egy jó kis példát, ki lehet próbálni, itt a háttér színe változik meg, ha egérrel rámegyünk a linkre. (Picike megnyugvás nekem, hogy ez se mutat szépen Firefoxszal és Operával…)
Nem a pöttyös az igazi
2006 november 18. | Szerző: Holli
Feladom most ezt a pöttyös témát, majd esetleg egyszer kisütöm, hogy mi bajuk van vele a böngészőknek.
Visszaléptem egyet, töröltem a kereteket és a háttereket, kicsit tologattam a margókat, a tetejére egy kis virág, és kész is a hangulatjavító stíluslap, klikk ide.
Szokás szerint a böngészőnek a Nézet – Forrás menüpontjában lehet megnézni a honlap forráskódját. Érdekesség csak a felső blokkban, a címsorban van, az így néz ki:
h1 {
height: 240px;
border-bottom: 6px double #CC0033;
line-height: 200px;
padding-left: 100px;
text-align: left;
font-size: 60px;
background-image: url(https://stilus.cafeblog.hu/files/pirosv.jpg);
background-position: top right;
background-repeat: no-repeat;
}
Ide tettem be háttérképnek egy 240 pixel magas képet, ezért a címsornak is meg kellett adnom ekkora magasságot, mivel enélkül nem látszódna a teljes kép.
A háttérképet jobbra és fentre pakoltam, és megadtam az elérési útját. A kép nem ismétlődik.
Elég hihetetlenül hangzik, de a honlap nevével volt a legtöbb probléma. Körbenéztem a neten, hát a stíluslapoknak gyenge pontja a függőlegesen középre igazítás. Meg lehetne oldani margókkal is, csakhogy a különböző böngészők elképesztő különbséget tudnak produkálni margó-ügyben, lásd az előző bejegyzést. Végül is most úgy értem el, hogy a 60 pixeles betűk ne a honlap tetejéhez tapadjanak, hogy sorköznek 200 pixelt adtam meg. (Ez csak ilyen egysoros szövegnél válik be, de más megoldás is van.) Szerintem egész helyes lett.
Újbejegyzés-helyettesítő bejegyzés
2006 november 18. | Szerző: Holli
Hehh. Elvonulok olvasgatni, mielőtt kisütném, hogy a honlapgyártás leginkább a boszorkánysághoz hasonlít.
Mert itt van például a háttér, az egy olyan sima területe szokott lenni a sablonmódosítgatásoknak, hogy csak az nem piszkálja a hátterét, aki nem akarja. Erre most összehozom a honlapocskám összehátterezett változatát, katt ide. Explorer alatt még hagyján, szinte úgy néz ki, ahogy terveztem: a háttérben decens szurke minta, a címnél egy piros pötty baloldalt, a linkeknél egy piros pötty a jobb felső sarokban, a szövegnél meg piros pötty-sorozat a jobb szélen. Igazán apróság, hogy baromi nagy hely van a két blokk közt. Nade. Operában, Firefoxban híre-hamva nincs a pöttyeimnek, és még a linkfal is lecsúszott, nem volt elég neki a hely.
Marginális probléma a lecsúszás, csak már elment a kedvem a próbálkozástól, mivel a pöttyökhöz hozzá se tudok szólni… majd jövök 🙂
Az élet nem habostorta
2006 november 17. | Szerző: Holli
Elégedett vigyor ül mindig a képemre, ha a képernyőn azt látom, amire számítottam. Az a baj, hogy nem mindig azt látom, amire számítok.
Ennek több oka lehet. Például hülyeséget irkálok, a böngészőnek pedig fogalma sincs, hogy mit kéne neki csinálnia, szerintem. Vagy például az alapgondolat nem rossz, csak becsúszik egy apró gépelési hiba: szóköz kerül oda, ahová nem kéne, lemarad (feleslegesen odakerül) egy kettőspont, egy kacsacsőr, egy idézőjel, egy kapcsos zárójel. No és akkor ott vannak a böngészők, amik előttem ismeretlen okokból nem akarják összehangolni a tudásukat, így aztán előfordulhat, hogy nem is bennem van a hiba, hanem mondjuk Bill Gatesben.
A tegnapi honlappal molyolok. Az egész képernyőt halvánszürkére színeztem:
body {
background-color: #EEEEEE;
}
Magának a honlapnak a hátterét sötétszürkére színeztem, adtam neki egy 6 pixel széles dupla keretet piros színben, és azt mondtam, hogy a képernyőn alul-felül 30 pixel margója legyen, a jobb és bal oldal pedig a meglévő helyen osztozzon (vagyis a képernyő felbontásától függetlenül mindig középen legyen a honlap).
#egeszhonlap {
width: 750px;
margin: 30px auto;
border: 6px double #CC0033;
background-color: #CCCCCC;
}
A szöveg blokk szélességét 350 pixelre csökkentettem, mert most már mindenféle külső és belső margókat is bele kell számolnom a 750 pixel össz-szélességbe, nem csak a tartalmat. A háttérszín fehér lett, és az egész blokk 20 pixelnyi távolságra került a honlap szélétől:
#szoveg {
width: 350px;
background-color: #FFFFFF;
margin: 20px;
}
A linkfalnál és a főcímsorban ugyanígy 20 pixel külső margót és fehér háttérszínt adtam meg:
#linkfal {
background-color: #FFFFFF;
margin: 20px;
}
h1 {
background-color: #FFFFFF;
margin: 20px;
}
Ezek után azt vártam, hogy a halványszürke képernyő közepén megjelenik a sötétebb szürke honlapom, benne a három fehér hátterű szöveges résszel.
A kívánatos látványt csak az Opera nyújtotta. Az Explorert nem tudtam rábírni, hogy középre tegye a honlapot, és a címsor túlnyúlik az alsó két blokkon. A Firefox pedig – nagy megrökönyödésemre – egészen elképesztő kinézetet produkált, az egész honlapra vonatkozó háttér- és kerettulajdonságok csak a címsorban jelentek meg. Ezen a képen jól látni a különbségeket:
A honlap itt található meg, a teljes forráskódja pedig a böngészőnek a Nézet-Forrás menüpontjában.
Akit érdekel ez a stíluslapos honlapgyártás/sablonmódosítás, az töltse le az IE legújabb, 7-es verzióját, mert azt mondják, hogy a 6-oshoz képest sokat javult a stíluslap-kezelése, de amíg senki nem járkál erre a legfrissebb böngészővel, addig én se megyek vele sokra.
Nem nagyon vagyok ám letörve, mivel olyan ez a honlapom, amilyen nekem még sose volt: kétféle szabványnak is megfelel. Erre majd visszatérek.
Mienk a fele sajt
2006 november 16. | Szerző: Holli
Most már aztán tényleg stíluslap jön. Főleg azért, hogy lehessen végre játszani.
Tényleg nem nyúlok a body részhez. De csinálok egy head részt, hogy valahová mégis nyúlhassak. Itt, a head-ben formázom majd azokat az egységeket, amiket a body-ban kijelöltem.
Először is megmondom, hogy stíluslap következik: <style type=”text/css”>, aztán a formázás végén lezárom: </style>. (Másképp is lehet, de most ez a legegyszerűbb.)
Formázni pedig úgy tudok, hogy megmondom, melyik egységben milyen tulajdonságnak milyen értéke legyen. A felépítése vázlatosan így néz ki: egység neve {1.tulajdonság: érték; 2.tulajdonság: érték;}.
Lehet például az egy egységhez tartozó formázásokat egyetlen sorba írni. Nekem az jobban tetszik, amikor minden tulajdonság külön sorban szerepel, kicsit behúzva.
Amikor az egységeket kialakítottam, azt mondtam nekik, hogy div id, ezért most a megnevezésben egy # jön a név elé (a variációk nem egészen világosak nekem, az id elvileg azt jelenti, hogy egyetlen helyen szerepel ez az elem, mindegy, majd kitanulom egyszer).
A honlapom forrásában tehát mindenképpen lesz egy ilyen rész, rögtön az elején:
<html>
<head>
<title>hello holli – alakul1</title>
<style type=”text/css”>
body {
}
#egeszhonlap {
}
#szoveg {
}
#linkfal {
}
p {
}
h1 {
}
h2 {
}
ul {
}
a {
}
a:visited {
}
a:hover {
}
</style>
</head>
Tulajdonképpen minden kellék megvan a honlapcicomázáshoz, már csak a megfelelő tulajdonságokat kell beirkálni, és kész is vagyunk. Ennél a pontnál már érdemes tanulmányozni a szakirodalmat, kettő is van a linklistában.
De ne legyek már hernyó, legalább kezdjem el.
Legyen a honlapon minden karakter és keret színe piros. A színeket többféleképpen tudom megadni, most innen választottam, a táblázatból, ami a lap alján van – ezek a színek minden böngészőben ugyanígy jelennek meg. Alapértelmezett tulajdonság lesz, ezért a body egységhez kerül:
body {
color: #CC0033;
}
(Ez az a pillanat, amikor szinte mindenkinek heurékáznia illik, hogy ó hát akkor tudom, miről van szó, én is tudok stíluslapozni. Így igaz.)
Az egész honlapom férjen el egy 800 pixel széles monitoron is, mivel a látogatók egy részének 800×600 pixel felbontású a képernyője. Nem valami sok a szöveg, legyen akkor 750 pixel széles, bőven kifér rá Gorcsev Iván:
#egeszhonlap {
width: 750px;
}
A szöveg legyen 450 pixel széles, és a honlapnak a bal oldalán legyen. Szeretném bekeretezni. (A keret az nagyon hasznos, ha például elveszítem a fonalat, akkor gyorsan berakok egy keretet, máris látni fogom, hogy merre járok.) A keret legyen 2 pixel széles, sima vonalú, piros. És a szöveg ne tapadjon a kerethez, legyen körülötte 10 pixel üres hely:
#szoveg {
width: 450px;
float: left;
border: 2px solid #CC0033;
padding: 10px;
}
A linkfalam 180 pixel széles legyen, jobb oldalon helyezkedjen el:
#linkfal {
border: 2px solid #CC0033;
width: 180px;
float: right;
padding: 10px;
}
A bekezdés szövege legyen sorkizárt:
p {
text-align: justify;
}
Az oldalam neve se lógjon ki a sorból, neki is legyen kerete és belső margója:
h1 {
border: 2px solid #CC0033;
padding: 10px;
}
Itt tartok most, a honlapomnak kezd honlap-kinézete lenni. Megnézéshez katt ide. A Nézet – Forrás menüpontban előjön a forráskódja, az a Jegyzettömbbe bemásolható, ki lehet rajta mindenféléket próbálni. (Szólok megint, hogy .htm kiterjesztéssel kell elmenteni, akkor a fájlra kattintva úgy fog megjelenni, mint egy honlap.)
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:
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:
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.
Oldal ajánlása emailben
X