Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Left Sidebar shows up on right side of page?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-01-2011, 03:12 AM   PM User | #1
buildintechie
New to the CF scene

 
Join Date: Aug 2011
Location: Durham, NC
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
buildintechie is an unknown quantity at this point
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
buildintechie is offline   Reply With Quote
Old 08-01-2011, 11:25 AM   PM User | #2
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
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.
vikram1vicky is offline   Reply With Quote
Old 08-01-2011, 03:15 PM   PM User | #3
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
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
teedoff is offline   Reply With Quote
Old 08-01-2011, 04:59 PM   PM User | #4
buildintechie
New to the CF scene

 
Join Date: Aug 2011
Location: Durham, NC
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
buildintechie is an unknown quantity at this point
@ 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: .
buildintechie is offline   Reply With Quote
Old 08-01-2011, 05:18 PM   PM User | #5
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
Ok seems to be correct now yes? Are you not seeing that text inside the left sidebar?
Attached Thumbnails
Click image for larger version Name: orange.jpg Views: 28 Size: 44.8 KB ID: 10132  
__________________
Teed
teedoff is offline   Reply With Quote
Old 08-01-2011, 09:15 PM   PM User | #6
buildintechie
New to the CF scene

 
Join Date: Aug 2011
Location: Durham, NC
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
buildintechie is an unknown quantity at this point
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.
buildintechie is offline   Reply With Quote
Old 08-02-2011, 04:32 PM   PM User | #7
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
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
teedoff is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 09:15 AM.
Advertisement
Log in to turn off these ads.