Skip navigation
TequilaMockingbird
Currently Being Moderated

Trouble customizing template

Dec 30, 2012 4:32 AM

I'm using Dreamweaver CS4, and have customized template#2 found here: http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html to use on my website here: http://www.bluebirdnut.com.

 

The trouble I'm having is that I want to add more navigation links in the left side bar. Everything looks all right in design view when I add more links, until I get to the 11th one - when I do that, the 11th one overflows and bumps the center content area that much more to the right. When I hover over the area where the navigation links are in design view, there appears to be a red outline around it, which I am assuming limits its size. However, I cannot find where in the stylesheet or the template to change the size of the box to allow it to hold more navigation links.

 

Even though when I preview the template, or the pages built with the template, in Firefox and IE8, they appear to be OK, the phenomenon in Design View is wreaking havoc with my designing capabilities! Below are screenshots of what I'm seeing with 10 navigation links, and then with 11.

PROBLEM1.jpg

 

PROBLEM2.jpg

Here is the code from the css stylesheet:  

 

 

body {
    margin: 0px;
    color: #666;
    font-size: 14px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #294b8a;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
}


h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
}
h2 { color: #333333; font-size: 16px; font-weight: normal; margin: 0px 0px 15px 0px; }

a          { color: #ba7007; }
a:visited  { color: #ba7007; }
a:hover    { color: black; }


.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
}


/* BANNER AREA */
.bannerArea {
    width: 980px;height: 216px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
}



.bannernav {
    padding-top: 10px;
    padding-right: 40px;
    float: right;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

.bannernav a {
    color: white;
    text-decoration: none;
}
.bannernav a:visited {
    color: white;
}
.bannernav a:hover {
    color: #ECBB7B;
}

.toplogo {
    margin-left: 70px;
    padding-top: 20px;
}



.content {
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;

}


/* LEFT NAVIGATION */


.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
}

.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #364957;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
}

.leftnavigation a:visited{
    color: #364957;
}
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
}


/* CONTENT AREA */

.contentleft {
    width: 440px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
    

}
.contentwide {
    width: 718px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
}
    
.contentright {
    padding-top: 55px;
    float: left;
    width: 210px;
}

.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;    
}
.imageleft {
    margin-right: 10px;
    float: left;
}


/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #294b8a;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
    
}

.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    
    color: #2d5399;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
}

 

Message was edited by: TequilaMockingbird

 
Replies
  • Currently Being Moderated
    Dec 30, 2012 9:38 AM   in reply to TequilaMockingbird

    Without seeing your HTML code, it's hard to assess what may be going on.  I'm guessing the code for your 11th link is not inside the main unordered list.

     

    Validate code and fix reported errors.

     

    Code Validation Tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

    If that doesn't help you identify the problem, can you show us a URL to your test page?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 30, 2012 12:05 PM   in reply to TequilaMockingbird

    Because Design View is not a browser. At best it's an approximation of what you can expect to see in real browsers. 

     

    Use Live View in Split View.  Live View displays pages with the webkit (Chrome/Safari) engine. And you can edit code in the other panel.

     

    Previewing in browsers is the best way to test your work. 

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points