Forum Moderators: not2easy
I 've had this problem for awhile but it turned to a major issue for me as of late , and will be very thankful if anyone could help ;
Let say I have a main table (T1)with two columns , in each column again I have one seperate table (T2 for the left and T3 as the right one) . Both tables have been fixed to their positions with the same heights . T2 contains the main content , however I want to have a vertical navigatin menu inside T3 . I want them both (T2,T3) starting exactly form the top of the main table T1 , the navigation menu should stick to the top right corner .
The problem is with the resolution changes , as it changes form e.g 1440x900 to 1024x768 , the main content inside T2 breaks into more lines and make T3 moving form its own position . How can I fix T3 to its place ? the position:absolute doesnt work properly here as it changes the size of the table .Is there a trick so that i can make T3 floating to the top ?
Thanks
I'd not use tables to solve such a layout. CSS is more than up to it to do a vertical menu on the right.
Basically I'd dump all the tables, use a <ul> that I'd float right with the menu in it, and let the rest of the content sit in the flow. If that short version doesn't help you, well then tag along below.
First select a browser that's standard compliant (basically don't use IE)
Next start with a core that'll work:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
Next, I add in the html:
<ul id="menu">
<li><a href="#1">item1</a></li>
<li><a href="#2">item2</a></li>
<li><a href="#3">item3</a></li>
<li><a href="#4">item4</a></li>
</ul>
<div id="main">
Hello world
</div
Yep, that's all html I'll need feel free to make the hello world text substantially longer if you tag along, it'll show you much more.
So to show off a few things let's use some margins on the body that create a bit of a page like feeling:
html {
background-color: #ccc;
height: 100%;
}
body {
margin: 0 50px;
background-color: white;
height: 100%;
}
This gives a nice border and a full page height to the body (not stopping till where it has content. Obviously other choices are equally easy to make such as a centered layout with a certain width, it's all possible.
If you're following along you'll notice th page can get rather narrow, so let's give it a minimum width (so that we can add content safely later on as well.
body {
min-width: 700px;
}
Now on to our menu, it's not in it's place is it?
#menu {
float: right;
width: 10em;
background-color: #666;
}
There it goes to the right, with a width relative to the character size used by the reader. And a contrasting background color.
To remove the unsightly bullets of the list we add
#menu {
list-style-type: none;
}
Much nicer, but now the body (if you have enough text on it) , wraps under the menu, something some don't like all that much, so lets assume you want to get rid of it. Some margins on #main will fix that:
#main {
margin-right: 11em;
}
Not I left a bit of a gap between them (1em worth) I tend to not like things pressed too close together, but you could go for the 10em just as well.
Let's style the menu so that it looks a little bit better:
#menu li {
padding: 1px 5px;
}
#menu a {
text-decoration: none;
color: black;
}
#menu a:hover {
color: red;
}
Be as creative as you need to be, just showing something basic here
Now the text sits rather close to the left border so we could fix that with a quick:
body {
padding: 0 0 0 5px;
}
Putting it all together:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
margin: 0 50px;
background-color: white;
height: 100%;
min-width: 700px;
padding: 0 0 0 5px;
}
#menu {
float: right;
width: 10em;
background-color: #666;
list-style-type: none;
}
#menu li {
padding: 1px 5px;
}
#menu a {
text-decoration: none;
color: black;
}
#menu a:hover {
color: red;
}
#main {
margin-right: 11em;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#1">item1</a></li>
<li><a href="#2">item2</a></li>
<li><a href="#3">item3</a></li>
<li><a href="#4">item4</a></li>
</ul>
<div id="main">
Hello world
</div>
</div>
</body>
</html>
Now we test it in other standards compliant browsers, such as safari, opera, firefox and others. and see if we find any discrepancy in order to be sure we're not building on a feature or bug of just one browser.
As expected no problems there.
Now we take a deep breath and start to look at it in IE6 and IE7 separately (their bugs differ quite a lot so we need to treat them separately.)
It seems that for this simple thing IE is behaving itself quite nicely (this is often not the case.)
But IE6 won't cooperate at all. I actually made a concession to IE6 in the html as you notice there is an extra div there that I'm not using. It's cause IE6 can't cope with what I'm doing on body and will need it instead
Waiting for the virtual machine to start ...
The gray border from the html isn't showing (typical for IE6, it's hardly making difference between html and body)
So let's add a conditional comment and move the background colors:
<!--[if IE 6]>
<style type="text/css">
body {
background-color: #ccc;
}
#wrapper {
background-color: white;
}
</style>
<![endif]-->
Still no luck on getting the same look as the #wrapper now doesn't have a 100% height, so add that:
Putting it all together:
<!--[if IE 6]>
<style type="text/css">
#wrapper {
height: 100%;
}
</style>
<![endif]-->
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
margin: 0 50px;
background-color: white;
height: 100%;
min-width: 700px;
padding: 0 0 0 5px;
}
#menu {
float: right;
width: 10em;
background-color: #666;
list-style-type: none;
}
#menu li {
padding: 1px 5px;
}
#menu a {
text-decoration: none;
color: black;
}
#menu a:hover {
color: red;
}
#main {
margin-right: 11em;
}
</style>
<!--[if IE 6]>
<style type="text/css">
body {
background-color: #ccc;
}
#wrapper {
background-color: white;
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#1">item1</a></li>
<li><a href="#2">item2</a></li>
<li><a href="#3">item3</a></li>
<li><a href="#4">item4</a></li>
</ul>
<div id="main">
Hello world
</div>
</div>
</body>
</html>
Now I'm sure some will argue that I could have avoided the conditional comment for IE6 in this case by adding more stuff the other browsers don't need. It' snot just for educational value but also a philosophic reason that's keeping me from promoting that: I really want the next IE to never see anything to work around bugs in previous IE versions. If Microsoft promises IE8 to be fully compliant, well they'll have to proof it.
Honestly it isnt that easy to change it from a table-based project to CSS compatible as it uses tables to form the output layout , you know it is part of its design . Furthermore it isn't that simple that I have explained , there are a bunch of tables and cells.
On the other hand since its a part of a current project ,and i need to modify those pages , i have to stick to it .
However you gave me an idea that seems promising . Im trying to fix everything by a proper bottom-padding , beside using   and blank cells , padding may works .
Many Thanks .
