Need help setting up a page layout

Staring at your quote "Useless code" at least gives us an idea of your skill level and where you possibly are going wrong, it also indicates that you are really attempting to code for yourself rather than just hoping that we'll code you the framework and later another forum will do a little more work for you. Sorry to sound so cynical but it can occur this way

We are more than happy to help, but the operative word is help not do for you; so show us this code and we'll take it from there and advice how it may best be approached.

I fully understand! I'm coming from the C# and system administrator camps (uncommon combination, I know), and I usually answer the same as you. For the same reasons

My level of CSS knowledge is...abysmal I don't have my code here at the office, but this is the general Idea:

HTML

<div id="container">
   <div id="top"></div>
   <div id="menuPanel"></div>
   <div id="middle">
      <div id="leftColumn">Left menus</div>
      <div id="content">The is the content part</div>
      <div id="rightColumn">Right menus</div>
   </div>
   <div id="footer"></div>

CSS

#top { border: 1px #000 solid; width:100%}
#menupanel { border: 1px #000 solid; width:100%}
#middle { border: 1px #000 solid; width:100%}
#leftColumn { width: 150px; }
#content { } // How to use the rest of the width...?...
#rightColumn { width: 150px; }
#footer { border: 1px #000 solid; width:100%}

So this is approximately where I'm at. Whenever I try to deviate from this, things go belly up... :S

oh...the borders are just to see how things align, but they seem to do bad stuff to my design as the widen the border around elements to 1 pixel instead of 0...

Actually, you can find a copy of my progress at http://checkpoint.darktech.org/larstest2/Design%2520v2.htm

Not being an expert myself but, if you try:

#top {style="position:absolute; top:0; left:0; width:100%; height:**px; border: 1px #000 solid;"}

Change the width height to fit but remember for every 1px border that's 2px width & height.

Similar for each #id

Thanks, Stigg, but that's not really the problem. My problem is that I cannot get the left and right menu divs to align properly, and I don't know how to set the main content div to width=(100%-150px-150px)

Cheers, though!

Ok that's fine I have to do a lot of sys admin stuff and I'm abysmal at that

<div id="container">
   <div id="top"></div>
   <div id="menuPanel"></div>
   <div id="middle">
      <div id="leftColumn">Left menus</div>
      <div id="content">The is the content part</div>
      <div id="rightColumn">Right menus</div>
   </div>
   <div id="footer"></div>

#top { border: 1px #000 solid; width:100%}
#menupanel { border: 1px #000 solid; width:100%}
#middle { border: 1px #000 solid; width:100%}
#leftColumn { width: 150px; }
#content { } // How to use the rest of the width...?...
#rightColumn { width: 150px; }
#footer { border: 1px #000 solid; width:100%}

Keeping it simple for the moment:

<div id="container">
   <div id="top"></div>
   <div id="menuPanel"></div>
   <div id="middle">
      <div id="leftColumn">Left menus</div>
      <div id="rightColumn">Right menus</div>
      <div id="content">The is the content part</div>
   </div>
   <div id="footer"></div>
 
#top { border: 1px #000 solid; width:100%}
#menupanel { border: 1px #000 solid; width:100%}
#middle { border: 1px #000 solid; width:100%}
#leftColumn {float:left; width: 150px; }
#rightColumn {float:right; width: 150px; }
#content {margin:0 155px; } // How to use the rest of the width...?...
 
#footer { border: 1px #000 solid; width:100%}

That is the simplest approach to a three column (but not the only one!) the two floated columns come before the content, content is then just given horizontal margins that keep it pushed away from the extreme edges, the parent holding these three elements could then be a elastic or fluid width and the content column will adjust it's size to fill whatever space is available in the centre.

Thanks! That helped a bunch

Do you know if there's an equivalent for min-width that'll work with IE and older browsers?

Ok, this is how far I got on it tonight...I have three problems with the code:
* The menu is too far down. It's actually overlapping the content part, which is...bad
* When the browser window is resized smaller than the min-size the menu is shifted down in FF. I haven't tested in other browsers
* IE (and maybe others) doesn't have a minimum size

Cheers!

html:

<!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 id="ctl00_Head1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" title="Main CSS">
<link rel="stylesheet" type="text/css" media="screen" href="css/tabs.css" title="Main CSS">
<title></title>
</head>
<body id="news">
    <form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
 
		<div id="top"><br/><br/><p/><h1>logo</h1><p/><br/><br/></div>
		<div id="middle">
			<div id="leftcolumn">Left menu</div>
			<div id="rightcolumn">Right menu</div>
			<div id="menupanel">
				<div id="header">
					<ul>
						<li id="nav-home"><a href="#">Home</a></li>
						<li id="nav-news"><a href="#">News</a></li>
						<li id="nav-products"><a href="#">Products</a></li>
						<li id="nav-about"><a href="#">About</a></li>
						<li id="nav-contact"><a href="#">Contact</a></li>
					</ul>
				</div>
			</div>
	                <div id="content">
	                    Some text...
        	            <p>
                	    </p>ff<p>
	                    </p>dd<p>
        	            </p>ff<p>
                	    </p>dd<p>
	                    </p>ff<p>
        	            </p>dd<p>
                	    ...and then some...!
				</p></div>            
			</div>
		</div>
    </form>
</body></html>

main.css:

BODY
{
	min-height: 100%;
	text-align: center;
	background-image: url(../images/background.png);
	background-repeat: repeat-x;
	position: relative;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
#top {width: 100%; }
	#logo
	{
		width: 800px;
		height: 100px;
		border-color: #C3947F;
		border: 2px solid #C3947F;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-top: 10px;
	}
 
#menupanel {margin: 0px 150px; min-width: 550px; float: none;}
#middle {width: 100%; }
#leftcolumn { margin-top: 50px; float: left; 	width: 150px; }
#rightcolumn { margin-top: 50px; float: right; width: 150px;}
#content {
min-width: 550px;
	margin: 0 155px;
	border-bottom: 2px solid #C3947F;
	border-top: none;
	border-left: 2px solid #C3947F;
	border-right: 2px solid #C3947F;
background-color: #ffffff;}
#footer { width: 100%; }

tabs.css:

    body {
      margin:0;
      padding:0;
      color:#000;
      font:x-small/1.5em Georgia,Serif;
      voice-family: "\"}\""; voice-family:inherit;
      font-size:small;
      } html>body {font-size:small;}
 
    #header {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      }
    #header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #header li {
      float:left;
      background:url("../images/left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      }
    #header a {
      float:left;
      display:block;
      width:.1em;
      background:url("../images/right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    #header > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#333;
      }
    #home #nav-home, #news #nav-news,
    #products #nav-products, #about #nav-about,
    #contact #nav-contact {
      background-position:0 -150px;
      border-width:0;
      }
    #home #nav-home a, #news #nav-news a,
    #products #nav-products a, #about #nav-about a,
    #contact #nav-contact a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }
    #header li:hover, #header li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #header li:hover a {
      background-position:100% -150px;
      }

Anyone?

Here's the hosting pages, by the way: http://www.tiwas.cjb.net/

If http://www.tiwas.cjb.net/ is the correct link you would do well to read both the "stickies" referred to in Hugo's signature above. You need to validate and use a Strict doctype for a new site.

These errors are major and need to be fixed before continuing any further.

Smee,

Yes, I discovered later that cjb.net strips the page and puts it in an iframe. I'm working on getting another host without all that crap :S I you look at the source a little higher up, you'll see it validates

http://www.kvanum.no/test/ <-- no crap from free services

To the #content element ruleset add 'clear:both'

To the #header ul add 'overflow:hidden'

Remove the margin-tops on both sidebar elements (or reduce to around 10px), these are causing issues, you might need to still play around a little but this is, I think, closer to what you intended.

Thanks! That seems to have done most of what I need help with Last question for a while - do you, or anyone else, know a good way to make IE work with min-width?

Cheers!

There is no good way IE is cack, forget it let it just do it's own thing, how many people are going to reduce their browser to what is an unusable width and why? mobile devises that's another issue.

If you have to there is a scripting solution search on MS behaviours or something similar they have been discussed on the forum before and there should be examples to copy.

Well, if I ever want mobile devices to use my application, I'll code one in C# or similar

Would you mind taking one last look? I've been playing with it for a while, and now it seems to work just fine - except the border line beneath the tab menu isn't stretching the whole way :S

I also need to play around with colors and margins, but that's for tomorrow - and I should be able to do that myself

Thanks, Hugo

The border aspect of these types of tabs can be a tricky one.

Add a border-top to #content

Add position:relative to the li items and bottom:-1px this will let the bottom edge of the li items overlap the top of the #content div, the li items provide the border where they exist and the #content provides the rest of the border.

You mustn't use overflow:hidden though on the ul element, although I see that you ignored that previous instruction to add it IE <7 will mess up if there are any hasLayout triggering properties that cause float containment on the ul element.

Take care to check this aspect cross browser.

If you are desperate (instead of just letting those with browsers that suck get not-pretty pages as they should), there are two methods I've seen.

One is pure CSS, using a goofy border trick, where you give another (wrapping) element a ginormous border. I thought it was brilliant the first time I saw it, but I've never actually bothered to use it... because I end up telling IE6 and below that the width=smallest width possible with my design (usually for a 800px-wide window).
http://www.pmob.co.uk/temp/min-width-ie.htm

The other method is using CSS Expressions, a M$-only thing where you basically put Javascript in the CSS. Since only IE can read this special Java-junk-in-the-stylsheet, it works— so long as the IE browser in question has scripts on. If folks are heeding the call to keep their IE6 safer and have security settings set high, no min-width.
Example:

#container { 
  min-width: 760px;
}
* html #container {
  width: 780px;
  width: expression((document.body.clientWidth>2000) ? "1600px" : ((document.body.clientWidth>800) ? "auto" : "780px"));
}

<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ah there you go Poes has corrected my deliberate mistake, I did indeed mean 'expression' not 'behaviour'.

It is the simplest and best approach to dealing with IE if you really have to, the other hacks are kludgey and nasty.

Trans DTDs exist for a reason and are perfectly valid, just not for NEW pages! The common use of Trans DTDs that is seen is simply wrong and generally a result of people blindly copying and pasting, something that is becoming alarmingly prevalent in web development or worse people use trans DTDs because they realise that it will allow the use of certain elements that otherwise wouldn't be allowed in a Strict Doc type and they get to validate and get a Pass mark, that practise irritates me hugely as it's cynical and displays an ignorance of the subject at hand.

My issue isn't necessarily with Tranny doctypes in HTML4, but in XHTML. I mean, it just never made sense to me to say "I'm gonna do this strict XML-ish stuff" with unclosed p's and center tags.

As for the prevalence, I'd like to blame werdpress, since it starts everyone out with that.

At least Drupal has the good sense to start folks off with a strict XHTML doctype (which I'll change to HTML4 as soon as I figure out how they plan to deal with RDFa in D7).

I'd like to blame Wierdpress for a lot of things!

Shades of Tommy there

Thanks, both!

I figure I would rather just add some text for IE users...If they're not current, there are just some things they can't have. I actually don't even like making stuff too backwards compatible - as this prevents people from UPGRADING!

Hugo, thanks for the bottom:-1px I did that on the main.css instead, and it worked well

How do you pros feel about the colors?

Stop! follow advice and instruction to the letter please, if asking what to do and getting literal instruction do not assume that it's open to interpretation, follow it exactly then when things are working you can play around or if problems found with that advice query it.

The layout is not working as intended

hehe...I change it right away