E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Navigare (1)

Navigare in CSS

19.04.2008
Navigare in CSS

Daca nu te limitezi la siteuri web cu o singura pagina va trebui sa creezi navigarea. Ea este una din cele mai importante componente ale web-designului si necesita o atentie sporita pentru ca vizitatorii sa poata naviga pe site cu usurinta.

Total vizualizari: 22691 22691 afisari   |   Comentarii  2   |   Rating   |   (5 voturi)   |   Timp necesar: 1h 30 min 1h 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 123 4 567891011 »
comenteaza printeaza

Acum vom adauga niste formatari simple elementelor li si a din cadrul listei imbricate pentru a finaliza efectul:

#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

Cum sa creez un meniu orizontal folosind CSS si liste?
Pana acum ne-am confruntat cu navigarea pe vericala acel tip de navigare care cel mai adesea se gaseste in coloana din stanga sau dreapta zonei principale de continut a paginii web. Totusi, sistemul de navigare pe site este intalnit si sub forma unui meniu orizontal in zona de sus a documentului.

Acest tip de meniu poate fi creat folosind liste cu formatari in CSS. Elementele li trebuie setate sa afiseze pe linie, astfel incat fiecare categorie sa nu fie afisata pe o linie separata de ecran

Navigare folosind CSS - img8


Aici ai HTML-ul si CSS-ul care creaza aceasta afisare:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}

Pentru a crea sistemul de navigare orizontal, incepem cu o lista care este identica cu cea creata pentru meniul vertical:

<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>

Formatam #navigation pentru a aplica informatii de font de baza, asa cum am facut la navigarea pe verticala. In layout-ul CSS acest ID probabil va contine si niste formatari aditionale care determina pozitia sistemului de navigare pe pagina.

#navigation {
font-size: 90%;
}

Elementul ul va indeparta bulinele de listare si spatierea aplicate listei de catre browser:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}

Proprietatea care transforma lista din una verticala in una orizontala este aplicata elementului li:

#navigation li {
display: inline;
}
Pagina:
« 123 4 567891011 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
alexandra alexandra , Luni, 27 Februarie 2012, ora 05:41
#2

@craca

Daca vrei sa aliniezi elementele unele sub altele, dupa fiecare sectiune a meniului ii poti pune un div cu clear:both si width:100%. Sau - pune fiecare sectiune a meniului intr-un alt div care sa nu aiba float:left.

Raporteaza acest comentariu ca injurios!
craca , Duminica, 26 Februarie 2012, ora 08:29
#1

Foarte interesant, dar si mai interesant ar fi daca ne-ati putea explica cum facem sa mutam elementele in jos ale meniului at cand dorim sa facem un meniu vertical cu submeniuri ( adica nu mai folosim float:left)

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5310
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5270
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5115
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5100
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4845
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Ruby on Rails Fotografie Fireworks Bridge Illustrator Word Sony Vegas Outlook Python JSON RoR Java Verilog AJAX XML SWF Dreamweaver Photoshop HTML Lightroom Javascript PSD Excel Flash XHTML Swift 3D PHP StyleSheet Vista MySQL Powerpoint CSS COREL DRAW Gimp SEO Action Script
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software