Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Fixing my border height.

wfoster

wfoster

macrumors 6502a
Original poster
Feb 16, 2009
696
38
Plymouth, UK
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.
 
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.
 
nightelf said:
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.
Click to expand...

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.
 
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.
 
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.
 
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;
     
}
 
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...
 
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...
 

Attachments

  • Picture 2.png
    Picture 2.png
    232.7 KB · Views: 90
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back