Gå til innhold

Bakgrunnsfarge i div "sprekker opp" når jeg bruker <p>, <h1>, etc

hlnd

Av hlnd
i Programmering og webutvikling

Anbefalte innlegg

hlnd

hlnd

Skrevet
Skrevet (endret)

Når jeg legger til forhåndsformatert tekst som <p> eller <h1> øverst i #contentMiddle, dukker det opp en stripe uten svart bakgrunnsfarge. Skjønner ikke hvorfor den har dukka opp, og heller ikke hvordan jeg kan få den vekk.

 

index.htm

 

 

<!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" />

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

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

</head>

 

<body>

<div id="container">

<div id="banner">

</div> <!-- end #banner-->

<div id="navbar">

</div> <!-- end #navbar-->

<div id="contentContainer">

<div id="contentMiddle">

Uformatert tekst

<h1>Overskrift</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus ipsum sit amet quam cursus aliquet. Etiam nec vestibulum justo. Nulla facilisi. Mauris sit amet ullamcorper diam. Sed pulvinar dapibus imperdiet. Etiam sit amet bibendum urna. Vestibulum leo felis, laoreet a tempor quis, tempor eget mi. Nulla eget diam felis. Nulla facilisi. Duis ullamcorper scelerisque eros at fermentum. Nulla sit amet neque lacus, at porta dui. Donec purus nisi, aliquam a vestibulum vel, posuere ut arcu. Duis bibendum velit eget felis molestie molestie. Nam suscipit eros at orci pulvinar nec vulputate metus accumsan. Nunc tincidunt tellus vel arcu molestie mattis semper purus elementum. Suspendisse vehicula, mauris ut tincidunt pharetra, erat ipsum blandit augue, et malesuada sapien purus quis nisi. Sed faucibus varius lectus ut vestibulum. Morbi vitae aliquet ipsum. Integer fringilla molestie turpis, eu suscipit purus tempor vitae. </p>

<p>Maecenas ornare lobortis est in semper. Sed sodales massa et arcu suscipit congue. Morbi imperdiet eleifend metus, a euismod eros volutpat eget. Nullam semper laoreet posuere. Aenean condimentum, felis non suscipit mollis, lectus lectus condimentum sapien, in malesuada augue massa nec leo. Phasellus sed elit lacus, viverra viverra diam. Curabitur sagittis tempus lacus, sed scelerisque dui euismod vitae. Suspendisse consectetur varius magna vulputate semper. Nulla ultricies ultricies laoreet. Etiam eu libero nisl, quis bibendum tortor. Aliquam pretium arcu in leo faucibus placerat. Morbi eleifend imperdiet lectus ut euismod. Sed non elementum nisl. Vivamus rhoncus tellus ut elit convallis blandit. Nunc dictum faucibus ipsum vel lobortis. Aenean fermentum viverra felis, sit amet interdum lacus dignissim sed. Praesent scelerisque bibendum faucibus.</p>

</div> <!-- end #contentMiddle-->

<div id="contentEnd">

</div> <!-- end #contentEnd-->

</div> <!-- end #contentContainer-->

</div> <!-- end #container-->

</body>

</html>

 

 

 

layout.css

 

 

@charset "utf-8";

/* CSS Document */

 

body {

background-color:#641e1e;

}

 

#container {

width:702px;

margin-top:10px;

margin-left:auto;

margin-right:auto;

}

 

#banner {

width:702px;

height:201px;

background-image:url(../_img/banner.jpg)

}

 

#contentContainer {

background-color:#000;

}

 

#navbar {

margin-top:30px;

height:52px;

background-image:url(../_img/navbar.jpg)

}

 

#contentMiddle {

}

 

#contentEnd {

background-image:url(../_img/main_content_bottom.jpg);

height:23px;

}

 

 

 

type.css

 

 

@charset "utf-8";

/* CSS Document */

 

#contentMiddle {

color:#FFF;

font-size:90%;

}

 

 

 

Tar ellers gjerne imot tips generelt. Er helt grønn på webdesign, det jeg kan har jeg lært sjøl. Takk på forhånd for all hjelp! :)

Endret av hlnd
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
masb

masb

Skrevet
Skrevet (endret)

Du kan like gjerne begynne å bruke et skikkelig reset-stilark. høyere ytelse enn ved bruk * {}

 

Angående det siste spørsmålet ditt så er det en grei tommelfingerregel å skrive så generelle regler som mulig i stilarket. Det gjør det enklere å holde oversikt og fører til mindre duplikat av kode. Mye kan gjøres ved bruk av selectors, framfor bruk av div og span.

 

Dessuten er det veldig viktig å resette marginer og paddinger i stilarket. Grunnen er at de forskjellig ebrowserne har ulike preferanser. En side som ser fin ut i FF kan se helt feil ut i IE, etc.

Endret av masb
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...