Haladjunk szépen sorjában. Első lépésként itt van egy olyan szövegdoboz CSS kódjának egy része, aminek az átalakításában már egyszer a segítségemet kérték, így talán ez lesz a legjobb sablon, amin be tudom mutatni.
.eitemp2 {background-image:url('http://placehold.it/110x110'); width: 110px; height: 110px; border: solid #f3e6e0 5px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; position: relative; top: 7px; left: -5px;}
Mint láthatod félkövér betűvel emeltem ki azon részeket, amikre nekünk most szükségünk lesz.
.eitemp2: ez az osztály neve, amit megelőz egy pont. Ez nagyon fontos, mert ha lehagyod, nem fogsz tudni a későbbiekben hivatkozni rá. Továbbá lényeges még tudnod, hogy az osztályok neve változtatható, szóval ha átírod, semmit nem rontasz el, sőt, egy lépéssel közelebb kerülsz a probléma megoldásához.
background-image:url('http://placehold.it/110x110');: Igen, pontosan, itt kell megadnod a képnek az URL címét, amelyiket szeretnéd viszontlátni a szövegdobozban. Itt is nagyon fontos megjegyeznem, hogy a végén látható pontosvesszőt nem szabad lefelejteni, különben nem fog működni a kódod.
Na, már ha ezeket mind tudjuk, akkor most megpróbálom elmagyarázni, hogy pontosan mi is a ludas. Ez pedig nem más, mint az osztály, ezen belül is annak elnevezése. Mégpedig azért, mert ha egyszer beleírsz a blogod CSS kódjába egy osztályt (értem itt azt, mikor beleteszel egy HTML kódot egy modulba, a sablontervezőben adod meg az adatokat, vagy egyszerűen beleírod a blog HTML kódjába), amit elneveztél xy-nak, akkor utána bárhol hivatkozol arra a névre, mindenhol azokat az adatokat fogja felhasználni, amit ott megadtál. Ha pedig létrehozol egy ugyanolyan nevű osztályt máshol vagy neadjisten ugyanott, akkor az egyik osztálynak felül kell írnia a másikat, mert szerencsétlen nem tudja, hogy két a variáció közül melyiket szeretted volna felhasználni.
Ez olyan, mintha lenne két kutyád, egy fekete meg egy fehér, és mindkettőt elneveznéd Buksinak. Majd az egyik nap fekete Buksit akarnád elvinni sétáltatni, ezért elordítanád magad a kertben, hogy Buksi, aztán csodálkoznál, hogy a fehér jött oda (vagy éppen mind a kettő, de ugye CSS-nél ez nem lehetséges, szóval maradjunk az egynél), pedig te határozottan a feketének akartál szólni.
Hasonlóan van ez a HTML kódoknál is. Így annak érdekében, hogy minden úgy működjön, ahogy szeretnéd, minden egyes szövegdoboznál, ahol más képet jeleníttetnél meg az előzőekhez képest, máshogy kell elnevezned. Én itt azt szoktam ajánlani, hogy mindig a karakter becenevét add meg, így biztosan nem téveszted el, és nem is lesz mindenhol ugyanaz a név (remélhetőleg).
Ha ez megvan, valahogy így kell kinéznie a fentebb bemásolt kódnak:
.karakteredneve {background-image:url('Karaktered képének az URL címe'); width:110px; height:110px; border:solid #f3e6e0 5px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; position:relative; top:7px; left:-5px;}
És akkor még van ugye a kódnak egy ilyen része is:
<div class="eitemp">
<table><tbody>
<tr><td><div class="eitemp2">
</div>
</td> <td><div class="eitemp3">
</div>
</td></tr>
</tbody></table>
<div class="eitbo">
</div>
</div>
Ha szemfüles vagy észrevehetted, hogy a félkövérrel kiemelt részben szerepel a fentebb említett osztály neve. Ez nem véletlen, ugyanis, mint már mondottam volt, ahhoz, hogy fel tudj használni egy osztályt, hivatkoznod kell rá valahogy. Ezt pedig az alábbi módon teheted meg:
class="osztályneve"
Itt nincs is más dolgod, mint mindenhol átírni az osztályneveket a karaktered nevére, ami ugye az új osztálynév lett. Ez szintén nagyon lényeges pont, mert hiába nevezed el fekete Buksit Bogáncsnak, hogy többet ne ütközz az előző problémába, ha utána ugyanúgy Buksit kiabálsz neki.
Ha pedig ezzel megvagy, így fog kinézni ez a kód:
<center>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.eitemp {background-color:#fcf3ee; width:255px; height:380px;}
.karakteredneve {background-image:url('Karaktered képének az URL címe'); width:110px; height:110px; border:solid #f3e6e0 5px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; position:relative; top:7px; left:-5px;}
.eitemp3 {font-family:Oswald; font-size:14px; text-transform:uppercase; text-align:justify; width:105px; color:#581019; position:relative; top:7px; left:2px;}
.eitbo {background-color:#f3e6e0; width:217px; height:180px; border-top:solid #a63627 1px; border-bottom:solid #a63627 1px; font-family:arial; font-size:9px; color:#000; text-align:justify; text-transform:lowercase; overflow:auto; padding:5px; position:relative; top:12px;}
.eitbo b {color:#cb5637; font-family:Oswald; font-size:13px; font-style: italic;}
</style>
<div class="eitemp">
<table><tbody>
<tr><td><div class="karakteredneve">
</div>
</td> <td><div class="eitemp3">
I WANT A LOVE LIKE YOU MADE ME FEEL WHEN WE WERE 18</div>
</td></tr>
</tbody></table>
<div class="eitbo">
Deep v gastropub church-key, ugh taxidermy distillery semiotics sriracha typewriter. Kickstarter mlkshk sustainable normcore tousled Williamsburg. Single-origin coffee yr quinoa, <b>"Tumblr tote bag keytar pour-over"</b>. Blog vinyl health goth, chambray meditation flexitarian quinoa fashion axe wayfarers taxidermy. Etsy bitters vinyl keytar, Neutra selfies tote bag. +1 scenester raw denim leggings small batch, readymade Tumblr seitan cronut. Williamsburg brunch roof party photo booth, you probably haven't heard of them umami retro meggings meh. Crucifix street art Vice normcore 3 wolf moon. You probably haven't heard of them kitsch four dollar toast selvage keytar biodiesel lumbersexual, dreamcatcher chia drinking vinegar mumblecore lomo. Artisan forage sriracha fingerstache, Brooklyn hoodie banh mi Truffaut plaid listicle. Cronut kogi art party mustache, hashtag cray Bushwick PBR beard typewriter migas. Kitsch letterpress messenger bag Pinterest ugh. Selvage pop-up Brooklyn twee synth. Kitsch ethical chillwave, swag tilde craft beer brunch disrupt seitan sriracha single-origin coffee lumbersexual gastropub.</div>
</div>
<div style="font-family: 'Oswald', sans serif; font-size: 10px; text-align: right; text-transform: uppercase; width: 255px;">
</div>
</center>
És már meg is oldódott a problémád. Remélem, sikerült elég érthetően beszélnem, hogy mindenki megértse. Ha esetleg mégis merülne fel benned kérdés ezzel kapcsolatban, ne félj írni nekem.
U.I.: Ahogy fentebb említettem, a kód nem az enyém, azt hiszem, a SHINE-ról szedte le valaki, ezért ha szeretnéd felhasználni a blogodon, áldásom rá. :)
U.I.2: A Hollandiás bejegyzés már készülőben van több másikkal egyetemben.
U.I.: Ahogy fentebb említettem, a kód nem az enyém, azt hiszem, a SHINE-ról szedte le valaki, ezért ha szeretnéd felhasználni a blogodon, áldásom rá. :)
U.I.2: A Hollandiás bejegyzés már készülőben van több másikkal egyetemben.
MIRacIe M.
Nincsenek megjegyzések:
Megjegyzés küldése