css kodok & HTml kodok a hotdogra és más weblapokra is !
weblap Fejlesztés csak a hotdogon !!
Weboldal bejelentése
Szabálysértő honlap?
Kérünk, jelentsd be!
Ügyfélszolgálat
CSS-ben van lehetőség arra is hogy tartalmat hozzunk létre egy elem előtt vagy mögött, ez a tartalom csak szöveg vagy kép lehet, itt a magazinban 3 helyen is láthatsz ilyen tartalmat:
Tartalom létrehozása CSS-el akárhol!
- A cikkeknél az Ezt megnézem! gomb előtt lévő nyilacska
- A jobb oldali dobozban lévő linkek melletti nyilacskák
- A láblécen lévő Segítséget kérek, és Ügyfélszolgálat linkek
Ha te is szeretnél hasonlót olvass tovább.
A tartalmat létrehozó kód:
Fontos: az itt lévő nyilak nem ASCII karakterek ezért ha elmented a Hotdog átalakítja és csak egy számot fogsz látni a nyíl helyett, ezért a CSS kódot tedd fel tárhelyre, vagy ha nincs tárhelyed akkor cseréld ki a billentyűzetről bevihető alap nyilakra: < >
<style type="text/css" rel="stylesheet">
.box3 table td A.text_3:before {content: '◄ '/* CSS by srmark */;}
.box3 table td A.text_3:hover:before {content: '► '; color: #FF0000;}
</style>
Ez a kód az említett jobb oldali dobozban lévő linkek előtt hoz létre nyilat.
A kódban a ".box3 table td A.text_3" a jobb oldali linkek szelektora, a :before jelöli hogy előtte legyen létrehozva a tartalom, utána is lehet ilyenkor a :before helyett :after -t kell írni. Attribútumnak, vagyis tulajdonságnak a content szót írjuk aminek értéke kétféle lehet:
- Ha szöveget akarsz megjeleníteni akkor a kettőspont után 'idézőjelek közé' írd be a szöveget (ez a fenti kód)
- Ha egy képet akarsz megjeleníteni úgy írd mint a background tulajdonságnál: url();
Ennek ilyen a kódja:
.box3 table td A.text_3:before {content: url(Ide tedd a kép url-jét)/* CSS by srmark */;}
.box3 table td A.text_3:hover:before {content: url(Ide tedd a másik kép url-jét ami egérrávitelre jelenik meg); color: #FF0000;}
A kód azért két soros mert a második sorban a :hover elemet is hozzátettem, azért hogy egérrávitelre megváltozzon a tartalom.
Ha a létrehozott tartalom szöveges nem lehet benne sajnos HTML kód, de meghatározhatjuk a kinézetét, a content attribútum után írjuk be azokat a kódokat amiket rá akarunk vonatkoztatni, nálam ez a color: #FF0000; ez a :hover-es sorban van, tehát ha ráviszed az egeret a nyilacska nem csak megváltozik hanem más színű is lesz, természetesen bármi más css-t lehet írni ami a szövegekre vonatkozik.
Ha máshova szeretnél tartalmat létrehozni cseréld ki a kódban aszelektort, a narancssárga részt egy másik doboz, vagy elem szelekotorára, hogy egy másik példát említsek itt van az "Ezt megnézem!" gomb előtt létrehozott nyíl kódja:
div.box1 div.box2 div.box3 td.text_3 div span.button_text1 a:before {content: '► '/* CSS by srmark */;}
Szelektorokat és szövegekre vonatkozó tulajdonságokat találsz EBBENa cikkben.
Ha valami nem világos kérdezz.
Használjátok egészséggel! = ]
Honlapkészítés ingyen:
Ez a weblapszerkesztő alkalmas
ingyen weboldal,
ingyen honlap készítés...
Mai: 3
Tegnapi: 28
Heti: 41
Havi: 377
Össz.: 79 210
Látogatottság növelés
css kodok & HTml kodok a hotdogra és más weblapokra is ! - © 2008 - 2024 - csskodok.hupont.hu