05. CSS

Meny-bakgrund i CSS - enklare nu!

2010-03-19 21:59 #0 av: IdaL

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:

<style type="text/css">
Css koden här

</style>

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 <body>-taggar:

<div id="menyn">
<span class="meny"><center>
<a href="#">Meny 1</a>    
    
<a href="#">Meny 2</a>    
    
<a href="#">Meny 3</a>    
    
<a href="#">Meny 4</a>    
    
<a href="#">Meny 5</a>    
    
<a href="#">Meny 6</a>    
    
<a href="#">Meny 7</a>    
    
<a href="#">Meny 8</a>
</center>
</span>
</div>

 

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!

Anmäl
2010-03-20 00:15 #1 av: [Tearix]

Man kan också ta bort alla &nbsp; 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;}

 

Anmäl
2010-03-20 00:30 #2 av: IdaL

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

Anmäl
2010-03-22 00:54 #3 av: MichaelE

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.

Anmäl
2010-03-22 01:23 #4 av: johan-ahlback

#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

Anmäl
2010-03-22 10:51 #5 av: MichaelE

#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 (<p>) och br (<br />)

Anmäl
2010-03-23 13:13 #6 av: johan-ahlback

#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

Anmäl
2010-03-23 14:14 #7 av: MichaelE

jag ger uppCool

Anmäl
2010-03-23 15:26 #8 av: [Ebfotograf]

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?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-03-23 15:42 #9 av: [Tearix]

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

Anmäl
2010-05-11 23:16 #10 av: jennyliljedahl

Kan man ladda hem CSS gratis?

Anmäl
2010-05-11 23:46 #11 av: Futurity

#10 Hur menar du?

Anmäl
2010-05-11 23:48 #12 av: jennyliljedahl

Ja, det programet?

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

Anmäl
2010-05-12 00:02 #13 av: Futurity

Css är inget program.

Anmäl
2010-05-12 00:04 #14 av: jennyliljedahl

vad är det då?

Anmäl
2010-05-12 00:16 #15 av: Futurity

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.

Anmäl
2010-05-12 00:18 #16 av: jennyliljedahl

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

Anmäl
2010-05-12 12:12 #17 av: [Ebfotograf]

#16 - www.webdesignskolan.se

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-05-12 15:17 #18 av: jennyliljedahl

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

Anmäl
2010-05-12 16:52 #19 av: IdaL

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

Anmäl
2010-05-12 17:42 #20 av: jennyliljedahl

#19 Tack :)

Anmäl
2010-05-12 18:26 #21 av: IdaL

#20 så lite så Flört

Anmäl
2011-01-05 22:03 #22 av: Mountain

Kanske lite fulkod att överanvända &nbsp; ?  Flört

Anmäl
2011-01-06 01:42 #23 av: IdaL

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

Anmäl
2011-06-06 16:19 #24 av: Shamandaliex

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)

Anmäl
2011-06-07 10:28 #25 av: Shamandaliex

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

Anmäl
2011-10-30 23:09 #26 av: KitoBonito

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

Anmäl
2011-10-30 23:11 #27 av: KitoBonito

#25

I steg 4 ser du att det står <center> och </center>. Ändra det till <left> och </left>

 

That should do it :)

Anmäl
2011-10-31 18:09 #28 av: [Beavis]

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.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-10-31 23:33 #29 av: [Beavis]

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;
}
-->
</style>
<META NAME="keywords"    CONTENT="HTML,music,musik,embeded music">
<META NAME="description" CONTENT="Embeded music backgroundmusic and other sounds">
<title>Music and Sounds</title>
<META NAME="author"     CONTENT="Bjö:rn Sjöberg">
<META HTTP-EQUIV="refresh" CONTENT="60">
</HEAD>

<BODY cellpadding="15" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" text="#000000" basefont="arial" link="#000000" alink="#00ffff" vlink="#800000" height="100%" width="100%">

<TABLE cellpadding="15" cellspacing="0" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" height="100%" width="100%" border="0">
<tr>
<TD valign="top" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" height="100%" width="100%">
<div id="menyn">
<span class="meny"><center>
<a href="index.html"> Bildbakgrunder&Listor       </a>
<a href="Roliga sidan1.html"> Marginaler&Rubriker </a>
<a href="tables2.html"> Tabeller&Bakgrund         </a>
<a href="tables3.html"> Tabeller&Thumbnails       </a>
<a href="bilder.html"> Backgrunder&Bilder         </a>
<a href="colors.html"> Färger                </a>
<a href="music.html">  Musik                      </a>
<a href="formuler.html">Formulär             </a>
<a href="tables1.html"> Knappar                   </a>
</center>
</span>
</div>
</TD>
</TR>

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-01 01:03 #30 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-04 19:40 #31 av: KitoBonito

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!

Anmäl
2011-11-04 19:41 #32 av: KitoBonito

#30

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

Anmäl
2011-11-04 22:43 #33 av: [Beavis]

#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? <hr> med % i bredd istället för px därför ser det extra knasigt ut

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-06 18:45 #34 av: KitoBonito

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!

 

Anmäl
2011-11-06 20:52 #35 av: [Beavis]

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?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-06 21:51 #36 av: KitoBonito

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/

Anmäl
2011-11-07 00:10 #37 av: [Beavis]

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.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-07 19:48 #38 av: KitoBonito

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

Anmäl
2011-11-08 02:00 #39 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-08 17:04 #40 av: KitoBonito

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

Anmäl
2011-11-08 23:29 #41 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-09 16:31 #42 av: KitoBonito

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

Anmäl
2011-11-09 18:24 #43 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-27 23:21 #44 av: [Beavis]

Någon som har tips?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-29 22:37 #45 av: [Beavis]

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?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-11-30 11:55 #46 av: IdaT

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

Anmäl
2011-12-01 11:39 #47 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-12-01 14:08 #48 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-12-01 15:08 #49 av: IdaT

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.

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.