[RESOLVED] Problem with side bar

**Akairyuu** · 07-21-2012 05:52 PM

Hi. I made this art website for myself a while ago using a tutorial from this link http://net.tutsplus.com/tutorials/ht...ge-5/#comments and I've had this annoying problem for a while now where my side bar won't sit at the side of the page so that it now sits at the bottom, which I don't want. The weird thing is that it used to sit at the side when I first wrote the code and I don't think I changed anything in the code since then. I tried re-copying how the side bar css code in the tutorial were written but it didn't make any difference...

Here's a link to my site to let you see what I mean http://akairyuu.zxq.net

Here's the html and css code for you to take a look at

HTML Code:

<!DOCTYPE html>  
<html>  
  <head>
    <title>Akai's Art</title>
    <link href="Style.css" rel="stylesheet" type="text/css" media="screen"/>
  </head>
  <body>
     <div id="main">
       <div class="container">
         <div id="header">
           <div id="logo">
             <h1>Logo</h1>
           </div>
           <ul id="menu">
             <li><a href="index.htm">Home</a></li>
             <li><a href="original art.htm">Original <br>Art</a></li>
             <li><a href="Fan art.htm">Fan <br>Art</a></li>
             <li><a href="3D Renders.htm">3D <br>Art</a></li>
             <li><a href="3D Animations.htm">3D <br>Animations</a></li>
             <li><a href="art videos.htm">Art <br>Videos</a></li>
           </ul>
           <div style="clear:both"></div>
         </div>
 
         <div id="content">
              <h2>Welcome to Akai's Art</h2>
              <h3>About this site</h3>
              <p>Hello, I'm Akairyuu and welcome to my art website, Akai's Art. In this website I will be showing most of my art pieces that I made which will be shown in the allocated galleries. This includes my original art which aren't based on other works, Fan Art, 3D art and animation and also videos to do with art made by me.</p>
 
               <p>To the right of this page you'll see various links which include links to my art profiles, programs which I use and useful tutorial sites based on the said programs.</p>
 
<p>Also Note that this website was made entirely on GIMP 2.6, just to point that out :)</p>
           <div id="updates">
              <h3>Latest Updates</h3>
              <p>Well, I've been working flatout on this site this week and I finally managed to get the design done on GIMP and got the HTML and CSS written up. I've still to do the actual art pages, which still have the original CSS but I'll get 'round to that soon.</p>
           </div>
         </div>
 
         <div id="sidebar">
           <h3>Links</h3>
           <ul id="menu">
             <li><a href="http://pyrodragoness.deviantart.com">Me on DeviantArt</a></li>
             <li><a href="http://www.elfwood.com/~akairyuu">Me on Elfwood</a></li>
             <li><a href="http://www.youtube.com/pyrogirl64">Me on YouTube</a></li>
             <li><a href="http://www.blender.org">Blender main site</a></li>
             <li><a href="http://www.gimp.org/">GIMP main site</a></li>
             <li><a href="http://blenderartists.org/forum">Blender Artists</a></li>
             <li><a href="http://www.tutorialized.com/">Tutorialized</a></li>
             <li><a href="http://matrep.parastudios.de/">Blender Materials Repository</a></li>
             <li><a href="http://gimp-tutorials.net/">GIMP-Tutorials</a></li>
             <li><a href="http://mygimptutorial.com/round-web-20-button-with-a-metal-ring">Great tut on making buttons in GIMP</a></li>
             <li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/">Awesome web making tutorial</a></li>
           </ul>
         </div>
         <div style="clear:both"></div>
       </div>
       
     </div>
 
     <div id="footer">
       <div class="container">
         <p>Copyright © Akai's Art 2010-2012<br/>
         All Rights Reserved</p>
       </div>
     </div>

Code:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin: 0px; padding: 0px;}

body {
font-family: Arial, Helvetica, sans-serif;
background: #ebe8e8;
}

.container {   
    width: 800px;   
    margin: 0 auto;   
} 


#main { 
     background: url("header slice.jpg") repeat-x;
}

#logo { 
     background: url("Akais art logo 2.png") no-repeat;
         height: 159px;
          width: 663px;
}

#logo h1{
      text-indent: -9999px;
}

ul#menu {
      list-style: none;
}

ul#menu li a {
    font-size: 30px;
    color: #ffffff;
    text-decoration:none;
}

ul#menu li {
    float: left;
}

ul#menu li {
     list-style: none;
     padding-top: 8px;
}

ul#menu li {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px;
}

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal;
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px;
}

#content small {
    font-size: 12px;
    color: #373737;
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none;
}

#updates {
      padding-top: 10px;
}

#updates h3 {
      padding-bottom: 10px;
}

#updates p {
     padding-top: 10px;
     padding-bottom: 14px;
}


#content {
    width: 510px;
    float: left;
}

#sidebar {
    float: left;
}

#sidebar h3 {
    font-size: 24px;
    color: #ffffff;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 18px;
    color: #000000;
}

#sidebar ul {
     list-style: none;
}

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top:35px;
    background: #6f6fff;
    border: 4px solid #000000;
    padding: 20px;
}

#footer {
    background: url("footer slice.jpg") repeat-x;
    padding-top: 20px;
    padding-bottom: 60px;
    margin-top: 40px;
    colour: #fff;
}

Thanks in advance

**Dava1986** · 07-21-2012 06:09 PM

Just change the sidebar css with the following

Code:

#sidebar {
    background: none repeat scroll 0 0 #6F6FFF;
    border: 4px solid #000000;
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    padding: 20px;
    width: 180px;
}

**Akairyuu** · 07-21-2012 06:25 PM

Thank you!

You don't know how irritating that was and it was such a simple fix, I feel such a noob lol

The site looks much better now, thanks again

!

Thread: [RESOLVED] Problem with side bar

Thread Tools

Display

[RESOLVED] Problem with side bar

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions