Gå til innhold

Container styling/css

Mazå

Anbefalte innlegg

Mazå

Mazå

Skrevet
Skrevet

Hvordan få legge in farge/css osv på ein av disse containerene?

 

For eksempel så vil jeg ha den første til header/banner,

andre: slideshow

tredje og fjerde: Arbeid

footer

 

 

 

<!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>My portfolio</title>
</head>

<link href="mystyle.css" rel="stylesheet" type="text/css">
<body>
<div id="header/logo container">
<img name="" src="" width="819" height="150" alt="">
</div>


<div id=" work 1 container">
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
</div>

<div id="slideshow container">
<center><img name="" src="" width="250" height="150" alt="">
<img name="" src="" width="250" height="150" alt="">
<img name="" src="" width="250" height="150" alt=""></center>
</div>

<div id=" work 2 container">
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
<p> test test test test test test test test test test test</p>
</div>


<div id=" footer container">
<p> Made of .......@ 2012
</div>

</body>
</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
agm

agm

Skrevet
Skrevet (endret)

Jeg tror du blander ID og class.

 

ID er en unik identifikator. Kun ett element kan ha denne IDen, og hvert element kan kun har én ID. I tillegg kan ikke en ID ha mellomrom i navnet.

 

Class kan brukes til å identifisere flere elementer. Hvert element kan ha flere classes, og disse skilles da med et mellomrom (<div id="class1 class2 class3">).

 

Riktigere blir det å gjøre noe slik:

<!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>My portfolio</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header" class="logo container">
 <img name="" src="" alt="" />
</div>
<div id="work1" class="container">
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
</div>
<div id="slideshow" class="container">
 <img name="" src="" alt="" />
 <img name="" src="" alt="" />
 <img name="" src="" alt="" />
</div>
<div id="work2" class="container">
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
 <p> test test test test test test test test test test test</p>
</div>
<div id="footer" class="container">
 <p> Made of .......@ 2012</p>
</div>
</body>
</html>

 

 

Da kan du sette stil i CSS på denne måten:

/* Felles for alle elementer med class="container" */
.container {
 display: block;
 margin: 50px auto;
 width: 800px;
}
/* Felles for alle elementer med class="work" */
.work {
 color: blue;
 background: orange;
}
/* Stil for elementet med id="header" */
#header {
 height: 200px;
 background: black;
}
/* Stil for elementet med id="work1" */
#work1 {

}
/* Stil for elementet med id="work1" */
#work2 {

}

 

Håper dette hjelper deg på vei! :)

Endret av agm
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...