Kodeeksempler i kategorien 'CSS' (46 totalt)

Man kan oppleve problemer med at innhold i bokser flyter utenfor dersom innholdet i en boks blir høyere enn selve boksen. Her vises 2 metoder for å få fikse dette.  

Her viser vi en nyttig CSS kode som sørger for at din bulletlist (<ul><li> liste) ser lik ut i både Internet Explorer (IE) og FireFox.  

Her viser vi hvordan du kan midtstille en nettside ved hjelp av CSS. Nettsiden ligger i en <div> container med navn "wrapper", ved å sette korrekt margin på denne vil nettsiden midtstilles korrekt. Koden fungerer i IE og FireFox.  

FireFox har problemer med å ekspandere / kollapse vertikalt etter innholdet i elementet. Det betyr feks at en DIV ikke får korrekt høyde ift innholdet inne i DIV elementet. Her viser vi hvordan man kan løse dette vhja en clearfix klasse i CSS.  

I "gamle dager" da det var mest vanlig å benytte tabeller til å lage rammeverket på nettsider var det ingen spesielle utfordringer med tanke på å få kolonner til å følge hverandres høyde. Med CSS og bruken av containere er det mange som sliter med å få en kolonne til å ekspanere / minimere når høyden på kolonnen ved siden av endres. Her viser vi hvordan man ved hjelp av stylesheet kan håndere dette. Om containeren "colA" endres vil "colB" følge etter og visa versa.  

Her vises et eksempel på hvordan du kan sette opp rammeverket til en nettside ved hjelp av CSS.  

Dette er et eksempel på hvordan du kan lage en nettside uten bruk av tabeller. Nettsiden er 760px bred og består av en topp, venstre meny, innholdsdel, høyre kolonne samt en bunn.  

Dette kodeeksempelet viser hvordan du kan lage bakgrunnen på en DIV tag gjennomsiktig eller transparent. Du kan sette hvor gjennomsiktig du selv ønsker, fra 1% til 100%. Det beste av alt: koden fungerer i alle nettlesere!  

Før du begynner å lage din nettside i CSS anbefales det at du resetter / nullstiller alle elementer i din CSS. Det vil si alle DIV-tagger, P-tagger, H-tagger osv. Fordelen med det er at du da slipper å spesifisere hvert element til å ha 0px margin eller padding, men heller kan håndtere unntakene der du ønsker å benytte dette. Et godt eksempel er mellomrommet etter <h1> overskrifter, det vil bli borte ved først å nullstille alle elementer og man vil således få full kontroll på layouten uten å først måtte nullstille hvert enkelt element for seg selv.  

Her viser vi et eksempel på bruk av absolute og relativ posisjonering i CSS. Det vi ønsker å oppnå i kodeeksempelet er en venstremeny der ett av elementene flyter utenfor selve menyen. Vi ønsker at den det øverste elementet (FlashElement) i menyen skal ligge -200px over, og -50px til venstre for containeren som inneholder selve menyen.