Ofte Stilte Spørsmål om html/css på blogg.no
Tenke jeg skulle samle sammen noen av de mest spurte spørsmålene om blogg design. Denne siden kommer til å bli oppdatert ukentlig. Har du noen spørsmål så ikke vært redd for å spørre 
NB!Dette er ting jeg har skrevet inn, ikke bare kopier det inn på bloggen din.
Header
- Hvordan får jeg ramme rundt headeren?
- Hvorfor blir headeren gjentatt?
- Hvordan få headeren på midten/venstre/høyre?
- Hvordan får jeg mellomrom mellom header og resten av bloggen?
“Sidemeny”
- Hvordan få ramme rundt den?
- Hvorfor “faller” sidemenyen ned pÃ¥ bunnen av siden?
- Hvordan få mellomrom mellom sidemenyen og innleggene ?
Innlegg
- Hvordan fjerne info linjen øverst i innleggene ( dato/klokke/kommentarer )?
- Hvordan få ramme rundt innleggene? ( KOMMER )
- Hvordan forandre overskriften? ( KOMMER )
- Går det an å få bakgrunnfagre på innleggene? ( KOMMER )
Profil
CSS
- Hvordan virker “Border:” ( KOMMER )
HEADER
Hvordan får jeg ramme rundt headeren?
Dette løser du med å putte denne i slutten av stilsett filen:
1 2 3 | #header{ border: 2px solid black; } |
Da vil du få en ramme på 2px rundt hele headeren.
Hvorfor blir headeren gjentatt?
Grunnen til dette er at #header feltet er for stort, du har en del muligheter å løse dette på. Tilpass header bildet slik at det blir like stort som bloggen, definer at bildet ikke skal bli gjentatt eller du kan gjøre #header delen like sort som bildet. Jeg kommer her bare til å vise hvordan du sier at bildet ikke skal bli gjentatt.
Se i stilsett filen din, se om du finner #header delen. Den kan se noe slik som dette ut:
1 2 3 4 5 6 | #header{ background-color: #FFFFFF; background-image: url( HTTP://ADRESSETILHEADERBILDE ); height: 229px; background-repeat: repeat; } |
Om koden ikke er helt lik har ikke noe å si, det vi ser etter er background-repeat: repeat; Denne må vi forandre litt på. Hvis du ikke har linjen gjør det ikke noe, forandre eller legg inn linjen slik at den ser slik ut:
background-repeat: no-repeat;
Hvordan få headeren på midten/venstre/høyre?
Finn frem #header delen i stilsett filen. Se om du finner denne linjen:
background-position:
Forandre eller skriv inn denne linjen slik at den stemmer med der du vil ha headeren. mulige valg er: left, center eller right. Hvis du feks vil ha den på midten skriver du :
background-position: center;
Hvordan får jeg mellomrom mellom header og resten av bloggen?
I #header delen i stilsett filen legg til denne linjen:
margin-bottom: 10px;
Du forandrer 10px til så stort mellomrom du ønsker å ha.
“SIDEMENY”
Hvordan få ramme rundt den?
Dette løser du med å putte denne i slutten av stilsett filen:
1 2 3 | #side{ border: 2px solid black; } |
Da vil du få en ramme på 2px rundt hele sidemenyen.
Hvorfor “faller” sidemenyen ned pÃ¥ bunnen av siden?
Du vil se at dette skjer i Opera og Firefox. Hvis du ser på siden i IE så ser den helt fint ut. Dette løser vi med å gjøre sidemenyen litt mindre. plasser følgende kode i stilsett filen.
1 2 3 | #side{ width: 30%; } |
Hvis du har gjort store forandringer på designet ditt kan det være at du må gå enda lenger ned, prøv da 28% .
Hvordan få mellomrom mellom sidemenyen og innleggene ?
Den enkleste måten å gjøre dette på er å gjøre innlegg delen av bloggen litt mindre. Dette gjør du med å plassere dette nederst i stilsett filen:
1 2 3 | #main{ width: 65%; } |
Her må du nesten prøve deg litt frem, hvis du ser at sidemenyen faller ned på bunnen av siden er 65% for stort, da må du minske den.
“Innlegg”
Hvordan fjerne info linjen øverst i innleggene ( dato/klokke/kommentarer )?
Mange design har en info linje øverst og nederst, for å fjerne den øverste gå du inn i malen, se om du finner linjen:
<div class=”meta”>
Den er plassert ganske langt oppe, det finnes flere slike linjer inni malen så det er viktig at du er sikker på at du har den øverste.
Forandre den til :
<div class=”meta metatop”>
Forhåndsvis og se at ingen ting har forandret seg. Lagre.
GÃ¥ inn i stilsettet kopier inn disse linjene:
1 2 3 | .metatop{ display: none; /* fjerner øverste info linje i innlegget. */ } |
Lagre. infolinjen skal nå være borte.
Profil
Hvordan få større profil bilde?
Dette er det mange som lurer pÃ¥. Det første du mÃ¥ gjøre er Ã¥ ordne et bilde som er i ønsket størrelse. 150 til 200px bredd er sikker nok. Du mÃ¥ nesten se hvor stor “sidemenyen” er for Ã¥ finne ut hvor stort du ønsker det.
Last opp bilde til feks http://www.tinypic.com . NÃ¥r du har lastet opp bildet er det adressen som stÃ¥r under “Direct Link for Layouts” du skal bruke videre i koden her.
GÃ¥ inn pÃ¥ blogg design pÃ¥ bloggen din. Velg malen “Forsiden”. Søk etter ordet: ProfileImageUrl . MÃ¥ten du søker pÃ¥ er Ã¥ trykke inn ctrl+f og skriv inn hva du søker etter der.
Du vil da se en linje som ser ut noe slik som dette:
<img src=”${ProfileImageUrl}” alt=”${ProfileName}” />
der det står ${ProfileImageUrl} skriver du inn adressen som vi fikk fra tinypic. Slik at linjen blir slik:
<img src=”http://i37.tinypic.com/flfz8j.jpg” alt=”${ProfileName}” />
Så er det bare å trykke på forhåndsvisning og se om du er fornøyd med størrelsen. Hvis ikke så må du gjøre om størrelsen på bildet og prøve på nytt.
Lykke til.
Legg inn et svar
Jeg ønsker selvfølgelig at du legger inn en kommentar, men jeg ønsker kommentarer på det jeg skriver over her.
Hvis jeg har skrevet noe dumt eller hel teit på bloggen din så svar gjerne her.
MEN ta deg tid til å lese gjennom det jeg også har skrevet da. Legg gjerne igjen en kommentar på det :)
