Forum Moderators: not2easy
Heres the issue:
The following code has a heading, a horizontal navigation bar, and a footer. I'd like the heading to be left justified so it's flush with the nav-bar. At the same time everything should also be centered. I can get this done in IE or NS6, but with NN4 I can't seem to do it. This has been giving me a huge headache.
I'd like something elegant. Right now it looks like I have to put something around the H1 text, like a table set to the same size as the nav-bar and left justify it, or some other technique.
With IE and NS6, I just set the body to { margin-left:auto; margin-right:auto; width:620px;} and everything is just peachy. With NN4, I can't figure it out. When I view it in NN4, the H1 text is centered, not flush with the nav-bar.
Any help would be GREATLY appreciated.
<body>
<h1>This is the title</h1>
<table border="0" width="620" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="blue" width="100">
<table bgcolor="blue" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="aH"><strong>Tab1</strong></td></tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#dcdcdc" width="100">
<table bgcolor="#dcdcdc" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="nav"><a href="tab2.html">Tab2</a></td></tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#dcdcdc" width="100">
<table bgcolor="#dcdcdc" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="nav"><a href="tab2.html">Tab2</a></td></tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#dcdcdc" width="100">
<table bgcolor="#dcdcdc" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="nav"><a href="tab3.html">Tab3</a></td></tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#dcdcdc" width="100">
<table bgcolor="#dcdcdc" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="nav"><a href="tab4.html">Tab4</a></td></tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#dcdcdc" width="100">
<table bgcolor="#dcdcdc" border="0" width="100%" cellspacing="0" cellpadding="2">
<tr><td class="nav"><a href="tab5.html">Tab5</a></td></tr>
</table>
</td>
</tr>
<tr>
<td colspan="11" bgcolor="blue">
<table border="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="blue">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="foot">
<hr width="475">
<p><a href="about.html">About</a> - <a href="suggest.html">Suggestions</a> - <a href="privacy.html">Privacy Policy</a> - <a href="terms.html">Terms of Service</a></p>
</div>
</body>
</html>
Oh yeah, the css I'm using to set the body for NS4 is { margin-left:auto; margin-right:auto; text-align:center;}. I don't think this is kosher. I was just tweaking with it. Can you set the width in NS4? I've had problems doing so.
AFAIK, NN4 has preblems with margin: auto;
Nick
I can't be sure, because I don't often cater for older versions of NS, and because looking through the tables at your defined css is a bit like hard work, but if you define:
body { text-align: center; }
it should center everything in the body, and then you can use text-align: left; for the header and other text, should you want to.
Its not a perfect solution, because it means you have to define a new alignment for every class/id's text, but it should work. If it doesn't, I'm sure we can think of another way, perhaps using float or something.
Grumble grumble. Re-reading it, it sounds like you've already done those definitions. That'll teach me to scan. I'll try and have a looksie at it in more detail later, because y'know, work.
I am pretty much guessing, I've not bothered with NS4 for so long now. Can't you just not cater for the NS4 users? :p
Post the CSS, and less of the entire page. Cursed tables.
This is the IE and NS6 style-sheet:
body { margin-left:auto; margin-right:auto; width:620px;}
#footer { text-align: center; }
This is the NN4 style-sheet which isn't completed:
body {? }
#footer { text-align:center; }
<body>
<h1>This is the title</h1>
<!-- This is the modified nav bar - which is now just a box 620 pixels wide -->
<table border="1" width="620" cellspacing="0" cellpadding="0">
<tr><td>This is some text in the nav bar</td></tr>
</table>
<p id="footer">This is the centered footer</p>
</body>
</html>
WibbleWobble,
I wish I didn't have to make a NN4 version. Even on my other site I'm getting about 8% NN4 users. This is still a large enough % for me to worry about. =(
I feel like a newbie too. It's kind of ridiculuous that I've spent so much time on such a trivial task. Thank you and Nick for replying to my post.
As far as body {text-align:center} and then H1 {text-align:left} that's the problem. I'd like the H1 text flush with the nav-bar, which is being centered. The H1 text would be flush with the window on the left, since I can't set the width of the document to the same amount of pixels as the nav-bar. I CAN get this done, but I'd have to use JS to do some math or use a table to make some margins or even use a div or span in the same fashion.
I'm not sure if there is an elegant solution to this.
-Squared
You want a 620px wide design that everything on the page sits inside, with the navigation at the top, and an h1 tag above that? Am I right so far? On top of this, you want the h1 tag to align left to the edge of the 620px box, rather than the left edge of the screen?
If this is the case, the simplest solution I can think of that should work in NS4 (still can't test it, but I can't imagine even NS4 would stuff this up) is to use a div container frame. I'm sure there's other ways, but if this works, its the least fussy one. Allegedly.
if we define:
#pagewidth {text-align: center; width: 620px;}
h1.flushleft {text-align: left;}
and then call them like so...
<body>
<div id="pagewidth">
<h1 class="flushleft">h1 content</h1><table contents><footers>
</div></body>
I really wish I could promise it will work, but I can't. If I've either mis-interpretted what you're after, then I'll try again, if I've got it right, but it doesn't work, I'm out of ideas. My train of thought only goes so far on non-standards browsers, then it cuts off.
Suggest your NS4 users upgrade, because really, they're making life much harder for the rest of us.
Looks good. I'll use the div as a container. I'm sure that will be fine.
Thanks so much for your time.
best,
Squared
(EDITED)
OOPS. The div doesn't work. =(
I think I might have to use some JS to get it working. What a downer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
<!--
body {text-align-center}
table {width: 620px; margin: 0; text-align: center;}
/* set the properties of this to match your table */
h1.title{
width: 620px;
margin: 0;
text-align: left;
padding: 0.3em 0; /* remove any side padding from title to get it flush */
border: 1 solid blue;
}
#footer { text-align: center; }
-->
</style>
</head>
<body>
<h1 class="title">This is the title</h1>
<!-- This is the modified nav bar - which is now just a box 620 pixels wide -->
<table border="1" cellspacing="0" cellpadding="0">
<tr><td>This is some text in the nav bar</td></tr>
</table>
<p id="footer">This is the centered footer</p>
</body>
</html>
any help?
Suzy
Sorry about the lag. I've been away visiting some family since late last week. I'm not too sure if what you suggested would work. I've been having problems setting the width of h1 with NN. What I think I'll do is use mod-rewrite and give NN users a version just for them. Oy. What a pain.
thanks for your help,
Squared
