SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right navbar doesn't behave

    Trying to get my right navbar to run from top to bottom of my #page id, but it wants to start from the bottom of my #content id. I think I need something like a <clear> tag to get it to behave, but can't find info. Can anyone help?

    URL to page is:
    http://www.clickbasics.com/users/mmi/

    Style sheet is:
    <STYLE type=text/css>
    <!--
    BODY {
    BACKGROUND-COLOR: #ffffff
    }
    #page {
    MARGIN-LEFT: auto; WIDTH: 744px; MARGIN-RIGHT: auto;
    BORDER-STYLE: solid;
    color: black;
    background-color: white;
    }
    #content {
    POSITION: relative;
    MARGIN-LEFT: 0px; WIDTH: 544px; MARGIN-RIGHT: auto;
    BORDER-STYLE: solid;
    color: black;
    background-color: white;
    }

    #rightnav {
    POSITION: relative; top: 0;
    MARGIN-LEFT: 544px; WIDTH: 200px;
    color: white;
    background-color: green;
    }
    #footer {
    MARGIN-LEFT: auto; WIDTH: 744px; MARGIN-RIGHT: auto;
    color: white;
    background-color: green;
    }

    -->
    </STYLE>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I got your problem worked out here is the code that I used I think it's what you are looking for.


    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">

    <
    html>
    <
    head>
    <
    title>Mountain Man Insights</title>
    <
    meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <
    meta name="keywords" content="">
    <
    meta name=description content="" >
    <
    style type=text/css>
    <!--

    body 
    {
        
    background#ffffff
    }

    #page 
    {
        
    margin-leftauto;
        
    width674px;
        
    height:650px;
        
    margin-rightauto;
        
    border-stylesolid;
        
    colorblack;
        
    background-colorwhite;
    }


    #content 

        
        
    {
        
    floatleft;
        
    padding10px;
        
    margin20px;
        
    background#fff;
        
    border1px solid #000;
        
    width430px
        
    /* ie5win fudge begins */
        
    voice-family"\"}\"";
        
    voice-family:inherit;
        
    width400px;
        }
    html>body #content {
        
    width400px
        
    /* ie5win fudge ends */
        
    }
        



    #rightnav 

         
         
    {
        
    floatleft;
        
    padding10px;
        
    margin20px;
        
    background#fff;
        
    border1px solid #000;
        
    width170px
        
    /* ie5win fudge begins */
        
    voice-family"\"}\"";
        
    voice-family:inherit;
        
    width150px;
        }
    html>body #content2 {
        
    width150px
        
    /* ie5win fudge ends */
        
    }


    /*#footer 
    {
        position:relative;
        bottom:0%;
        margin-left: auto; 
        width: 744px; 
        margin-right: auto;
        
        background-color: green;
        border: 1px solid #000000;
    }*/

    #footer
    {
        
    float:left;
        
    width612px;
        
    margin20px 20px 0px 20px;
        
    padding10px;
        
    border1px solid #000;
        
    background:green;
        
    voice-family"\"}\"";
        
    voice-family:inherit;
        
    colorwhite;
        }

        
    -->
    </
    style>

    </
    head>
    <
    body>

        <!-- 
    Begin Page -->
        
            <
    div id="page">
                
                <!-- 
    Start content here -->
                <
    div id="content">
                
    Art direction vsdesign
                1 May 2003
    Noncommunication artsDifference between art direction and design explainedWhy there is more design than art direction on the webHow design curricula encourage students to develop a unique visual vocabulary (a stylethat can be grafted onto any real-world projectregardless of its audience or messageSuccess of print and web designers who follow that adviceChange in designís relation to products and servicesRules-based design

                30 April 2003
    Beyond gridsbelow specGrids are used to balance the design of booksadsposters, and paintingsThey are also often used in web designparticularly when it is executed via HTML tables or FlashThe grid has a long and noble history in the design of two dimensional mediaBut it is not the only way to design web pages and it is certainly not the webbiest wayEnter rules-based design.

                
    XHTML 2
                15 April
    Groundless fearsgenuine concerns.

                
    Hot cache
                31 March
    Teaching your browser (mainly Mac browsersto load changed style sheetsPreloading hover states in CSS rollovers

                13 March 2003
    Is it possible to preload the hover (rolloverstate of CSS background imageIt sure is, and you donít need to write non-semantic junk markup to do soBrowser differencesSafari vsChimera/Camino

                5 March 2003
    The topic of browser differences is as interesting as lintBut as web designerswe need to know about these differences in the same way that photographers need to know about lenseslights, and 

                </
    div>
                <!-- 
    End content here -->

                <!-- 
    Begin Right Navigation Bar -->
                <
    div id="rightnav">

                
    direction vsdesign 1 May 2003Noncommunication artsDifference between art direction and design explainedWhy there is more design than art direction on the webHow design curricula encourage students to develop a unique visual vocabulary (a stylethat can be grafted onto any real-world projectregardless of its audience or messageSuccess of print and web designers who follow that adviceChange in designís relation to products and servicesRules-based design 30 April 2003Beyond gridsbelow spec.

                </
    div>
                <!-- 
    End Right Navigation Bar -->

                

                <!-- 
    Begin Footer -->


                <
    div id=footer>

                    
    home articles tutorials photos downloads
                    Copyrighted 2003© Charles Conway cconway
    .com 

                
    </div>
                 
        </
    div>
    <!-- 
    End Page -->
    </
    body>
    </
    html
    If this isn't what your looking for, try this link out.

    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Chuck,

    I uploaded your code at:
    http://www.clickbasics.com/users/mmi/index3.html

    I'm now massaging it at:
    http://www.clickbasics.com/users/mmi/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I manipulate code, I am mystified by the white space to the right and left of the rightnav and under the footer. Anyone have a clue?
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •