3. Meniul / Bara de navigație

Meniul este definit în HTML de tagurile <nav></nav> iar bara de meniuri în sine este închisă în <header></header>.

header { padding: 5px 0; width: 100%; heightȘ 30px; background-color: #000; margin-bottom: 25px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); position: fixed; z-index: 10; float: left; }

-se definește o spațiere de 5px fața de marginile top și bottom, lățime 100% din pagină,  fundal negru, marginea de jos la 25px, umbra, transparență 0.4 și fixă pe axa z la 10 pixeli;

nav { width: auto; float: left; }
nav ul { position: absolute; right: 0; display: block; margin-top: 0px; }
nav ul li { display: inline; margin-left: 50px; }
nav ul li a { font-size: 24px; border-bottom: none; }

-elementele listei (linkurile de navigare) sunt afișate pe acceași linie, în acceași poziție ca și bara de mai sus;

#headercontainer, #contentcontainer { width: 960px; margin: 0 auto; position: relative; }
#contentcontainer { float: none; padding-top: 0px; }

-se definesc proprietățile containerelor cu ajutorul id-urilor;

Rezultatul arată în felul următor:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: