Meny-bakgrund i CSS - enklare nu!
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:
_
Css koden här_
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.
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: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!
Mvh. Ida Lundahl
www.idalundahl.com / www.ovarpskaniner.weebly.com
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;}
#1 Där la du till lite mer information ja Jag gick mest igenom det enklaste i denna artikeln
Mvh. Ida Lundahl
www.idalundahl.com / www.ovarpskaniner.weebly.com
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.
#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
#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 (
)
#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
jag ger upp
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?
går inte att svara på utan att se hela koden.
Kan man ladda hem CSS gratis?
www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)
#10 Hur menar du?
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! :)
Css är inget program.
vad är det då?
www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)
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.
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! :)
#16 - www.webdesignskolan.se
Tack, men var på sidan? Har du lust att länka en artikel? :)
www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)
#18 "CSS grunder" går du in på.
Mvh. Ida Lundahl
www.idalundahl.com / www.ovarpskaniner.weebly.com
#19 Tack :)
www.JennyLiljedahl.webs.com / www.Jennypetronella.blogg.se - Besök! :)
#20 så lite så
Mvh. Ida Lundahl
www.idalundahl.com / www.ovarpskaniner.weebly.com
Kanske lite fulkod att överanvända ?
Bästa hälsningar,
Per Lööv - Zerosite.se
Medarbetare på Hemsidor ifokus
#22 Sant men jag gör det av bekvämlighet Det blir samma princip som om man använder padding/margin
Mvh. Ida Lundahl
www.idalundahl.com / www.ovarpskaniner.weebly.com
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!
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!
Tack så mycket! Precis vad jag behövde :)
#25
I steg 4 ser du att det står
That should do it :)
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.
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;
}
-->
|