Custom CSS borders

Using images for left/right side borders

Page 1 of 1

6 Replies - 2281 Views - Last Post: 05 September 2007 - 01:57 PM

#1 ItsaMystery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 07

Custom CSS borders

Posted 04 September 2007 - 03:23 PM

Hey all,

I'm currently working on a site for a family friend's business. I'm pretty new to the web development "scene" though, so this is my first real project using CSS. I essentially dove in and started learning pretty quickly as I went, but alas, I ran into a problem.

Currently, I'm trying to make the main body of content have custom borders--not just rounded edges, but actual images on the top/bottom (I have this part working) and a left/right border image that will repeat along the y-axis for as long as the body content lasts (having trouble with this part).

I've tried a combination of different div setups and played around with the CSS code a bit, but to no avail. To try and explain this better, here's a screenshot of what I have currently: http://img213.images...picture1ky6.png

I have my main body of content, and what I'm wanting to happen is the custom left/right side border to repeat-y along the entirety of the body of content. It currently seems to shove the content down, though. (Note: the side border image is 1px high and is set to repeat-y. I currently have it set to be 100px tall just for testing purposes). For some reason when I try to set the side-border div id to height: 100% (in hopes that it would span across the entire area of the body/text content), it disappears.

Here's the relevant html/css code:

<div id="corners_top"></div>
			<div id="content-outer">
			<div id="border_sides"></div>
			<div id="content-inner">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae dui at lorem adipiscing placerat. Aliquam et nibh. Suspendisse tempor suscipit turpis. Duis eget velit at erat porta pharetra. Maecenas interdum, augue et tristique feugiat, turpis augue pretium quam, quis semper sapien orci vel pede. Proin dolor tortor, facilisis vitae, auctor sed, blandit eu, erat. Suspendisse urna. Nullam ac dolor. Integer elit orci, rutrum vulputate, viverra et, ornare id, nulla. Integer at tortor. Nam nulla. Mauris varius tortor. Nullam tincidunt purus et orci. Vivamus tellus arcu, aliquet in, dignissim at, convallis vitae, massa. Sed a ante et sapien aliquam tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc nulla ante, pellentesque in, dignissim in, gravida vulputate, arcu. Maecenas eget nisl ut erat lobortis auctor. Nam nec magna imperdiet.</p>
			<div class="clear"></div>
			</div>
			</div>
			<div id="corners_bottom"></div>


and the CSS:
#corners_top{
	background: url(images/corners_top.png) center no-repeat;
	height: 42px;
	width: 840px;
	margin: auto;
}
#corners_bottom{
	background: url(images/corners_bottom.png) center no-repeat;
	height: 42px;
	width: 840px;
	margin: auto;
}
#border_sides{
	background: url(images/border_side.png) repeat-y;
	height: 100px;
	width: 792px;
	float: left;
}
#content-outer{
	width: 792px;
	margin: auto;
}
#content-inner{
	background: #FBDEA3 url(images/logo.png) center no-repeat;
	text-align: center;
	font-size: 16px;
	line-height: 1.5em;
	width: 756px;
	padding: 5px;
	margin: auto;
}



To explain the code slightly...I have the corners_top image at the top of the div. The content-outer div defines the area where the border_sides should go (not sure if this is the best way to do this; this is probably the area that's messing things up, but I'm not sure). The content-inner is where the text content and logo bg are located. And the corners_bottom is, well, where the custom bottom corners go.

I'm sure it's just some weird div ordering issue at this point, but I can't seem to figure it out. Thanks in advance for any and all help! :D

- Itsa

This post has been edited by ItsaMystery: 04 September 2007 - 03:25 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Custom CSS borders

#2 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: Custom CSS borders

Posted 05 September 2007 - 12:02 PM

<div id="corners_top"></div>
			<div id="content-outer">
			<div id="border_sides"></div>
			<div id="content-inner">
				<p>Lorem ipsum dolor ...<p>
			<div class="clear"></div>
			</div>
			</div>
			<div id="corners_bottom"></div>


hrm maybe try wrapping your content-inner div within your border-sides div, never done anythign like this before, but that is what I would try like this:

 <div id="border_sides">
			<div id="content-inner">
				<p>Lorem ipsum dolor ...<p>
			<div class="clear"></div>
			</div>
			</div>
			</div>


but then you have the clear...so i don't know what that is going to do, if that doesn't work I would try moving the clear div down somewhere...let me know how it goes...that looks really nice btw
Was This Post Helpful? 0
  • +
  • -

#3 ItsaMystery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 07

Re: Custom CSS borders

Posted 05 September 2007 - 12:54 PM

Oh wow, duh! :D

I never thought to wrap it all with the div tags...derr. :P Thanks so much.

However now, there's a slight problem with my footer; it's not sticking itself at the end of the content box like it used to: http://img66.imagesh...picture2yu8.png

Here's the code now:
<div id="corners_top"></div>
			<div id="content-outer">
			<div id="border_sides">
			<div id="content-inner">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae dui at lorem adipiscing placerat. Aliquam et nibh. Suspendisse tempor suscipit turpis. Duis eget velit at erat porta pharetra. Maecenas interdum, augue et tristique feugiat, turpis augue pretium quam, quis semper sapien orci vel pede. Proin dolor tortor, facilisis vitae, auctor sed, blandit eu, erat. Suspendisse urna. Nullam ac dolor. Integer elit orci, rutrum vulputate, viverra et, ornare id, nulla. Integer at tortor. Nam nulla. Mauris varius tortor. Nullam tincidunt purus et orci. Vivamus tellus arcu, aliquet in, dignissim at, convallis vitae, massa. Sed a ante et sapien aliquam tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc nulla ante, pellentesque in, dignissim in, gravida vulputate, arcu. Maecenas eget nisl ut erat lobortis auctor. Nam nec magna imperdiet.</p>
			<div class="clear"></div>
			</div>
			</div>
			</div>
			<div id="corners_bottom"></div>


I've tried moving the corners_bottom div around various spots between the last 3 div's, but that only produces weirder results.

This is what clear does, if it means anything:
.clear{
	clear: both;
}


Thanks so much again!
Was This Post Helpful? 0
  • +
  • -

#4 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: Custom CSS borders

Posted 05 September 2007 - 01:28 PM

well I know when I have a container with floating object I always do a clear:both on the footer, so try putting that either right before or right after your corners bottom...other than that i dunno. It is the clear you need to move not the corners bottom. if neither of those work, see what happens when you put it between one of those closing divs, or maybe even put the corners bottom in the clear div at the bottom, just play w/ it and see what you come up with.

This post has been edited by supersssweety: 05 September 2007 - 01:30 PM

Was This Post Helpful? 0
  • +
  • -

#5 ItsaMystery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 07

Re: Custom CSS borders

Posted 05 September 2007 - 01:49 PM

w0000t. :D

Everything looks good! Awesome...Thanks so much for your help!

:)
Was This Post Helpful? 0
  • +
  • -

#6 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: Custom CSS borders

Posted 05 September 2007 - 01:51 PM

View PostItsaMystery, on 5 Sep, 2007 - 01:49 PM, said:

w0000t. :D

Everything looks good! Awesome...Thanks so much for your help!

:)

which way worked?
Was This Post Helpful? 0
  • +
  • -

#7 ItsaMystery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 03-September 07

Re: Custom CSS borders

Posted 05 September 2007 - 01:57 PM

Putting the clear div right before the footer image fixed it. :)

<div class="clear"></div>
			<div id="corners_bottom"></div>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1