SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Rio Rancho
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Fluid Design (not 3 row)

    I don't even know what you would call this, however I'll describe what I'm doing as I know this is common enough. I have done this already using tables successfully, but it looks unmanagable, table after nest table... I'd rather do CSS if it's possible. Since there seems to be an overabundance of people that hate the use of tables used as markup and yell/scream at people who use tables for this purpose, I'd like to challenge someone to please help me make practicle use of CSS to solve this issue.

    I've got an interface I'm designing that will go in the page that contains dynamically changing data. Basically, it's a "table" in a wrapper to make the edges look unique and give it more organization on the page. I see this done all the time, just not using CSS. I can do this in a few nested (ick) tables, for instance like this:

    HTML Code:
    <table>
    <tr>
       <td> CORNER IMAGE HERE </td>
       <td> 2nd image for interface design </td>
       <td> Stretchy background on this one for 
    	the dynamic text label no width 
    	set so it matches the length of text</td>
       <td> 3rd interface image </td>
       <td> Stretchy background image with width set to 100% to take up all the rest of the space used by the data in the 	next rowset </td>
    </tr>
       <td> background image that repeats on Y-axis for edging on the left side</td>
       <td colspan="...">stretches over entire middle section of table and is for the content</td>
       <td> background image that repeats on Y-axis for edging on the right side</td>
    <tr>
        ..... This row is for the bottom you get the idea...
    </tr>
    </table>
    Now, I can create a great looking top row of this interface in CSS and have it usable in IE and FF, and the text label is variable width.

    I notice problems when I hit the next row... I can line up the edging, add my text, and as it wraps the left under the edging DIV on the left, the top row doesn't move an inch to "take up space" and now that I've gotten this far I'm not sure how the heck you make it work. Width=100% seems to mean THE WHOLE SCREEN and not the width of the parent DIV.

    Here's the CSS/HTML I'm working with.

    HTML Code:
    <!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=utf-8" />
    		<title>Testing</title>
    		<style type="text/css" media="screen"><!--
    #outerbox { visibility: visible; }
    #toprow { width: 100%; visibility: visible; float: left; clear: both; white-space: nowrap; }
    #top1 { background-image: url(t1.png); height: 79px; width: 73px; visibility: visible; float: left; }
    #top2 { background-image: url(t2.gif); height: 79px; width: 128px; visibility: visible; float: left; }
    #top3 { background-image: url(t3.gif); height: 79px; visibility: visible; float: left; white-space: nowrap; }
    #top4 { background-image: url(t4.gif); height: 79px; width: 26px; visibility: visible; float: left; white-space: nowrap; }
    #top5 { background-image: url(t5.gif); width: 100%; height: 79px; visibility: visible; float: left; white-space: nowrap; }
    #top6 { background-image: url(t6.png); height: 79px; width: 127px; visibility: visible; float: left; }
    #top7 { background-image: url(t7.png); height: 79px; width: 73px; visibility: visible; float: left; }
    #contentrow { width: 80%; visibility: visible; clear: both; white-space: nowrap; }
    #content1 { background-image: url(border_l.gif); background-repeat: repeat-y; background-position: right top; width: 73px; overflow: hidden; visibility: visible; float: left; clear: none; }
    #content2 { width: 100%; visibility: visible; float: left; clear: none; white-space: normal; }
    #content3 { background-image: url(border_r.gif); background-repeat: repeat-y; background-position: left top; width: 264px; visibility: visible; float: left; clear: none; }
    --></style>
    	</head>
    
    	<body>
    		<div id="outerbox">
    			<div id="toprow">
    				<div id="top1"></div>
    				<div id="top2"></div>
    				<div id="top3">
    					 testing this space</div>
    				<div id="top4"></div>
    				<div id="top5"></div>
    				<div id="top6"></div>
    				<div id="top7"></div>
    			</div>
    			<div id="contentrow">
    				<div id="content1"></div>
    				<div id="content2">
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    					This is some content copied and pasted over and over again
    				</div>
    				<div id="content3"></div>
    		</div>
    		<p></p>
    	</body>
    
    </html>

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you show us an image of what you want it to look like?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Rio Rancho
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically this is a decoration around a table (which contains tabular data). This is for a Vbulletin forum (like this one) as if you were looking at the main forum listings page here. The design is incomplete even in the table form, but it's close to the overall effect I was looking for.

    The Gray box at the top of the graphic is a background which then has a anchor tag for that forum section, in this case "Tech Talk". That box is expandable up to 30% of the total width of the entire element. Then I have another graphic to the right which allows the red bar to extend as far as needed to make the elements width adjusted out as far as the screen is wide. The bottom is the same story. The data in the center will likely always be a table, and rightfully so.

    So really.. I want the red crap on the outside, and then a table within. The borders on the left and right MUST be adjustable based on how many forums are in that catagory, and that WILL change now and then.

    Screenshot:
    http://www.tristarion.com/test/screen_shot.png

    Joel

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, I optimized your code a bit, it was...messy:

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing</title>
    <style type="text/css" media="screen">
    <!--
    * {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    div div {
    	float: left;
    }
    #toprow {
    	width: 100%;
    	clear: both;
    }
    #toprow div {
    	float: left;
    	height: 79px;
    }
    #top1 {
    	background-image: url(t1.png);
    	width: 73px;
    }
    #top2 {
    	background-image: url(t2.gif);
    	width: 128px;
    }
    #top3 {
    	background-image: url(t3.gif);
    }
    #top4 {
    	background-image: url(t4.gif);
    	width: 26px;
    }
    #top5 {
    	background-image: url(t5.gif);
    	width: 100%;
    }
    #top6 {
    	background-image: url(t6.png);
    	width: 127px;
    }
    #top7 {
    	background-image: url(t7.png);
    	width: 73px;
    }
    #contentrow {
    	width: 80%;
    	clear: both;
    }
    #content1 {
    	background: url(border_l.gif) top right repeat-y;
    	width: 73px;
    	overflow: hidden;
    }
    #content2 {
    	width: 100%;
    }
    #content3 {
    	background: url(border_r.gif) top left repeat-y;
    	width: 264px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="toprow">
      <div id="top1"></div>
      <div id="top2"></div>
      <div id="top3"> testing this space</div>
      <div id="top4"></div>
      <div id="top5"></div>
      <div id="top6"></div>
      <div id="top7"></div>
    </div>
    <div id="contentrow">
      <div id="content1"></div>
      <div id="content2"> This is some content copied and pasted over and over again
        This is some content copied and pasted over and over again This is some content
        copied and pasted over and over again This is some content copied and pasted
        over and over again This is some content copied and pasted over and over
        again This is some content copied and pasted over and over again This is
        some content copied and pasted over and over again  </div>
      <div id="content3"></div>
    </div>
    </body>
    </html>
    Now that that's done, I'm not sure of what exactly you want...could you try to explain yourself a bit more clearly?

    Oh, and could you enlighten me a bit as to what's the white-space property? I've never used it before.

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Rio Rancho
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's info on white-space: http://www.w3schools.com/css/pr_text_white-space.asp

    I tried my best to explain it in my previous post. Basically, if you know a way to recreate the decorations in the screnshoot from my previous post, AND maintain fluid adjustability both vertical and horizontal so I can have as much or as little data inside of that "decoration" without breaking it... Thats what I want.

    Make sence?

    As far as the optimization, I appriciate it, however for the sake of what I'm doing here I wasn't really worried about it. The code you saw was generated by Adobe GoLiveCS2 exactly how it spits it out.

    Joel

  6. #6
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Rio Rancho
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The more I play with this and the more I search around here and the web, the more I don't think this is possible.

    There seems to be no way to say..."Hey, DIV, take up the rest of the space in horizontally, no matter what size the screen". Thats too bad too, and I haven't even attacked the vertical stretching yet.

    I've tried every which way just to get one "row" using different combinations of parent/child divs using margins, padding, etc. I think I could do it MAYBE if the only requirement was for the text area in the image above (the gray area) to make enough space for the text. But I want it to size itself to the content too thats in the table "inside" the interface.

    I keep hammering on this thinking there must be a way, find a new idea for a search keyword, and come back with bad news after a couple hours. Seems to be a pattern with this issue.

    What if I want to decorate a table so it's not a box and not a box with round corners...? Someone have some samples somewhere to help me out here as I'm running out of ideas aside from the way I'm already going about this. Rounded corners, 90degree corners... all boring and common. What else can one do?

    Joel


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •