Gå til innhold

Trenger litt hjelp med CSS og layout

Francesca_

Anbefalte innlegg

Francesca_

Francesca_

Skrevet
Skrevet

Lager min aller første side fra grunn, og har selvfølgelig støtt på problemer jeg ikke skjønner hvordan jeg skal løse.

Siden ser post-87059-1200662779_thumb.jpg sånn ut nå. Content delen skal også gå helt ned, og skal ikke være noe skille mellom header og resten. Tror jeg snart har prøvd alt, men får det rett og slett ikke til. Hadde også tenkt å ha en kant rundt, men kommer ikke noe når jeg setter border rundt container.

Håper noen kan gi meg et lite dytt i riktig retning :!:

 

body {
background-color: #a6d2ff;
background-repeat: no repeat;

}

#container {
position: relative;
width: 800px;
height: 600px;
margin: auto;
border: #ffffff;
border-width: 10px;
}


ul { 
list-style-type: none; 
line-height: 2;
}

h1 {	

}

h2 {
}

h3 {

}

img {
width: 800px;
margin: 0 0px;
border: 0px;
}


p {
display:block;
font-family: "book antigua";
font-size: 1em;
color: grey;
background-color: white;
padding-top: 60px;
padding-left: 60px;
padding-right: 60px;
padding-bottom: 60px;
border: 0px;
margin: auto;
height: 100%;
overflow: auto;
}

a {
font-family: "book antigua";
font-size: 1em;
text-decoration: none;
}

p:first-letter {
font-size: 3em;
float: left;
}

#header {
position: relative;
margin: auto;

}

#navigation {
float: left;
margin: auto;
width: 142px;
height: 100%;
background-color: #3379b5;
padding-top: 40px;
overflow: auto;
}

#content {


}

#navigation a:link {
color: white;
}

#navigation a:visited {
color: #989da4;
}

#navigation a:hover {
background: #4897ff;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no">

<head>

<title> Gløggspelen </title>
<link rel="stylesheet" type="text/css" href="styles4.css" />
</head>

<body>

<div id="container">

<div id="header"><img src="images/header.jpg" alt="Gløggspelen header" title="Gløggspelen header" /></div>

<div id="navigation">
<ul>
	<li><a href="index6.html">Hjem</a></li>
	<li><a href="pamelding.html">Påmelding</a></li>
	<li><a href="bilder.html">Bildegalleri</a></li>
	<li><a href="resultat.html">Resultatlister</a></li>
	<li><a href="linker.html">Linker</a></li>
	<li><a href="bilder.html">Kontakt</a></li>
</ul>
</div>

<div id="content">
<p id="firstletter">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing</p></div>
</div>
</body>
</html>

Videoannonse

Videoannonse
Annonse
rodolfo

rodolfo

Skrevet
Skrevet (endret)

Håper jeg kan dytte deg i riktig retning :) Har endret litt i css'en din...

 

Først bør du midtjustere siden (#container) din ved å sette margin: 0px auto og sett border-style: solid for å definere rammetypen.

La til flyt på content-elementet og satte riktig bredde i forhold til siden.

Fjernet også noen egenskaper du satte på navigation-elementet.

 

De egenskapene som jeg fjernet har jeg bare kommentert ut, så du ser hva som har blitt gjort.

 

Når man flyter elementer som jeg har gjort med navigation og content vil elementet rundt få problemer med å "forstå" innholdet, og vil endre med å "klappe" sammen. I dette tilfellet gjelder det container-elementet. Det finnes flere fiks til dette problemet, men personlig mener jeg clearfix er den beste løsningen, du kan google det så finner du sikkert en mer utfyllende forklaring på hva clearfix egentlig gjør.

Uansett så er det litt css som fikser biffen. Merk at jeg satte class="clearfix" på container-elementet.

 

Anbefaler også å sette img-elementer som block elementer som standard. I mange tilfeller legger det seg en form for padding under img-elementer som kan skape problemer. Mulig dette er grunnen til at du får et skille mellom header og de andre elementene.

 

Om du bruker firefox som nettleser anbefaler jeg deg å legge til en extension om heter firebug, denne gir deg store muligheter til å feilsøke på css/html og har en ganske bra visuell presentasjon av koden.

 

Lykke til videre med arbeidet og håper du forsto noe av det jeg har skrevet :)

 

body {
background-color: #a6d2ff;
background-repeat: no repeat;

}

#container {
/*position: relative;*/
width: 800px;
height: 600px;
/*margin: auto;*/
border: #ffffff;
border-width: 10px;

margin: 0 auto;
border-style: solid;
}


ul {
list-style-type: none;
line-height: 2;
}

h1 {

}

h2 {
}

h3 {

}

img {
width: 800px;
margin: 0 0px;
border: 0px;

display: block;
}


p {
display:block;
font-family: "book antigua";
font-size: 1em;
color: grey;
background-color: white;
padding-top: 60px;
padding-left: 60px;
padding-right: 60px;
padding-bottom: 60px;
border: 0px;
margin: auto;
height: 100%;
overflow: auto;
}

a {
font-family: "book antigua";
font-size: 1em;
text-decoration: none;
}

p:first-letter {
font-size: 3em;
float: left;
}

#header {
position: relative;
margin: auto;

}

#navigation {
float: left;
margin: auto;
width: 142px;
/*height: 100%;*/
background-color: #3379b5;
padding-top: 40px;
/*overflow: auto;*/
}

#content {
 float: right;
 width: 658px

}

#navigation a:link {
color: white;
}

#navigation a:visited {
color: #989da4;
}

#navigation a:hover {
background: #4897ff;
}

/*  CLEARFIX
################################################# */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

.clearfix {
 display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
 height: 1px;
}
.clearfix {
 display: block;
}
/* End hide from IE-mac */

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no">

<head>

<title> Gløggspelen </title>
<link rel="stylesheet" type="text/css" href="styles4.css" />
</head>

<body>

<div id="container" class="clearfix">

<div id="header"><img src="images/header.jpg" alt="Gløggspelen header" title="Gløggspelen header" /></div>

<div id="navigation">
<ul>
<li><a href="index6.html">Hjem</a></li>
<li><a href="pamelding.html">Påmelding</a></li>
<li><a href="bilder.html">Bildegalleri</a></li>
<li><a href="resultat.html">Resultatlister</a></li>
<li><a href="linker.html">Linker</a></li>
<li><a href="bilder.html">Kontakt</a></li>
</ul>
</div>

<div id="content">
<p id="firstletter">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
Lorem ipsum dolor sit amet, consectetur adipisicing</p></div>
</div>
</body>
</html>

Endret av rodolfo

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

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...