8 Replies Latest reply: Jun 21, 2012 3:31 PM by alexisonsmith3 RSS

    Side Bar issue

    alexisonsmith3

      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

        • 1. Re: Side Bar issue
          Ben Pleysier MVP

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

           

          Gramps

          • 2. Re: Side Bar issue
            Nancy O. MVP

            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.

            • 3. Re: Side Bar issue
              alexisonsmith3 Community Member

              Hi Nancy,

               

              I tried to put the code back in the text since I tried to change the box configuration however it did not seem to work did I not put something back?

               

              Thanks

               

              Alex

              • 4. Re: Side Bar issue
                Nancy O. MVP

                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.

                • 5. Re: Side Bar issue
                  alexisonsmith3 Community Member

                  Thankyou

                  • 6. Re: Side Bar issue
                    alexisonsmith3 Community Member

                    I am trying to center the right side bar within the cloumn on the right hand side however it seems to only work within dreamweaver. When I  look at it online it seems to stick to the right hand column. Can you see where I have gone wrong?

                     

                    Alex

                    • 7. Re: Side Bar issue
                      Ken Binney MVP

                      I'd start by repairing this:

                       

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

                      • 8. Re: Side Bar issue
                        alexisonsmith3 Community Member

                        It has been fixed but I am still unable to move myblog into the middle of the right hand side column.

                         

                        Alex