SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: CSS positioning

  1. #1
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning

    I'm trying to learn more advanced CSS by converting my existing website. I've used CSS before with colors and widths, but that's about it. Can anybody help me with positioning? Here is what I currently have:

    http://www.compiledmonkey.com/new/

    I'd like to move the navigation div over by about 20 pixels and align the content div to the left. I was going to use absolute positioning, but I didn't think that would work since I'm using a "container" div for the page.

    Here is my CSS:

    Code:
    <!-- Native tags -->
    body
    {
     font-family: Trebuchet MS, verdana, arial, helvetica, sans-serif;
      font-size: 10pt;
    }
    h1, h2, h3, h4, h5
    {
     color: #355EA0;
    }
    ul
    {
     list-style: square;
     color: #355EA0;
    }
    a:link { color: #355EA0; text-decoration: none; }
    a:visited { color: #355EA0; text-decoration: none; }
    a:hover { color: #355EA0; text-decoration: none; }
    a:active { color: #355EA0; text-decoration: none; }
    <!-- Custom classes -->
    div.container
    {
     border: 1px solid;
     background-color: #E9EBF5;
      width: 750px;
      display: table;
      margin-left: auto;
      margin-right: auto;
    }
    div.container.header
    {
     text-align: center;
    }
    div.container.navigation
    {
     border: 1px solid;
     width: 140px;
     background-color: #A3B8D8;
     float: left;
    }
    div.container.navigation a:link { color: #FFFFFF; text-decoration: none; }
    div.container.navigation a:visited { color: #FFFFFF; text-decoration: none; }
    div.container.navigation a:hover { color: #FFFFFF; text-decoration: none; }
    div.container.navigation a:active { color: #355EA0; text-decoration: none; }
    div.container.content_container
    {
     float: right;
    }
    div.container.content_node
    {
     border: 1px dashed;
    }

  2. #2
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to add margin-left: 20px to the div.container.navigation. then change div.container.content_container to clear:none; margin-left:180px; get rid of the float:right;

    could also just call div.container.navigation, #navigation instead, then refer to it in the html as id="navigation" not class="nav..". Same for content_container

  3. #3
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did something similar which seems to have worked. Why would I use clear: none; instead of float: right; ?

    Current CSS:

    Code:
    div.container.header
    {
     text-align: center;
     margin: 10px;
    }
    div.container.navigation
    {
     border: 1px solid;
     width: 140px;
     background-color: #A3B8D8;
     position: relative;
     float: left;
     margin: 10px;
    }
    div.container.content_container
    {
     position: relative;
     float: left;
     margin: 10px;
    }
    div.container.content_node
    {
     border-bottom: 1px dashed;
    }

  4. #4
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You use float when you want to float things to the left or right of some kind of main content. Your contain_container is main content, so its not really good use of CSS to do it this way. Just float the nav left, there is no need to float the content anywhere.

    clear:none; means the main content is left where it is, and not dropped below any floated elements (i.e. clearing them). See W3Schools CSS Page for a better explanation of this

  5. #5
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I add some spacing between the navigation and the bottom of the container div? I tried margin-bottom: 10px;

  6. #6
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, cant see how it matters where the container div ends? Not sure if this is rendering on my browser properly, the main content is below the nav. I assumed you want the main content in the middle, to the right of the nav.

    Ah, I see now, the main container div isnt appearing in my Mozilla at all. Bit hard to say what to do when it isnt rendering on mine properly. Try padding-bottom:10px; though! Gotta get on now tho, so hope you can sort it easily.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How can I add some spacing between the navigation and the bottom of the container div? I tried margin-bottom: 10px;
    You will need to clear the float first and then you can give it a margin.

    Add this bit in bold here (exactly).
    Code:
    </div>
    <!-- End Content_Container -->
    <div style="clear:both"></div>
    </div>
    You can give it a class if you want to make it tidier.

    Now you can add your margin:
    Code:
    div.container .navigation
    {
    border: 1px solid;
    width: 140px;
    background-color: #A3B8D8;
    float: left;
    margin-left: 10px;
    margin-bottom:10px;
    padding-bottom: 10px;
    }
    In moz/firebird your css isn't showing at all because you have used html comment tags in the external css file. This stops the css rendereing in those browers completely. CSS comments are like this :
    /* This is a CSS comment*/

    Even when you've fixed that your css won't display correctly in those browsers because you have defined your styles like this:
    Code:
    div.container.navigation {}
    There must be a space between one element and the next. div.container is ok without a space but when you add to it the .navigation must have a space like this.
    Code:
    div.container .navigation
    Otherwise moz/firebird will not display the style correctly.

    You need to add spaces to all the styles that you have done like that (most of the page by the looks of it ).

    Now everything should be happy.

    Paul

    Edit:


    I forgot to mention that you missed off the closing quote mark on Fall2003.php in your list and also that you need to define your character encoding etc.
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  8. #8
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help everybody. I think I've fixed all of my issues so far. Now I'm going to try and make a few more stylesheets as a demo of how flexable you can be using proper CSS and XHTML.


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
  •