Fixing my border height.

Discussion in 'Web Design and Development' started by wfoster, May 16, 2009.

  1. wfoster macrumors 6502a

    wfoster

    Joined:
    Feb 16, 2009
    Location:
    Plymouth, UK
    #1
    Hi,

    I own a site and I am trying to get my middle border to fit in between the header and footer. Here is the CSS code I'm using:

    Code:
    .sidebar {
    
    	 width: 150px;
         height: 100%;
         background-color: #12344b;
    	 border-left: double ;
    	 border-left: gray; 
    	 border-left-style: double;
    	 border-right: double;
         
    }
    and in the file:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <php>
    <head>
    <link type="text/css" rel="stylesheet" href="/css/floatbox/floatbox.css" />
    <script type="text/javascript" src="/css/floatbox/floatbox.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <title>wfoster</title>
    </head>
    <body>
    
    <style type="text/css">
    
    .lolz
    {
    position:absolute;
    left:1000px;
    height:100%;
    
    }
    
    </style>
    
    <div id="header">
    <br /><br/>
    <div align="center">
    
    <a href="index.php">Home</a> - <a href="blog.php">Blog</a></a> - <a href="about.php">About</a> - <a href="sales.php">Sales</a> - <a href="/photography/">Photography</a></div>
    
    </div>
    <div class="lolz">
    <div class="sidebar">
    Testing
    </div>
    </div>
    http://www.wfoster.co.uk/index.php

    Can anybody help me fit in properly? Thanks.
     
  2. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #2
    You can change the thickness of the border with: border-left-width: 3px;

    You can also simply the CSS with: border-left: 5px double gray;.

    If you want a clean HTML+CSS:
    1. Don't write CSS code in the HTML.
    2. You can center DIVs setting the right and left margins to auto. Don't use align.
    3. You can use padding instead of <br /> to add some space in your divs.

    Good luck.
     
  3. wfoster thread starter macrumors 6502a

    wfoster

    Joined:
    Feb 16, 2009
    Location:
    Plymouth, UK
    #3
    I don't think you understood what I was trying to do. Thanks for the tips, they'll be put in to use. Thank you.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I think you should clean up things first in your code.
    • There's a <php> tag before the <html> which doesn't belong or exist.
    • You have some style tags inside the body tag, which is not allowed.
    • You're missing the closing tag for the html tag.
    • You'll also want to phase out using the font and center tags as they are deprecated.
    • You're also making bad use of the br tag.
    Once that's cleaned up it'll be easier to work with your code.
     
  5. wfoster thread starter macrumors 6502a

    wfoster

    Joined:
    Feb 16, 2009
    Location:
    Plymouth, UK
    #5
    They're now cleaned up. Along with my CSS. I have made more use of the margin. Can anybody help me with the border height please? :) Thanks.
     
  6. wfoster thread starter macrumors 6502a

    wfoster

    Joined:
    Feb 16, 2009
    Location:
    Plymouth, UK
    #6
    This is the new code:

    Code:
    <?php 
    require ("header.php"); 
    ?>
    
    
    <div class="sidebar">
    <div class="rss">
    <a href="feed.xml"><img src="images/feed.png" align="center" border="0"></a> Subscribe!<br />
    Consectetuer adipiscing elit. Fusce ultricies, tellus sit amet semper accumsan, enim dui tincidunt nisl, at bibendum massa erat in nisl. Sed consequat, mi a tempus scelerisque, velit risus pulvinar velit, et sollicitudin lectus dui a orci. Duis quis sem. Ut luctus consequat lacus. Aliquam iaculis. Cras blandit. In placerat, erat vitae consectetuer tincidunt, mi nibh hendrerit orci, sit amet aliquet leo risus sed odio. Sed volutpat vehicula sapien. Sed et ipsum. Aliquam sem dui, feugiat et, ullamcorper vitae, consectetuer sed, neque. Nunc eros. Mauris tincidunt. Fusce molestie ipsum aliquet urna. Donec ut purus. Nunc ut elit commodo lacus fermentum dictum. Sed ac metus sit amet nisl hendrerit nonummy. In quam ante, pulvinar quis, venenatis ut, accumsan sit amet, nulla. Mauris faucibus purus. Etiam sollicitudin elementum nulla. Vivamus et velit.
    
    Quisque eleifend. Mauris accumsan eros eu neque. Donec nisi. Donec venenatis lorem non enim. Pellentesque ultricies nisl ac tortor. In egestas. Vestibulum metus nisi, bibendum quis, nonummy eu, gravida vitae, magna. Mauris sem erat, porttitor eu, lobortis non, ornare et, nunc. Aenean sollicitudin cursus nisi. Morbi non quam at metus suscipit porta. Quisque eleifend ligula nec est.
    </div>
    </div>
    
    
    <div class="pos_content">
    <div class="title">Lorem ipsum dolor sit amet</div>
    <div class="date">Date 15th Date</div>
    <div class="blog-content">
    Consectetuer adipiscing elit. Fusce ultricies, tellus sit amet semper accumsan, enim dui tincidunt nisl, at bibendum massa erat in nisl. Sed consequat, mi a tempus scelerisque, velit risus pulvinar velit, et sollicitudin lectus dui a orci. Duis quis sem. Ut luctus consequat lacus. Aliquam iaculis. Cras blandit. In placerat, erat vitae consectetuer tincidunt, mi nibh hendrerit orci, sit amet aliquet leo risus sed odio. Sed volutpat vehicula sapien. Sed et ipsum. Aliquam sem dui, feugiat et, ullamcorper vitae, consectetuer sed, neque. Nunc eros. Mauris tincidunt. Fusce molestie ipsum aliquet urna. Donec ut purus. Nunc ut elit commodo lacus fermentum dictum. Sed ac metus sit amet nisl hendrerit nonummy. In quam ante, pulvinar quis, venenatis ut, accumsan sit amet, nulla. Mauris faucibus purus. Etiam sollicitudin elementum nulla. Vivamus et velit.
    
    Quisque eleifend. Mauris accumsan eros eu neque. Donec nisi. Donec venenatis lorem non enim. Pellentesque ultricies nisl ac tortor. In egestas. Vestibulum metus nisi, bibendum quis, nonummy eu, gravida vitae, magna. Mauris sem erat, porttitor eu, lobortis non, ornare et, nunc. Aenean sollicitudin cursus nisi. Morbi non quam at metus suscipit porta. Quisque eleifend ligula nec est.
    </div>
    </div>
    
    
    <?php
    require ("footer.php");
    ?>
    and the CSS:

    Code:
    .sidebar {
    
    	 margin-left: 750px;
    	 width: 175px;
         height: 100%;
         background-color: #12344b;
    	 border-left: double ;
    	 border-left: gray; 
    	 border-left-style: double;
    	 border-right: double;
    	 font-size: 10px;
         
    }
     
  7. SelfMadeCelo macrumors regular

    SelfMadeCelo

    Joined:
    Sep 9, 2008
    Location:
    Tulare, CA
    #7
    You've got a lot of work to do. Try putting your sidebar inside the content div instead of outside. Float everything the way you want it and then clear it so the footer makes its way to the bottom...
     
  8. SelfMadeCelo macrumors regular

    SelfMadeCelo

    Joined:
    Sep 9, 2008
    Location:
    Tulare, CA
    #8
    I'm guessing you want it to look somewhat like the attachment...right? I made the content div way too small but that can be fixed...
     

    Attached Files:

  9. wfoster thread starter macrumors 6502a

    wfoster

    Joined:
    Feb 16, 2009
    Location:
    Plymouth, UK
  10. SelfMadeCelo macrumors regular

    SelfMadeCelo

    Joined:
    Sep 9, 2008
    Location:
    Tulare, CA
    #10
    HTML:
    
    
    <div id="header">
    <div align="center">
    
    <a href="index.php">Home</a> - <a href="blog.php">Blog</a> - <a href="about.php">About</a> - <a href="sales.php">Sales</a> - <a href="/photography/">Photography</a>
    </div></div>
    
    
    
    
    
    <div class="pos_content">
    <div class="content_content">
    <div class="title">Lorem ipsum dolor sit amet</div>
    <div class="date">Date 15th Date</div>
    <div class="blog-content">
    Consectetuer adipiscing elit. Fusce ultricies, tellus sit amet semper accumsan, enim dui tincidunt nisl, at bibendum massa erat in nisl. Sed consequat, mi a tempus scelerisque, velit risus pulvinar velit, et sollicitudin lectus dui a orci. Duis quis sem. Ut luctus consequat lacus. Aliquam iaculis. Cras blandit. In placerat, erat vitae consectetuer tincidunt, mi nibh hendrerit orci, sit amet aliquet leo risus sed odio. Sed volutpat vehicula sapien. Sed et ipsum. Aliquam sem dui, feugiat et, ullamcorper vitae, consectetuer sed, neque. Nunc eros. Mauris tincidunt. Fusce molestie ipsum aliquet urna. Donec ut purus. Nunc ut elit commodo lacus fermentum dictum. Sed ac metus sit amet nisl hendrerit nonummy. In quam ante, pulvinar quis, venenatis ut, accumsan sit amet, nulla. Mauris faucibus purus. Etiam sollicitudin elementum nulla. Vivamus et velit.
    
    Quisque eleifend. Mauris accumsan eros eu neque. Donec nisi. Donec venenatis lorem non enim. Pellentesque ultricies nisl ac tortor. In egestas. Vestibulum metus nisi, bibendum quis, nonummy eu, gravida vitae, magna. Mauris sem erat, porttitor eu, lobortis non, ornare et, nunc. Aenean sollicitudin cursus nisi. Morbi non quam at metus suscipit porta. Quisque eleifend ligula nec est.
    </div></div>
    
    <div class="sidebar">
    <div class="rss">
    <a href="feed.xml"><img src="images/feed.png" align="center" border="0"></a> Subscribe!<br>
    Consectetuer adipiscing elit. Fusce ultricies, tellus sit amet semper accumsan, enim dui tincidunt nisl, at bibendum massa erat in nisl. Sed consequat, mi a tempus scelerisque, velit risus pulvinar velit, et sollicitudin lectus dui a orci. Duis quis sem. Ut luctus consequat lacus. Aliquam iaculis. Cras blandit. In placerat, erat vitae consectetuer tincidunt, mi nibh hendrerit orci, sit amet aliquet leo risus sed odio. Sed volutpat vehicula sapien. Sed et ipsum. Aliquam sem dui, feugiat et, ullamcorper vitae, consectetuer sed, neque. Nunc eros. Mauris tincidunt. Fusce molestie ipsum aliquet urna. Donec ut purus. Nunc ut elit commodo lacus fermentum dictum. Sed ac metus sit amet nisl hendrerit nonummy. In quam ante, pulvinar quis, venenatis ut, accumsan sit amet, nulla. Mauris faucibus purus. Etiam sollicitudin elementum nulla. Vivamus et velit.
    
    Quisque eleifend. Mauris accumsan eros eu neque. Donec nisi. Donec venenatis lorem non enim. Pellentesque ultricies nisl ac tortor. In egestas. Vestibulum metus nisi, bibendum quis, nonummy eu, gravida vitae, magna. Mauris sem erat, porttitor eu, lobortis non, ornare et, nunc. Aenean sollicitudin cursus nisi. Morbi non quam at metus suscipit porta. Quisque eleifend ligula nec est.
    
    </div>
    </div>
    </div>
    
    
    
    
    
    <center>
    <div id="footer">
    
    <font size="1">Copyright 2009 by <b>Wesley Foster</b>. All Rights Reserved.<br>
    (We're best viewed on Mac 10.4+ with the browser either Safari or alternatively Firefox) 
    
    </font></div>
    
    </center>
    
    
    This is extremely quick and really dirty lol

    Get rid of the positioning with pos_content and add float:left to .content_content and whatever width you want. I used width:600px in that one just randomly. Then float:right #sidebar and get rid of margin-left:750px. Then for the footer add clear:both to clear the top two divs.

    It's really messy but so is the rest of the code so you'll have to end up cleaning it up anyways. Also you can definitely get rid of some divs in there. For example you don't need divs for the title, date, and post. You should use H2 for the title then paragraph for the rest.
     

Share This Page