/*
######################################
###########LS ENTERTAINMENT###########
########## 2009 - 11 - xx ##########
######################################
Tillhör: index.php, foretaget.php & medarbetare.php
Beskrivning: CCS dokument för sidan.
All layout är skriven här då sidorna är XHTML Strict och bör därför inte ha någon form av layoutkod.
Så ska ni ändra något så gör det här.
Jag har försökt förklara så gott som möjligt vad allt är och vad en ändring kan göra.
Gör en backup före om ni måste ändra något utan min hjälp.
############################################################
# Kodad av: Karl - Göran Gustavson. nme_bard@hotmail.com #
# http://www.lasttry.se - (WIP) #
############################################################
*/
body { /* Body, generella inställningar för sidan. */
color:#340000; /* Färgen på all text... Inte länar osv, utan all standard text. */
font-family:arial bold, verdana, arial; /* Val av typsnitt: först väljer den arial bold, finns inte den tar den verdana, sen arial osv. */
font-size:12px; /* typsnitts storlek. */
}
/* Navigering, lista.
Tillhör: Navigering.
Beskrivning: Länkarna är uppradade på listor och det kan ju självklart inte vara default.
Det här skriver ut hur listorna ska se ut, mer eller mindre.
*/
ul { /* Länk listor. */
list-style-type:none;
padding:0; /* Ingen padding... */
margin:0; /* Ingen margin, anlednignen till 9´0 på båda är för att standardvärdet är högre gormar... */
}
li { /* listornas "innehåll"... */
padding-left:1.2em; /* Padding på 1.2em (kan byta till pixlar men em är inte alltid fel. */
padding-top:0.1em; /* padding från top... */
}
/* Listor, class.
Tillhör: Navigering, lista.
Beskrivning: Det här är en så kallad klass och defineras av punkten mellan li och class,
li definerar det som tillhörande av listor och .inactive ger den namnet inactive.
När besökaren redan befinner sig på en sida så byts den sidan ut i navigationen till en grå text och en grå ikon för i listan.
Det här kräver en så kallad class funktion.
*/
li.inactive { /* Den gråa listan på en aktiv sida.... */
padding-left:1.0em; /* Byter till 1.0 em padding. */
color:#5a5a5a; /* Byter färg till en grå nyans... */
font-family:arial, verdana; /* Sämst nog var jag tvungen på att inkludera font-family, annars valde den något annat. */
font-size:16px; /* Samma med font-size... Jävla rackel... */
}
/* Länkar.
Tillhör: Navigering.
Beskrivning: hur de olika taggarna reagerar. Vanlig länk, en besökt länk, en aktiv länk och en hover länk.
Jag tycker det ser bäst ut att ha en layout som inte ändras allt för mycket och något jag tycker är väldigt irriterande
är när man tryckt på en länk så byter den färg eftersom du redan varit där.
Det finns totalt 3 sidor, tror nog besökarna minns om de varit på en tidigare eller inte. Sen är det otroligt fult också,
därför är: Active & Visited satt på exakta värden med Link för att ha en enhetlig layout.
*/
a:link { /* Länkar..... */
font-family:arial, verdana; /* Länkarnas font... */
font-size:17px; /* Länkarnas font-size... */
color:#340000; /* Länkarnas färg... */
text-decoration:none; /* Vi vill inte ha något som indikerar att det är en länk, dvs ingen underline eler något skräp */
}
a:visited {
font-family:arial, verdana; /* Besökta länkar.... Huvva... */
font-size:17px; /* Det här är katasterof... Jag avskyt visited länkar och de borde sluta användas i mina ögon... */
color:#340000; /* Därför valde jag samma värden som a:link så de inte ändrar stil. */
text-decoration:none;
}
a:active { /* Aktiv länk... */
color:#999999; /* Aktiv länk färg... */
font-family:arial, verdana; /* Aktiv länk font... */
font-size:17px; /* Aktiv länk font-size... */
text-decoration:none; /* Aktiv länk dekorering... */
}
a:hover { /* hover länk & mouse over färgbyte */
color:#b50000; /* hover länk färg... */
}
th {
font-size:15px; /* sätter font-size:15px; i | | taggar */
}
a.mailto { /* mailto länkar... */
color:#b50000; /* mailto länk färg... */
font-family:arial, verdana; /* mailto länk font... */
font-size:14px; /* mailto länk font-size... */
text-decoration:none; /* mailto länk dekorering... */
}
a.mailto:hover { /* mailto länkar... */
color:#340000; /* mailto länk färg... */
font-family:arial, verdana; /* mailto länk font... */
font-size:14px; /* mailto länk font-size... */
text-decoration:none; /* mailto länk dekorering... */
}
a img { /* länkar med bilder... */
text-decoration:none; /* tar bort alla stilar... */
border:0 none; /* tar bort border runt bilden som är en länk. */
}
/* #Div
Förklaring: Jag har delat upp det så enkelt som möjligt för att andra ska kunna ändra koden om det är nödvändigt.
Med en noga förklaring vad allt är så ska det inte vara något större problem för någon som är lite bekant
Med kod att kunna lösa det problemet de söker. Här finns alla divs, och för att lättare kunna ändra och
förstå hur divs fungerar så rekommenderar jag att slå på borders för att kunna se storleken på en div och lättare
kunna flytta runt efter eget behov.
Border kod (placeras i den div du önskar modifiera):
border:1px solid black;
Något som kan vara förvirrande med positioneringen är att ibland skriver jag "x pixlar från top" eller
"y pixlar från vänster" anledningen är att det beror på divens placering.
en div som är placerad på en sida kan man ändra i led från vänster, eller och från toppen. Placerar man en div i en annan div...
så räknar den från den divens top. Alltså, om jag har #div1 som fungerar som bodybag, den är placerad 15 pixlar från toppen...
I denna div har jag #div2, den diven vill jag ha 5 pixlar nedåt. Då blir det 5 pixlar från top inte 15+5 då hamnar den totalt 35 pixlar
från toppen.
*/
/* #bodybag
Tillhör: index.php
Beskrivning: Egen div för "index" sidan.
Notering: Ingen position för bodybag, 2,3 är nödvändiga!
*/
#bodybag { /* #boybag */
background-image:url(layout/bg1.png); /* bakgrundsbildens sökväg */
width: 1024px; /* bredd */
height:768px; /* höjd */
margin-left:auto; /* placering i vänsterled. Auto centrerar. */
margin-right:auto; /* placering i högerled. Auto centrerar. */
}
/* #bodybag2
Tillhör: foretaget.php
Beskrivning: Egen div för "företaget" sidan.
*/
#bodybag2 { /* #boybag2 */
background-image:url(layout/bg2.png); /* bakgrundsbildens sökväg */
width: 1024px; /* bredd */
height:768px; /* höjd */
margin-left:auto; /* placering i vänsterled. Auto centrerar. */
margin-right:auto; /* placering i högerled. Auto centrerar. */
}
/* #bodybag3
Tillhör: medarbetare.php
Beskrivning: Egen div för "medarbetare/kontakt" sidan.
*/
#bodybag3 { /* #boybag3 */
background-image:url(layout/bg3.png); /* bakgrundsbildens sökväg */
width: 1024px; /* bredd */
height:768px; /* höjd */
margin-left:auto; /* placering i vänsterled. Auto centrerar. */
margin-right:auto; /* placering i högerled. Auto centrerar. */
}
/* #back
Tillhör: Navigaton.
Beskrivning: En liten div för att lätt kunna ändra positioneringen på "back" knappen som tar besökaren till föregående sida.
*/
#back { /* #content */
position:relative; /* relativ positionering. Annars bråkar den. "if it works, don't touch it" */
background: url(layout/pilneutral.png) no-repeat; /* bakgrundsbildens sökväg, no-repeat säger till att den inte får repetera bilden. */
left:-300px; /* pga en relative position så fick jag placera den från höger, alltså -300. */
top:300px; /* placering från toppen. */
width:21px; /* bredd. */
height:37px; /* höjd. */
margin-left:auto; /* placering i vänsterled. Auto centrerar. borde gå utan men den bråkar. */
margin-right:auto;
}
/* #back:hover
Tillhör: Navigaton.
Beskrivning: Hover effekten, gjorde den lite speciell... Funkar lika bra som andra tillvägagångar men jag föredrar det här sättet.
*/
#back:hover { /* #back:hover */
background: url(layout/pilpusheddown.png) no-repeat; /* Sökväg till bilden som ska bytas och en no-repeat. */
}
/* #content
Tillhör: Innehåll, alla sidor.
Beskrivning: En div som är utmätt för att hålla all information. på PDF filerna jag sett så ska det delas upp i två kolumner och går att lösa
genom att placera två divs med halva storleken på bredden i denna div med texte utdelad om
jag inte gör någon ninja lösning på det hela.
*/
#content { /* #content */
position:relative; /* en relativ positionering för att centrera den och så skalning fungerar med sidan. */
top:200px; /* 200 pixlar från toppen */
width:500px; /* bredd. */
height:220px; /* höjd. */
padding:5px; /* padding gör att den skjuter in allt innehåll med 5 pixlar från varje kant. */
margin-left:auto; /* placering i vänsterled. Auto centrerar. */
margin-right:auto; /* placering i högerled. Auto centrerar. */
}
/* #kontaktp
Tillhör: medarbetare, layout.
Beskrivning: CEO "kontaktperson" div.
*/
#kontaktp {
position:absolute; /* absolut positionering, den ska vara där. Fungerar bra eftersom... den är placerad i en div. */
top:15px; /* 2 pixlar från toppen. */
left:7px; /* 7 pixlar från vänster */
width:240px; /* bredd. */
height:25px; /* höjd. */
padding:1px; /* padding gör att den skjuter in allt innehåll med 4 pixlar från varje kant. */
}
/* #center
Tillhör: Innehåll, medarbetare.php.
Beskrivning: CEO placeringen.
*/
#center {
position:absolute; /* absolut positionering, den ska vara där. Fungerar bra eftersom... den är placerad i en div. */
top:14px; /* 14 pixlar från toppen. */
width:240px; /* bredd. */
height:60px; /* höjd. */
padding:1px; /* padding gör att den skjuter in allt innehåll med 4 pixlar från varje kant. */
}
/* #left
Tillhör: Innehåll, medarbetare.php.
Beskrivning: vänster kolumn i listan med medarbetare & personal.
*/
#left { /* #left */
position:absolute; /* absolut positionering, den ska vara där. Fungerar bra eftersom... den är placerad i en div. */
top:80px; /* 80 pixlar från toppen. */
width:235px; /* bredd. */
height:128px; /* höjd. */
padding:4px; /* padding gör att den skjuter in allt innehåll med 4 pixlar från varje kant. */
}
/* #right
Tillhör: Innehåll, medarbetare.php.
Beskrivning: höger kolumn i listan med medarbetare & personal.
*/
#right { /* #right */
position:absolute; /* absolut positionering, den ska vara där. Fungerar bra eftersom... den är placerad i en div. */
top:80px; /* 80 pixlar från toppen. */
left:260px; /* 240 pixlar från vänster, alltså längen på #left + 10. */
width:235px; /* höjd. */
height:128px; /* bredd. */
padding:4px; /* padding gör att den skjuter in allt innehåll med 4 pixlar från varje kant. */
}
/* #urlbox
Tillhör: Navigation, foretaget.php, medarbetare.php.
Beskrivning: En div med all navigation, för att lätt kunna positionera om den om det är nödvändigt.
*/
#urlbox { /* #urlbox */
position:relative; /* en relativ positionering för att centrera den och så skalning fungerar med sidan. */
top:230px; /* 230 pixlar från toppen. */
left:400px; /* 400 pixlar från vänster. */
width:230px; /* bredd. */
height:42px; /* höjd. */
padding-left:3px; /* padding gör att den skjuter in allt innehåll med 3 pixlar från varje kant. */
}
/* #urlbox2
Tillhör: Navigation, index.php.
Beskrivning: Snabb lösning på ett positionsproblem.
*/
#urlbox2 { /* #urlbox2 */
position:relative; /* en relativ positionering för att centrera den och så skalning fungerar med sidan. */
top:269px; /* 269 pixlar från toppen. */
left:400px; /* 400 pixlar från vänster. */
width:230px; /* bredd. */
height:42px; /* höjd. */
padding-left:3px; /* padding gör att den skjuter in allt innehåll med 3 pixlar från varje kant. */
}