6 Replies Latest reply: Apr 10, 2011 11:17 AM by Nancy O. RSS

    included template problems

    I Love Doing Websites Community Member

      Hello,

       

      I am using the new DWCS5 template of header, content, sidebar and footer fixed witdht,

       

      my problem is if I have a logo on the header and I want to insert a navigation bar at the rigth of the logo, I always used to to .header {position:relative} and then position the navigation bar with position absolute.

      now with the new layouts if I put relative on the header as the position, the header dissapears.

       

      any comments, suggestions?

       

      thanks

        • 1. Re: included template problems
          John Waller CommunityMVP

          Best if you upload a problem page to the web and post a link so we can all see it in action.

          • 2. Re: included template problems
            Nancy O. CommunityMVP

            Use CSS floats instead of positioning.

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Floated Logo</title>
            
            <style type="text/css">
            #header {
            margin:0 auto;
            padding:0;
            width: 800px;
            background:#FFE3C8;
            overflow: hidden; /**to contain floats**/
            }
            
            #header .left {
            width: 100px;
            float:left;
            padding: 1em 0;
            border: 1px dotted brown;
            }
            .clearing {
            clear:both;
            line-height: 1px;
            display:block;
            visibility: hidden;
            }
            
            
            /* BEGIN Horizontal Menu */
            #navcontainer
            {
            margin: 0 auto 0 125px;
            padding: 1em 0 0 0;
            font-family: georgia, serif;
            text-transform: lowercase;
            }
            
            ul#navlist
            {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            width: auto;
            font-size: 0.8em;
            }
            
            ul#navlist li
            {
            display: block;
            float: left;
            width: 5em;
            margin: 0;
            padding: 0;
            text-align: center;
            }
            
            ul#navlist li a
            {
            display: block;
            width: 100%;
            padding: 0.5em;
            border-width: 1px;
            border-color: #ffe #aaab9c #ccc #fff;
            border-style: solid;
            color: #777;
            text-decoration: none;
            background: #f7f2ea;
            }
            
            #navcontainer>ul#navlist li a { width: auto; }
            
            ul#navlist li#active a
            {
            background: #f0e7d7;
            color: #800000;
            }
            
            ul#navlist li a:hover, ul#navlist li#active a:hover
            {
            color: #800000;
            background: transparent;
            border-color: #aaab9c #fff #fff #ccc;
            }
            /* END Horizontal Buttons */
            </style>
            </head>
            
            <body>
            <div id="header">
            <div class="left">
            div class left logo here
            </div>
            
            <div id="navcontainer">
            #navcontainer, #navlist
            <ul id="navlist">
            <li><a href="#" title="item 1">item 1</a></li>
            <li><a href="#" title="item 2">item 2</a></li>
            <li><a href="#" title="item 3">item 3</a></li>
            <li><a href="#" title="item 4">item 4</a></li>
            <li><a href="#" title="item 5">item 5</a></li>
            <li><a href="#" title="item 6">item 6</a></li>
            <!--end navlist --></ul>
            <!--end navcontainer --></div>
            
            <!--important, clear floats with clearing class on p, br, or hr tag here -->
            <hr class="clearing" />
            
            <!--end #header --></div>
            
            
            </body>
            </html>
            
            

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists 
            http://alt-web.com/
            http://twitter.com/altweb

            • 3. Re: included template problems
              I Love Doing Websites Community Member

              FLOATS, yes but I cannot possition the element in the exact place. Any other suggestion?

              • 4. Re: included template problems
                John Waller CommunityMVP

                You can with floats, margins and padding.

                • 5. Re: included template problems
                  I Love Doing Websites Community Member

                  mmm, yes but then there are a lot of problems with ie6 and the way it calculates the floats


                  • 6. Re: included template problems
                    Nancy O. CommunityMVP

                    Post a link to your page and show us your specific problem.  Otherwise it's all a guessing game.

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists 
                    http://alt-web.com/
                    http://twitter.com/altweb