Domov > HTML/CSS in dizajniranje spletnih strani > CSS - meni
stran 1 od 1 |< < 1 > >|
CSS - meni
 
Savec 3. mar 2012 15:40:03 Pridružen od:
3. mar 2012
9 objav
 5 1 0
#1

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


všeč(0) ni všeč(0) spam(0)
 
 
skynet 3. mar 2012 16:03:31 Pridružen od:
1. sep 2006
671 objav
 863 160 23
#2

Za "a" moraš nastavit "display:block".


všeč(1) ni všeč(0) spam(0)
Google troll
 
 
Amon 3. mar 2012 16:04:24 Pridružen od:
29. apr 2010
187 objav
 123 3 0
#3 
#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 :)


všeč(1) ni všeč(0) spam(0)
igre | Vici
 
 
gnome 3. mar 2012 16:09:27 Pridružen od:
27. apr 2010
829 objav
 412 47 10
#4

Tako je pravilno http://jsfiddle.net/3yg85/ ;)


všeč(1) ni všeč(0) spam(0)
Adobe Commerce/Magento 2 & Laravel + {VueJS/React} razvijalec | Moj #1 resource za Laravel & PHP | Claude Code alternative 10% OFF
 
 
gnome 3. mar 2012 16:21:20 Pridružen od:
27. apr 2010
829 objav
 412 47 10
#5

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/


všeč(1) ni všeč(0) spam(0)
Adobe Commerce/Magento 2 & Laravel + {VueJS/React} razvijalec | Moj #1 resource za Laravel & PHP | Claude Code alternative 10% OFF
 
 
Amon 3. mar 2012 16:30:09 Pridružen od:
29. apr 2010
187 objav
 123 3 0
#6

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..



http://jsfiddle.net/3yg85/15/


všeč(1) ni všeč(0) spam(0)
igre | Vici
 
 
Savec 3. mar 2012 17:03:41 Pridružen od:
3. mar 2012
9 objav
 5 1 0
#7

Hvala, sem tudi sam probal li:hover, sam mi je ocitno naprej manjkalo #menu.


všeč(1) ni všeč(0) spam(0)
 
 
Orion 3. mar 2012 18:21:56 Pridružen od:
19. jan 2012
89 objav
 183 14 1
#8

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


všeč(1) ni všeč(0) spam(0)
 
 
Domov > HTML/CSS in dizajniranje spletnih strani > CSS - meni
stran 1 od 1 |< < 1 > >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se