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.  

Denne artikkelen viser hvordan du designer en komplett nettside uten bruk av tabeller. Her brukes kun <DIV> tagger og CSS! Eksempelet viser en nettside bestående av en topp, en hovedside og en bunn. Siden vil alltid ha minimum 100% høyde uavhengig av innholdet på den, også om toppen eller bunnens høyde forandres! Ønsker du å komme igang med CSS design på en god måte er dette artikkelen for deg!  

Dette kodeeksempelet viser hvordan man kan skreddersy en textboks vhja css. Vi endrer på tykkelsen på rammen (border), farge på ramme og tekst, samt endrer størrelsen på teksten og avstanden mellom tekst og selve rammen på tekstboksen. Vi får en flott og skreddersydd textboks!  

Denne CSS koden viser hvordan du kan få innholdet av en DIV tag til å flyte utover containeren den ligger inne i. I eksempelet har vi et flashelement som skal ligge 20px til venstre for sin container, dvs at flashen vil flyte utenfor sin kolonne med -20px. Det som er spesielt viktig å legge merke til er bruken av "position" og "left".  

Denne koden gjør at containeren "content" aldri er mindre enn 500px høy, men samtidig vil den øke dersom innholdet i containeren overstiger 500px. Dette er nyttig å bruke hvis du feks skal lage en border-right som skal følge contaierens høyde, selv om den blir presset ut av innholdet inni containeren. OBS: "!important" forteller coden at dette elementet er viktig, og aldri må overskrives av andre elementer, derfor har vi også "height" 2 ganger!  

Dette kodeeksempelet viser hvordan man kan midtstille en webside både hotisontalt men også vertikalt ved bruk av CSS. Det er spesielt ofte et vanlig spørsmål hvordan man kan midtstile vertikalt uten bruk av tabeller. Vi viser deg hvor enkelt dette kan gjøres!  

Denne lille kodesnutten viser hvordan du kan lage en scroll rundt et innholdselement på en side. Greit om man ønsker å liste opp en del innhold, men ikke bruke for stor plass.  

Denne koden viser hvordan du kan lage rammeverkt uten bruk av tabeller, kun med CSS20. Container og DIV'er stikkord for denne artikkelen.  

Denne artikkelen viser med flere eksempler hvordan du sette opp layout på en webside ved hjelp av CSS i stedet for tabeller. Dette er en metode som tas mer og mer i bruk, både fordi websiden rendres hurtigere og fordi det gir en bedre kompabilitet med tanke på feks mobile enheter. Det henvises også til andre eksempler innenfor samme tema!  

Her er noen nyttige tips for god stylesheet / CSS bruk!  

Her er et lite eksempel på hvordan man enkelt kan gi en tabell en stiplet ramme i 2px tykkelse og med fargen #cccccc.  

Dette kodeeksempelet legger innholdet i en tabell over et bilde. På denne måten blir bildet å betrakte som bakgrunn til tabellen. Ved å benytte posisjonering (absolute/relative) og z-index kan man jobbe i flere lag!  

Denne enkle koden gjør at du får en vertikal stiplet linje til venstre.  

Denne koden viser hvordan man kan styre plasseringen av innholdet på en webside ved hjelp av Stylesheet / CSS. Det er smart å gjøre dette i et eksternt script, da kan mange filer oppdateres ved kun en endring ETT sted!  

Denne koden viser hvordan man kan lage en tabell med 2 kolonner og 4 rader ved hjelp av stylesheet / CSS.   

UL-taggen har vanligvis et innrykk, samt en liljeskift i overkant. Dette er ikke alltid ønskelig, og i eksempelet under ser du hvordan du selv kan styre disse parameterene.  

Stylesheets kan bruker i stedet for tabeller. Enkelte mener dette er "fremtiden"... Her er noen metoder for plassering av innhold.  

I CSS bruker man ikke "valign" som i html på feks en TD-tag, men man benytter "vertical-align". Se kodeeksempel.  

Koden under legges i et stylesheet og sørger for at innholdet i en TH tag venstrestilles. Default blir innholdet i en TH tag midtstilt.  

Denne koden kombinerer stylesheet for å lage en scrollbar rundt en tekst, gjerne rundt en tabell eller inne i en tabell. Denne fungerer også i både explorer, netscape, opera mfl.  

Det legges automatisk inn et linjeskift før en <form> tag. Slik fjerner du dette linjeskiftet.  

Veldig fin "effekt" i blandt annet overskrifter. Stikkord er letter-spacing!  

Skriv vertikalt, bruk koden under.  

Her vises et stylesheet (css) som formaterer alle textbokser, dropdowns og radio-buttons på en webside.  

Formatering av form-elementer gjøres ved hjelp av stylesheet:  

Ønsker du å ha et bakgrunnsbilde på din hjemmeside / webside? Her viser vi hvor enkelt dette kan gjøres ved å tilføye en liten kode i body elementet på websiden din. Vi viser også hvordan du kan gjøre dette ved hjelp av CSS!  

Eksempelet viser et bakgunnsbilde i BODY-taggen. P-taggen har ikke noe bilde.  

Denne koden viser hvordan du kan formatere scrollbaren slik at den passer designet på din webside.  

Eksempel på Stylesheet: Dette er stylesheet'et som benyttes på webressurs.no.  

Stylesheets kan enten legges direkte i et dokument, eller som en egen seperat fil. Eksempelet viser et stylesheet som ligger i selve dokumentet/websiden.  

Koden viser en metode for å midtstille en tabell ved hjelp av stylesheet.  

Slik fjerner du break etter H-taggene (H1,H2 osv)  

Her vises hvordan man kan legge et stylesheet direkte i <head> i html/asp-fila  

Man kan formatere en enkelt tabell på en webside ved å bruke class i CSS.   

Class attributt brukes for å identifisere en gruppe / klasse av elementer. På denne måten kan man formatere et element forskjellig ved å tilegne dette en navngitt gruppe  

Trenger minst 2 filer; en .css fil som inneholder info om formatering, og x-antall .html-sider som henviser til denne css-en  

Her vises hvordan alle linker i et dokument kan gjøres grå når musa går over linken, og fjerner streken under linkene