27 replies [Last post]
tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Hi guys,

I know this is not encouraged, but...I've been playing around with my design for a couple of days now, and after a little while I either f¤%k it up, or it doesn't look good in all browsers :S So - I wanted to ask you guys to help me set up the basics in a compliant way without staring at my useless code. I hope that's ok. If not, I will create something...

Now, what I'm trying to create is the following:
A page with a backgroun
- The logo
- The menu (same width as the main information container
- Grouping of the information panes
- Left menu pane (150px)
- Main information (the rest of the width - I don't want to hard code it, but I don't want to use percentages for the menu panes either)
- Right menu pane (150px)
- Footer

Now, I've tried to make this as close to pseudo code as I can, and I would be extremely grateful for any help you guys could give me!

Cheers Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Staring at your quote

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 Smile

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

I fully understand! I'm

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 Smile

My level of CSS knowledge is...abysmal Steve 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

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

oh...the borders are just to

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...

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Actually, you can find a copy

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

Stigg07
Stigg07's picture
Offline
newbie
East Yorkshire
Last seen: 10 years 1 week ago
East Yorkshire
Joined: 2009-12-08
Posts: 2
Points: 3

Not being an expert myself

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

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Thanks, Stigg, but that's not

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

tiwas wrote: I fully

tiwas wrote:

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 Smile

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

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

tiwas wrote:

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

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Thanks! That helped a bunch

Thanks! That helped a bunch Smile

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

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Ok, this is how far I got on

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 Wink
* 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;
      }

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Anyone?

Anyone? Love

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Here's the hosting pages, by

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

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote: ...I have three

Quote:

...I have three problems with the code:

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Smee, Yes, I discovered later

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 Smile

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

http://www.kvanum.no/test/

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

To the #content element

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Thanks! That seems to have

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

Cheers! Party

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

There is no good way IE is

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Well, if I ever want mobile

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

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 Wink

Thanks, Hugo Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The border aspect of these

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 Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

IE

Quote:

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

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"));
}

You start out with a straight statement (since IE can't read the min-width one you set above for the other browsers) and if it can do JS it'll read that... however that is a min and max width statement, not a min-width only, since I never wanted min width without also a max.

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

I have to say, the idea of calling an entire web page a form just goes against my bones. I know it's what ASP likes to do but then maybe that's a good argument for not letting ASP write web pages. <form> actually has meaning, and it's says "everything inside is part of a form".

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

Since you're building this page from scratch, let the validator help you out: make it strict. I never understood the idea behind a Transitional XHTML1.0 document. What are you transitioning from? Strict lets the validator tell you about more errors, which usually is a Good Thing in my opinion.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ah there you go Poes has

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

tranny doctypes

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'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'd like to blame Wierdpress

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: say "I'm gonna do this

Quote:

say "I'm gonna do this strict XML-ish stuff" with unclosed p's and center tags

Shades of Tommy there Tongue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

Thanks, both! I figure I

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! Wink

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

How do you pros feel about the colors?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Stop! follow advice and

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiwas
tiwas's picture
Offline
Regular
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2009-12-08
Posts: 15
Points: 16

hehe...I change it right away

hehe...I change it right away Smile