#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0

    Cannot figure out how to move this sidebar down


    I am using two style sheets, since there is only one page on the site that needs a sidebar.

    HTML Code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset="UTF-8">
    <link href="erie-canalCSS.css" rel="stylesheet" type="text/css">
    <link href="eriecanal-side-navbar.css" rel="stylesheet" type="text/css">
    <title>Making It Work</title>
    </head>
    
    <body>
    
    <a href="#"><img src="#" alt="The Erie Canal" align="left" /></a></p>
    
    <ul id="nav">
    	<li class="current"><a href="#">Home</a></li>
        <li><a href="#">About the Canal</a>
        
        	<ul>
            	<li><a href="#">Clinton's Folly</a>
                <li><a href="#">Expansion</a>
                <li><a href="#">Today</a>
            </ul>
        </li>
            
    	<li><a href="#">Making It Work</a>
       		 <ul>
            	<li><a href="#">Locks</a>
                <li><a href="#">Culverts</a>
                <li><a href="#">Waste Weirs</a>
                <li><a href="#">Bridges</a>
                <li><a href="#">Stop Gates</a>
                <li><a href="#">Weigh Locks</a>
            </ul>
        </li>
            
        <li><a href="#">Tours</a>
       		 <ul>
            	<li><a href="#">Tour Information</a>
                <li><a href="#">Reservations</a>
            </ul>
        </li>
            
      <li><a href="#">Maps, Images &amp; More</a></li>
    </ul>
    
    
    <div id="main">
    	<h1>Making It Work</h1>
    
    
    	blah blah blah
    </div>
    
    <div id="sidebar">
    	<ul>
    		<li><a href="#">Locks</a></li>
    		<li><a href="#">Culverts</a></li>
            <li><a href="#">Waste Weirs</a></li>
            <li><a href="#">Bridges</a></li>
            <li><a href="#">Stop Gates</a></li>
            <li><a href="#">Weigh Locks</a></li>
    	</ul>
    </div>
    
    
    <div id="footer">
      <p> &copy; Copyright 2012, Frank E. Sadowski Jr. </p>
    </div>
    
    </body>
    </html>
    CSS for entire website:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body	{
    	font: 16px Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    		 background: #009999;
    		 width: 700px;
    		 height: 1500px;
    		 margin: 100px auto;
    		 padding-bottom: 300px auto;
    		 color: #FFF;
    }
    
    h1 {
    	background-color: #000;
    	padding: 10px;
    	width: 695px;
    }
    
    h2 { 
       position: fixed;
        top: 310px;
        left: 300px;
        width: 450px; 
    }
    
    h2 span { 
       color: white; 
       font: bold 20px/35px Helvetica, Sans-Serif;   
       background: rgb(0, 0, 0);
       background: rgba(0, 0, 0, 0.8);
       padding: 7px; 
    }
    
    h2 span.spacer {
       padding:0 10px;
    }
    
    p {
    	width: 690px;
    }
    
    <!-- Begin Nav Bar-->		 
    a	{
    	color: #333;
    }
    
    #nav	{
    	font-size: 14px;
    	margin: none;
    	width: 700px;
    	padding: 7px 6px 0;
    	background: #000;
    	line-height: 100%;
    	display: inline-block;
    }
    
    #nav li {
    	margin: 0 5px;
    	padding: 0 0 8px;
    	float: left;
    	position: relative;
    	list-style: none;
    }
    
    #nav a {
    	font-weight: bold;
    	color: #e7e5e5;
    	text-decoration: none;
    	display: block;
    	padding: 8px 20px;
    	margin: 0;
    }
    
    #nav a:hover { background: #000; 
    				color: #fff;
    				z-index: 10px!important;
    }
    
    #nav .current a, #nav li:hover > a {
    	background: #000;
    	color: #e7e5e5;
    	border: 2px solid #1144AA;
    }
    
    #nav ul li:hover a, #nav li:hover li a {
    	background: none;
    	border: none;
    	color: #e7e5e5;
    }
    
    #nav ul a:hover { color: #1144AA!important; }
    
    #nav li:hover > ul { display: block; }
    
    #nav ul {
    	display: none;
    	margin: 0;
    	padding: 0;
    	width 185px;
    	position: absolute;
    	top: 32px;
    	left: 0;
    	background: #000;
    	border: 2px solid #1144AA;
    }
    
    #nav ul li	{
    	float: none;
    	margin: 0px;
    	padding: 0px;
    }
    
    #nav ul a	{font-weight: normal; }
    #nav ul ul	{left: 180px; top: -1px; }
    
    <!-- END NAV BAR -->
    
    .wrapper {
    	position: relative;
    	width: 650px;
    	margin: 0px auto;
    }
    
    img.large {
    	position: static;
    	width: 642px;
    	height: 470px;
    	margin: 12px;
    }
    
    img.small {
    	width: 316px;
    	height: 225px;
    	margin: 9px;	
    }
    
    table {
    	width: 600px;
    	align: middle;
    	border: solid #000;
    }
    td {
    	padding: 10px;
    }
    
    table img {
    	alignment-adjust:middle;
    	padding-right: none;
    }
    CSS for Sidebar:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    main	{
    	width: 500px;
    	padding: 0px;
    	background: #009999;
    	float: left;
    }
    
    p	{
    	float: left
    }
    
    footer	{
    	width: 500px;
    	padding: 0px;
    	background: #009999;
    	float: left;
    }
    
    #sidebar {
    	width: 200px;
    	background-color: #000;
    	float: right;
    }
    
    #sidebar a	{
    	color: #fff;
    }
    Last edited by Kravvitz; April 21st, 2013 at 08:14 PM. Reason: added [code] tags
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0
    Sorry, forgot to post the site. This link is http://
    www.
    public.
    asu.
    edu/

    ~mahowel2/erie-canal-makingitwork.html
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, MHOWELL89.

    When I go tohttp://www.public.asu.edu/~mahowel2/...ingitwork.html I get a "page not found" error.

    To move "#sidebar" down simply give it a top margin.

    Placing HTML-style comments in an (external) stylesheet is not valid. You need to use CSS-style (aka C-style) comments.

    Also in the second stylesheet you're using "main" as a selector. There is no element type called that. I do see an ID in your page with that name, so you should change the selector to "#main".

    P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.

    Comments on this post

    • MHOWELL89 agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo