Hej jag har gjort en liten hemsida med css och <div>ar för att testa. Tidigare har jag använt tabeller för att få allt på plats.
Sidan ser ut som den ska i IE7 men i Firefox går det helt åt skogen.
Texten hamnar utanför sidan och under menyn :l
Hur ska css-koden se ut för att det ska bli bra i firefox???
index.html
<html>
<head>
<title>TEST FIREFOX</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
HJALP FIREFOX
</div>
<div id="menu">
<ul>
<li><a href="?p=1">Sida 1</a></li>
<li><a href="?p=2">Sida 2</a></li>
</ul>
</div>
<div id="main">
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
</div>
<div id="footer">
Text i footer
</div>
</div>
</body>
</html>
style.css
body {
background-color:#000000;
color:#FF0000;
}
#container {
background-color:#FFFFFF;
width:800px;
height:500px;
margin:100px;
}
#header {
background-color:#666666;
width:800px;
height:100px;
}
#menu {
float:left;
background-color:#999999;
width:170px;
height:100%;
}
#footer {
background-color:#666666;
width:800px;
height:50px;
}
PalleMedlem sedan apr. 20002 716 inlägg 1. Börja med att använda en Doctype så webbläsaren vet hur den ska rendera din sida.
2. När du använder float måste du alltid se till att återställa ordningen med clear.
Lycka till! :)
Danne VMedlem sedan aug. 20067 685 inlägg FF gör nog precis som du skriver och inte skriver. Du har ingen stil på #main över huvud taget, och du har satt "height" på både #container och #menu vilket är helt onödigt.
Dessutom behöver du ett clear:both för att trycka ner footern och en doctype (DTD). Testa att bygg vidare på det här:
<!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">
<head>
<title>TEST FIREFOX</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
HJALP FIREFOX
</div>
<div id="menu">
<ul>
<li><a href="?p=1">Sida 1</a></li>
<li><a href="?p=2">Sida 2</a></li>
</ul>
</div>
<div id="main">
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
<p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p><p>Text på sidan.</p>
</div>
<div style="height:0px; clear:both;"></div>
<div id="footer">
Text i footer
</div>
</div>
</body>
</html
body {
background-color:#000000;
color:#FF0000;
}
#container {
background-color:#FFFFFF;
width:800px;
margin:100px;
}
#header {
background-color:#666666;
width:800px;
height:100px;
}
#menu {
float:left;
background-color:#999999;
width:170px;
}
#footer {
background-color:#666666;
width:800px;
height:50px;
}
#main {
float:left;
}
Tack så mycket, för snabba svar!!! :)
En sak till
Jag vill att menyns höjd ska anpassa sej efter "main" <div>en så att bakgrunden går ända ner, hur ska jag göra??
Danne VMedlem sedan aug. 20067 685 inlägg
parabol_daniel skrev:
En sak till
Jag vill att menyns höjd ska anpassa sej efter "main" <div>en så att bakgrunden går ända ner, hur ska jag göra??
Det går inte utan ganska mycket krångel eller med javascript. Tyvärr. Det enklaste är faktiskt om du gör en bakgrundsbild som du lägger in i #container oc repeterar vertikalt. Du gör alltså vänsterdelen av bilden som en bakgrund till menyn och högerdelen som bakgrund till #main. Då ser det ut som om #meny och #main alltid är lika höga.
Red: Såg nu att Palle också påpekat vikten av DTD och en clear.
