Gå til innhold

linjeskift over <body> ?!

sygard

Av sygard
i Programmering og webutvikling

Anbefalte innlegg

sygard

sygard

Skrevet
Skrevet

Hei web programmers!

 

Leker meg litt med html og css. Er det noen som kan si meg hvorfor jeg ikke får <body> tagen min til å fylle hele siden oppover? Jeg får en "newline" på toppen av dokumentet i nettleseren slik at jeg ikke kan sette bakgrunn eller fylle inn tekst her. (mulig du kan sette bakgrunn ved å bruke styles i html-taggen, men ønsker ikke dette.)

 

Jeg har studert litt, og det ser ut som problemet kommer av <!DOCTYPE *******> deklareringen på toppen av dokumentet. Fjerner jeg denne, klarer body (og etterkommende div's) å fylle opp hele vinduet i nettleseren, uten den irriterende linjeskiften på toppen. (ikke i firefox... men i Opera fungerer det slik jeg vil.).

 

ja!: sånn vil jeg ha det

nei!: sånn blir det når jeg har <!DOCTYPE ***> deklarasjonen på toppen av dokumentet.

 

Jeg vil jo gjerne ha <!DOCTYPE ***> vil jeg ikke ?

  • Er det noen som har peil på hvorfor dette skjer?
  • Er det fordi jeg bruker strict?
  • Trenger jeg <!DOCTYPE ****> deklarasjonen i det hele tatt?

html koden:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/def_styles.css" />
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<title>title</title>
</head>
<body>
<div id="mainContainer">
<h2>heading 2</h2>
<p>some text</p>
</div>
</body>
</html>

 

css koden:

html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
a a:visited a:active {
text-decoration: none;
color: red;
}
a:hover {
text-decoration: underline;
color: green;
}
div#mainContainer {
margin: 0;
padding: 0;
background: #333333;
text-align: center;
color: white;
height: 100%;
}

/sygard.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
TSP

TSP

Skrevet
Skrevet (endret)

Det jeg tror er feil er at du ikke nullstiller i CSS-riktig. Jeg ser blant annet at du bruker:

 

margin: 0;
padding: 0;

 

..tre ganger i filen din.

 

Det har seg slik at noen nettlesere har sine standardverdier på enkelte css-koder. For eksempel kan standardmarginen være forskjellig i Opera og Firefox (jeg husker ikke de konkrete tallene de bruker).

 

Dette problemet hindrer man ved å lage en regel og det lager man med "*"

 

* {
margin: 0;
padding: 0;
}

 

Margin og padding vil da bli nullstilt på absolutt alle verdier.

 

Dette skal løse problemet ditt. Den svarte boksen du kan flytte på kan da bli litt smalere, men da kan du løse ved å sette for eksempel "padding: 10px;" på div#mainContainer.

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