PDA

Click to See Complete Forum and Search --> : New design with just 1 prob! :D

DanUK
12-30-2003, 11:01 AM
Hi there.
well, i've given up on the previous thread, that design was just TOO complicated.
I've now got a new one, worked hard on it earlier.
There's just one problem that remains, if you open this in your browser you'll know what I mean.
The "left" navigation seems to overlap the bottom links/footer - how can I stop this? I want the bottom links/footer to be beneath the left navigation or the main content, whichever is longer. Hope that makes sense!

Here's the new code.
Thank you again - and a very happy new year!


HTML:


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="lan">
<head>
<title>test.</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
</head>

<body>
<div id="head">
<div id="topleft">
my logo.
</div>
<div id="topright">
some links.
</div>
</div>

<div class="quicknav">
quick navigation.
</div>

<div id="left">
<div id="content">
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
</div>
<br />
<div id="content">
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
navigation<br />
</div>

</div>

<div id="center">
<div id="centerA">
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />
some content.<br />

</div>
</div>

<br />

<div class="bottomnav">
information.
</div>

<div style="padding: 5px;">
<div style="text-align: left; float: left;">
left footer.
</div>
<div style="text-align: right; float: right;">
right footer.
</div>
</div>

</body>
</html>


And the *sigh* lovely CSS ;):


body {
font-size: 10px;
margin: 0;
padding: 0;
background-color: #d9d9d9;
}
#head {
background-color:#B8C2D8;
border-bottom:1px solid #000000;
height: 36px;
}
#head img {
border: 0;
vertical-align: middle;
}
#topleft {
position: absolute;
left: 0;
top: 0;
}
#topright {
position: absolute;
right: 10px;
top: 15px;
text-align: right;
display: inline;
padding: 6px;
}
.quicknav {
margin: 0;
padding: 0;
background-color:#F0F0F0;
border-bottom:1px solid #000000;
text-align:right;
}
#left {
position: absolute;
width: 11em;
left: 12px;
top: 2px;
margin-top: 75px;
font-size: 10px;
}
#content {
list-style: none;
margin: 0;
padding: 0;
border:1px dashed #B8C2D8;
background-color: #eee;
}
#center {
font-size: 0.9em;
width: auto;
min-width: 120px;
margin: 8px;
z-index: 3;
margin-left: 11em;
padding-left: 24px;
}
#centerA {
padding: 16px;
border: 1px solid #aaa;
background-color: #fff;
text-align: center;
}
.boxhead {
background-color: #ddd;
border: 1px solid #000;
padding: 3px;
margin: 16px;
color: #000;
}
.bottomnav {
margin: 0;
padding: 0;
background-color:#B8C2D8;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
text-align:center;
}


Thanks again.
pyro
12-30-2003, 11:08 AM
Add clear: both; to your CSS for the footer.

Edit - Nevermind, just saw that you used position: absolute. Float the left menu to the left, and then add clear: both; to your CSS for the footer...
DanUK
12-30-2003, 11:10 AM
Originally posted by pyro
Add clear: both; to your CSS for the footer.

Hi pyro, thanks!
Is that to go on the "bottomnav" part of the CSS?
pyro
12-30-2003, 11:10 AM
Read my edit above... (I probably should have put it in a new post.)
DanUK
12-30-2003, 11:13 AM
Originally posted by pyro
Read my edit above... (I probably should have put it in a new post.)

oh no problem! hehe.
I jsut tried that, still not going, updated the HTML to use a footer div, too, so now:

removed -- too many pastes :)

Weird!
pyro
12-30-2003, 11:15 AM
Actually, it's not that weird... ;)

You want to rid yourself of position: absolute; and use floats, instead.
DanUK
12-30-2003, 11:22 AM
Ok, cool!
Removing the absolute's seems to have fixed it almost!
The only thing i see left that's wrong, is that the left div is vertically aligned at the bottom, not at the top.
Anything I can do about that?
Any other things you spot that i've done, as there are probably loads, please let me know.
Your help is very much appreciated.

Happy new year pyro! :)

EDIt, removed that last paste, otherwise this will look a mess of a thread :) (or more so!!!) :P

Here's what i've got now, i left the top two aboslute's in because when i removed them, the logo / links were right near each other, i wanted the logo on the left, and the links on the right but on the same line, if that makes sense!
body {
font-size: 10px;
margin: 0;
padding: 0;
background-color: #d9d9d9;
}
#head {
background-color:#B8C2D8;
border-bottom:1px solid #000000;
height: 36px;
}
#head img {
border: 0;
vertical-align: middle;
}
#topleft {
position: absolute;
left: 0;
top: 0;
}
#topright {
position: absolute;
right: 10px;
top: 15px;
text-align: right;
display: inline;
padding: 6px;
}
.quicknav {
margin: 0;
padding: 0;
background-color:#F0F0F0;
border-bottom:1px solid #000000;
text-align:right;
}
#left {
width: 11em;
left: 12px;
top: 2px;
margin-top: 75px;
font-size: 10px;
float: left;
}
#content {
list-style: none;
margin: 0;
padding: 0;
border:1px dashed #B8C2D8;
background-color: #eee;
}
#center {
font-size: 0.9em;
width: auto;
min-width: 120px;
margin: 8px;
z-index: 3;
margin-left: 11em;
padding-left: 24px;
}
#centerA {
padding: 16px;
border: 1px solid #aaa;
background-color: #fff;
text-align: center;
}
.boxhead {
background-color: #ddd;
border: 1px solid #000;
padding: 3px;
margin: 16px;
color: #000;
}
.bottomnav {
margin: 0;
padding: 0;
background-color:#B8C2D8;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
text-align:center;
clear: both;
}
#footer {
clear: both;
}
pyro
12-30-2003, 11:25 AM
You need to get rid of the top margin. Something like this might work nicely:

#left {
width: 11em;
margin: 10px 0 10px 3px; /* top right bottom left */
font-size: 10px; /* you sure you want to use pixels? */
float: left;
}
DanUK
12-30-2003, 11:28 AM
You've cracked it, YAY!!!!
These edits are weird, they should show as the last post ;) confusing. Hope you saw that edit i did on the one before.
pyro
12-30-2003, 11:39 AM
Yep, I see it. As an alternative to absolutly positining the items, you could use float: left; and float: right; if you wanted to.
DanUK
12-30-2003, 11:45 AM
ahh i see, thank you pyro.
so i could use, for example:


<div style="text-align: left; float: left;">
my logo.
</div>
<div style="text-align: right; float: right;">
some links.
</div>


How could I get the "some links" vertically aligned to the bottom of the "head" div though?

Any other comments pyro which you think i could do to improve it a little? I see in Konqueror using that code for the left there's a biggish (nothing major) space between the right of the left div, and the start of center, but in IE it's perfect, so i'll leave well alone!

Thanks again.
pyro
12-30-2003, 11:53 AM
You could probably use something like this:

#topright {
float: right;
text-align: right;
padding-top: 21px;
}
DanUK
12-30-2003, 11:54 AM
Ok wonderful pyro, thanks.
Any other comments/suggestions at all?

If not, thank god you helped! Thank you so very very much.
DanUK
12-30-2003, 06:20 PM
Hi there.
Hopefully the last two qusetions on this !
Thanks again.

This seems fine on normal resultions, i.e. 800x600, 1024.x768 etc, but on my laptop which has 1400x1050 some pages seem to have teh corner of the content block (i.e. whitespace) filled with the grey of the background, as if someone of the background is spilling into it? Any ideas? That's on IE.

Also - whenever I had a table in one of the pages within the content block - if it had a width, i.e. 90% - it would make hte page have to be scrolled with very weird effects, can i get rid of this? i've managed to prevent this by removing the width's, but it's nice to have it to fill say 90% of the content block...

EDIT: it is even happening with lower res's on the laptop too...

Thanks again.
DanUK
12-30-2003, 10:48 PM
Still can't get those sorted. Damn!
Any ideas guys? Thanks.
DanUK
12-31-2003, 03:08 PM
:confused: any ideas please guys? These final bits and then it's perfect...if you can help it'd be much appreciated...