NetlogiC School Informatika Tanfolyamok

Kiscsoportos számítógépes tanfolyamok, gyakorlat orientált informatika oktatás, képzési hírek, ingyenes tutorialok. Képzések munkalehetőséggel: AutoCAD-Műszaki Tervező, Webdesigner, Webprogramozó, Webes-és nyomdai grafikus (Corel, Photoshop, Kiadványszerkesztő), ArchiCAD Tervező, Valamint irodai tanfolyamok: Excel, Word, Office képzés Pécsett.

A blog szerzői

A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó, Doktorandusz

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó


Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

Bejegyzések

Friss topikok

Címkék

! (1) 201 (1) 2010 (3) 2011 es (1) 2012 (2) 2d (1) 2 3D autocad tanfolyam (1) 3d (3) a (1) ablak (1) access (1) adatbázis (1) adatmentés (2) adobe (13) agytröszt (1) ajándék (2) akció (4) akkreditált (3) akkreditált php képzés Baranya megye (1) akkreditált PHP webprogramozó tanfolyam (4) akkreditált tanfolyam (2) akkreditált webdesigner képzés (4) akkreditált webdesigner tanfolyam Pécsett (4) akkreditált webdesign oktatás (4) alkalmazása (1) alkalmazások (2) államilag (1) álláslehetőséggel (13) angol magyar bizonyítvány (5) animáció (1) animációs (1) animálás (1) aranymetszés készítése photoshopban photoshop tanfolyam Pécsett photoshop oktatás webgrafikus képzés webgrafika oktatás Pécs (1) archicad (6) arcképből (1) áron (1) artist (1) arvchicad (1) autocad (9) autocad 2 3D (2) autocad oktatás Pécs Baranya (4) autocad tanfolyam (4) autocad tanfolyam Pécsett (2) baranya (37) Baranya megye (9) basic (4) blogmotor (1) böngészőkre (1) budapest (9) budapesten (2) cad (5) cad modellező tanfolyam (1) captcha (1) cd (1) cégeknek (1) céges (2) cikkek (1) cms (1) corel (8) corelben (4) coreldraw (34) CorelDraw tanfolyam Pécsett (4) cover (1) csm (1) css (3) css3 szabvany animációs lehetőségei (1) dátumok (1) designer (1) dimenziós (1) díszek (1) doboz (1) draw (2) dreamweaver (2) effektek (1) effektekkel (2) effektusok (2) egyetemistáknak (1) elismert (1) emelt (2) építésze (1) építészeti (2) és (1) excel (5) e business (2) fedlap (1) felbukkanó (1) felhasználóbarát (1) felirat (1) feliratkészítés (1) felirattal (1) felnőttképzés (56) felnőttképzés felnőttoktatás (5) felnőttoktatás (48) fényképek (1) flash (5) formázási (1) fotók (2) fotózás (1) frontpage (1) galéria (1) galéria készítés weboldalra (1) generátorral (1) geometria (1) gif (1) grafika (53) grafikai (6) grafikával (2) grafika képzés (4) grafika mester képzés (7) grafikus (35) grafikus tanfolyam (2) gragfika (2) gyakorlat (4) gyakorlatias (1) gyakorlat oreintált informatika tanfolyam (5) gyakorlat orientált (4) gyakorlat orientált felnőőtképzés (8) gyakorlat orientált képzés munkalehetőséggel (8) gyakorlat orientált oktatás (1) hálózatfejlesztés (2) happy (1) három (1) hatás (2) hiba (1) honalpkészítő (1) honlap (4) honlapkészítés (26) honlapkészítő (14) honlapkszítő (1) honlapoptimalizálás (1) honlapra (1) htaccess (1) hűsítő (1) húsvét (1) illustrator (1) Illutrator tanfolyam webgrafikus oktatás nyomdai grafika képzés Pécsett képek színezése (1) indesign (2) induló (1) informatika (52) informatikanyomdai (1) informatika képzések (3) informatika oktatás Pécs (2) ingyen (3) ingyenes (1) ingyenhonlapkészítés (1) internet (6) internetes (1) inygen (1) irodai (1) január (1) januári (1) javítása (2) jelölőnégyzetek (1) jelszóvédelem (1) joomla (1) jövő (1) karácsonyi (2) karikatúra (1) kedvezmény (2) kedvezményes (4) képek (4) képkeretezés (1) képzés (80) képzésanimációs (1) képzések (13) képzés munkalehetőséggel (1) keresőmarketing (9) keresőoptimalizálás (8) készítés (9) készítése (12) készítő (2) kezdéssel (1) kezelése (1) kiadványszerkesztés (1) kiadványszerkesztő (3) kihelyezett (3) kiscsoportos (4) kiscsoportos informatika oktatás (3) kóddal (1) könnyedén (1) kontrasztjának (1) kördiagram (1) körvonalazás (1) középiskolásoknak (1) last (1) layer (1) lebegő (1) lehetőségek (1) letölthető (1) létrehozása (1) lightbox galéria készítése (1) linklista (1) linkmarketin (1) linkmegosztók (1) marketing (9) megelőzése (1) megjelenítése (2) meglepetés (1) megoldások (1) megye (16) megyében (1) menü (1) menükészítés (2) mester (5) mikulás (2) minute (1) modellezés (2) munka (2) műszaki (2) műszaki rajzoló oktatás (2) műszaki tervező képzés (2) myqql (1) mysql (6) napakció (1) navigációs (1) névjegykártya (1) növelése (1) nyári (3) nyomadai (1) nyomdai (9) nyomdai-webes grafika oktatás Pécsett (1) offce (1) office (1) oktatáas (3) oktatás (93) oktatas (9) oktatás tanfolyam Baranya megye (10) online (9) orientált (3) országosan (3) padlóáras (4) padlóáron (1) pályázatíró (1) pécs (44) Pécsett (2) pécsett (10) pendrive (2) perspektivikus (1) pest (4) photoshop (37) Photoshop-CorelDraw tanfolyam Baranya (3) photoshopban (7) photoshop képzés Pécs (1) phottoshop (4) php (30) php és webdesigner képzések (6) plakátkészítés (1) popup (1) powerpoint (1) prgrammal (1) prhotoshop (3) probléma (1) professzionális (5) professzionális nyomdai webes grafikus tanfolyam (4) program (2) programmal (4) programozása (1) projektmenedzser (1) projektmenedzsment (1) rajzolás (2) rajzoló (1) ranfolyam (1) rendszerek (2) retusálás (1) retusálása (2) rugalmas időbeosztással (2) sablon (1) saját (6) sáv (1) scriptekkel (1) segítségével (2) sikerszakmák (2) sminkelés (1) stíluslapok (1) summer (1) szakma (2) szakmavonal (1) szám (1) számítástechnika (32) számítástehcnika (2) számítógép (11) számítógépes (25) számítőgépes (3) számítógépes tanfolyam Baranya megye (4) számítógépes tanfolyam Pécs (5) számítógéppel (2) szeptember (1) színek (1) szintű (2) tábor (1) támogató (1) támogatott (2) tanácsadás (2) tandíjkedvezményes (5) tandíjkedvezményes autocad tanfolyam nyáron (1) tandíjkedvezményes informatika képzések (2) tandíjkedvezményes informatika tanfolyam (1) tandíjkedvezményes képzés nyáron (2) tanfolyam (91) tanfolyamok (23) tanfolyam gyakorlat orientált (2) tanulmány (4) tartalmak (1) tartalomkezelő (1) térbeli (2) tervezés (5) tervező (4) tervezői (3) tippek (3) tnfolyamok (1) torzítás (1) tuti (2) tutorial (1) üdítős (1) űrlapkezelés (2) valentin (1) vállalati (3) vállalkozás (1) védelem (3) védelme (1) védelmi (2) végzettség (3) vírusirtás (2) vírusírtás (2) visual (4) visual basic (1) vizes (1) vonalas (1) web (1) webdesginer (6) webdesign (31) webdesigner (42) webes (4) webfejlesztés (1) webgrafika (21) webgrafikus (11) webkamera (1) webkatalógusok (1) weblap (2) weblapkésíztés (2) weblapkészítés (26) weblapkészítéshez (1) weblapkészítési (1) weblapkészítő (32) weblapra (1) weboldal (15) weboldal készítés (9) webprogramozás (30) webprogramozás oktatás Pécsett munkalehetőséggel (12) webprogramozó (30) webprogrmaozás (5) word (3) wordpress (3) zajtalanítás (1) Címkefelhő

Hogyan készítsünk egyszerűen menüt CSS segítségével?

2010.03.16. 08:11 oktatas_szamitogepes_tanfolyamok

Az alábbi cikkben függőleges menü késztésére egy
egyszerű módszert fogunk bemutatni
.
 


A menüt a lista elemeiből fogjuk elkészíteni.

  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>

  <ul>

    <li>menüpont 1</li>

    <li>menüpont 2</li>

    <li>menüpont 3</li>

  </ul>

</div>

 

  1. A lista elemekből link-et csinálunk.
  2. A következő lépésben az első CSS kódot hozzuk létre

#menu {

         width: 200px;

}

#menu a {

         display: block;

}

 

Az első utasítás hatására a menu div szélességére 200pixelt adtunk meg, ezáltal a div nem tölti ki az összes rendelkezésre álló területet.

A második utasítás hatására az egérmutató már nem csak a link szövegen változik át, hanem a teljes sor érzékeny területté válik.


A #menu a kijelölő minden a menu-ben lévő a tag-re vonatkozó beállítás, ezért a változás a teljes div ben érvényesülni fog.

  1. 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ípust is )

#menu a {

         display: block;

         background-color: #0CF; /*Háttérszín*/

         width: 120px;

         text-decoration: none; /*Aláhúzás eltávolítása*/

         margin-top: 12px; /*Felső belső margóval eltávolítjuk egymástól a menüpontokat*/

         color: #000; /*A betűk szine*/

         border: 1px solid #06F; /*Vékony keret a hivatkozás körül*/

}

  1. Eltávolítjuk a lista elem felsorolás jelét:

#menu ul {

         list-style-type: none;

}

     

#menu a:hover {

         color: #666;

         background-color: #CCC;

}

 

  1. A navigációs rész ezzel kész

padding: 3px; /*Hivatkozás körül belső margó*/

 


Webdesigner mester képzés keretein belül a Dreamweaver modulban egyébként igen részletesen tanuljuk a CSS stíluslapok jellemzőit, illetve gyakorlati alkalmazásukat.

Kattitntson ide  a képzés megismeréséhez!
 
Webdesigner mester képzés-gyakorlat orientált weblapkészítő tanfolyam!

 

Ingyenes informatika tippek, tanulmányok az Informatika Hírlevelünkben!

Iratkozzon fel rá itt! 
Ingyenes informatika hírlevél

 

Szép napot, jó tanulást kván,
Eilinger Ákos
mérnök-informatikus

 

Szólj hozzá!

Címkék: oktatás css tanfolyam képzés webdesign honlapkészítés weblapkészítés webdesigner dreamweaver menükészítés

A bejegyzés trackback címe:

https://oktatas-szamitogepes-tanfolyamok.blog.hu/api/trackback/id/tr535254675

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.
süti beállítások módosítása