http://home.no/thinkbig/dvdsource/index.html
här har du sidan.. tagit bort bg_test.gif. räckte med #fff...
CSS- div positionering
HTML & CSSur HTML, XHTML & CSS
28 svar · 1 039 visningar · startad av captain · sida 2 av 2
Frågan, av captain
Hej Jag gav mig in på att göra en egen css mall. men vad jag inte riktigt får kläm på hur div fungerar tillsammans med css absolut positionering. Jag försöker hela tiden få dit vissa divtabeller som jag vill men det går aldrig som jag själv vill när jag sätter dit px värdena. jag lägger upp min kod här. jag har säkert gjort några uppenbara fel men jag kan inte hitta felet eftersom jag inte rik
Läs frågan i sin helhet →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