CSS - meni
5 naročnikov
5 naročnikov
Pozdravljeni.
imam eno prošnjo, če bi mi do pomagal pri eni nalogi. Sam sem sicer začetnik v spletnih straneh tako da vsaka pomoc pride prav :)
Stvar je sledeča, v šoli imam eno nalogo in moramo narediti meni enak temu.
http://shrani.si/f/7/Z5/4iF562Nn/meni.jpg
Dobili smo html predlogo, ter CSS izdelat sami. HTML predloge se ne sme spreminati.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meni</title>
<link rel="stylesheet" type="text/css" href="slog.css" />
</head>
<body>
<ul id="menu">
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://www.najdi.si">Najdi.si</a></li>
<li><a href="http://www.ubuntu.com/">ubuntu</a></li>
</ul>
</body>
</html>
CSS, tu bi rabil malce pomoci, ker mi noce obarvati pri a:hover tako kot man napisano.
#menu li
{
color:white;
background-color:aqua;
width: 150px;
height: 28px;
}
#menu li a
{
color: black;
text-decoration: none;
padding-left:5px;
font-family: tahoma;
font-size:16px;
}
a:hover
{
color: white;
background-color: #4682b4;
width: 150px;
height: 28px;
}
No če kdo ima čas za pomoč bi mu bil hvaležen :) Ja, pa prosil bi za obrazlozitev, kaj je narobe, zakaj se obarva samo napis, in ne po celem?
lp, Savec
7 odgovorov
#menu li
{
color:white;
background-color: #68c7ff;
width: 150px;
height: 28px;
margin: -5px 0 0 0;
}
#menu li a
{
color: black;
text-decoration: none;
padding-left:5px;
font-family: tahoma;
font-size:16px;
border-bottom: solid 1px #000;
margin: -5px 0 0 0;
padding: 0 99px 0 0;
}
a:hover
{
background-color: #4c73b8;
display: block;
width: 45px;
height: 28px;
margin: -5px 0 0 0;
border-right: solid #000 5px;
color: #FFFFFF !important;
}
ni še čisto enako, je pa že malo bolj podobno kot tvoje :)
Ne morem več urejat zgornje objave..
Sem opazil, da rabiš še da ti spremeni barvo teksta v <a> znački - tako bo sedaj bolj pravilno :) http://jsfiddle.net/denvit/3yg85/14/
gnome:
Ne morem več urejat zgornje objave..Sem opazil, da rabiš še da ti spremeni barvo teksta v <a> znački - tako bo sedaj bolj pravilno :) http://jsfiddle.net/denvit/3yg85/14/
Drugače je še border-right na a:hover pa na vsakemu li border-bottom..
Sem s tvojo kodo popravil..
Malo sem popravil meni, saj me je zmotilo to, da si moral klikniti nujno na text, da je link deloval. Lahko poizkusiš s tem:
http://jsfiddle.net/3yg85/23/
LP