By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,743 Members | 1,122 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,743 IT Pros & Developers. It's quick & easy.

How to make layout without tables (using div's)...

P: n/a
Hi.
I am trying to make correct layout, here is an example of (dynamically
generated content via jsp):

http://localhost/www/layout.htm

Most outer div is positioned absolute (if not then it will not grow
when content inside div.body is greater than width of window of user
agent), anyway anyone knowlegable can see it in sources...

On IE6 the layout grow, but background are not applied.
On Firefox 1.5 layout grow, but not all tables are inside it.

On Netscape 8/Mozilla 1.7.12/Opera 8.5 the layout is not growing, so i
have trouble...

Can anyone knowlegable help me ? (CSS rules are in seti2.css).

Best regards.
Luke Matuszewski

Feb 7 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Luke napisal(a):
http://localhost/www/layout.htm

Sorry my mistake, correc URL is:

http://milt.eu.org/~luk/files/layout/layout.htm (sorry for badly
looking characters - the page should be served as UTF-8 not ISO-....)

Feb 7 '06 #2

P: n/a
.
Have you tried this site:
http://glish.com/css/

or:
http://www.alistapart.com/articles/practicalcss/

or this article about whether tables or CSS is better:
http://www.alistapart.com/articles/practicalcss/

Good luck

"Luke" <ma****************@gmail.com> wrote in message
news:11*********************@g43g2000cwa.googlegro ups.com...
Luke napisal(a):
http://localhost/www/layout.htm

Sorry my mistake, correc URL is:

http://milt.eu.org/~luk/files/layout/layout.htm (sorry for badly
looking characters - the page should be served as UTF-8 not ISO-....)

Feb 7 '06 #3

P: n/a
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worldnet.att.net> wrote:
Have you tried this site:


<URL:http://www.netmeister.org/news/learn2quote.html>
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Feb 7 '06 #4

P: n/a
.
My news reader does the quoting for me thanks.

Jim W.
http://www.gatorgrad.com

"Barbara de Zoete" <tr******@pretletters.net> wrote in message
news:op.s4l7k3ful8uz2z@zoete_b...
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worldnet.att.net> wrote:
Have you tried this site:


<URL:http://www.netmeister.org/news/learn2quote.html>
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

Feb 7 '06 #5

P: n/a
[ topquote fixed ]

On Tue, 07 Feb 2006 19:25:43 +0100, . <ga*******@worldnet.att.net> wrote:
"Barbara de Zoete" <tr******@pretletters.net> wrote in message
news:op.s4l7k3ful8uz2z@zoete_b...
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worldnet.att.net>
wrote:
Have you tried this site:
<URL:http://www.netmeister.org/news/learn2quote.html>

My news reader does the quoting for me thanks.


Appearently not. That might be because you don't use a newsreader. You use
some e-mailclient that is not up to the task. So, while you're at it,
better read this too:
<URL:http://home.in.tum.de/~jain/software/oe-quotefix/>
Jim W.


That should also solve the problem of setting up a proper signature block
with a proper sig seperator (if this is all getting to be a bit too much,
just google for "signature block" and for "sig seperator").
--
______PretLetters:


And it should fix the problem of you leaving other peoples signature
blocks in your reply.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Feb 7 '06 #6

P: n/a
.
I guess I'm not a very bright man. I installed the quotefix and so far it
only confuses me. Perhaps if I have time I'll look into more. Thanks for
your suggestion.

Barbara de Zoete wrote:
[ topquote fixed ]

On Tue, 07 Feb 2006 19:25:43 +0100, . <ga*******@worldnet.att.net>
wrote:
"Barbara de Zoete" <tr******@pretletters.net> wrote in message
news:op.s4l7k3ful8uz2z@zoete_b...
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worldnet.att.net>
wrote:

Have you tried this site:

<URL:http://www.netmeister.org/news/learn2quote.html>

My news reader does the quoting for me thanks.


Appearently not. That might be because you don't use a newsreader.
You use some e-mailclient that is not up to the task. So, while
you're at it, better read this too:
<URL:http://home.in.tum.de/~jain/software/oe-quotefix/>
Jim W.


That should also solve the problem of setting up a proper signature
block with a proper sig seperator (if this is all getting to be a bit
too much, just google for "signature block" and for "sig seperator").
--
______PretLetters:


And it should fix the problem of you leaving other peoples signature
blocks in your reply.
weblog | http://www.pretletters.net/weblog/weblog.html |
webontwerp | http://www.pretletters.net/html/webontwerp.html |
zweefvliegen | http://www.pretletters.net/html/vliegen.html |

Feb 7 '06 #7

P: n/a
.. wrote:
My news reader does the quoting for me thanks.


Yes, but you are typing above the quote. It's called top-posting and is
frowned upon in most technical newsgroups. The conversation ends up
being like this:

open the front cover and begin reading there?
the back cover and end up at the front or do you
chapter one or do you start somewhere near
When reading a book, do you start at

Before beginning your reply, press the DownArrow key, and respond to the
points of the quote underneath them. Open up a couple of blank lines at
that spot first.

--
-bts
-Warning: I brake for lawn deer
Feb 7 '06 #8

P: n/a
.
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:11******************************@40tude.net.. .
Before beginning your reply, press the DownArrow key, and respond to the
points of the quote underneath them. Open up a couple of blank lines at
that spot first.


Thanks for the tip
Feb 7 '06 #9

P: n/a
.. 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">
&nbsp;&nbsp;a&nbsp;a&nbsp;a
</div>
<div class="bold">&nbsp;&nbsp;<a class="logout"
href="http://localhost:8080/commons/logout.jsp">Wyloguj&nbsp;bw</a>
</div>
</div>
<div class="menu-body" id="tree"></div>
<div class="menu-search">
<div class="bold">&nbsp;&nbsp;<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 ?)

Feb 7 '06 #10

P: n/a
....found bugs in my prevous post/ex. Here is corrected:

Luke napisal(a):
[...]
<URL:http://milt.eu.org/~luk/layout/layout.htm>
<URL:http://milt.eu.org/~luk/layout/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://milt.eu.org/~luk/layout/layout.htm> --> [...] div.layout div.layoutborder {
border-style: solid;
top: 0px;
left: 0px;
margin: 5px;
border-width: 1px;
border-color: #C8C8C8;
}

[...]

BR.
Luke Matuszewski.

Feb 7 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.