[jibber4568]

Hi guys, was kinda hoping for a bit of help on a small problem.

I am quite new to css but am trying to make a border for my site.

In photoshop i created a rectangle with rounded edges.
I cut away the top part of this to act as the image for the top of my page, and then did the same for the bottom part of the page. I also cut an image from the middle of the box to act as side borders, this bit would then repeat depending on the amount of content on the page.

The problem is that im not to sure how to tell the bottom of the box to sit at the end of the repeating sides, depedning how far they go. If you are not sure what i mean, here is an image of the top and sides together





I want the sides of what you can see above to repeat as much as ncessary and then the bottom which is identical to the top(just flipped) to sit on the bottom.

This is the code i have so far.

CSS

#bordertop
{	
height: 52px;
background: url(images/bordertop.gif) no-repeat 0% 0%;
z-index:2;
}

#bordermiddle
{	
height: 52px;
background: url(images/middle2.gif) repeat-y 0% 0%;
z-index:2;
}



#borderbottom
{	
height: 52px;
background: url(images/borderbottom.gif) no-repeat 0% 0%;
z-index:2;
}

HTML

<div id=" wrapper">
		<div id="bordertop" style="position: absolute; left: 12%; top: 4%; width: 950px; height: 170px;">
		</div>
		<div id="bordermiddle" style="position: absolute; left: 12%; top: 13%; width: 960px; height: 170px;">
		</div>
		
	   <!-- <div id="header" style="position: absolute; left: 16%; top: 4%; width: 850px; height: 170px;">
		</div>-->
		
	</div>

This post has been edited by jibber4568: 02 April 2008 - 09:31 AM

[chrisman]

Basically, what you need to do is have three divs. One for the top border (no repeat), one for the middle (repeat), and one for the bottom (no repeat), which you have. What's the problem?

[jaelle]

To have the border stretch to the height of the entire browser area, without using tables, you will need to use some javascript. As far as I know, this is not possible with CSS only. If anyone knows of a way, I'd love to know it.

You need to find the height of available space in the browser window and adjust your #wrapper div accordingly. The method for doing this varies throughout the different browsers, but something like this should work:

function resizeContainer() {
	//get browser height
	if (typeof(window.innerHeight) == 'number') {
		//not IE
		document.getElementById('wrapper').style.height = window.innerHeight + "px"
	}
	else if (document.documentElement && document.documentElement.clientHeight) {
		//IE6+ // standards compliant
		document.getElementById('wrapper').style.height = document.documentElement.clientHeight + "px";
	}
	else {
		//IE4,5 // quirks mode
		document.getElementById('wrapper').style.height = document.body.clientHeight + "px";
	}
}

Call this function in onload() and onresize() events in the body tag.

Next, you need some way to get your #borderBottom div to stick to the bottom of the wrapper element. You can do this using absolute positioning and setting bottom:0.

Example:

#borderbottom
{	
	height: 52px;
	background: url(images/borderbottom.gif) no-repeat 0% 0%;
	z-index:2;
	position:absolute;
	bottom:0;
}

This is just one way to go about this. There may be others as well. Good luck!

[Sandi]

First it would be easier on us if you use a smaller image and link to the large version, so we don't have to x-scroll to see what is going on.

Your side images will expand to the bottom of whatever content longest vertical content you have in the site, so long as you don't break the flow with absolute positioning. If you break the flow the border will only extend down as far as the content that is within the flow (which I just found out a couple days ago). Using javascript is quite tricky and you have to get both the viewport inner-height plus the y-scroll size.

However if you want the page to be more fluid, I suggest using three image divs for top and bottom. For: top-left corner, a slice of top-mid repeated-x and top-right corner. The same with the bottom.


Personally I prefer a CSS defined table (border collapse table).

CSS:

table.border {
	width: 100%;
	border-collapse: collapse;
	cellpadding: 0;
	cellspacing: 0;
	background: transparent;
}

.top_left {	<!-- top left image -->
	width: 30px;
	height: 30px;

	background: url(files/tl.gif) no-repeat left top;
}

.top_mid {	<!-- top center image repeat x -->
	height: 30px;
	width: 100%;
	background: url(files/t.gif) repeat-x;
}

.top_right {	<!-- top right image -->
	width: 30px;
	height: 30px;
	background: url(files/tr.gif) no-repeat right top;
	
}

.bottom_left {	<!-- bottom left image -->
	width: 30px;
	height: 30px;
	background: url(files/bl.gif) no-repeat left top;
}

.bottom_mid {	<!-- bottom center image repeat x -->
	height: 30px;
	width: 100%;
	background: url(files/b.gif) repeat-x;
}

.bottom_right {	<!-- bottom right image -->
	width: 30px;
	height: 30px;
	background: url(files/br.gif) no-repeat right top;
}

.left_border {	<!-- left border image repeat y -->
	width: 30px;
	background: transparent url(files/l.gif) repeat-y left top;
	padding-left: 29px;
}

.right_border {	<!-- right border image repeat y -->
	width: 30px;
		background: transparent url(files/r.gif) repeat-y right top;
	padding-right: 29px;
 }

HTML:

<body>
<!-- Table for site border -->
<table align="center" class="border" cellspacing="0">

	<!-- Top border row -->
	<tr><td class="top_left"></td><td class="top_mid"></td><td class="top_right"></td></tr>

	<tr> <!-- Left site border  -->
		<td class="left_border"><!-- no content--></td>

		<!-- Begin site content td cell -->
		<td valign="top">
			<div class="wrapper"> <!-- wrapper for entire site content -->

			<!-- Entire site code goes here -->

			</div>
		</td> <!-- End  content td -->

		<!-- Right site border -->
		<td class="right_border"><!-- no content --></td>
	</tr>
	<!-- Bottom site border -->
	<tr><td class="bottom_left"></td><td class="bottom_mid"></td><td class="bottom_right"></td></tr>
</table>
</body>

[thehat]

Like Chris says above, you just use three divs, where the top and bottom are of a fixed height with their backgrounds set to no-repeat and the middle one has no fixed height and its background-repeat set to repeat-y.

The reason this isn't currently going to work for you is because you are using absolute positioning on each of your divs, and you are forcing the height of the center div. You should instead absolutely position your wrapper, and then have the other divs set up like this:

<div id="wrapper">

	 <div id="topArea">&nbsp;</div>

	 <div id="centerArea">
		   <!--  All your content goes here -->
	 </div>

	 <div id="botArea">&nbsp;</div>

</div>

And the css like this:

#wrapper {
	 position: absolute; 
	 left: 12%; 
	 top: 4%; 
	 width: 950px; 
	 height: 170px;
}

#topArea {
	 height: 52px;
	 background: url(images/bordertop.gif) 0 0 no-repeat;
}

#centerArea {
	 background: url(images/middle2.gif 0 0) repeat-y;
}

#botArea {
	 height: 52px;
	 background: url(images/borderbottom.gif) 0 0 no-repeat;
}

Personally, I would never use tables for layout formatting as suggested above because it generates loads of unnecessary code, it messes around with screen readers and other accessibility devices and it is against W3C specifications.

Hope that helps

This post has been edited by thehat: 03 April 2008 - 01:55 AM

[jibber4568]

thehat, on 3 Apr, 2008 - 01:52 AM, said:

Like Chris says above, you just use three divs, where the top and bottom are of a fixed height with their backgrounds set to no-repeat and the middle one has no fixed height and its background-repeat set to repeat-y.

The reason this isn't currently going to work for you is because you are using absolute positioning on each of your divs, and you are forcing the height of the center div. You should instead absolutely position your wrapper, and then have the other divs set up like this:

<div id="wrapper">

	 <div id="topArea">&nbsp;</div>

	 <div id="centerArea">
		   <!--  All your content goes here -->
	 </div>

	 <div id="botArea">&nbsp;</div>

</div>

And the css like this:

#wrapper {
	 position: absolute; 
	 left: 12%; 
	 top: 4%; 
	 width: 950px; 
	 height: 170px;
}

#topArea {
	 height: 52px;
	 background: url(images/bordertop.gif) 0 0 no-repeat;
}

#centerArea {
	 background: url(images/middle2.gif 0 0) repeat-y;
}

#botArea {
	 height: 52px;
	 background: url(images/borderbottom.gif) 0 0 no-repeat;
}

Personally, I would never use tables for layout formatting as suggested above because it generates loads of unnecessary code, it messes around with screen readers and other accessibility devices and it is against W3C specifications.

Hope that helps

Thanks for that mate, that is the idea i was looking for, however i still can't get it to work properly. I am also trying to place a couple of items within this area now. These are a banner and menu bar. The code i am using doesn't seem to repeat the middle border part at all. At present all i can see is the topborder, banner and menu.

Would be grateful if you could point out what im doing wrong. Cheers

CSS

body 
{
	margin: 0;
	font: 0.7em/1.6em verdana, arial, helvetica, sans-serif;
	background: #211d1d url(images/bg.jpg) repeat-x 0% 0%;
	letter-spacing: 1px;
	color: #1c3b5a;
}


#wrapper 
{
	position: absolute; top: 35px; right: 80px; 
	width: 1050px;
	
}
	   

#bordertop
{	
	height: 52px;
	background: url(images/bordertop.gif) no-repeat 0% 0%;
	
}

#bordermiddle
{	
	
	background: url(images/middle2.gif) repeat-y 0% 0%;
	
}



#borderbottom
{	
	height: 52px;
	background: url(images/borderbottom.gif) no-repeat 0% 0%;
	
}

#contenttest
{
	z-index:1;
	font-size:x-large;
	color:White
}

		  

#header 
{
	height: 200px;
	background: url(images/smashbanner2.png) no-repeat 0% 0%;
	z-index:1;
}

#menu 
{
	height: 81px;
	width: 882px;
	float: left;
	z-index:1;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Untitled Page</title>
	<link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
</head>
<body>

	<div id="wrapper">
	
	   <div id="bordertop">&nbsp;
	   </div>
		<div id="bordermiddle">&nbsp;
			<div id="header" style="position: absolute; left: 3.5%; top: 30%; width: 100%; height: 200px;">
			</div>
		
		  
			 <div id="menu" style="position: absolute; left: 3%; top: 320%;">
			
			<img src="Images/images/home_btn.png" alt="" /><img src="Images/images/artists_btn.png" alt="" /><img src="Images/images/shop_btn.png" alt="" /><img src="Images/images/events_btn.png" alt="" /><img src="Images/images/listen_btn.png" alt="" /><img src="Images/images/contact_btn.png" alt="" />  
			</div>
		   
			<div id="contenttest" style="position: absolute; left:5%; top:30%;">
			</div>
		  
		</div>
		
		<!--<div id="borderbottom">&nbsp;</div>-->
	   
	  
	</div>
   

</body>
</html>

This post has been edited by jibber4568: 06 April 2008 - 09:42 AM

[Sandi]

As I told you above, you can't use "position: absolute;" because it takes that content out of the flow, subsequently out of the range of your side borders.

Remove the absolute and position them within their parent box.