Background Color hjelp!

LudvigH · 28. september 2010

Hei! :!:

Går på Medier Og Kommunikasjon, og vi har begynt å lære grunnleggende ting innen html og css nå.

Fikk i oppgave å lage en liten side hvor vi viste frem det meste av det vi hadde lært hittil.

Problemet mitt er at jeg vil ha et hvitt "felt", hvor jeg skriver teksten på. Har prøvd med background-color, men da blir det store glipper i det hvite feltet, det blir ikke jevnt. Har lagt ved et bilde av hvordan det ser ut.

Her er css og html kodene :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Foto</title>
<link href="Foto.css" rel="stylesheet" type="text/css" />

<LINK REL="SHORTCUT ICON"
      HREF="Kamera.png"



</style>
<style type="text/css">
body {
background-image: url(images/Bakgrunn.jpg);
font-family: Arial, Helvetica, sans-serif;
color: #EDEDED;
}
</style>
</head>



<body>

<center>
<h1 class="overskrift" class="margin"<strong>FOTO</strong></h1>
</center>


<p><h4>Hei! Og velkommen til min side om foto.</h4><br/> 

<h4>Her på denne siden skal jeg skrive litt om foto, og vise frem noen bilder jeg har tatt selv!</h4></p>

@charset "UTF-8";
/* CSS Document */

h1

{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:99px;
font-size: large;
background-color:#FFF;
margin-left:450px;
margin-right:450px;
}

h1.overskrift

{
font-size:xx-large;
}




h1.bakgrunnsfarge

{
background-color: #FFF;

}





h1.margin

{
margin-top:30px;
margin-bottom:30px;
margin-left:30px;
margin-right:30px;
}

h4

{
font-family: "Gill Sans";
color:#000;
background-color:#FFF;
margin-right:375px;
margin-left:375px;

}

Forklarte helt ræva, men håper noen forstår.

Takk på forhånd

LudvigH · 28. september 2010

Ingen som vet??

Puster · 28. september 2010

Hva mener du egentlig?

LudvigH · 28. september 2010

Jeg vil ha et STORT hvitt felt, hvor jeg kan skrive tekst.

(Legger ved en illustrasjon over hva jeg mener.)

Puster · 28. september 2010

Lika da skjønner jeg:) legg til noe alla dette

din tekst her

</div>

så lager du en css rule for denne, lager den så høy å lang du vil ha å legger til bg color hvit:)

Tim91 · 1. oktober 2010

Hei!

Tror jeg skjønte hva du mente nå. Du vil at midt seksjonen skal ha en bestemt høyde altså ikke slik at den følger teksten. Har da omgjort så og si hele filen, men jeg skal prøve forklare hva jeg har gjort og hvorfor.

Kan vel engentlig starte med en liten introduksjon:

Når man koder nettsider bruker man som oftes Divisjoner altså <div> taggen. Dette kombinerer man da med css. Design mest mulig i CSS filen dette gjør det mye mer oversiktlig å du har mange flere muligheter.

Skal dette bli oversiktlig må det limes inn i Dreamweaver eller wordpadd grunnet veldig lange kommentarer

HTML-Filen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Foto</title>

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

<LINK REL="SHORTCUT ICON" HREF="Kamera.png" />

</head>

<body>

<div id="header"> 

<h1>PHOTO</h1> 

</div> 

<div id="overskrift_innhold"> 

<p>Hei! Og velkommen til min side om foto.</p> 

</div> 

<div id="innhold"> 

<p>Her på denne siden skal jeg skrive litt om foto, og vise frem noen bilder jeg har tatt selv!</p> 

<p>Gennerel informasjon kommer her å ja?</p> 

</div> 

</body>

CSS-filen

@charset "UTF-8";

/* CSS Document */

body { /* body er da generelt hva som skal skje i hele dokumente ditt standar skrift,farger etc. */

background-image: url(images/Bakgrunn.jpg); /* Dette er da BG bilde ditt flott helt riktig utført! */

background-color: #000000; /* Ettersom jeg ikke hadde bilde ditt opprettet jeg en bakgrunns farge i steden den kan slettes */

font-family: Arial, Helvetica, sans-serif; /* Dette er da de forskjellige tekst typene du ønsker og benytte */

color: #EDEDED; /* Dette er da generelt fargen du vil bruke på teksten på siden */

} /* Avsluttnings tagg for CSS */

h1 { /* åpnings tagg for h1 */

font-size: 24px; /* størrelse på skrift deffinert i piksler */

/* her kan du også legge til egen skrift type farge etc. som kun skal gjelde på H1 */

} /* Avsluttnings tagg for CSS */

/* ----- Struktur nettside ----- */

#header { /* åpnings tagg for header */

background-color: #000000; /* bekgrunnsfarge for header denne ligger sammen med bakgrunnen din prøv hold dette i samme farge ellers må du endre på noe der. */

text-align: center; /* Teksten blir i senter av det deffinerte området */

margin: auto; /* midtstiller header boksen så header divisjonen kommer på midten */

} /* Avsluttnings tagg for CSS */

#overskrift_innhold {/* åpnings tagg */

background-color: #666666; /* BG farge for innholdet */

width: 600px; /* bredde på siden */

height: auto; /* auto høyde stilles etter hvor mange linjer tekst du har */

margin: auto; /* midtstiller boksen så overskrift_innhold divisjonen kommer på midten */

text-align: center; /* centrer teksten ikke av selve nettsiden men av selve boksen kalt overskrift_innhold */

} /* Avsluttnings tagg for CSS */

#innhold { /* åpnings tagg */

background-color: #666666; /* BG farge for innholdet */

width: 590px; /* bredde på siden MERK: denne er 10px mindre en overskrift_innhold fordi jeg har brukt padding */

height: 500px; /* høyden er 500px uansett hvor mye tekst du har. Får du mye tekst sett den til auto! som i overskrift_innhold */

margin: auto; /* midtstiller boksen så innhold divisjonen kommer på midten */

padding: 5px; /* Padding denne gjør at teksten kommer 5px vrekk fra alle kanter så den ikke er helt inntil siden eller top/bunn */

} /* Avsluttnings tagg for CSS */

- Du hadde CSS i både HTML filen din og CSS filen nå ligger alt i CSS filen.

- Har fjernet endel av HTML "designet" å erstattet det med bruk av CSS.

- Byttet struktur form til Divisjoner (hvordan designet er bygd opp)

- MERK! CSS skiller mellom store og små bokstaver tenker på denne linken:

Stor F i photo. Husk og at filen også har stor F da. Dette gjelder da også alle divisjonene i CSS og HTML fila (ID).

Som du ser har jeg lagt til endel kommentarer på scriptet dette er for at du skal skjønne hva som foregår slett disse når du har fortått poenget. Har du spørsmål kom med det

Håper dette var til hjelp

Endret 1. oktober 2010 av Tim91

Bjonski · 1. oktober 2010

- MERK! CSS skiller mellom store og små bokstaver tenker på denne linken:

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

Stor F i photo. Husk og at filen også har stor F da. Dette gjelder da også alle divisjonene i CSS og HTML fila (ID).

CSS skiller generelt sett ikke mellom store og små bokstaver, unntaket er filstier.

Det du også nevner som et eksempel er ikke CSS, men HTML.

Lenken i dokumentet for å hente CSS-filen er HTML, og filstien er case-sensitive.

body {
}

endrer på <body>-tagen i HTML, det kan være greit å bruke:

body, html {
}

Tull..

Endret 1. oktober 2010 av Bjohansen

Tim91 · 1. oktober 2010

Ble vist litt trøtt utover kvelden xD

CSS skiller generelt sett ikke mellom store og små bokstaver, unntaket er filstier.

Det du også nevner som et eksempel er ikke CSS, men HTML.

Lenken i dokumentet for å hente CSS-filen er HTML, og filstien er case-sensitive.

Tenkte da såklart på Filnavnet å ikke CSS'en generelt.

endrer på <body>-tagen i HTML, det kan være greit å bruke:

body, html {

}

Joa, sikkert greit dette også. Selv om jeg aldri har hatt bruk for og gjøre dette

Tull..

Beklager min feil =)

Uansett. Anbefaler deg ikke bruke h1,h2,h3 på så mange forskjellige tekster som du bruker.

Logg inn

Background Color hjelp!

Anbefalte innlegg

LudvigH

Lenke til kommentar

Videoannonse

LudvigH

Lenke til kommentar

Puster

Lenke til kommentar

LudvigH

Lenke til kommentar

Puster

Lenke til kommentar

Tim91

Lenke til kommentar

Bjonski

Lenke til kommentar

Tim91

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer