Egyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére.

Hasonló dokumentumok
Jelszavas hozzáférés korlátozás

Lenyíló menük készítése. Összetett programok készítése

Hol indul egy weboldal marketingezése?

Milyen weboldalt készítsünk?

Hogyan indul egy weboldal marketingezése? II. rész

Stíluslapok használata (CSS)

5-ös lottó játék. Felhasználói dokumentáció

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem

HTML sablon tervezése

HTML ÉS PHP AZ ALAPOKTÓL

(statikus) HTML (XHTML) oldalak, stíluslapok

Memória játék. Felhasználói dokumentáció

DOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)

CSS-segédlet. 1. CSS és HTML Külső stíluslap HTML-hez csatolása

Tamás Ferenc: CSS táblázatok 2.

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.

Stíluslapok. A fejezet témakörei: Sablon elkészítése a gyakorlati példa site-hoz. CSS hozzáadása a táblázatokkal elkészített site sablonjához

Multimédia 2017/2018 II.

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Web programozás. 3. előadás

font-size:12px; display:block; text-shadow: 0 1px 0 #FFFFFF;}

HTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa

ÁVF oktatási és közösségi portál

XML-HMTL Beadandó Dolgozat. Avagy, mit sikerült validálnunk fél év alatt

Egyedi megjelenési és reklám / hirdetési lehet ségek a Gazdivonal.hu portálon

Internet TV Broadcaster kézikönyv

Kelda WebGrafika Iroda Példa HTML, CSS formázásra

HTML ÉS PHP ŐSZI FÉLÉV

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.

Nos akkor beszállsz a játékba?!

PCLinuxOS Magazine január

Képek a HTML oldalon

Web programozás jegyzet 0.1 verzió. Pál László. Sapientia EMTE, Csíkszereda

XHTML és CSS. XHTML és CSS Webszerkesztés stílusosan. A munkamegosztás a weblapon. Érvek 2. (Egy HTML-kód sok CSS-lap)

ÁVF oktatási és közösségi portál

2. ALKALOM. Bekezdés Elválasztás Tabulátor Vezérlıkarakterek Beállítás Oldalbeállítás BEKEZDÉS

Webprogramozás szakkör

Honlapszerkesztés egyszerően

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

HTML kódok. A www jelentése World Wide Web.

Stíluslapok használata

Információs technológiák 1. Gy: HTML alapok

Gyakorló Feladat. Ebben a félévben az Európai Unióval foglalkozó oldalt kell elkészítenetek.

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Hogyan emelj árat? II. rész. Máris elolvashatod az áremelésrıl szóló tanulmány 2. részét!

HTML parancsok (html tanfolyam témakörei)

2. lecke. A bibliaolvasó tervkészítı

Akár tótágast is állhatsz!

A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata:

Információs technológiák 2. Gy: CSS, JS alapok

Molnár Éva SZTE Neveléstudományi Intézet

Mire számíthat, aki befıttként viselkedik?

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt>

Egészségterv és edzésprogram használati utasítás

ÁVF oktatási és közösségi portál

Offline? Online? Vagy mindkettı?!

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Planet Me blog aggregátor létrehozása

(statikus) HTML (XHTML) oldalak, stíluslapok

MARKETING ELEMZÉS TERVEZÉS PROGRAM ISMERTETİ

Hasznos gyűjtemények:

Tili-Toli játék. Felhasználói dokumentáció

Táblázatok. Táblázatok beszúrása. Cellák kijelölése

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik

CAD-CAM-CAE Példatár

SZABÁLYZATOK FORMÁTUMLEÍRÁSA

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben?

Szövegszerkesztés. Munkánk során figyelembe vesszük azt, hogy az irodai programcsomag szövegszerkesztői az alábbi elemeket kezelik.

smepro.eu tananyagbázis és kurzusrendszer portálok felépítése

1.2. NFS kliens telepítése és beállítása

Útmutató a nyilvántartói rendszer használatához

Kövér betűk (bold) 1-es fejléc

Felhasználói útmutató a portal.nakvi.hu oldalhoz

HTML é s wéblapféjlészté s

Tanulási piramis. Valódi dolgokat csinálni. Szimulálni valódi gyakorlatokkal. Drámai gyakorlattal bemutatni. Beszélgetni, beszélni róla

Megoldás (HTML) <!DOCTYPE HTML> <html>

Webszerkesztés. Elvek és gyakorlat. - Alapozás -

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.

Weblapok szabványossága a példák tükrében


Tartalomjegyzék. Az alkalmazása megnyitása Hozzáférés a kiadványokhoz

Word V. tabulátortípus meg nem jelenik: Tabulátor - balra, Tabulátor - jobbra,

KÉPZÉSI PROGRAM. 21 óra. Javasolt bontás: 3 nap, napi 7 óra. Csoportos képzés: elıadás és gyakorlat. A modul címe Célja Tartalma

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Instyle.hu médiaajánlat

vi CSS zsebkönyv Alapvetõ képi elrendezés Tömbszerû elrendezés Szövegközi elrendezés

A nyomdakész anyagot pdf fájl-ban kell leadni, az alábbiak szerint:

PDF DOKUMENTUMOK LÉTREHOZÁSA

Hogyan tervezz 2010-re?-I. rész. Elıszı

Beszéljünk a nyári uborkaszezonról!

HONLAPOK FORMÁZÁSI LEHETŐSÉGEINEK BŐVÍTÉSE A CSS NYELV SEGÍTSÉGÉVEL

Honlapkészítés. 2. Előadás CSS (Cascading Stlye Sheets Egymásba ágyazott stíluslapok) Paksy Patrik

XHTML és CSS Holló Csaba 11. A HTML dokumentum

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

Mio Technology Limited C510, C710. Gyors használati utasítás a Mio Map v3 programhoz. Magyar

A kulcs a rendszerépítésben van!

Anyagcsere serkentő, zsírégető epigallokatekin-3-gallát (EGCG)

Hogyan emelj árat?- 1.rész

Átírás:

Egyszerő vízszintes navigáció készítése CSS segítségével Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. A menüt lista elembıl fogjuk elkészíteni. Fogadja szeretettel ezt a minitanulmányt! Reméljük hasznára válik majd! Üdvözlettel, Netlogi C School Gyakorlat orientált informatika oktatás rugalmas idıbeosztással! Ingyenes tippek, tanulmányok az informatika világából! Netlogi C School hírlevél http:///netlogic_hirlevel.htm 1

1. Elıször létrehozunk egy listát és egy div-be tesszük a div nevének pedig a menu ID-t fogom adni: <div id="menu"> <ul> <li>menüpont 1</li> <li>menüpont 2</li> <li>menüpont 3</li> </ul> </div> 2. A lista elemekbıl link-et csinálunk. 3. A következı lépésben az elsı CSS kódot hozzuk létre #menu { background-color: #CCC; /*Navigációs rész háttérszíne*/ 4. A következı utasítással a függıleges listát alakítjuk át vízszintessé és eltávolítjuk a lista felsorolás jeleit. #menu li { display: inline;/*a lista sorok egy sorban jelennek meg, az utasítás hatására*/ 2

list-style-type: none;/*felsorolásjelek eltávolítása*/ A beállítások csak a menu div ben fognak érvényesülni ezzel a kijelölı választással. 5. Mivel a lista elemek így túl közel vannak egymáshoz, ezért el kell távolítanunk egymástól az elemeket, ezt az li tag-hez rendelt margóval oldom meg. A #menu li { közé*/.. margin-right: 20px;/*Jobb oldalra margó a listaelemek 6. Középre igazítjuk a listát, az ul tag beállításával. #menu ul { text-align: center;/*lista középre igazítása*/ 7. Kidekoráljuk a menünket: ( a beállítások csak szemléltetés kedvéért ezek, az oldal egyéb beállításainak megfelelıen válasszunk színeket és betőtípus is ) #menu a { 3

color: #FFF;/*A linkek színének beállítása*/ border: 1px solid #FFF;/*Keret a link körül*/ padding: 10px;/*A keret eltávolítása a linktıl*/ font-family: Arial;/*A link betőtípusának a beállítása*/ text-decoration: none; /*Aláhúzás eltávolítása*/ 8. Mivel a menu div széle nagyon közel van a linkek keretéhez a sávot megnövelve esztétikusabb látvány érhetı el, ezt az eredményt a menu div-hez rendelt belsı margóval érem el. #menu { background-color: #CCC; /*Háttérszín*/ padding-top: 5px;/*Felsı belsı-margó*/ padding-bottom: 5px;/*Alsó belsı-margó*/ 9. Az a:hover ál-osztálykijelölı segítségével beállítjuk, hogy a nemü reagáljon az egérmutatóra. A hover állapot az egérmutató a link felett állapot beáálításakor következik be. Megváltoztatjuk a betük szinét és a háttérszínt. #menu a:hover { 4

color: #FFF;/*Betőszín*/ background-color: #000;/*Háttérszín*/ 10. A navigációs rész ezzel lényegében elkészült, természetesen a csinosítást lehet folytatni. A Webdesigner mester képzés keretein belül részletesen megtanuljuk, hogyan készíthetünk egyszerő, vagy akár nagyon látványos menüket. Katitntson ide a képzés megismeréséhez! Webdesigner mester képzés http:///webdesigner_tanfolyam.htm Jó tanulást, fejlıdést kíván Önnek, a Netlogi C School csapata 5