Trenger hjelp med css koder til bloggen min. Det litt raskt også før jeg herper hele greia...

[audibabe86]

jeg har bitte litt kunnskap og erfaring med html koder som jeg brukte en del av på hjemmesiden jeg hadde på piczo. Nå har jeg imidlertid skaffet med wordpress blogg og der kan jeg bruke css koder som vist nok skal vere noe det samme...

 

jeg har fått til å endre bakgrunnen på bloggen min. men der stoppe det også.

har etter mye frustrsjon funnet ut at der innleggene mine blir postet kalles content.

men den er hvit og jeg vil ha en annen farge. jeg tråler og tråler med finner ikke ut hvordan, det er så komplisert forklart. ingen av css kodene jeg har prøvd fungerer...

 

kan noen hjelpe meg med å forklare meg hvordan jeg kan følgende:

endre farge på content

få oversiktene mine (arkiv, kalender, linker osv) fordelt på begge sider av innleggene mine

sette inn bilde som begever seg sammen med siden når den scrolles opp og ned

 

river meg i håret her og blir litt frustrert over mine dårlige engelsk kunnskaper som gjør dette vanskelig og komplisert for en utolmodig adhd sjel

[Zeriz]

HTML er strukturen på nettsiden, og CSS er rett og slett bare stilarket. I CSS-filen definerer du stilene til de forskjellige HTML-Elementene.

 

Du bør kunne & forstå hvordan HTML fungerer før du avanserer i CSS.

 

Anbefaler deg å ta en titt på denne nettsiden: http://www.w3schools.com/css/

 

 

Kan være kjekt å vite:

div#content { settings:here; } = En ID. Firkanten som du ser gir en ID, og denne kan bare brukes èn gang per .html-dokument.

div.content { settings:here; } = En Class; kan brukes flere ganger.

[audibabe86]

ååå- så css skal altså brukes I htlm kodene? da ble det litt mer komlisert enn jeg bruke...

men nå har jeg jo prøvd alt slags mulige koder, men er kun bakgrunnen på selve bloggen jeg klarer å forandre. og på den linken du gav meg finner jeg ikke ut hvordan endre fargen der som blogg innlegget mitt kommer...

 

så div#content { settings:here; } setter jeg før htlm koden?

[srbz]

CSS kan brukes på tre måter:

- du kan definere CSS-koder fortløpende i HTML-koden din, altså for hvert element om ønskelig

- du kan definere CSS innenfor HTML sin head-tag

- du kan definere CSS i et eget stilark. Fordelen her er at du bare trenger en enkel referanse til stilarket i HTML-koden, og CSS-koden vil gjelde alle sider med referanse til stilarket. Du kan også definere eksempelvis et "vanlig" stilark, et stilark for utskrift (der du kan fjerne f.eks. bakgrunnsbilder, bytte logo til et mindre bilde, fjerne unødvendige lenker og menyer) og et stilark for mindre, mobile enheter, som f.eks. mobiltelefoner.

 

Hvis du i HTML skriver <div id="header"></div>, så har div-en ID "header". Da kan du gi den egenskaper i CSS som f.eks. #header {height: 400px}

Dette er måten å gjøre det på hvis du definerer CSS mer generelt enn for hvert element på hver HTML-side. Ønsker du å spesifisere CSS rett på elementet blir det <div style="height: 400px"></div> men du må da gjøre dette for hver enkelt div som skal ha denne egenskapen.

Konvensjonelt bør du også bruke class istedenfor id dersom egenskapen skal gjelde flere elementer per HTML-side

 

Den mest fornuftige måten å håndtere CSS på dersom du har flere sider du ønsker lik layout på, er å ha CSS i en egen fil. Da holder det å definere CSS én plass så lenge du er konsekvent på å gi elementer i HTML riktig id/class, og ønsker du å gjøre en global endring som omfatter alle sidene dine, holder det å gjøre dette én plass.

Endret 9. desember 2010 av srbz

[iNeo]

ååå- så css skal altså brukes I htlm kodene? da ble det litt mer komlisert enn jeg bruke...

men nå har jeg jo prøvd alt slags mulige koder, men er kun bakgrunnen på selve bloggen jeg klarer å forandre. og på den linken du gav meg finner jeg ikke ut hvordan endre fargen der som blogg innlegget mitt kommer...

 

så div#content { settings:here; } setter jeg før htlm koden?

Nei det der ER html koden. { settings:here; } er CSS koden innebygget i HTML koden.

[srbz]

Jeg plukket frem en tilfeldig side fra forumet "Websidekritikk" for å illustrere: http://exonize.net/

 

Se på kildekoden til denne siden. I Firefox finner du denne ved å høyreklikke på siden og velge "Vis kildekode". De fleste nettlesere har en tilsvarende metode for å finne kildekoden.

I kildekoden ser du bl.a. følgende:

 

<link href="default.css" rel="stylesheet" type="text/css" />

Denne linjen ligger i head, og forteller nettleseren at det er en referanse til CSS-stilarket, og hvor det ligger. <- Klikk linken, og CSS-stilarket åpnes i nettleseren som ren tekst.

 

Videre i HTML-koden finner du bl.a.

  <div id="innhold2">  </div>
 <div style="clear: both;"> </div>

Dette var jo praktisk. På to linjer demonstreres både måten å bruke CSS via referanser, og måten å bruke CSS rett på elementet. Den første div-en har id "innhold2", og i CSS-stilarket finner du bl.a.

#innhold2 {
float: left;
width: 120px;
padding: 10px;
}

Dette er da egenskapene som gis ethvert element med attributten id="header". Hver egenskap adskilles med semikolon ( ; ), og kunne like gjerne ha blitt skrevet " float: left; width: 120px; padding: 10px;", men for oversiktens skyld er det greit å også adskille dem med linjeskift. Alt som står mellom klammene som etterfølger ID-en, vil dermed gjelde ethvert element som har denne ID-en. Ulikt hva Zeriz skriver lenger opp, så kan faktisk ID brukes flere ganger per side, men konvensjonelt bør du heller bruke "class" istedenfor "id" om disse egenskapene skal gjelde flere elementer (dette har bl.a. med presedens å gjøre).

 

For å definere egenskapene til et element med id="header" i CSS skriver du "#header {*egenskap1*; *egenskap2*;}". Har du f.eks. flere elementer med class="advertisement", skriver du ".advertisement {*egenskap1*; *egenskap2*;}". I CSS kan du også definere egenskaper for HTML-elementer, eksempelvis vil "p {*egenskap1*; *egenskap2*;}" definere egenskaper for alle p-elementer i HTML (<p>Tekst her</p>). Det finnes også måter å kombinere disse på, slik at du kan definere egenskaper for eksempelvis "elementer av type p med class="advertisement". id indikeres altså med asterisk # og class med punktum . når det defineres i CSS, enten i eget stilark eller i head i HTML.

 

Den neste div-en har CSS definert som en egen attributt (style="clear: both;"). Denne spesifikke egenskapen forhindrer flytelementer på hver side av div-en, men du kan selvsagt også bruke alle andre CSS-egenskaper på samme måte som om du hadde definert dem i en egen fil.

Endret 10. desember 2010 av srbz

[audibabe86]

tusen takk for mange svar i et forsøk på å hjelpe en fortapt sjel i webbens kode verden... ser nå at dette er litt dødfødt for meg å lese meg til. Selv om jeg finner det ganske spennende og interresangt. ser for meg at jeg bør utanne meg innen noe slikt...

 

Men i mellomtiden før jeg blir ekspert, er det noen her som gidder å hjelpe meg? med å skrive inn kodene jeg trenger for meg? eventuelt skrive hva jeg skal skrive så det bare er å kopiere og lime inn i stilsettet?

[cbastus]

CSS vil variere fra nettsted til nettsted, så for å hjelpe deg med dine spesifikk behov, må vi ha en lenke til nettstedet det er snakk om slik at vi kan se koden og tilpasse CSS. Skriv gjerne også en liste med hva du ønsker å endre.

 

Å lære HTML og CSS er ikke en umulig oppgave. Start med HTML instuksjonene på www.w3schools.com og jobb deg oppover.

Prøv gjerne å følge eksemplene der uten å falle for fristelsen å hoppe rett inn i koden til din wordpress-blog.