Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: My Css Problem!

  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My Css Problem!

    Hello all! I have a website and I was wondering if I can get some help with my CSS page! I have a huge gap after my "1750" Iframe.

    Is there anyway to get that -2000+ px out of there and make be at where it is?

    Site: http://forever-ashley.com

    Here is the CSS FILE:

    body {
    font: 10px arial, sans-serif;
    color:#778f9d;
    margin: 0px auto;
    text-align: center;
    background: #333740;
    }

    #pagebackground {
    z-index: 100;
    color: #778f9d;
    background: #333740 url( "../images/Layout4(11-26-2005)(bottom).jpg") top repeat-y;
    width: 820px;
    margin: 0px auto;
    }

    #menu_nav {
    z-index: 101;
    position: relative;
    top: -436px;
    left: -275px;
    width: 250px;
    margin: 0px auto;
    }
    #affiliates {
    z-index: 101;
    position: relative;
    top: -305px;
    left: -10px;
    width: 220px;
    margin: 0px auto;
    }

    #affiliates .affiliate {
    width: 50px;
    height: 50px;
    }

    #affiliates .affiliate img {
    border: 0px;
    }

    #ticker {
    position: relative;
    left: 260px;
    top: -365px;
    height: 60px;
    width: 220px;
    z-index: 199;
    margin: 0px auto;
    }

    #newsticker {
    text-align: center;
    z-index: 199;
    width: 100%;
    margin: 0px auto;
    }

    #pagebody{
    position: relative;
    left: 130px;
    top: -2050px;
    z-index: 101;
    margin: 0px auto;
    width: 515px;
    }

    .scrollClass {
    font: 10px arial, sans-serif;
    background: #333740;
    color: #778f9d;
    }

    .scrollClass a {
    color: #ffffff;
    background: #333740;
    }
    Last edited by Undertaker; 12-13-2005 at 04:47 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    When you use position:relative; the space that the element takes up will still be there which is why you have the gap. Check out this example on a proper two column layout. http://bonrouge.com/2c-hf-fixed.php
    Don't abuse positioning. It only gets you into trouble.

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    When you use position:relative; the space that the element takes up will still be there which is why you have the gap. Check out this example on a proper two column layout. http://bonrouge.com/2c-hf-fixed.php
    Don't abuse positioning. It only gets you into trouble.
    Was wondering how to make the two column layout with clicking the navagation to keep the other parts of the site up without an iframe?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The closest you can get to that is to use server side includes. The includes would get cached therefore look like they aren't being reloaded. You can use javascript but this is even worse than the iframe.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why includes?

    How many pages does that site contain? Six? Why not just hard-code all six (whew!) of them? It'll make your life--and your site--a lot simpler and won't take that much work.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, so far I have 43 pages on my site! if u have msn or aim i could use the help!

  • #7
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    When you use position:relative; the space that the element takes up will still be there which is why you have the gap. Check out this example on a proper two column layout. http://bonrouge.com/2c-hf-fixed.php
    Don't abuse positioning. It only gets you into trouble.
    _Aerospace_Eng_ is right (as usual). You are WAY overusing position:relative; Make these changes to your CSS to see what I mean:
    Code:
    #menu_nav {
    	z-index: 101;
    	float:left;
    	width: 250px;
    	margin: -430px 0 0 10px;
    }
    #pagebody{
    	float:right;
    	z-index: 101;
    	margin: -300px 25px 0 0;
    	width: 515px;
    }
    Oh, and to help you develop CSS, you should get firefox, and the Web Dev Toolbar. Then, you can edit CSS on the fly, and see the changes rendered immediately.
    Last edited by aaroncampbell; 12-13-2005 at 04:18 PM.

  • #8
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a bunch, i just viewed it and looks the same without the gap!


  •  

    Posting Permissions

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