[es] - Slika u navigaciji

GrbGrb
Ne radim

Član broj: 322904
Poruke: 3
178.77.25.*

Profil

^{07.05.2014. u 14:40 - pre 121 meseci}

Ovako, prateći jedan tutorial napravio sam menu. Doduše, sada nije nešto posebno ukrašen niti sređen ali to ću poslije uraditi. Menu je u 2 reda. Ono što sada pokušavam da napravim ali mi nikako ne ide, je da postavim ikonu pored svake menu stavke. Imam set ikona, i za svaki link hocu da postavim posebnu ikonu, lijevo od menua.
Evo koda.

Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>

<body>

<div id="wrapper">
<div id="header_wrapper">
<div id="header">
<div id"logo">
</div>
<div id="nav_wrapper">
<ul class="navigation">
<li><a href="#"><strong>Home</strong><span>Visit my home</span></a></li>
<li><a href="#"><strong>Portfolio</strong><span>My works</span></a></li>
<li><a href="#"><strong>Contact</strong><span>Send me message</span></a></li>
</ul>
</div>
</div>
</div>
</div>

</body>
</html>

Code:
body {

}

#header_wrapper {

height:80px;

}

#header {

height:80px;
width:700px;
margin:0 auto;
background: #666;
}

#logo{

height:80px;
width:100px;
float:left;
}

#nav_wrapper {
float:right;
height:80px;
width:600px;
}

ul.navigation {
list-style:none;
margin-right:25px;
}

.navigation li {
float:right;
font-family: arial;
margin-left:80px;
color:#fff;

}

.navigation li strong {
display:block;

}

.navigation li span {
display:block;
color :#ddd;
margin-left:-10px;
}

.navigation li a {
text-decoration:none;

}

.navigation li a:hover {
color:#fff;
}

Menu bi trebao da izgleda kao i na ovom linku http://css-tricks.com/flexbox-bar-navigation/ samo bez ovog jquery efekta.
Hvala

Odgovor na temu

kelja

Član broj: 70429
Poruke: 1416
*.dynamic.isp.telekom.rs.

+35 Profil

Re: Slika u navigaciji

^{06.06.2014. u 08:23 - pre 120 meseci}

Ovi na linku koriste svg:

<use xlink:href="#leaf">
</use>

e, sad, ti mozes i ovako:
http://css.maxdesign.com.au/listutorial/master.htm

Daj ID svakom li tagu i dodaj background-image u css (pozicioniraj kako ti odgovara).

Odgovor na temu