CSS / Jquery problem

[cristian]

Hej Alle.

Problem #1 er som følgende.

Jeg har prøvet at følge denne guide i min ASP.NET side.
http://www.shopdev.co.uk/blog/animated- ... ng-jquery/
Og det er blevet til 2 knapper.

HTML KODE
<div id="navigation">
<ul id="menu">
<li><a href="#" class="home"><span></span></a></li>
<li><a href="#" class="portfolio"><span></span></a></li>
</ul>
</div>

CSS KODE
1. /*Navigation menu section start*/
2. ul#menu {
3. width:100%;
4. height:34px;
5. list-style:none;
6.
7. margin:0;
8. padding:0;
9. padding-top:0px;
10. padding-left:0%;
11. }
12.
13. ul#menu li {
14. float:left;
15. }
16.
17. ul#menu li a {
18. background:url(pictures_Navigation_menu/ButtonWithoutTekstDark.png) no-repeat scroll top left;
19. display:block;
20. height:43px;
21. position:absolute;
22. top:124px;
23. }
24.
25. ul#menu li a.home {
26. width:79px;
27. }
28.
29. /*test*/
30. ul#menu li a.portfolio {
31. width:157px;
32. background-position:80px 0px;
33. }
34.
35. /*test*/
36. ul#menu li a.portfolio span {
37. background-position:80px -0px;
38. }
39.
40.
41. ul#menu li a span {
42. background:url(pictures_Navigation_menu/ButtonWithoutTekstLight.png) no-repeat scroll bottom left;
43. display:block;
44. position:absolute;
45. top:0;
46. left:0;
47. height:100%;
48. width:100%;
49. z-index:100;
50. }
51.
52. ul#menu li a.home span {
53. background-position:0px -0px;
54. }
55.
56. ul#menu li a span:hover {
57. cursor:pointer;
58.}
59. /*Navigation menu section end*/

Mit problem er så, så vidt jeg selv forstår. At min browser ikke ser de to knapper som seperate (tror det hedder elementer, ret mig hvis det er forkert) elementer. Men ser knap 1 og 2 som et stort element. Og jeg aner ikke hvorfor.

Er der nogen der kan hjælpe mig på rette vej?
Se det første billed.

Og hvis i mangler yderligere informationer, så sig endelig til.

Da jeg ikke kunne få dette til at virke. Prøvede jeg noget andet.
Problem #2
<div id="navigation">
<div id="Nmenu" style="width:78px; height:43px; display:inline-block; float:left;">
<img style="top:124px" src="pictures_Navigation_menu/HomeTekstDark.png" alt="Menu" />
</div>
</div>

med dette CSS
#navigation
{
text-align:center;

background:url(pictures_Navigation_menu/bg2.png) repeat;

padding-top:10px;

height: 34px;

margin-top:10px;
margin-bottom:10px;
margin-right:25%;
margin-left:25%;

overflow:hidden;
}

Men mit problem er. At inde i min div, kan jeg ikke få billed filen (som også er inde i en div) til at blive inde for den første divs rammer. Se venligst billed nr 2
Hvordan gør jeg det?

Formålet? En vandret navigations menu.

Tak på forhånd.
Mvh.

[ThomasI]

hmm...Den er sq svær lige at gennemskue...

Høre det billede der bare hedder "problem" til dit første problem?

Hvas sker der når du skriver noget imellem dine span tags?

Lyder mærkeligt at dine knapper lister flyder sammen...har du prøvet at sætte forsellige links for at se om de linker som de skal?

[cristian]

Billedet problem høre til anden del af mit første indlæg.
Og
Billedet problem 2 høre til første del af mit første indlæg :p

[ThomasI]

hmmm

Du skriver din browser ser dem som et stort element...hvordan præcist det?... altså er det et stort link eller hvordan skal de forstås...

Du må undekylde at jeg ikke lige er helt med

[cristian]

Det er da helt i orden.

Det skal forestås på den måde. At jeg har to separate links. Der hver i sær har denne hover effekt.
Men når jeg hover musen over link 1 er det link 2 der får hover effekten. Samtidig hvis jeg hover over link 2 er det stadig link 2 der får hover effekten.

Så min browser ser ikke de to links som separate links, udfra hvad jeg kan vurdere.

Giver det mening?

[Daniel]

Altså jeg kan godt se hvad du mener, ved dog ikke helt hvad du kan gøre, men jeg er ret sikker på at du har en fejl i din CSS.

Du bliver ved med at skrive i din CSS style at de hedder #UL Menu og så det id du har brugt.
Du skal bare bruge id, det vil sige i det første tilfælde bruge du bare #Menu som er det id du gav, og du må heller ikke bruge de samme id værdier flere gange, så kan CSS ikke finde rundt i det.

[ThomasI]

Kan godt være det er mig der blind, men hvor styles der en hovereffekt udover her:

Kode: Vælg alt

56. ul#menu li a span:hover {
57. cursor:pointer;

??

Prøv selv at lave lidt om i det ved at lave en class der hedder "home", på den gode gamle traditionelle måde . Altså tilføj dette i din CSS:

Kode: Vælg alt

a.home:link {color:#FF0000;}    
a.home:visited {color:#00FF00;}  
a.home:hover {color:#FF00FF;}  
a.home:active {color:#0000FF;}  

Hvis stylingen går igennem og din linktekst bliver lyselilla når du hover over den, så virker det ihverfald.

Så kan du altid tilføje et billede eller andet i denne styling hvis nødvendigt.