www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Problem with side bar

  1. #1
    Join Date
    Jul 2012
    Location
    Scotland
    Posts
    6

    resolved [RESOLVED] Problem with side bar

    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

  2. #2
    Join Date
    Jul 2012
    Location
    Stockport, Manchester, United Kingdom
    Posts
    11
    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;
    }

  3. #3
    Join Date
    Jul 2012
    Location
    Scotland
    Posts
    6
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles