473,842 Members | 1,658 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
10 9222
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
.
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******** *************@g 43g2000cwa.goog legroups.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
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worl dnet.att.net> wrote:
Have you tried this site:


<URL:http://www.netmeister. org/news/learn2quote.htm l>
--
______PretLette rs:
| 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
.
My news reader does the quoting for me thanks.

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

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


<URL:http://www.netmeister. org/news/learn2quote.htm l>
--
______PretLette rs:
| 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
[ topquote fixed ]

On Tue, 07 Feb 2006 19:25:43 +0100, . <ga*******@worl dnet.att.net> wrote:
"Barbara de Zoete" <tr******@pretl etters.net> wrote in message
news:op.s4l7k3f ul8uz2z@zoete_b ...
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worl dnet.att.net>
wrote:
Have you tried this site:
<URL:http://www.netmeister. org/news/learn2quote.htm l>

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").
--
______PretLette rs:


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

--
______PretLette rs:
| 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
.
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*******@worl dnet.att.net>
wrote:
"Barbara de Zoete" <tr******@pretl etters.net> wrote in message
news:op.s4l7k3f ul8uz2z@zoete_b ...
On Tue, 07 Feb 2006 19:05:48 +0100, . <ga*******@worl dnet.att.net>
wrote:

Have you tried this site:

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

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").
--
______PretLette rs:


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
.. 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
.
"Beauregard T. Shagnasty" <a.*********@ex ample.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
.. 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="bodycont ent">...</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="bodycont ent"> ... </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,fo rm,acronym,labe l,table,td,th,s pan,a,hr,code,p re {
background-repeat: no-repeat;
}

div.layout {
position: absolute;
top: 0px;
left: 0px;
min-width: auto;
}

div.layout div.layoutborde r {
border-style: solid;
position absolute;
top: 0px;
left: 0px;
margin: 5px;
border-width: 1px;
border-color: #C8C8C8;
}

div.layout div.layoutborde r div.layoutconte nt {
vertical-align: top;
background-color: #ffffff;
}

div.layout div.layoutborde r div.layoutconte nt 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.layoutborde r div.layoutconte nt div.head div.head-left {
float: left;
vertical-align: top;
width: 25%;
height: 54px;
}

div.layout div.layoutborde r div.layoutconte nt div.head div.head-middle
{
padding: 14px;
text-align: center;
font-size: 2em;
height: 26px;
}

div.layout div.layoutborde r div.layoutconte nt div.head div.head-right {
float: right;
width: 30%;
text-align: right;
height: 54px;
}

div.layout div.layoutborde r div.layoutconte nt div.menu {
float: left;
clear: left;
width: 25%;
}

div.layout div.layoutborde r div.layoutconte nt div.body {
float: right;
clear: right;
width: 75%;
}
div.layout div.layoutborde r div.layoutconte nt div.body div.bodycontent
{
vertical-align: top;
text-align: left;
padding: 5px;
}
div.layout div.layoutborde r div.layoutconte nt 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><ti tle>SETI-1</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet " type="text/css" href="layout/DynamicTree2.cs s">
<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="layoutbo rder">
<div class="layoutco ntent">
<!-- 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="menucont ent">

<div class="DynamicT ree" id="usermenu" style="display: block;">
<div class="menu-clip">
<div class="menu-top">
<div class="username " title="a a a">
&nbsp;&nbsp;a&n bsp;a&nbsp;a
</div>
<div class="bold">&n bsp;&nbsp;<a class="logout"
href="http://localhost:8080/commons/logout.jsp">Wyl oguj&nbsp;bw</a>
</div>
</div>
<div class="menu-body" id="tree"></div>
<div class="menu-search">
<div class="bold">&n bsp;&nbsp;<a class="logout"
href="http://localhost:8080/ad/szukaj/searcha.do">Szu kaj
dokumentów</a></div>
</div>
</div>
</div>
</div>
</div>

<!-- End of page menu section -->

<!-- Page body section -->
<div class="body">
<div class="bodycont ent">

</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="bodycont ent"><!-- --></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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

54
7271
by: Max Quordlepleen | last post by:
Apologies for the crossposting, I wasn't sure which of these groups to ask this in. I have been lurking in these groups for a week or so, trying to glean what I need to design a simple, clean set of pages that get the w3c tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks to the great information in these groups. Now, however, I'm having trouble. A few days ago, I read a thread that dealt with this issue of...
4
3010
by: Juergen Lang | last post by:
Hello! I want to style a layout without the use of tables. Instead of tables, I would like to use styled div-tags. The Layout is (or better: should be) as follows: +--------------------------------+ | BG 1 | Content | BG 3 | +------+ +------+
8
3098
by: kaeli | last post by:
I have had a little free time lately to revisit a problem I have with the 3 column layout plus a header and footer. See this example: http://glish.com/css/7.asp There is a header and 3 columns. Pretend there's a footer at the bottom, too. :) Here are the issues I have been unable to solve without tables _somewhere_
1
498
by: matuszewski.lukasz | last post by:
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...
2
7472
by: bj | last post by:
Hi, Yes, this is yet another "switching from tables to divs for layout purposes" post. I have been searching for the past few hours to find what I'm looking for as I hate posting unnecessarily. I am a pretty crap searcher but I'm kinda sure this hasn't been written about yet. Please feel free to prove me wrong and link to a solution. Otherwise I'd appreciate any advice you may have. I have a situation where I have a window that has...
7
1388
by: lotusny78 | last post by:
Hi all, I'm trying to lay out 3 text boxes with associated labels horizontally, as in the following pseudocode: <form> TITLE label1 label2 label3 edit1 edit2 edit3
1
2680
by: rockdale | last post by:
Hi, all I am change my webpage to using div and css for my layout, it was using table before and I want to get rid of it. Basically it draws a box around my content using background pictures, but I can not get the left-border and right-border of the box working using div. Anybody can help me? Thanks in advance
4
5509
by: ochocki | last post by:
Hi, On site I create there is a lot of tables. Those tables are of course generated using Table class, which generates html tables using <table>/ <trand <tdtags. It is very trendy and recomended to use DIV tags to build tabular views. The question is how to achieve it using ASP .NET? I know I can throw out Table class and implement my own Table deriving it from WebControl. But this does not make sense to me (I think it's
4
1941
by: CdnRebel | last post by:
Hi, I have double checked and triple checked, but I cannot figure out why my second image (the picture in div.top2) is not displaying. The spelling is right. I have attached the files. Also is there a way of aligning all the pictures towards the centre with the wording beneath lined up nicely as well? Thanks for any help, Mary <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
0
9715
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10944
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10672
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10313
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9453
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7035
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5884
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4089
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3144
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.