Skip navigation
alexisonsmith3
Currently Being Moderated

Side Bar issue

Jun 17, 2012 9:41 AM

Tags: #cs5 #dreamweaver

Hi,

 

I am having problems with a sidebar I created putting it in the right hand columnnext to my container box

 

Regards,

 

Alex

 

www.newcityexplorer.com

 
Replies
  • Currently Being Moderated
    Jun 17, 2012 9:49 AM   in reply to alexisonsmith3

    Perhaps Nancy's solution may help http://alt-web.com/TEMPLATES/2-col-fixed-with-floats.shtml

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 10:17 AM   in reply to Ben Pleysier

    What happened to your <body> tag and  #rightSidebar from earlier discussion? 

    http://forums.adobe.com/message/4443281#4443281

     

    #rightSidebar is the floated container that holds your boxes. Put it back along with it's CSS code.

     

    <body>

     

    <div id="rightSidebar">

    <h3>#rightSidebar</h3>

    <p>This is the top of rightSidebar </p>

    <!--box1 code here-->

    <!--box2 code here-->

    <!--box3 code here-->

    <!--box4 code here-->

    </div>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 1:21 PM   in reply to alexisonsmith3

    OK.  One more time.  Replace what you have now with this:

     

     

     

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>New City Explorer</title>
    
    <!--[if lte IE 8]>
    <script type="text/javascript" src="javascript/html5.js"></script>
    <![endif]-->
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    
    <link href="textboxes/text-boxes-finished-files/css/boxes.css" rel="stylesheet" type="text/css">
    
    
    <style type="text/css">
    /**THIS IS FOR PAGE SPECIFIC STYLES, OTHERWISE PUT THESE RULES INTO AN EXTERNAL STYLE SHEET**/
    
    /**add vertical scrollbar channel to short pages**/
    html {overflow-y:scroll}
    
    body {
    margin:0;
    padding:0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 90%;
    color: #000;
    background-color: #FFF;
    border: 1px solid #000;
    }
    
    #container {
    width: 925px; /**adjust width as needed**/
    margin:0 auto; /**with width, this is centered on screen**/
    padding: 12px;
    font-size: 16px;
    overflow:hidden; /**to contain floats**/
    }
    
    #Logo {
    background-image: url(Pictures/Logo_2.png);
    background-repeat: no-repeat;
    height: 80px;
    width: 950px; /**adjust width to match your image**/
    float: left;
    }
    
    #rightSidebar {
    float:right;
    margin-top: 188px; /**adjust as needed**/
    width: 155px;
    min-height: 300px;
    border-left: 1px dotted silver;
    }
    
    /**clear floats after**/
    #rightSidebar:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: right;
    height: 0;
    }
    
    #wrapper {
    width: 1100px;
    margin:0 auto; /**centered**/
    }
    
    /**clear nav floats**/
    nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    section {margin-top: 25px;}
    
    section h1 {
    margin:0;
    color: #000;
    font-size:30px;
    text-align:center;
    margin-top: 45px;
    font-weight:bold;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    #vision {
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:14px;
    margin: 5px 0px;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    font-weight:bold;
    text-align: center;
    overflow:hidden; /**to contain floats**/
    color: #000;
    border: solid 1px silver;
    }
    
    figure {
    margin-top: 0;
    width: 244px;
    float: left;
    background-color: #CCCCCC;
    padding: 10px;
    margin: 10px;
    margin-left: 23px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
    border: 3px solid #999;
    color: #000;
    }
    
    figcaption {
    text-align: center;
    color:#000;
    width: 100%;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    margin: 5px 0px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    padding: 1px 0 1px 0;
    }
    
    figcaption a{
    display:block;
    text-decoration: none;
    padding: 4px;
    color: #000;
    font-weight: bold;
    }
    
    figcaption a:hover {
    background-color: #000;
    color: #FFF;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
    font-family: Verdana, Geneva, sans-serif;
    }
    
    footer {
    padding: 10px 0;
    clear: both;
    color: #fff;
    border: 1px dotted green; /**for demo purposes, you may delete**/
    }
    
    footer p {
    color:#000;
    margin:0 0 5px 0;
    }
    ul#bottom-nav {
    list-style-type:none;
    overflow:hidden;
    width:90%;
    margin:0 auto;
    }
    ul#bottom-nav li {
    float:left;
    padding-right:2px;
    border-right:1px medium #000000;
    }
    ul#bottom-nav li.last {
    border:none;
    }
    ul#bottom-nav a {
    display:block;
    text-decoration: none;
    padding: 4px;
    color: #000;
    font-weight: medium
    }
    
    #phone {
    font-weight:bold;
    color: #000;
    }
    </style>
    </head>
    
    
    <body>
    
    <div id="rightSidebar">
    <h3>This is top of #rightSidebar</h3>
    <div class="box">
    <h3>Box Title</h3>
    <p>This is the text for the first box</p>
    </div> <!-- end class box -->
    
    <div class="box">
    <h3>second box</h3>
    <p>this is the text for the second box.  </p>
    </div> <!-- end class box -->
    
    <div class="box">
    <h3>third box</h3>
    <p>this is the text for the third box.  </p>
    </div> <!-- end class box -->
    
    <div class="box">
    <h3>fourth box</h3>
    <p>this is the text for the fourth box. </p>
    </div> <!-- end class box -->
      
    <h3>end of #rightSidebar</h3>
    </div> <!--end #rightSidebar-->
    
    <div id="wrapper">
    <div id="container">
    <header><div id="Logo"></div></header>
    
    <section><header><h1>Where will you fly to next?</h1></header></section>
    
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a>    </li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="destination.html" class="MenuBarItemSubmenu">Destinations</a><ul>
    <li><a href="asia.html" class="MenuBarItemSubmenu">Asia</a><ul>
    <li><a href="hongkong.html">Hong Kong</a></li>
    <li><a href="kualalumpur.html">Kuala Lumpur</a></li>
    <li><a href="singapore.html">Singapore</a></li></ul>
    </li>
    <li><a href="europe.html" class="MenuBarItemSubmenu">Europe</a><ul>
    <li><a href="bordeaux.html">Bordeaux</a></li>
    <li><a href="brussels.html">Brussels</a></li>
    <li><a href="edinburgh.html">Edinburgh</a></li>
    <li><a href="london.html">London</a></li></ul>
    </li>
    <li><a href="northamerica.html" class="MenuBarItemSubmenu">North America</a><ul>
    <li><a href="chicago.html">Chicago</a></li>
    <li><a href="montreal.html">Montreal</a></li>
    <li><a href="quebeccity.html">Quebec City</a></li>
    <li><a href="sanfransisco.html">San Fransisco</a></li></ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Links</a></li>
    <li><a href="contact.html" class="MenuBarItemSubmenu">Contact</a><ul>
    <li><a href="newsletter.html">Newsletter</a></li>
    <li><a href="donate.html">Donate</a></li>
    <li><a href="contactus.html">contact Us</a></li></ul>
    </li>
    </ul>  <!--end menubar-->
    </div> <!--end container-->
    
    <section id="vision">
    <figure> <a href="www.newcityexplorer.com/city_break_london">
    <img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>
    <figcaption><a href="city_break_london.html">London</a></figcaption>
    </figure>
    
    <figure><a href="www.newcityexplorer.com/city_break_brussels">
    <img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>
    <figcaption><a href="city_break_brussels.html">Brussels</a></figcaption>
    </figure>
    
    <figure><a href="www.newcityexplorer.com/city_break_chicago">
    <img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>
    <figcaption><a href="city_break_chicago.html">Chicago</a></figcaption>
    </figure>
    
    <figure><a href="www.newcityexplorer.com/city_break_edinburgh">
    <img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>
    <figcaption><a href="city_break_edinburgh.html">Edinburgh</a></figcaption>
    </figure>
    
    <figure><a href="www.newcityexplorer.com/city_break_sanfransisco">
    <img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>
    <figcaption><a href="city_break_sanfransisco.html">San Fransisco</a></figcaption>
    </figure>
    </section>
    
    <footer>
    <ul id="bottom-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="citybreak.html">City Breaks</a></li>
    <li><a href="recommendedwebsites.html">Recommended Websites</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="secret.html">Secret link</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    <li><a href="sitemap.html">Sitemap</a></li>
    <li><a href="donate.html">Donate</a></li>
    <li class="last"><a href="contactus.html">Contact Us</a></li>
    </ul>
    <p>&copy; New City Explorer 2012</p>
    </footer>
    
    <!--end #wrapper--></div>
    
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 6:47 PM   in reply to alexisonsmith3

    I'd start by repairing this:

     

    <link rel="SpryAssets/SpryMenuBarHorizontal" type="text/javascript" href="SpryMenuBarHorizontal.css" />

     
    |
    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