Table-free layout troubles

This is a discussion on "Table-free layout troubles" within the Web Page Design section. This forum, and the thread "Table-free layout troubles are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Feb 1st, 2007, 21:04
Junior Member
Join Date: Jan 2007
Location: Seattle, WA
Age: 27
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Table-free layout troubles

I know that image/content positioning is a common topic in this forum, particularly when it involves the kind of layout that one might have to resist the urge to use tables for. I can't find anything that applies to my problem, though, so here it is:

I just want to be able to divide one <div> into an arbitrary number of areas that will hold text or images. I can get the positioning right by using float, but that puts the content behind the background.

Here's what I'm trying, basically, with all critical css areas empty, because clearly what I had there wasn't working:

#center_content {
position: relative;
top:50px;
background:url(images/green_stars.jpg) no-repeat left top;
margin-left:209px;
margin-right:209px;
margin-bottom:75px;
}

div.container{
??? tried using clear: among other things. nothing worked correctly
}

div.segment{
??? tried using float, but that put the contents BEHIND the background. Tried using display:inline; - that had no effect...
}



The HTML in question:

<div id="center_content">
<p>Some text</p>
<div class="split">
<div class="segment">
<img src="XXX.jpg" alt="XXX"/>
</div>

<div class="segment">
<p>Placeholder text</p>
</div>
</div>
</div>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Feb 1st, 2007, 21:17
Reputable Member
Join Date: Jul 2006
Location: Scotland
Age: 22
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

Could you post up a link for this page please?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Feb 2nd, 2007, 16:07
Junior Member
Join Date: Jan 2007
Location: Seattle, WA
Age: 27
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

No. Unfortunately, it's a progressing commercial website with proprietary information that I do not have permission to post anywhere right now. The site already has the behavior I want, but it's not using CSS to do it - it's using tables. I could go back through and fill everything in with fake graphics and text, but that would be pretty inefficient. Instead, I might try to find a way to simplify/clarify my question. The issue is very general, anyway - it shouldn't matter WHAT I put in the "segment" divs, because the idea is to have an arbitrarily long series of wrapping "boxes" where making a new "container" forces a new row. Is that unclear? I can make a mock-up if it's really necessary.

This is what it looks like now:

CSS----------------------------------
div.container {
display:block;
float:left;
}

div.segment {
clear:none;
float:left;
position:relative;
width:350px; /* This could be any size, 350 is just my starting-point*/
}
-----------------------------
HTML:

<div class="container">

<div class="segment">Content, such as an image or text.</div>

<div class="segment">Content, such as an image or text.</div>

<div class="segment">Content, such as an image or text.</div>
</div>

This would create a container with 3 segments that wrap as the window changes size. You could put any number of segments in - used to hold things like thumbnail images. It still doesn't work right though. Putting in consecutive container divs doesn't make rows - they just continue to line up on the same row.

O/T: I don't know what made me decide to suddenly change all of my layout practices to CSS (other than that it's a prudent, efficient, logical web standard.) Unfortunately these first few days have been rather rough.

Last edited by EdgeWalker; Feb 2nd, 2007 at 16:09. Reason: Minor clarification
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Feb 2nd, 2007, 16:50
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

It would seem to me that unless you declare a "width" for your container it will continue to expand and expand.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Feb 2nd, 2007, 16:56
Reputable Member
Join Date: Jul 2006
Location: Scotland
Age: 22
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

Oh! Do you want each segment to be on seperate lines? (Having difficulty understanding the problem sorry...)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Feb 2nd, 2007, 20:32
Junior Member
Join Date: Jan 2007
Location: Seattle, WA
Age: 27
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

Well, yes, I want the container to be able to expand without bound, but if I put it inside a <div> with limited dimensions, won't it inherit those boundaries? I'll cross that bridge when I come to it, though- What I really want the segments to do is float, so that they will just wrap around when they reach the edge of the container, but when I try this, it causes them to go back behind the background. If I want to *force* in a new row, I'll just make a new container.

I have been poring over CSS literature for a couple of days, and though I can now almost everything I need to, this particular problem still eludes me.

(Forgive my repellently n00b problem, please, but I need to get off of this drug we call <table>, and I'm no longer concerned about revealing my ignorance.)

Last edited by EdgeWalker; Feb 2nd, 2007 at 20:33. Reason: Punctuation error
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Feb 2nd, 2007, 20:34
Junior Member
Join Date: Jan 2007
Location: Seattle, WA
Age: 27
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Table-free layout troubles

Since I can't put up the site itself, would it help if I created an illustration that shows what I am trying to do?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, layout, table free

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
can't convert table-based to css-based layout markus Web Page Design 21 Apr 25th, 2007 22:50
IE troubles and more, what else is new Maverick25r Web Page Design 4 Oct 18th, 2006 17:40
CSS Layout Troubles Maverick25r Web Page Design 2 Sep 21st, 2006 16:26
Table layout problem! URGENT! mgcom Web Page Design 4 Jan 7th, 2006 22:08
Website Table Layout WiseWizards Web Page Design 2 Jul 5th, 2005 14:11


All times are GMT. The time now is 15:47.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42