KrezniMedlem sedan nov. 20055 inlägg
Tja!
Har suttit ett tag och funderat, sökt igenom forum och allmänt dratt mig själv i håret utan att hitta någon vidare bra lösning på detta problem.
Sidan finns att beskåda på http://krezni.netcrew.nu/nitanaldi/nit.html.
Som ni ser finns det en scrollbar som jag vill eliminiera.
Jag har satt höjden till 100% på alla element utan headern och det verkar vara det som krånglar till det, eftersom den extra biten är 70 pixlar, exakt lika stor som headern. Tar jag bort headern blir det utmärkt.
HTML:
<body>
<div id="content">
<div id="head">
</div>
<div id="wrapper">
<div id="leftcol"></div>
<div id="main"></div>
<div id="menu"></div>
<div id="boxarea">
<div id="box">
</div>
</div>
</div>
</div>
</body>
CSS:
html, body{
height: 100%;
}
body{
margin: 0px;
padding: 0px;
background: #000;
font-family: verdana;
width: 100%;
}
#content{
height: 100%;
}
#head{
position:abolsute;
background: url(gfx/header.jpg) no-repeat;
background-color: #DFD2B3;
width: 100%;
height: 70px;
}
#wrapper {
height: 100%;
width: 100%;
}
#leftcol {
background: url(gfx/leftcol.gif) repeat-x;
background-color: #9D7957;
width: 11px;
position: absolute;
height: 100%;
z-index: 100;
}
#main{
background: url(gfx/main.gif) repeat-y;
width: 393px;
margin-left: 11px;
position: absolute;
height: 100%;
z-index: 100;
}
#menu{
background: url(gfx/leftcol.gif) repeat-x;
width: 206px;
background-color: #9D7957;
position: absolute;
margin-left: 404px;
height: 100%;
z-index: 100;
}
#boxarea{
background: url(gfx/leftcol.gif) repeat-x;
background-color: #000;
position: absolute;
width: 100%;
z-index: 99;
height: 100%;
}
Tacksam för all hjälp jag kan få med detta.
tompeMedlem sedan juni 2004240 inlägg
Har inte kollat html-koden men du har iaf. stavat fel på position: absolute; under #head.
bossseMedlem sedan juni 2003718 inlägg
Detta bör väl funka, har minimerat din css-kod. Har du noll på alla padding o margin så räcker detta, och ingen enhet behövs när värdet är noll.
Dessutom behövs ingen enen deklaration för body.
HTML, BODY {WIDTH:100%;HEIGHT:100%;PADDING:0;BACKGROUND:#000; MARGIN:0;FONT-FAMILY:verdana; OVERFLOW:HIDDEN;}
oskobMedlem sedan maj 20021 513 inlägg
Det som ställer tilldet är ju dead-diven. Tar man bort den försvinner scrollen och dokumentet passar perfekt. Det verkar som att den inte fattar att den ska bli 100% av den wrappern den ligger i.
KrezniMedlem sedan nov. 20055 inlägg
Ang.
Jo head diven ställer till det. Utan den är det ju perfekt.
Enda lösningen jag har hittat är att med hjälp av javascript hitta skärmupplösningen och sedan räkna lite matte för att få ut exakt rätt värde.
Men det verkar lite overkill, borde ju finnas ett lite lättare sätt att lösa det på tycker man.
jarvkloMedlem sedan juli 20013 295 inlägg
När du anger 100% på wrappern, relateras det som 100% av webbläsarfönstrets höjd...
Ditt problem är att du har headern ovanför wrappern - vilket ger att du altid får en totalhöjd på headerhöjden + wrapperhöjden...
Men du kan ju alltid lägga in headern i wrappern och köra utan absolutpositioneringar ;)
Här är ett alternativ till din kodning som är upplagt enligt den principen (om jag förstår dina intentioner rätt nu :) )...
Den bruna bakgrundsfärgen som saknas, får du lägga till genom att du breddar bilden main.gif (se http://www.alistapart.com/articles/fauxcolumns/ för varför), och när du gjort det kan du ta bort "11px top" från background: för #content ;)
<!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" lang="sv" xml:lang="sv">
<head>
<title>Nitanaldi - ett alternativ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
height: 100%; margin: 0px; padding: 0px;
font-family: verdana sans-serif;
background: #000 url(http://krezni.netcrew.nu/nitanaldi/gfx/leftcol.gif) left 70px repeat-x;
}
#content{
height: 100%;
background: url(http://krezni.netcrew.nu/nitanaldi/gfx/main.gif) 11px top repeat-y;
}
#head{
background: #DFD2B3 url(http://krezni.netcrew.nu/nitanaldi/gfx/header.jpg) no-repeat;
height: 70px;
}
#main{
padding-top: 25px;
width: 393px;
padding-left: 11px;
float: left;
}
#menu{
padding-top: 25px;
width: 206px;
margin-left: 404px;
color: white;
}
#wrapper {
float:left;
width: 614px;
}
#boxarea{
padding-top: 25px;
margin-left: 614px;
color: white;
}
</style>
</head>
<body>
<div id="content">
<div id="head">
</div>
<div id="wrapper">
<div id="main">Detta är main</div>
<div id="menu">Detta är menu</div>
</div>
<div id="boxarea">
Detta är boxarea
<div id="box">
</div>
</div>
</div>
</body>
</html>
:bire
KrezniMedlem sedan nov. 20055 inlägg
Tack!
Tack för koden, dock löste den inte alla problem.
Men som du ser här så kom inte "linjen" under headern med över allt.
http://krezni.netcrew.nu/nitanaldi/test.html
Vad beror detta på?
jarvkloMedlem sedan juli 20013 295 inlägg
Visstja!
Tänkte inte på den - tillbaka till din originaltanke med en #leftcol då (fast parat med den nya main2-bilden :) )
<!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" lang="sv" xml:lang="sv">
<head>
<title>Nitanaldi - ett alternativ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
height: 100%; margin: 0px; padding: 0px;
font-family: verdana sans-serif;
background: #000 url(http://krezni.netcrew.nu/nitanaldi/gfx/leftcol.gif) left 70px repeat-x;
}
#content{
height: 100%;
background: url(http://krezni.netcrew.nu/nitanaldi/gfx/main2.gif) repeat-y;
}
#head{
background: #DFD2B3 url(http://krezni.netcrew.nu/nitanaldi/gfx/header.jpg) no-repeat;
height: 70px;
}
#leftcol {
float:left;
width: 11px;
background: url(http://krezni.netcrew.nu/nitanaldi/gfx/leftcol.gif) left top repeat-x;
}
#main{
padding-top: 25px;
width: 390px;
float: left;
}
#menu{
padding-top: 25px;
width: 206px;
margin-left: 400px;
color: white;
background: url(http://krezni.netcrew.nu/nitanaldi/gfx/leftcol.gif) left top repeat-x;
}
#wrapper {
float:left;
width: 614px;
}
#boxarea{
padding-top: 25px;
margin-left: 614px;
color: white;
}
</style>
</head>
<body>
<div id="content">
<div id="head">
</div>
<div id="wrapper">
<div id="leftcol"> </div>
<div id="main">Detta är main</div>
<div id="menu">Detta är menu</div>
</div>
<div id="boxarea">
Detta är boxarea
<div id="box">
</div>
</div>
</div>
</body>
</html>
Resten är förmodligen mest en fråga om att hålla rätt antal pixlar i margin-left och width+padding på de olika kolumnblocken... :birp
