www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: CSS Layout Help -- Make the gaps stop!

  1. #1
    Join Date
    Dec 2002
    Posts
    39

    CSS Layout Help -- Make the gaps stop!

    CSS Layout Help -- Make the gaps stop!

    Ok. Here is the url for the page :

    PAGE LINK

    Now, I cant preview in any browsers right now (work) except netscape 4.7 and IE 5.5 ... But when previewing in IE, I get these gaps in between my columns! They should line up properly with them totaling 100% width..

    If you want the rest, just view the source on the page..

    WHY are these gaps there and HOW do I make them go away? I'd hate to start using tables again... {grin}

    The code is below...


    CDXRevVveD




    <style type="text/css">
    body {
    background-color: silver
    }

    #positioned-element
    {
    background-color: red;
    height: 115 px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1
    }

    #positioned-element1
    {
    background-color: pink;
    height: 20 px;
    left: 0px;
    position: absolute;
    top: 115px;
    width: 100%;
    z-index: 2
    }

    #positioned-element2
    {
    background-color: blue;
    height: 400 px;
    left: 0 px;
    position: absolute;
    top: 135px;
    width: 20%;
    z-index: 3
    }

    #positioned-element3
    {
    background-color: white;
    height: 400 px;
    left: 20%;
    position: absolute;
    top: 135px;
    width: 50%;
    z-index: 4
    }

    #positioned-element4
    {
    background-color: gray;
    height: 400 px;
    left: 70%;
    position: absolute;
    top: 135px;
    width: 30%;
    z-index: 5
    }

    </style>

  2. #2
    Join Date
    Nov 2002
    Posts
    631
    In the <body> tag put <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">. That will fix your problem.

  3. #3
    Join Date
    Dec 2002
    Posts
    39

    im gonna scream now...

    Please, cover your ears, with such a simple solution, I am now going to scream at the top of my lungs...

    Thanx for the help...

    Also, how do i put a footer on my page using css? Ive seen it, but Im still way too new...

  4. #4
    Join Date
    Nov 2002
    Posts
    631
    What kind of footer? Please give some details.

  5. #5
    Join Date
    Dec 2002
    Posts
    39
    basically a bar, 100% width, about 30 pixels tall, at the bottom of the page.. (after the 3 columns on the test page).. so far the only way I know to do it would limit the height of my 3 columns..

    I just want a footer at the end of the 3 columns, going all the way across, bout 30 pixls tall or so...

    I wouldnt think it would be so difficult.. at least with tables it wasnt..

  6. #6
    Join Date
    Nov 2002
    Posts
    631
    <div style="width:100%;height:30px;position:relative;top:0px;left:0px;">Contents</div>

    That would do it.

    Don't worry about setting a height and width to divs. They will expand to fit the contents, unless you specify for them not to.

  7. #7
    Join Date
    Dec 2002
    Posts
    39
    my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

    CLICK FOR EXAMPLE

  8. #8
    Join Date
    Nov 2002
    Posts
    631
    Use position:absolute;top:1000000000000000000000000000000000000000000000000000000000000000px;left:0px;




    NOTE: Do not really put all those zeros.

  9. #9
    Join Date
    Nov 2002
    Posts
    984

    Re: CSS Layout Help -- Make the gaps stop!

    Originally posted by cdxrevvved

    If you want the rest, just view the source on the page..
    Ok did that and the first line caught my eye to begin with
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
    Where did you find that code?
    It should be
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    or preferably
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    After that you should also add a charencoding to your page and default script and style language, leaving us with something like
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">

    Now we can rip out that proprietary crapcode you just added (marginheight="0" marginwidth="0" leftmargin="0" topmargin="0") as well as the 3 bogus meta declarations you use now.

    Once you completed these steps you will have a valid base to stand on to which you can add your CSS to.

  10. #10
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by cdxrevvved
    my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

    CLICK FOR EXAMPLE
    Yes, you can put them at the end, but you need to remake the entire CSS layout to not rely on positioned elements for it's main content.
    I'll help you with that if you like when after you fix the other problems.

  11. #11
    Join Date
    Dec 2002
    Posts
    39
    The doctype came from using a wysiwyg css editor, layoutmaster or something.. its a companion prog to stylemaster.. just downloaded that last nite to try it out

  12. #12
    Join Date
    Dec 2002
    Posts
    39
    Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it?
    Last edited by cdxrevvved; 12-13-2002 at 10:58 PM.

  13. #13
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by cdxrevvved
    Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it?
    body {margin:0;}

  14. #14
    Join Date
    Dec 2002
    Posts
    39
    Ok... now i see... Im doing my best to stay away from tables...

    But now, how would I go about doing the footer, its still at the wrong end of the screen..

    BTW, thanx for putting up with me.... We are all newbies at soemthing...

  15. #15
    Join Date
    Nov 2002
    Posts
    631
    Cut and Paste your footer to the bottom of the HTML coding. Right now it is the topmost element. This won't completely fix your problem though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles