Css meny - rollover.

Tråden skapades och har fått 10 svar. Det senaste inlägget skrevs .
1

Jag vill göra en meny lik den som finns på denna sida(den är dock gjord med javascript och jag vill använda css):
http://www.enzo.nu/

Länkarna/knapparna ska bestå av bilder som när man för över musknappen ska ändras=visa en annan bild. Hur gör jag enklast detta? Iom att jag har flera olika knappar/menyval som alla har olika bilder som ska visas när man för över musknappen så blir det lite problem....eller?

Är det nån som kan hjälpa mig? Detta är min första hemsida som jag använder css till....

Det beror lite på hur upplägget är. Har du bilder som länkar så kan du istället för att göra en <img> göra en <a> som har en bakgrundsbild, höjd och bredd. sen skapar du bara en a:hover med den andra bakgrundsbilden. Typ något sånt här:

a.nav {
display: block;
height: 100px;
width: 100px;
}

a.nav span {
display: none;
}

a#start {
background-image: url('start.png');
}

a:hover#start {
background-image: url('start_hover.png');
}

<a href="start.php" id="start" class="nav" title="Start"><span>Start</span></a>

(åmg, tänk om man kodade så fint i vanliga fall)

Iaf, float: left; på a.nav kan vara trevligt med, annars hamnar varje <a> på en egen rad.

Klockrent! Fungerar jättebra. Men om jag nu vill ha fler knappar/länkar....hur kommer koden se ut då?

Jag är inte helt erfaren som du märker...=)

Då lägger du bara till det här:

a#more {
background-image: url('more.png');
}

a:hover#more {
background-image: url('more_hover.png');
}

<a href="more.php" id="more" class="nav" title="More"><span>More</span></a>

Det är bara att lägga till lite nya ID i CSS'en, och ha olika ID på varje länk.

Åh vad bra! Trodde inte det skulle fungera då jag frågade på ett annat forum och där fick jag till svar att det inte gick....Tack så mycket för hjälpen!!

Det är lugnt.

Ska man vara riktigt piffig så har man riktig text som länk, och lägger till en bakgrund till den, istället för att bara ha en bild. Anger man måtten på rutan i em så får man då en design som funkar oavsett textstorlek. (oftast)

Koden ovan fungerar i de allra flesta fall, även om CSS inte skulle stödjas eller vara avstängt. Då visas texten innanför <span></span> istället för bakgrundsbilden. Title="" hjälper skärmläsare (program som läser webbsidorna för blinda och antingen läser upp det eller visar det på en braille-skrivare (rätt ord?), förutom att det ser piffigt ut med tooltipen när man håller muspekaren över.

Nu har jag stött på problem....när jag testade förrut så hade jag bara en knapp och det fungerade bra. Nu har jag dock lagt in fler (6 st som jag vill ha i två rader, 3 och 3) och nu syns dom helt plötsligt inte. Länkarna/bilderna ska ligga ovanpå en större bild/bakgrundsbild ungefär likadant som på den sidan jag länkade till i första inlägget.

Jag har gjort såhär, skratta inte nu åt mitt knapphändiga försök!

Css koden ser ut såhär:

.topcontainer { width: 760px; height: 250px; background-image: "top.jpg"; background-repeat:no-repeat;

a.navup {
margin-top:-177px;
display: block;
padding-right: 5px;
height: 47px;
width: 72px;
float:left;
}
a.navup span {
display: none;
}

a.navdown {
margin-top:-135px;
display: block;
padding-right: 5px;
height: 47px;
width: 72px;
float:left;

}
a.navdown span {
display: none;
}

a#one {
background-image: url('oneknapp.jpg'); background-repeat:no-repeat;
}

a:hover#one {
background-image: url('oneknapp_hover.jpg'); background-repeat:no-repeat;
}

a#two {
background-image: url('twoknapp.jpg'); background-repeat:no-repeat;
}

a:hover#two {
background-image: url('twoknapp_hover.jpg'); background-repeat:no-repeat;
}

a#three {
background-image: url('threeknapp.jpg'); background-repeat:no-repeat;
}

a:hover#three {
background-image: url('threeknapp_hover.jpg'); background-repeat:no-repeat;
}

a#four {
background-image: url('fourknapp.jpg'); background-repeat:no-repeat;
}

a:hover#four {
background-image: url('fourknapp_hover.jpg'); background-repeat:no-repeat;
}

a#five {
background-image: url('fiveknapp.jpg'); background-repeat:no-repeat;
}

a:hover#five {
background-image: url('fiveknapp_hover.jpg'); background-repeat:no-repeat;
}

a#six {
background-image: url('sixknapp.jpg'); background-repeat:no-repeat;
}

a:hover#six {
background-image: url('sixknapp_hover.jpg'); background-repeat:no-repeat;
}

Och html-koden ser ut så här:

<div class="topcontainer"></div>

<a href="#" id="one" class="navup" title=""><span></span></a>
<a href="#" id="two" class="navup" title=""><span></span></a>
<a href="#" id="three" class="navup" title=""><span></span></a>
<br />
<a href="#" id="four" class="navdown" title=""><span></span></a>
<a href="#" id="five" class="navdown" title=""><span></span></a>
<a href="#" id="six" class="navdown" title=""><span></span></a>

Kan upprepa att jag vet inte riktigt vad jag sysslar med.....;)

Jag är lite för trött för att tänka klart, men jag förmodar att du vill att "topcontainer" ska vara runt länkarna. För i så fall så ska </div> vara efter dem.

Sen förstår jag inte riktigt varför du vill ha negativ marginal, det ska inte behövas om du har länkarna inuti div'en. (om jag ni har tolkat det hela rätt)

Nu får jag ingenting att fungera längre. =(

När jag kollar i en browser så syns ingenting. Har tagit bort allting inom body-taggen utom själva länkarna ovan men dom syns inte alls.....vad kan det vara för fel då? Rör jag med musknappen över så ändras pekaren så dom ligger ju där men är osynliga.....mysko.

Ingen som kan hjälpa mig?

Ska försöka förklara hur jag vill att det ska se ut:
På sidan ska det ligga en bild, top.jpg som är 760x258 px, den ska ligga med en marginal på ca 75 px från vänster sidan. På denna bild så ska länkar ligga i form av knappar/bilder som har en hover-effekt där en annan bild visas. Nån som kan barmhärtiga sig....?

Är du säker på att du har angett rätt sökväg till bilderna? Det är den enda jag kan komma på just nu. Texten innuti länkarna ska inte synas, a.nav span {display: none;} plockar bort det. Ett knep för felsökning är att lägga till en ram (border: 1px solid red;) till de elementen du inte är säker på vart de befinner sig/hur stora de är/osv...

1
Bevaka tråden