Annons:
Etikett05-css
Läst 15167 ggr
IdaL
3/19/10, 9:59 PM

Meny-bakgrund i CSS - enklare nu!

Bild 1. Klicka för att öppna i full storlek.

I denna artikeln visar jag hur man gör en meny med en bakgrund. Menyn kommer vi till att koda med hjälp av CSS och HTML. Detta är det enklaste att göra en snygg och användarvänlig meny som fungerar för alla och dessutom ser bra och professionell ut.

Meny med bakgrund

I denna artikeln hade jag tänkt ta upp hur man gör en meny med en bakgrund. Vi kommer använda oss av CSS för att koda detta.

Artiklen utgår från att du har baskunskaperna i såväl HTML som CSS. Dock är det ganska utförligt förklarat så det ska inte vara så svårt att förstå.

Jag utgår i artikeln från att ni använder en egen stilmall men om ni vill lägga koderna direkt i HTML-dokumentet så går detta givetvis bra också, då använder ni följande kod:

menyn
Såhär ser menyn ut som vi ska göra.

Steg 1.

Vi börjar med CSS koderna för en helt vanlig box som vi vill ser ut såhär.

#menyn { padding-top: 30px; width: 692px; height: 56px; }

padding-top: 30px; - detta är hur långt ifrån "toppen" på boxen vi vill att texten ska hamna. Jag har valt 30px då det passar denna meny bäst.
width: 692px; - Detta är bredden på boxen, den är även för att passa den bakgrund jag tänker använda.
height: 56px; - Detta är höjden på boxen som också är anpassad för bakgrunden. Höjden på boxen påverkas också av "padding-top" så egentligen är boxen 86px hög men nu räknar vi med paddingen så då blir den 56px hög.

Steg 2.

Nästa steg är nu att lägga in själva bakgrunden i boxen. Bakgrunden är en helt vanlig bild som vi lägger in i boxen.

Bakgrunden för menyn
Såhär ser bilden för bakgrunden.

Såhär ser koderna ut med bakgrunden med:

#menyn { padding-top: 30px; width: 692px; height: 56px; **
background-image: url(meny_bkg.jpg);** }

nu är själva boxen färdig för med bakgrunden och nu är det bara länkarna som ska läggas in och även koderna för själva menyn ska läggas i HTML dokumentet.

Steg 3.

Jag använder mig utav följande länkkod för att få länkarna i vit och övergången svart. Du lägger denna koden under #menyn i ditt CSS-dokument.

.meny a { font-family: Verdana; font-size: 11px;
color: #FFFFFF; text-decoration: none;
letter-spacing: 1px; }
.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration: none;
letter-spacing: 1px; }

Steg 4.

Nu har vi gjort själva CSS grunden till hela menyn så nu är det bara att lägga in den i HTML dokumentet inom dina -taggar:

Meny 1          Meny 2          Meny 3          Meny 4          Meny 5          Meny 6          Meny 7          Meny 8

Slutord

Nu har du gjort din egen meny enkelt och snabbt med en helt vanlig bakgrund istället för att sitta och krångla en massa med CSS. Se bara till att du ändrar värdena så att dom passar din bakgrundsbild så bör det funka utmärkt. Tänk bara på att med texten så mäter olika datorer olika med avstånden och letter-spacingen

Hoppas du har lärt dig något!

Annons:
[Tearix]
3/20/10, 12:15 AM
#1

Man kan också ta bort alla   och lägga till margininaler;

margin-right:20px; lägger till 20 pixlar till höger om länken. margin-left utökar marginalen till vänster, osv.

Man måste lägga till det på både a och a:hover annars kommer länken att flytta sig när man "hovrar". 

.meny a { font-family: Verdana; font-size: 11px;
color: #FFFFFF;  text-decoration: none;
letter-spacing: 1px; margin-right:20px;}

.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration: none;
letter-spacing: 1px; margin-right:20px;}

Om man vill att länken ska vara understruken när man för musen över ändrar man text-decoration: none; till text-decoration: underline:

.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration:underline;
letter-spacing: 1px; margin-right:20px;}

IdaL
3/20/10, 12:30 AM
#2

#1 Där la du till lite mer information ja Glad Jag gick mest igenom det enklaste i denna artikeln Flört

MichaelE
3/22/10, 12:54 AM
#3

använder man dessutom följande kod:

.menyn a{dislay: inline;}

så riskerar man inte att att länkarna skapar en radbrytning av någon konstig anledning.

johan-ahlback
3/22/10, 1:23 AM
#4

#3 a taggar är redan inline som standard varför ska man skriva in det då?

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

MichaelE
3/22/10, 10:51 AM
#5

#4 Om du öppnar sidan från låt säga en mobil (iphone) så kommer den att radbryta menyn ifall du har många länkar.

Annars vid sidmenyer får man skriva in block istället så slipper man både paragraf (

) och br (
)

johan-ahlback
3/23/10, 1:13 PM
#6

#5 men oftast har man en fast bredd på en meny om man har en bild. och jag förstår fortfarande inte varför man ska ta ett inline element och skriva i css att det ska vara ett inline element. Det kan ju inte hända något.

Så som den här menyn är skapad är det väll bättre att ha white-space:nowrap;?

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Annons:
MichaelE
3/23/10, 2:14 PM
#7

jag ger uppCool

[Ebfotograf]
3/23/10, 3:26 PM
#8

När jag gör en sådan bakgrund till menyn så blir det ett mellanrum mellan menyn och skriv kolumnen. Hur kan jag fixa det?

[Tearix]
3/23/10, 3:42 PM
#9

går inte att svara på utan att se hela koden.

jennyliljedahl
5/11/10, 11:16 PM
#10

Kan man ladda hem CSS gratis?

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

Futurity
5/11/10, 11:46 PM
#11

#10 Hur menar du?

 
 
 
 

jennyliljedahl
5/11/10, 11:48 PM
#12

Ja, det programet?

Går det att ladda hem? För det finns väl inte på datorn?

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

Futurity
5/12/10, 12:02 AM
#13

Css är inget program.

 
 
 
 

Annons:
jennyliljedahl
5/12/10, 12:04 AM
#14

vad är det då?

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

Futurity
5/12/10, 12:16 AM
#15

Det är som html fast typ style sheet eller vad man säger. Det är det som berättar utsendet på tex länkar, boxar och sånt.

 
 
 
 

jennyliljedahl
5/12/10, 12:18 AM
#16

Finns det någonstans så man kan läsa om hur man gör med CSS?

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

[Ebfotograf]
5/12/10, 12:12 PM
jennyliljedahl
5/12/10, 3:17 PM
#18

Tack, men var på sidan? Har du lust att länka en artikel? :)

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

IdaL
5/12/10, 4:52 PM
#19

#18 "CSS grunder" går du in på. Flört

jennyliljedahl
5/12/10, 5:42 PM
#20

#19 Tack :)

www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)

Annons:
IdaL
5/12/10, 6:26 PM
#21

#20 så lite så Flört

Mountain
1/5/11, 10:03 PM
#22

Kanske lite fulkod att överanvända   ?  Flört

Bästa hälsningar,
Per Lööv
- Zerosite.se

Medarbetare på Hemsidor ifokus

IdaL
1/6/11, 1:42 AM
#23

#22 Sant men jag gör det av bekvämlighet Flört Det blir samma princip som om man använder padding/margin Glad

Shamandaliex
6/6/11, 4:19 PM
#24

Hm, begriper inte det där med padding-top… När jag lägger in det så lägger sig texten ändå högst upp och min bakgrundsbild ser helt sned ut :O Vad kan det bero på? När jag tog bort det såg allt bra ut igen fast texten är ju fortfarande längst upp (vill ha den i mitten)

Kika gärna på min blogg där jag skriver om allt inom fantasy!

- Fantasygrottan

Shamandaliex
6/7/11, 10:28 AM
#25

Löste det ^^ Hur gör man om man vill ha texten till vänster istället för centrerad?

Kika gärna på min blogg där jag skriver om allt inom fantasy!

- Fantasygrottan

KitoBonito
10/30/11, 11:09 PM
#26

Tack så mycket! Precis vad jag behövde :)

KitoBonito
10/30/11, 11:11 PM
#27

#25

I steg 4 ser du att det står

och
. Ändra det till och

That should do it :)

Annons:
[Beavis]
10/31/11, 6:09 PM
#28

Häftigt med all tillägsinfo. Bra att ha när man skall göra detta.

Ska testa för saken skull.

- Eftersom jag föredrar att använda % istället för px ändrade jag  på några ställen för att den skall funka.

[Beavis]
10/31/11, 11:33 PM
Bild 1. Klicka för att öppna i full storlek.
#29

Hmm jag gjorde om menyn på en gammal sida på detta vis.

Uppenbarligen har jag gjort något fel någonstans för detta blev reultatet (se bild)

Jag har ändrat vissa färger och ändrat några mått ifrån px till %

här är koden på avsnittet:

#menyn {
.meny a { font-family: Verdana; font-size: 11px;
color:#ffffff; text-decoration:none;
letter-spacing: 1px; margin-right:0px;}
.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration: none;
letter-spacing: 1px; margin-right:0px;}
padding-top: 10px;  
width: 100%;
height: 56px;
background-image: url(meny_bkg.jpg);
}
#second_column {
margin: 0px;
background: transparent url(greenred_marble.gif) repeat-XY;
}
-->



Music and Sounds





Någon som ser felet? vill alltså inte ha dessa marginaler mellan cellerna

[Beavis]
11/1/11, 1:03 AM
Bild 1. Klicka för att öppna i full storlek.
#30

Testade att göra en rakt av i en ny och fick återigen ett streck mitt igenom menyn??

Hur kommer det sig???? bifogar bild igen

KitoBonito
11/4/11, 7:40 PM
#31

Jag har stött på ett litet problem med min menybakgrund. Den vill inte synas! Allt har funkat skitbra med förhandsvisning av hemsidan osv men nu när jag laddat upp allt vill den inte existera.. Finns att ses här: http://kitobonito.se/

Vet ni vad som kan vara fel? Jag har testat allt jag kunnat komma på so I'm begging for your help!

KitoBonito
11/4/11, 7:41 PM
#32

#30

Du tror inte din bild kan vara för kort? Vild och kanske dum gissning!

[Beavis]
11/4/11, 10:43 PM
#33

#32 jag gjorde den exakt som det står i handledningen på den bilden-

Det ser lite dumt ut för jag har uppenbarligen högre upplösning på min skärm än vad sajten är gjord för.

Jag använde en av mina grundmallar för att slippa göra den helt ifrån grunden och la då in ett  "bottenstreck" vetefan vad det heter?


med % i bredd istället för px därför ser det extra knasigt ut

KitoBonito
11/6/11, 6:45 PM
#34

Jag spammar lite för att jag hoppas att ingen ska missa det, för jag är helt allvarligt fast! Jag har ingen aning om vad som är fel.

Jag har stött på ett litet problem med min menybakgrund. Den vill inte synas! Allt har funkat skitbra med förhandsvisning av hemsidan osv men nu när jag laddat upp allt vill den inte existera.. Finns att ses här: http://kitobonito.se/

Vet ni vad som kan vara fel? Jag har testat allt jag kunnat komma på so I'm begging for your help!

Annons:
[Beavis]
11/6/11, 8:52 PM
#35

Kanske IdaL kan svara på det? just nu har jag inget svar på et riktigt. Har du gått igenom koden och kollat så du inte missat ett " eller liknande?

KitoBonito
11/6/11, 9:51 PM
#36

HAH! Jag kollade igenom allt för en tiotusende gång nu och kunde verkligen inte hitta något. Först när jag skulle skriva ett spekulerande svar här bestämde jag mig för att det BARA kunde handla om bilden och att det måste vara något med det. Kunde fortfarande inte hitta något förrän jag började stirra på bildnamnet. Bilden slutade på .jpg.. Det skulle varit .JPG. Så simpelt… Tack och lov.

TACK för ditt svar, vilken tur att du fick mig att kolla extra noga ytterligare ännu en gång. Nu slipper jag våndas över min halvfärdiga hemsida xD

SÅ ska det se ut! http://kitobonito.se/

[Beavis]
11/7/11, 12:10 AM
#37

Grattis! det brukar vara något så enkelt. Tyvärr har inte browsers något överseende med att ordet är detsamma om man skrivit små  istället för stora osv.

KitoBonito
11/7/11, 7:48 PM
#38

Tack ska du ha :) Löste det sig med ditt?

[Beavis]
11/8/11, 2:00 AM
#39

Njaee har inte kollat nu men tror att linjerna är kvar?

KitoBonito
11/8/11, 5:04 PM
#40

Ingen aning, tror inte du la ut någon adress :)

[Beavis]
11/8/11, 11:29 PM
#41

Jag har inte lagt ut den på nätet, Har bara testat att göra den hemma på datorn. Har lagt ut screenshots dock i #30

Annons:
KitoBonito
11/9/11, 4:31 PM
#42

Nja, men du skrev som om du ställde en fråga om linjerna fortfarande syntes eller inte :P

[Beavis]
11/9/11, 6:24 PM
Bild 1. Klicka för att öppna i full storlek.
#43

okej jag testade just och linjerna är kvar jag fick en till nu när jag breddade menyn. som ni kan se på bifogad screenshot….

[Beavis]
11/27/11, 11:21 PM
#44

Någon som har tips?

[Beavis]
11/29/11, 10:37 PM
Bild 1. Klicka för att öppna i full storlek.
#45

jag testade att lägga in den eller "göra om" en exixterande sida genom att göra om menyn efter ovan reultatet blev så här (kolla bilden)

koden för den bilden ligger i style jag har ändrat lite i ett försök att få till det. och ser ut så här:

#menyn {
.meny a { font-family: Verdana; font-size: 11px;
color:#ffffff;     text-decoration:none;
letter-spacing: 1px; margin-right:0px;}
.meny a:hover { font-family: Verdana; font-size: 11px;
color: #000000; text-decoration: none;
letter-spacing: 1px; margin-right:0px;}
padding-top: 0px;  
width: 100%;
height: 56px;
background-image: url(meny_bkg.jpg);
}

Kan ni se vad jag gör fel?

IdaT
11/30/11, 11:55 AM
#46

#45 Det jag spontant kan se är att du har nästlat dina taggar, samt att du inte döpt dom till samma sak. Testa att skriva det såhär istället:
#menyn {
padding-top: 0px;  
width: 100%;
height: 56px;
background-image: url(meny_bkg.jpg);
}
#menyn a {
font-family: Verdana;
font-size: 11px;
color:#ffffff;
text-decoration:none;
letter-spacing: 1px;
margin-right:0px;
}
#menyn a:hover {
font-family: Verdana;
font-size: 11px;
color: #000000;
text-decoration: none;
letter-spacing: 1px;
margin-right:0px;
}

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

[Beavis]
12/1/11, 11:39 AM
#47

Tack ska testa. jag hade bara kopierat IdaL s kod rakt av.

[Beavis]
12/1/11, 2:08 PM
#48

#16

Jag ändrade "koden" enligt nedan.

#menyn {
padding-top: 0px;  
width: 100%;
height: 56px;
background-image: url(meny_bkg.jpg);
}
.meny a {
font-family: Verdana;
font-size: 11px;
color:#ffffff;    
text-decoration:none;
letter-spacing: 1px;
margin-right:0px;
}
.meny a:hover {
font-family: Verdana;
font-size: 11px;
color: #000000;
text-decoration: none;
letter-spacing: 1px;
margin-right:0px;}
}

Tyvärr var det bara en utseendemässig ändring av koden vad det verkar. Jag refererar till bifogad bild med uppdaterade css koden.

Tyvärr gick det inte att bifoga filen men den ser ut som den tidigare.

Annons:
IdaT
12/1/11, 3:08 PM
#49

Nu när jag tittar lite noggrannare så ser det ut som om bilden Iad lagt upp här ovan har en skuggning runt om och det är alltså den som skapar dina vita kanter. Om du beskär den i höger och vänsterkant borde dom försvinna. Kanten under beror på att menyn är för hög i förhållande till bilden. Det går att hjälpa med att minska höjden på menyn, men  också att genom att lägga in background-repeat: repeat-x; som gör att menyn bara upprepas vågrätt.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

[Beavis]
12/2/11, 5:26 PM
Bild 1. Klicka för att öppna i full storlek.
#50

Tack så mycket för tipset IdaT jag ska prova det.

- Så var det jag öppnade bakgrunden i photoshop och den har en vit kant. Den syntes inte först jag trode jag missat någon marginal eller höjd på nåt vis?

- Ska testa att beskära bilden.

- Beskar bilden så vita kanten försvann

- Ändrade bredden(width) på meny_bkg.jpg till 500px

- Lade in:background-repeat: repeat-x;

Det funfgerade inte som du kan se. Felet måste ligga någon annanstans?

Det sjuka är ju hur bakgrundsbilden  har blivit "kort i rocken också trots att den har width & height 100% ?

Här är koden igen:

}
#menyn {
padding-top: 0px;
width: 100%;
height: 56px;
background-image: url(meny_bkg.jpg);
background-repeat: repeat-x;
}
.meny a {
font-family: Verdana;
font-size: 11px;
color:#ffffff;
text-decoration:none;
letter-spacing: 1px;
margin-right:0px;
}
.meny a:hover {
font-family: Verdana;
font-size: 11px;
color: #000000;
text-decoration: none;
letter-spacing: 1px;
margin-right:0px;}
}
#second_column {
margin: 0px;
background: transparent url(greenred_marble.gif) repeat-XY;
}

Jag la till css för andra kolumnen också. jag hajra ingenting längre det måste vare en bugg nånstans?

Upp till toppen
Annons: