Ebben a cikkben megtalálod a profilod dobozainak szelektorait, és sok alap css kódot amivel a dobozokat illetve tartalmukat módosíthatod/díszítheted
A Dobozok szelektorai:
div#interviewBox_1 Bemutatkozás
div#interviewBox_2 Zene
div#interviewBox_3 Mozi
div#interviewBox_4 Könyvek
div#interviewBox_5 TV
div#interviewBox_6 Legjobb arcok
div#interviewBox_7 Kedvenc kaják
div#interviewBox_8 Legjobban érzem magam
div#interviewBox_9 Leginkább bosszantó
div#interviewBox_10 Idézet
div#interviewBox_11 Emberi tulajdonságok
div#interviewBox_12 Legviccesebb dolog ami velem történt
div#interviewBox_13 Gáz
div#interviewBox_14 Hot
#profil_resource Cuccaim doboz
#relationB Havernak/ismerősnek jelölő doboz
#messageBoardBox Üzifal
#hotcastBox Hotcast doboz
#userPictures Képeim doboz
.keprotalo_box Képrotáló
#userVideos Videóim
#haver_div Haverok doboz (a bal oldali)
#ismeros_div Ismerősök doboz (a bal oldali)
#interestBox Érdeklődési kör
#brandBadge Márka doboz
A szavazás a kerete nélkül:
div#flash_div
A szavazás a keretével és a fehér háttérrel együtt:
td[valign="top"] table[width="295"] td[width="291"] table[width="291"]
Információs doboz (profilkép, avatar..):
div.cnt_profil_box
Egy doboz fejlécének kijelöléséhez add hozzá a szelektorhoz a .head kifejezést így:
div#interviewBox_4 .head
Az összes általad létrehozott tartalom doboz szelektora a profilodon (csak a legfrisebb Firefox-ban működik):
div[id^="contentBox"]
Attribútumok:
opacity: 0.8; átlátszóság
border: 1px solid #990000; keret
visibility: hidden; eltüntető kód #1
display: none; eltüntető kód #2
margin: 10px; margó
background: #000000 url() no-repeat; háttér
height: 200px; magasság
width: 300px; szélesség
color: #FF0000; szöveg szín
font: 12px bold; szöveg beállítások
position: absolute; pozíció megadása
top: 0px; az oldal tetejétől mért távolság
left: 0px; a bal oldaltól mért távolság
A felhasználható tulajdonságok (attribútumok) magyarázata:
Opacity - Átlátszóság
Értéke lehet 0.0-ától 0.5ön keresztül 1.0 is a 0.0nál teljesen eltűnik a doboz a 0.5nél feélig átlátszó az 1.0nál olyan mintha nem is változna. Természetesn lehet akármien más érték is pl 0.2, 0.8, 0.65 (ha két számjegy vagy több van úgy kell értelmezni mint a tizedes törteket az utolsó tehát nullaegészhatvanötszázad). Az Internet Explorer ebbe is beleköt ugyanis nem ismeri de van helyette kód: {filter: alpha(opacity=50);} itt az érték 0 és 100 között mozog.
A kész kód:
body {opacity: 0.8; filter: alpha(opacity=80);}
(itt az egész oldal lesz halványan átlátszó de ha a body szelektort kicseréled a fenti dobozok szelektoraira akkor csak az adott doboz lesz átlátszó, és ha több dobozt is akarsz akkor egymás után vesszővel elválasztva írd)
Border - Keret
Ezen nincs sok magyarázni való íme a kód:
border: 1px solid #990000;
Az 1px a vastagságát jelöli pixelben, a solid a stílust (ezen nem érdemes változtatni), a végén pedig a színe van.
Eltüntető kódok:
visibility: hidden;
display: none;
Azért van belőlük kettő mert mindegyik máshogy tünteti el a dolgokat, az első úgy mintha egy opacity: 0.0 lenne rajta, tehát teljesen átlátszóvá teszi a dobozt, a másik hatása abban különbözik hogy az eltüntetett doboznak a helye is eltűnik.
Pl ha van 3 db 100 px magas doboz egymás alatt és a középsőt az elsővel tüntetjük el akkor a maradék két doboz között ott marad a 100 px távolság ha a másodikkal akkor nem.
Margin - Margó
A margó tulajdonsággal azt tudjuk elérni hogy a kiválasztott doboz oldalánál üres hely keletkezzen, tehát ezzel pl két doboz között lehet megnövelni a távolságot.
margin-top: 10px;
A kötőjel után lehet írni: top, bottom, left, right = felső, alsó, bal, jobb
A 10 px jelöli h mekkora legyen az üres hely, de ha épp casökkenteni szeretnénk a távot lehet negatív szám is.
Background - Háttér
Kódja:
background-color: #000000;
background-image: url(direkt link);
background-repeat: no-repeat;
Az első a háttérszínt határozza meg a második a háttér képet (a zárójelek közé kell tenni a direkt linket), a harmadik pedig hogy ismétlődjön-e a háttér (repeat vagy no-repeat)
Rövidítve így néz ki a kód:
background: #000000; url(direkt link) no-repeat;
Height - Magasság Width - Szélesség
A kiválasztott doboz szélessége vagy magassága adható meg pixelben
height: 200px;
width: 300px;
a pixel helyett lehet %-ot is írni, a 100% a teljes oldal szélessége ill. magassága
Color - Szöveg szín
A kiválasztott dobozban lévő szövegek színe
color: #FF0000;
Szöveg beállítások:
font-size: 14px;
A szöveg mérete pixelben (a számhoz akkora méret tartozik mint a microsoft word-ben)
font-weight: bold;
A szöveg félkövérré tétele, (ha félkövérből akarsz simát normal-t írj a bold helyére)
text-align: left;
szöveg igazítása: left-right-center-justify=bal-jobb-közép-sorkizárt
text-decoration: underline;
Szöveg díszítés: underline, overline, line-through, blink = aláhúzott, föléhúzott, áthúzott, villogó
text-indent: 20px;
Az első sor behúzása(bal oldaltól való távolsága) pixelben
text-transform: capitalize;
Szöveg alakítása: capitalize-uppercase-lowercase=kiskapitális-nagybetűs-kisbetűs
font-family: Comic Sans MS;
Szöveg karaktertípusa
font-style: italic;
Szöveg dőltbetűssé tétele
Position - pozícionálás
position: absolute;
top: 0px;
left: 0px;
Ezt a 3 kódot együtt kell használnod hogy egy doboz pozícióját meghatározd, a top után lévő szám jelenti a doboz fentről mért távolságát, a left a bal oldaltól.
Ezek után ha még mindig nem értenéd példákkal demonstrálom hogy rakd össze a css kódodat:
Ez a kód 1px széles bordó keretet ad a bemutatkozás doboznak és enyhén átlátszóva teszi:
div#interviewBox_1 <-- a szelektor ami kiválasztja a bemutatkozást
{
border: 1px solid #990000; <--az első attribútum (tulajdonság)
opacity: 0.8; <--a második -||-
}
A tulajdonságok elválasztása ; jellel történik, és akkármennyi lehet belőlük. Az enter és a szóköz elhagyható tehát nézhet ki így is a kód az eredmény ugyanaz:
div#interviewBox_1 {border: 1px solid #990000;opacity: 0.8;}
Ha bármit hiányolsz kommentben írd le kívánságod : )
Nincsenek megjegyzések:
Megjegyzés küldése