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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy lost! css help (divs)

    okay, i have no idea what i'm doing wrong.

    what i'm trying to accomplish: container div/header div/top content with two child divs (left and right)/a middle div for a chatbox/a bottom content div/and a footer div.

    now, i got that, and all seems good until i put the two child divs within the top content div. then, for whatever reason, the top content div all together doesn't appear, however the content within the child divs does, it just appears in the middle div for the chatbox.

    here's my css. i know it's messy, i'm an amatuer at this.

    Code:
    <!--
    body { 
    text-align:center; 
    FONT-weight: normal; 
    margin: auto auto; 
    color: #cccccc; 
    FONT-FAMILY: Arial; 
    background: url(http://totalxr.com/images/new/bluebg.jpg) repeat; 
    background-attachment: fixed;
    }
    #container { 
    background: url(http://totalxr.com/images/new/contentbg1.png) repeat;
    border: 1px solid;
    margin: auto auto;
    text-align:center; 
    position: relative; 
    width: 1048px; 
    height: auto;
    min-height: 100%;
    } 
    #header {  
    border-bottom: 1px solid;
    margin: auto auto;
    position: relative; 
    top: 0px; 
    left: 0px;
    width: 1048px; 
    height: 220px; 
    } 
    #topcontent { 
    border: 1px solid;
    text-align:center; 
    margin: auto auto;
    position: relative; 
    top: 0px;
    left: 0px; 
    width: 1048px;
    height: auto;
    } 
    #topleft {
    text-align: center;
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    width: 50%;
    height: auto;
    }
    #topright {
    text-align: center;
    position: relative;
    top: 0px;
    left: 0px;
    float: right;
    width: 50%;
    height: auto;
    }
    #cbox { 
    border: 1px solid;
    text-align:center; 
    position: relative; 
    left: 0px;
    top: 0px;
    width: 1048px; 
    height: auto; 
    } 
    #bottomcontent {
    border: 1px solid;
    margin: auto auto;
    text-align: center;
    position: relative;
    left: 0px;
    width: 1048px;
    top: 0px;
    height: auto;
    }
    #footer { 
    border: 1px solid;
    text-align:center;  
    position: relative;
    bottom: 0px;
    clear: both;  
    width: 1048px; 
    height: 100px; 
    padding-top: 50px;
    padding-bottom: 50px;
    }
    img {
    border-style: none;
    }
    ul {
    list-style-type: none;
    }
    a {
    text-decoration:none
    }
    -->
    if you want to see the page so far (far from finished, need to get this layout issue working), go here: http://totalxr.com/indextest3.php this is it with it not showing properly.

  • #2
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    I am not seeing a problem on the website, what exactly is it not doing?
    Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if you look at the website, you'll see the current song and server info, then next to it on the right, an image and an ad underneath it. now, underneath both of those, it shows a big area and a login box.

    the things above that login box are supposed to be in a separate div (topcontent) and within child divs of the topcontent div (topleft and topright). however, upon inspection with firebug that isn't happening. the items are in the same div as the login area. but if you look at the actual html code, they are in separate divs!.

    one other thing i forgot to mention: if i set everything to a fixed height, it comes out fine! i just don't understand...i don't want to go with a fixed height because i'm always changing content, and it's just annoying to keep adjusting all the heights of the divs.
    Last edited by djzenmastak; 06-11-2009 at 04:40 AM.

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    seems to display as you want, in FF so maybe you fixed it?

    But you should validate your code.

    http://validator.w3.org/check?verbos...indextest3.php

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it displays as i want, but it's not displaying it as the code says it should. lol

    i will be validating, definitely.

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    anyone else want to take a stab at what i'm doing wrong here?

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    seems to display as you want, in FF so maybe you fixed it?

    But you should validate your code.

    http://validator.w3.org/check?verbos...indextest3.php

    bazz
    i've fixed the errors, but i still get the warning about using utf-8 encoding. i thought this was the preferable encoding to use? should i use a different encoding? or should i ignore the warning?

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The warning is about your editor leaving the BOM (byte-order-mark) in the file. Check to make sure your editor doesn't have a setting for removing that while saving.

  • Users who have thanked drhowarddrfine for this post:

    djzenmastak (06-11-2009)

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you. i'm using notebook++, and i was easily able to change that.

    now, everything looks good, but i just can't figure out why my divs aren't working properly.

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Sorry but, I can't grasp your problem. As far as I can see, the page displays exactly how your code tells it to. The top nav menu followed by top content, comprising two side-by-side divs and then beneath that the iframe with the login.

    That's what I think you asked for and also what is being done already.

    Maybe I just need to drop out here if its my lack of understanding.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no, i appreciate your help. one way to visualize it is by looking at the borders. right now all of the main divs have borders, yet there's no border between the top content and the large iframed area, which is in a separate div. but at the top, underneath the header (nav area), there is a thick border...that's actually 3 separate 1px borders from the divs not showing properly.

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I am using the ff plug in 'Web Developer' and it shows me the boundaries of each div. They are there and they still seem to me to be as you want.

    If tyhe boundaries you have set do not show, then maybe the css you have set is making them overlap and is therefore hiding the divs edges?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #13
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that's a distinct possibility. i'm pretty new at css, so i don't know what in my css would be causing that.

    i'm using the ff plugin 'firebug', and while it shows the topleft and topright divs, they appear within the cbox div, and the topcontent div doesn't appear at all.


    this isn't a mission critical problem, like you said it appears as i want. it's just nagging me that i can't figure out what's going on with it.
    Last edited by djzenmastak; 06-11-2009 at 07:15 PM.

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    OK so going back to the first half of this thread, the page is displaying as you want, it is displaying as your have coded it, and firebug makes you think it is all wrong? I have never used firebug so I can't evaluate it but, I can speak for Web Developer and it works very well.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    New Coder
    Join Date
    Jun 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no, not entirely. the borders as displayed tell me that it's not displaying correctly, and firebug just verifies what i'm seeing.

    i guess i'm not doing a good job of describing the issue.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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