SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What Am I Doing Wrong?

    Here's the problem. I'm generally new to CSS, and I though this wouldn't be that hard of a thing to do with CSS...apparently I was wrong.

    The CSS regarding this part of the page is as follows:
    Code:
    #header {
    	position:relative;
    	top:0px;
    	bottom:0px;
    	width:800px;
    	height:138px;
    	}
    
    #nav {	
    	position:absolute;
    	top:0px;
    	bottom:0px
    	width:208px;
    	}
    
    #content {
    	position:absolute;
    	top:0px;
    	bottom:0px
    	width:592px;
    	}
    And the code for the actual page itself is:
    PHP Code:
    <?php
    echo "<html><body>";
    echo 
    "<link rel=\"stylesheet\" href=\"http://www.star-craftx.com/practice/icarius/style.css\" type=\"text/css\">";

    echo 
    "<div id=\"header\">";
    include(
    "header.php" );
    echo 
    "</div>";

    echo 
    "<div id=\"content\">";
    echo 
    "<div id=last_submitted>";
    echo 
    "<a href=#>title</a> by <a href=#>author</a>
    </div>"
    ;

    echo 
    "<div id=\"nav\">";
         include(
    "content.php");
    echo 
    "</div>"


    ?>
    I know the problem is with the CSS, but I just don't know how to fix it. I've scoured across the web for nearly an hour and a half trying to find an article or tutorial explaining my situation (or even something related to it), and what I came up with barely helped at all.

  2. #2
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without knowing what you're trying to achieve, or more specifically what the problem is it's difficult to help. What part of that page is the problem?

  3. #3
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah, it's 7AM here, it's Time's fault =P

    The problem is the left nav bar was too far down, and wasn't aligned with the rest of the layout.

    But when I switch it from HTML to CSS, the problem got worse. The entire left nav is aligned to the upper-left of the page.

  4. #4
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by koomann
    But when I switch it from HTML to CSS, the problem got worse. The entire left nav is aligned to the upper-left of the page.
    #nav { position:absolute; top:0px; bottom:0px width:208px; }

    You've aligned it to the top - absolute positioning something to top: 0px; will place that element at the absolute top of its container - in this case the body.

  5. #5
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thank you for pointing that out to me
    I've completely fixed the left nav align problem, which has given way to another.
    I'm not entirely sure how the position the Content. I want the content to be below the header, and to the right of the nav.

  7. #7
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at the site linked above, there's a link on it to see the CSS

  8. #8
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I checked it out, but didn't really get much out of it, and it didn't help out my problem all that much.

    It would be a lot easier to show you guys the problem, rather than try and spell it out.

    The light DIV needs to be brought a little to the left, and down.

  9. #9
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you read the CSS?

    Compare this part with yours above (and also reconsider why you're doubling everything up by nesting tables inside divs with the same attributes):

    html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    }


    #nav {
    width: 220px;
    float: left;
    margin-left: -1px;
    padding: 10px;
    }


    #content {
    padding: 10px;
    margin-left: 230px;
    border-left: 1px solid #006;
    }

    #header {
    background-color: #fff;
    color: #006;
    border-bottom: 1px solid #006;
    margin-bottom: 0px;
    }


Bookmarks

Posting Permissions

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