muckbuck

Du kan se ett live-exempel jag gjort här: travnet.se xpress

Det är flikarna för loppen jag syftar på. Om du tittar på en av bilderna enskilt ser den ut såhär:

Det är tre bilder där, men det är bara två som används i detta exempel, den översta och nedersta (mittenbilden används vid aktiv flik). Bilden ligger som en bakgrundsbild med CSS. Genom att justera position vid hover flyttar jag bilden i höjdled.

Så koden för själva bilden ser ut såhär:

#tab02 a,
#tab02 a:visited {
background: url(/images/tabs/tabs5-t02.gif) bottom no-repeat;
}

#tab02 a:hover {
background: url(/images/tabs/tabs5-t02.gif) top no-repeat;
}

Observera att jag byter ut bottom mot top vid hover.

Detta exempel förutsätter att elementet (i detta fall en länk) har en fast höjd exakt lika stor som bilden man vill visa, i detta fall såhär:

#tabs a:visited, 
#tabs a {
height: 38px;
width: 43px;
float: left;
margin: 0px;
padding: 0px;
line-height: 25px;
margin-left: 1px;
border: 0px solid red;
}

Det är lite mer kod där, float och margin och annat, det är framförallt höjd och bredd som är intressant i detta fall.

Det går nog att lösa på många olika sätt, men jag tycket detta var smidigt i det här fallet. Fördelen med tekniken är att jag bara behöver ladda en bild för att få in alla varianter (varje extra laddning påverkar hur snabbt sidan ritas upp).

Du kan ju alltid göra två bilder som du byter ut med CSS-kod vid hover, en full opacitet och en med 50 procent. Vill du vara lite avancerad kan du sätta ihop bilderna till en bild och bara byta position på bilden (då är bilden redan laddad och det går lite snabbare).

Två frågor:
1. Är det den här "webbtekniken" som ni lär er i gymnasiet?
2. Varför uppfinna hjulet en gång till?

.menu a:link{color: #fff; text-decoration: none;}

Sådär har jag gjort i min CSS iaf.
Ser ju rätt ut, vet inte huruvida det kan ha med # kontra . att göra, men det verkar konstigt.

Kul och bra jobbat...

Jag tycker att det vore trevligare med en lite smalare meny kanske (men det är är ju subjektivt ut i fingerspetsarna). Men den snor mycket utrymme, iaf för folk med små skärmar. Likaså på headern (loggan).
Länkarna vore skönt att ha i en lite mer kontrast på (vitt som efter klickning lyfte det massvis, kanske någon nyans mörkare än #FFFFFF.

Och att förstasidan är nyhets-sidan vore också bra, då får man nyheterna direkt och kan läsa där innan man tar sig vidare till forumet.

I övrigt hade jag nog valt att bygga upp sidan med divar istället för iFrame/Frames.

Men bra jobbat. tusen gånger bättre än min första sida på ljuva 90talet (som som tur är inte finns kvar)

Välkomna hit muckbuck och macmic ! Ser att ni har blivit medlemmar nyligen men redan är på gång med frågor och svar. Hoppas ni ska trivas här. Om ni vill kan ni presentera er i denna tråden: Personliga presentationer - 99.se.

Jag har själv gjort två websidor men där är det mycket "fusk" eftersom jag köpt grafiken med mallar att lägga in texten, så jag kan inte ge några proffskommentarer.
Jag kan tänka mig att kolla runt på sidan och den var lätt att överblicka. Reagerar dock på färgerna och tycker dom inte riktigt matchar varandra. Den blågröna högst upp är för otydlig för mig och ger ett lite grumligt intryck. Mina ögon skulle vilja ha något ljusare där.

Har skrivit på din andra tråd med samma fråga (där du glömt länken). Det är nog bättre om du raderar den. Det gör du under Redigerar vid frågan. Om det är medvetet gjort så har jag för mig att det inte är tillåtet att skriva flera trådar med samma fråga.