[thelist] Total separation of content and presentation

Tue Dec 21 10:22:26 CST 2004

Ellen,

Okay... now I get it...

You understand that you need a <div></div> tag around the things you want to
position. Good.

Positioning of <div> tags are always css dependant. What you see when you
stack them up inside the page unstyled, is that they're inheriting their
positions... that isn't permanent... just a kind of 'default'... one falls
after the one before it.

You want to position them individually... fine:

What you need to do is an an 'id' to each tag... once named, the positioning
is up to you and manipulated based on the stylesheet.

Below are two div tags that are positioned with absolute positioning. 
Meaning, they are positioned within relation to the page, and not each
other... you can even overlap them if you want... 

Using the three types of positioning you get:

Absolute places the layer using the coordinates entered in the Placement
boxes relative to the top left corner of the page.

Relative places the layer using the coordinates entered in the Placement
boxes relative to object's position in the text flow of the document. This
option is not displayed in the Document window.

Static places the layer at its location in the text flow.

So here, the layout is all in the div tags.

Frankly... that leaves you with a lot of numbers to manage...

You may want to consider blocking out the layout with some <div> containers
and then plopping your stuff into it also contained in div tags.

Showing us an example of what you're trying to do might help too...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#divStory1 {
	border: 1px solid #000000;
	position: absolute;
	left: 10px;
	top: 10px;
	width: 100px;
}
#divStory2 {
	position: absolute;
	left: 300px;
	top: 50px;
	width: 200px;
}
-->
</style>
</head>

<body>
<div id="divStory1">This is the first div tag. it contains the lead story
for today... I put it here and then I move it around as I see fit. </div>

<div id="divStory2">This is my second Div. I've moved it over to the other
side of the page, 'cause that is where I want it. </div>
</body>
</html>

-----------------
c:/dos
c:/dos/run
run/dos/run
>>
-----------------

> -----Original Message-----
> From: thelist-bounces at lists.evolt.org [mailto:thelist-
> bounces at lists.evolt.org] On Behalf Of Ellen Kanner
> Sent: Tuesday, December 21, 2004 10:28 AM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] Total separation of content and presentation
> 
> We are looking to use <divs>, most definitely.
> 
> What we're trying to accomplish is a page laid out in the CSS,
> independent of the order/structure it appears in the HTML.  <divs> that
> are independent of one another and could be relocated, within the CSS,
> without having to go into the HTML.  Not using container <divs>, if
> it's possible.
> We're trying to establish our 'perma-code', so should a new design come
> down the pike, we could modify the style sheets in a few locations,
> rather than go in to thousands of HTML pages and do the restructuring
> there. Anyone done tests without container <divs> and hacks? Our layout
> will be three fluid columns, any length, with flexible vertical sizing
> on divs so text can be resized.
> 
> We'd like to talk with anyone who has experience with this...
> 
> : )  ellen
> 
> 
> 
> On Dec 21, 2004, at 9:34 AM, Tony Crockford wrote:
> 
> At 14:01 on Tuesday, 21 Dec 2004, Ellen Kanner wrote:
> 
> > We've been searching far and wide without (complete) success, and it
> > may not be possible. But, before we give in and use divs instead of
> > tables, we thought we'd ask if anyone has worked on this.
> >
> > Can you help?
> 
> CSS can only position elements on a page.  usually you group a number
> of paragraph elements in a div and position that.
> 
> I'm not sure I'm clear on how you plan to position groups of elements
> without using divs.  I'm also unclear as to why you'd want to do this?
> 
> a simply structured html document:
> 
> <div id="header"></div>
> <div id="nav"></div>
> <div id="content"></div>
> <div id="footer"></div>
> 
> makes more sense than trying to layout individual paragraphs, links and
> lists.
> 
> perhaps you could explain in more detail what you hope to acheive?
> 
> ;o)
> --
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvesterand
> archives of thelist go to: http://lists.evolt.orgWorkers of the Web,
> evolt !
> 
> -o-   -o-   -o-   -o-   -o-   -o-   -o-
> ellen kanner
> web producer/designer
> web publishing services
> dartmouth college, hanover, nh
> --
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !