need strategy for placing several DIV tags on the left hand side

[photoxprt1868]

Hello,

I've got a page that contains a few "buckets" on the left hand side. Each bucket is it's own SSI inside a DIV tag. The problem is that not all buckets are needed for every sub-page, so how do I do the positioning (in the style sheet) so that when one bucket is not included in one page, the others below that one move up. The x-position will not change, and the top first bucket will be in every page. So I guess that first bucket could be the anchor for every other bucket.

Thanks in advance

 

[Vragabond]

When in normal flow, divs will follow each other. If one is skipped than the next one will take its place. If you are using some kind of positioning to achieve the effect and you chose not to share that with us, we can't really help much.

 

[photoxprt1868]

no I don't mind at all. Below is a chunk of the style sheet, where you can see that I'm using absolute positioning. Like I said, the x-axis is fixed, but the y may change.

#leftSection {
  position:absolute;
		left:28px;
		top:162px;
		width:124px;
		background:#f1f1f1;
}

#leftSection h1 {
		font-size:10pt;
		font-weight:bold;
  margin:2px 6px 0px 10px;
}

#leftSection p {
		font-size:10pt;
  margin:10px 6px 3px 10px;
}

#leftSection ul {
		font-size:10pt;
	 list-style: none;
	 margin-left:1px;
	 padding-left:1px;
		list-style-image:url(/images/bullet.gif);
	}
	
#contentSection {
  position:absolute;
		left:134px;
		top:100px;
		width:463px;
		background:#ffffff;
		list-style-image: url(/images/bullet.gif);
		margin:5px 10px 5px 10px;
}

#contentSection h1 {
		font-size:18px;
		font-weight:bold;
  margin-top:2px;
}

#contentSection h2 {
		font-size:15px;
		font-weight:bold;
		color:#000066;
}

#contentSection p.list {
  margin:10px 6px 0px 0px;
}

#contentSection p.header {
  font-size:12px;
		text-align:right;
		vertical-align:middle;
		margin-bottom:0px;
}

#contentSection img.header {
  vertical-align:middle;
}

#contentSection table {
		border-collapse:collapse;
		empty-cells:show;
}

 

[Vragabond]

Ok, first of all, if I were you I would restructure your page to use no or little absolute positioning. When possible, it is best to be avoided.

I still cannot see any of these divs you describe. But using absolute positioning, it will be a pain to position them while in normal flow they will stack up just like you want them without effort.

 

[photoxprt1868]

left section is a DIV tag, as well as contentSection. If I don't use absolute positioning, how do I do it then. I know it's a pain (I've heard that from quite a few people). How do I do it then?

Thank you

 

[tgreer]

How do you not use absolute positioning? By not using it! What Vragabond is telling you is that if you define several DIVs (which you haven't show, btw), then they will stack on top of each other, UNLESS you explicitly change that behavior with absolute positioning.




Thomas D. Greer

http://www.tgreer.com

 

[ChrisHunt]

Probably something along the lines of

#leftSection {
   width: 124px;
   float: left;
}

#contentSection {
   margin-left: 134px;
}

Just put all your SSIs in the leftSection <div>, they'll stack up one after the other by default.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[photoxprt1868]

I'm not sure I understand what you mean Chris Hunt. Remember each "bucket" or DIV tag is its own seperate SSI. How is the browser going to know where to place it? I wish I could post a link but it's an internal site, but with lots of different pages, and each page needs its own set of things on the left, and right. The top banner will be the same for all. Check out how many includes I have.

<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/topbanner.shtml" -->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/topmenu.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/rightSection.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/breakingNews.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/prodserv.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/lowerMostBucket.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/leftMenu.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/servicesBucket.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/myAccount.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/secondNavBucket.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/leftSpacer.shtml"-->
    <td width="480" height="400" valign="top"><!--  CONTENT STARTS HERE-->&nbsp;<!--  CONTENT ENDS HERE--></td>
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/finishTable.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/footer.shtml"-->

 

[ChrisHunt]

You're page needs to contain (at least) two types of <div>. One type defines the broad areas of the page - the header, sidebar, content area, footer etc. These should be present on every page and they're the ones you position (however you choose to do it).

The other type comprise the "buckets" of content, and stack up naturally inside the structural <div>s. Something like this:

<div id="header">
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/topbanner.shtml" -->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/global/topmenu.shtml"-->
</div>
<div id="sidebar">
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/rightSection.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/breakingNews.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/prodserv.shtml"-->
<!--#INCLUDE VIRTUAL="/fplcom_app/wrapper/res/lowerMostBucket.shtml"-->
</div>
... etc ...

(the structural <div>s could/should come from SSIs too, I'm writing it this way for clarity)

Having said that, I think there's a better way to use SSI if you know a server-side scripting language (perl, php, asp etc.) When I do it, I markup my pages like this:

<html>
<head>
  <title>An example page</title>
<!--#exec cgi="/cgi-bin/header.pl"-->
</head>
<body>
<!--#exec cgi="/cgi-bin/top.pl"-->
  <h1>Example</h1>
  <p>Content of the page goes here</p>
<!--#exec cgi="/cgi-bin/bottom.pl"-->
</body>
</html>

Those three scripts serve up the stuff that goes in the head of every page, the stuff that comes before the content and the stuff that comes after, whatever it may be. Because they're scripts and not flat files, they can examine environment variables to determine which page they're producing content for and vary it where required.

Doing it this way meant that I could change a site from table-based to CSS-based layout a while back purely by changing the top & bottom scripts - the individual pages didn't need to be touched.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[photoxprt1868]

Chris, thank you very much. You make a lot of sense. I will try that right now. As far as the sideBar DIV tag, I do have to position where it goes with CSS right? Then I guess the ones inside that one will stack up naturally correct? Or maybe I could just give it a left, and top margin. Which do you think it's better?

Thank you

 

[ChrisHunt]

Yeah, position the sidebar with CSS - either by floating it or absolute positioning or whatever works for your layout. The <div>s contained within will just stack up one after the other - you can use margins, padding and borders to fine-tune their placement.

Personally, I try to avoid absolute positioning where I can; not because there's anything wrong with it in principle, but because it's so badly implemented in some browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd