css layout

[jdl]

just learning css and having trouble with the layout of this page (http://www.br0wnsnake.com/contact1.html)- trying to get rid of the orange space at bottom of page.

[ditt0]

You positioned the footer according to the elements inside it. That's not the right way. First you position the container, then you take care of the elements inside.The elements inside the footer will have to be floated as they are displayed inline.And in order to be out of trouble with the footer's height, you will need an empty div inside it to clear the floats and you won't need to specify any height for the footer.

So in the css I made some changes and added a few things:


div#navbar3 {
width: 100%;
border:1px solid #000;
border-width: 1px 0;
background-color: #236699;}

div#navbar3 a img {
float:left;}

.clear{
clear:both;}

div#navbar3 ul {
float:left;
margin:10px 20px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #FFF;
line-height: 10px;
white-space: nowrap; }

And in the html you will have:


<div id="navbar3"> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
<ul>
<li> &copy; 2004 Charlotte Meany </li>
<li><a href="mailto:shout@br0wnsnake.com">email</a> </li>
<li>mobile: 0415 8825 55</li>
</ul>
<div class="clear"></div>
</div>

[~Kipper~]

try changing your .body BG color to white

[~Kipper~]

oh i thought u wanted the color changed :) oops listen to ditt0

[jdl]

ok thanks ditt0 i'll fix this with your code then i'll go learn about hierarchy of elements

[jdl]

maybe containers not elements- um looking at your css code - very difficult because it is too advanced for me to comprehend- i'll need to get a book. will copy and paste anyway thanks again

[ditt0]

Actually it's not that complicated. Just imagine a cascade:) The elements are wrapping one another. The body wraps a main div, that wraps the columns ..that wrap the text:) First of all you fix the body, then the main div, then the columns, then the text. Well, it's a simplistic explanation, but i just wanted to you to get an idea of how things go in css.If you have more questions, feel free to ask. I'll do my best to help if I can.

[jdl]

Just to get back to you on this, copy and pasting made the bg orange gap occur above the blue footer instead of below as it was before. So I had to add margin-top:-30px; to #navbar3 to correct it.
I still have no idea how your code works :)

[ditt0]

It works fine to me without the margin of -30px. That margin misplaces the buttons in the form. I tested it on Mozilla, Firefox, Opera, IE 6. What browser are you using? Here's the file attached.

[jdl]

! argh yer kidding- i have IE 5.2.3; Netscape 7.1; safari 1
not hap in any of these with the margin - why can't anything ever be simple *sigh*

[jdl]

It works fine to me without the margin of -30px. That margin misplaces the buttons in the form. I tested it on Mozilla, Firefox, Opera, IE 6. What browser are you using? Here's the file attached.

Here's a screen grab (http://www.br0wnsnake.com/grab.jpg) of your pg on IE5 without the margin...I haven't seen any button problems with the one online with the margin-top added.

[ditt0]

Here's the screenshot with mozilla with that margin applied.
I have no possibility to test it on the browsers that you work on. But i would suggest first of all that you use in the css simple id, for example instead of div#navbar3 just #navbar3. Then try to see if you replace that table with a div, doesn't it solve the problem? Also , take out the orange background from the body and put it just for the logo div, specifying no width for the logo div.Let me know how it goes.

[jdl]

Okay- but with taking the oj color out of the body - I ran into the same trouble - now there was a gap between the lower edge of the top navbar and the upper edge of the div orange. I tried changing the height of the div orange and margin but didn't have any effect on the gap- only by changing the height of the top navbar, why is that? What if you needed the top navbar to hold it's dimension- how would you get around the problem..the same way you did the bottom , by floating it?
Anyway, I can just change the column size in the form and that is a quick easy fix for the buttons in Mozilla. Thanks for your help on this.

[ditt0]

OK so i redone the layout, with no elements inside the divs, except for the footer. Try it like this to see if it works in IE 5.

[jdl]

Yes it works :) I just need to put a space in to get the writing down the bottom centred to the footer. I will have it up online when I get all the other pages right and have learnt the flash satay for embedding flash content.
T H A N K Y O U H E A P S ! D I T T 0

[jdl]

I just realized something- you will never be able to really get rid of the space beneath the footer because all somone needs to do is resize their window by turning off the top navigation bar of their browser and there the space is again to accomodate the new dimension.