Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Durham, NC
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left Sidebar shows up on right side of page?

    Hello all-
    This is my first post on Coding Forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out.

    I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar.

    Here is a link to my problem: http://www.durhamsafekids.org/main.html

    Here is my CSS code:
    Code:
    body {
    	font-size: 62.5%;
    	background: url(images/top-bdr.jpg) repeat;
    }
    
    p, li {
    	font: 1.2em/1.8em Sabon, sans-serif;
    	margin-bottom: 10px;
    }
    
    h1 {
    	font: 2.0em "Helvetica Neue", sans-serif;
    	color: white;
    	height: 0px;
    }
    
    h2 {
    	font: 1.8em "Helvetica Neue", sans-serif;
    	color: #99cc33;
    	margin-bottom: 10px;
    }
    
    h4  {
    	font :Georgia, "Times New Roman", Times, serif;
    	color: #0078AA;
    }
    
    h3  {
    	font :Georgia, "Times New Roman", Times, serif;
    	color: #333399;
    }
    
    ul {
    	margin-left: 25px;
    }
    
    img {
    	border: none;
    }
    
    #page-wrap {
    	background: white;
        width: 960px;
    	margin: 10px auto;
    	}
    	#page-wrap #inside {
    		margin: 10px 10px 0px 10px;
    		padding-top: 10px;
    		padding-bottom: 10px;
    	}
    	
    #main-content {
    	background: url(/images/left-sidebar.gif) repeat-y white;
    	padding-left: 230px;
    	padding-top: 20px;
    }
    	
    #header {
    	background: #ffffff;
    	text-align: center;
    }
    
    #menu {
    	background: #ffffff;
    }
    
    #left-sidebar {
    	width: 185px;
    	float: left;
    	padding-left: 15px;
    	padding-top: 20px;
    }
    
    #footer {
    	background: #99cc33;
    	text-align: center;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	color: #006699;
    	font-size: 12px;
    }
    
    .footer a:link    {
      /* Applies to unvisited links in class mainNav */
      text-decoration:  none;
      font-weight:      bold;
      color:            #006699;
      } 
    .footer a:visited {
      /* Applies to visited links in class mainNav */
      text-decoration:  none;
      font-weight:      bold;
      color:            #006699;
      } 
    .footer a:hover   {
      /* Applies to links under the pointer in class mainNav */
      text-decoration:  underline;
      font-weight:      bold;
      color:            #006699;
      } 
    
    
    /* ================================================================ 
    This copyright notice must be kept untouched in the stylesheet at 
    all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.stunicholls.com/menu/pro_drop_2.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    
    .preload1 {background: url(menu/three_1.gif);}
    .preload2 {background: url(menu/three_1a.gif);}
    
    #nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left; height:38px;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}
    
    #nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}
    
    /* Default list styling */
    
    #nav li:hover {position:relative; z-index:200;}
    
    #nav li:hover ul.sub
    {left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
    #nav li:hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
    #nav li ul.sub li a.fly
    {background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
    #nav li:hover ul.sub li a:hover 
    {background:#6a812c; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}
    
    
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}
    
    #nav ul, 
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;} 
    
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}
    And here is my HTML code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	
        
        <meta http-equiv="Content-Type" content="text/html" />
    	
    	<title>Durham County Safe Kids</title>
    	
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<!--[if lt IE 7]>
    		<link rel="stylesheet" type="text/css" href="style-ie.css" />
    	<![endif]-->
        
    
    
    </head>
    
    <body>
    
    	<div id="page-wrap">
    		<div id="inside">
    			
    			<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
    <!-- #EndLibraryItem --></div>
    
              <div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
    <span class="preload1"></span>
    <span class="preload2"></span>
    
    <ul id="nav">
    	<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
    	<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
    		<ul class="sub">
    			<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
    						<li><a href="#nogo4">Car Seats</a></li>
    						<li><a href="#nogo5">Spot the Tot</a></li>
    						<li><a href="#nogo6">Hyperthermia</a></li>
                            <li><a href="#nogo7">Distracted Driving</a></li>
    					</ul>
                </li>
    
    			<li><a href="#nogo8">Poison Prevention</a></li>
    			<li><a href="#nogo9">Wheeled Safety</a></li>
    			<li><a href="#nogo10">Firearms Safety</a></li>
    			<li><a href="#nogo11">Water Safety</a></li>
    			<li><a href="#nogo12">Home Safety</a></li>
    			<li><a href="#nogo13">Pedestrian Safety</a></li>
    		</ul>
    	</li>
    	<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
    	<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
    	<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
    	<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
    </ul>
    <!-- #EndLibraryItem --></div>
    
    <div id="left-sidebar"> Testing</div>
    			
    			<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
    				<h2>This website is currently under construction.  Please come back soon!</h2>
    				
    			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </div>
    			
    			<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->
    
    <div id="footer">
    <table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
      <tr>
        <th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
        <th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
        <th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
        <th scope="col"><span class="footer"><a href="#">Links</a></span></th>
        <th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
        <th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
      </tr>
    </table>
    <br>
    			<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
    			</div><!-- #EndLibraryItem --></div>
    		
    		<div style="clear: both;"></div>
    	
    	</div>
    
    </body>
    
    </html>

    Thanks all!

    ~Jeff
    Last edited by buildintechie; 08-01-2011 at 03:22 AM. Reason: typo

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check your following code:

    Code:
    #main-content {
        background: url(http://www.durhamsafekids.org/images/left-sidebar.gif) repeat-y white;
        padding-left: 230px;
        padding-top: 20px;
    }
    Left padding pushing it to right side.... remove it and check it.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm not sure I see what you're talking about. I dont see any element floated left or right. All I see is one element, a div called main-content with a 220 x 100 orange box that naturally sits to the far left per your coding.

    If you want a two column layout, there are tons of tutorials found by googling two column layouts.
    Teed

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Durham, NC
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ teedoff and vikram. Sorry, I neglected to upload my main.html. I've done so now, and you'll see where the test that should be in the left sidebar is appearing on the right side of the screen. This should make my problem more apparent.

    I inserted the text (and eventually pictures, etc) with the following code:

    Code:
    <div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
    Last edited by buildintechie; 08-01-2011 at 05:01 PM. Reason: .

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ok seems to be correct now yes? Are you not seeing that text inside the left sidebar?
    Attached Thumbnails Attached Thumbnails Left Sidebar shows up on right side of page?-orange.jpg  
    Teed

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Durham, NC
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow...thats really odd. No, I don't.

    http://www.durhamsafekids.org/dskscreen.jpg
    Last edited by buildintechie; 08-01-2011 at 09:16 PM. Reason: photo was too big.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Make sure you're viewing a refreshed page. Hit ctrl+F5 to clear your browser cache.


    btw: We're neighbors...lol Im in High Point.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •