http://home.no/thinkbig/dvdsource/index.html
här har du sidan.. tagit bort bg_test.gif. räckte med #fff...
CSS- div positionering
28 svar · 1 039 visningar · startad av captain · sida 2 av 2
sidan ser bra ut i IE men det gör den inte på FF.. blir utrymme. någon annan med FF se och kolla ?
Kan du ta ett skärmdump och lägga upp här så får vi se?
Sätt background till enbart #fff för maincontent.
maincontent {
background: #fff;
margin: 0 auto;
padding: 0;
width: 650px;
min-width: 650px; }
Alternativt kan du använda dig av bakgrundsbilden jag gjorde och göra den helt vit. I så fall gäller följande egenskap för maincontent:
background: #fff url(bg_test.gif) repeat-y 50% 0;
Dina lösninar hjälpte inte. Menjag löst det hela genom att lägga in <br style="clear:both" /> precis efter #left-col diven.
Då föll allt på sin plats.
m_soderlund du ska ha ett stort eloge som stod ut med mina frågor.
tack för mig :)
Vad bra att det löste sig..! Ett tips bara: har man skrivit alla stilar i en separat stilmall så är det inkonsekvent att helt plötsligt börja ge specifika element på sidan egenskaper så som du har gjort. Använd i stället p-elementet och en klass. Så här ser klassen ut:
.clb { clear: both; }
<p class="clb"></p>
gjorde exakt så, men det gick inte. jättemärkligt.
jag har iallafall lösning på det. men för eventuella intressen lägger jag upp koderna här nu
HTML
<!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" xml:lang="sv" lang="sv">
<head>
<title>DvdSource</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="body.css" media="screen" />
</head>
<body>
<div id="header"></div>
<div id="maincontent">
<div id="left-col">
<ul id="navlist">
<li>Hem</li>
<li>Nyheter</li>
<li>Tjänster</li>
<li>Kontakt</li>
</ul>
</div>
<div id="content">Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej
<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hejv
<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej
<br>Hej<br>Hej<br>Hej</div>
<div id="right-col">Högerkolumn</div><p class="clb"></p>
</div>
<div id="footer">sidfot</div>
</body>
</html>
CSS
body {
background-color: #c0c0c0;
font: 12px Verdana,Arial,Helvetica,sans-serif;
text-align: left;
margin: 0;}
ul {
list-style: none;
margin:0px;}
.clb { clear: both; }
#maincontent {
background: #fff url(bgwhite.gif) repeat-y 50% 0;
margin: 0 auto;
padding: 0;
width: 650px;
min-width: 650px;
}
#header {
margin: 0 auto;
background: #fff url(header.jpg);
width: 630px;
height: 80px;
padding: 10px; }
#left-col {
background: #f33;
margin:0px;
float: left;
width: 110px;
min-width: 110px;
padding: 10px;
}
#content {
background-color: #fff;
float: left;
width: 370px;
padding: 10px;
}
#right-col {
background-color: #fff;
float: left;
width: 110px;
padding: 10px 10px 10px 10px;
}
#footer {
background-color: #000;
margin: 0 auto;
width: 630px;
padding: 10px 10px 0px 10px;
clear: both; }
#navlist{}
MIN LÖSNING
<!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" xml:lang="sv" lang="sv">
<head>
<title>DvdSource</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="body.css" media="screen" />
</head>
<body>
<div id="header"></div>
<div id="maincontent">
<div id="left-col">
<ul id="navlist">
<li>Hem</li>
<li>Nyheter</li>
<li>Tjänster</li>
<li>Kontakt</li>
</ul>
</div>
<div id="content">Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej
<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hejv
<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej<br>Hej
<br>Hej<br>Hej<br>Hej</div>
<div id="right-col">Högerkolumn</div>
[B]<br style="clear:both" />[/B]
</div>
<div id="footer">sidfot</div>
</body>
</html>
Hm, märkligt. Dock en grej: när man använder XHTML så finns det lite saker att tänka på - en del saker skiljer sig från HTML.
Till exempel ska man skriva <br /> i stället för <br>. Det har att göra med att alla taggar måste ha en sluttagg. br-elementet har ingen sluttagg så då skriver man <br /> i stället (samma sak med <hr />.
Läs mer här:
- Differences between XHTML and HTML
- XHTML syntax
- XHTML DTD