.. napisal(a):
Have you tried this site:
I was hopeing that someone knowlegable will tell me, that i am using
too many outside divs for positioning... or maybe someone will point me
a useful clue (and not some links to materials, anyway thanks for that
too). I also forgot to mention that this layout works
perfectly when content inside <div class="bodycontent">...</div> can be
fit inside of
user-agent window.
<URL:http://localhost/www/layout.htm>
<URL:http://localhost/www/layout2.htm> <!-- here you see only one table
inside <div class="bodycontent"> ... </div>, which in turn here will
not fit inside mentioned div, however it fits in example here:
<URL:http://localhost/www/layout.htm> -->
Here is a layout part of CSS file mentioned above:
----- <seti2.css>
------------------------------------------------------------------------------------------------------------
body {
background-color: #ffffff;
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: helvetica, verdana, sans-serif, arial;
font-size: 11px;
}
p,strong,div,form,acronym,label,table,td,th,span,a ,hr,code,pre {
background-repeat: no-repeat;
}
div.layout {
position: absolute;
top: 0px;
left: 0px;
min-width: auto;
}
div.layout div.layoutborder {
border-style: solid;
position absolute;
top: 0px;
left: 0px;
margin: 5px;
border-width: 1px;
border-color: #C8C8C8;
}
div.layout div.layoutborder div.layoutcontent {
vertical-align: top;
background-color: #ffffff;
}
div.layout div.layoutborder div.layoutcontent div.head {
clear: both;
width: 100%;
border-width: 1px;
border-color: #C8C8C8;
border-style: none none solid none;
background-image: url(logo_bg.gif);
background-repeat: repeat-x;
}
div.layout div.layoutborder div.layoutcontent div.head div.head-left {
float: left;
vertical-align: top;
width: 25%;
height: 54px;
}
div.layout div.layoutborder div.layoutcontent div.head div.head-middle
{
padding: 14px;
text-align: center;
font-size: 2em;
height: 26px;
}
div.layout div.layoutborder div.layoutcontent div.head div.head-right {
float: right;
width: 30%;
text-align: right;
height: 54px;
}
div.layout div.layoutborder div.layoutcontent div.menu {
float: left;
clear: left;
width: 25%;
}
div.layout div.layoutborder div.layoutcontent div.body {
float: right;
clear: right;
width: 75%;
}
div.layout div.layoutborder div.layoutcontent div.body div.bodycontent
{
vertical-align: top;
text-align: left;
padding: 5px;
}
div.layout div.layoutborder div.layoutcontent div.foot {
clear: both;
width: 100%;
border-style: solid none none none;
border-width: 1px;
border-color: #C8C8C8;
background-color: #FFFCB4;
text-align: right;
height: 1em;
}
/* other styles are mainly for style of tables and forms */
--- </seti2.css>
------------------------------------------------------------------------------------------------------------
Here is part of page responsible for layout:
----- <layout.htm>
---------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>SETI-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="layout/DynamicTree2.css">
<link rel="stylesheet" type="text/css" href="layout/seti2.css">
<link rel="stylesheet" type="text/css" href="layout/bw.css">
<script type="text/javascript" src="layout/ie5.js"></script>
<script type="text/javascript" src="layout/DynamicTree.js"></script>
<script type="text/javascript" src="layout/bw-popup.js"></script>
<script type="text/javascript"
src="layout/className.js"></script><!--[if lt IE 7]>
<script src="layout/ie7-standard-p.js"
type="text/javascript"></script>
<script src="layout/ie7-recalc.js" type="text/javascript"></script>
<![endif]--></head><body>
<div class="layout">
<div class="layoutborder">
<div class="layoutcontent">
<!-- Page header section -->
<div class="head">
<div class="head-left"></div>
<div class="head-right"></div>
<div class="head-middle"></div>
</div>
<!-- End of page header section -->
<!-- Page menu section -->
<div class="menu">
<div class="menucontent">
<div class="DynamicTree" id="usermenu" style="display: block;">
<div class="menu-clip">
<div class="menu-top">
<div class="username" title="a a a">
a a a
</div>
<div class="bold"> <a class="logout"
href="http://localhost:8080/commons/logout.jsp">Wyloguj bw</a>
</div>
</div>
<div class="menu-body" id="tree"></div>
<div class="menu-search">
<div class="bold"> <a class="logout"
href="http://localhost:8080/ad/szukaj/searcha.do">Szukaj
dokumentów</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- End of page menu section -->
<!-- Page body section -->
<div class="body">
<div class="bodycontent">
</div>
</div>
<!-- End of page body section -->
<!-- Page footer section -->
<div class="foot">
<span class="credits"> SETI Team 2005 </span>
</div>
<!-- End of page footer section -->
</div>
</div>
</div>
</body>
</html>
----- </layout.htm>
---------------------------------------------------------------------------------------------------------
I tried and tried anything (any combination of techniquest with
position: absolute and float'ed elements...), and i failed. I guess it
must be calculating problem of Firefox and other browsers... so
at this point i found only one solution, based on JavaScript (so it is
not a solution... from historical point of view Netscape Navigator 4
used this techniques quietly...). Script must
run on event onload (when page is loaded) and must compute the width
needed for <div class"layout">...</div> taking into account the width
of user-agent viewport. It must calculate the width needed for <div
class="bodycontent"><!-- --></div> by trawersing the entire DOM inside
it... but here i don't know if it will always work (the algorithm will
be quite complicated, as complicated as layouting rules defined be CSS2
and HTML 4.01)...
BR.
Luke Matuszewski.
PS or maybe i am wrong ? (maybe someone more knowlegable will help me ?)
