Archive for the ‘CSS’ Category
You are currently browsing the archives for the CSS category.
4
apr
2010
Design: Del opp bloggen i egne “bokser”
Er mange som lurer pÃ¥ hvordan det er mulig Ã¥ fÃ¥ delt opp sidemenyen i egne “bokser”. Vel det er ikke spesielt vanskelig. SÃ¥ sant du ikke har gjort veldig store forandringer pÃ¥ malene sÃ¥ er det bare Ã¥ lime inn koden under nederst i stilsettfilen din sÃ¥ vil alt ordne seg selv.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* kode som gjør alt gjennomsiktig */ #doc2, #wrapper{ background: transparent; } #wrapper{ padding: 0; /* gjør bloggen like bredd som headeren */ margin-top: 25px; /* mellomrom mellom header og innleggsdelen */ } /* gjør sidemenyen litt smalere */ #side{ width: 30%; /* hvor bredd siden skal være i forhold til resten av bloggen */ } /* forandrer de forskjellige delene i sidemeneyen */ #side div{ background: #fff; /* backgrunn på boksene */ padding: 5px; /* hvor langt inn teksten skal flyttes */ border: 2px solid #8a8a8a; /* ramme rundt boksen */ } /* vi vil ikke ha egne bokser inni profildelen, derfor fjerner vi border og bakgrunsfarge på dem */ #profile div{ background: transparent; border: 0; } /* innleggsdelen */ .entry{ padding: 10px; /* hvor langt inn teksten skal flyttes */ border: 2px solid #8a8a8a; /* ramme rundt bloggen */ } /* fjerner navigasjonlinjen til blogg.no som er under headeren */ .breadcrumbs{ display: none;} |
Hvis noen har problem med dette så rop ut.
Fikk du det til?
15
sept
2009
Design: Forskjellige ramme streker/mønster
Dette er den mest vanlige koden for å få ramme rundt en innlegg:
.entry{
border: 2px solid #000000;
}
Men viste du at i stede for “solid” kunne bruke noen av disse:
15
sept
2009
Design: Feilsøking i stilsett filen
Ja, dette er noe alle er borti en eller annen gang. Det er en feil i stilsett filen. Her skal jeg forklare enkel fremgangs måte for lett å se etter feil i stilsettet.
Stilsett “kodene” er bygd opp slik:
hvor{
hva: til;
}
Hvor denne koden skal virke feks h2 eller #wrapper
Hva er det som skal forandres, feks border: eller font-size:
Til hva skal dette forandres, feks 1px solid black; eller 15px;
Legg ogsÃ¥ merke til { } all “koden” skal plasseres mellom disse.
og at alle linjene inni skal sluttes med ;
SÃ¥ hvis du feks finner dette i stilsett filen:
| Feil | Rett |
| h2{ font-size: 20px; #wrapper{ background: #fff; } |
h2{ font-size: 20px; } #wrapper{ background: #fff; } |
SÃ¥ ser du at det begynner pÃ¥ en ny “Hvor” før den andre er avsluttet med }
Denne feilen finner jeg mange ganger på slutten av en stilsett fil.
I 99.8% av tilfellene skal det ikke plasseres < > inni stilsett filen. Det er veldig mange som skriver <style> og </style> inni filen. De skal aldri være i en stilsett fil, fjern dem!
| Feil | Rett |
| h2{ font-size: 20px color: #000000; } #wrapper{ background: #fff; } |
h2{ font-size: 20px; color: #000000; } #wrapper{ background: #fff; } |
Her vil aldri “h2″ blitt satt til 20px eller svart. Grunnen er at det er glemt en ; pÃ¥ slutten av ene linjen.
Med å gå gjennom stilsett filen på denne måten vil du finne de fleste innlysende feilene.
Lykke til.
