Border, Background image, end border?

Css help, working on a special bg

Page 1 of 1

10 Replies - 3507 Views - Last Post: 21 September 2009 - 09:55 PM

#1 Snipeye  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 77
  • Joined: 19-September 09

Border, Background image, end border?

Posted 19 September 2009 - 06:40 PM

I'm working on a border/background, I want it to do something like:

(border/background image left) (background body, repeat-x;) (border/background image right)

How do i do this? My code looks like this:

.element-container { background-color: transparent; width: 100%; border:2px solid white; }
	#container .element-header { font-weight: bold; color: #0F7EFD; border-left: url(headerimageleft.jpg); border-right: url(headerimageright.jpg); background-color: #000066; background-image-left: url(headerimageleft.jpg); background-image-right: url(headerimageright.jpg); background-image: url(headerimagebody.jpg); background-repeat:repeat-x; }
	#container .element-header-inner { font-weight: bold; color: #0F7EFD; }
	#container .element-header a { color: #0F7EFD; }
	#container .element-header-inner a { color: #0F7EFD; }
	#container .element-row1-inner { color: #0F7EFD; }
	#container .element-row2-inner { color: #0F7EFD; }
	#container .element-row1 { color: #000066; background-color: #9EA8A6; background-image: url(elementbodybg.jpg); background-repeat:repeat; }
	#container .element-row2 { color: #000066; background-color: #8A8A80; background-image: url(elementheader.jpg); background-repeat:repeat; }


The header is the part I'm working on, and the "background image right/left" is what I tried most recently. Needless to say, it didn't work.

Help?

Is This A Good Question/Topic? 0
  • +

Replies To: Border, Background image, end border?

#2 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Border, Background image, end border?

Posted 20 September 2009 - 02:15 AM

If you could post an image of what you want the final outcome to be it will be alot easier to understand what your after?

tommyflint
Was This Post Helpful? 0
  • +
  • -

#3 Snipeye  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 77
  • Joined: 19-September 09

Re: Border, Background image, end border?

Posted 20 September 2009 - 01:35 PM

I could upload a picture, but I'll just try to explain it better. Here's the key: x: A 3 pixel wide end border. Y: A 1px wide main image background that can repeat itself as long as necessary on the x axis. Z: A 3px wide right border.

So, it goes:

X, YYYYYY(etc, as long as necessary), Z. The total length is as long as is required for the header of the element in the code I previously posted.
Was This Post Helpful? 0
  • +
  • -

#4 markhazlett9  Icon User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Re: Border, Background image, end border?

Posted 20 September 2009 - 04:58 PM

View PostSnipeye, on 20 Sep, 2009 - 12:35 PM, said:

I could upload a picture, but I'll just try to explain it better. Here's the key: x: A 3 pixel wide end border. Y: A 1px wide main image background that can repeat itself as long as necessary on the x axis. Z: A 3px wide right border.

So, it goes:

X, YYYYYY(etc, as long as necessary), Z. The total length is as long as is required for the header of the element in the code I previously posted.



pictures are worth 1000 words... I think we will still need a picture. Then you can explain the elements and what's wrong.

Cheers
Was This Post Helpful? 0
  • +
  • -

#5 Snipeye  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 77
  • Joined: 19-September 09

Re: Border, Background image, end border?

Posted 20 September 2009 - 07:18 PM

Alright. I want to make a header that looks like this:

Posted Image

but sometimes it's longer, and sometimes it's shorter, so the middle repeats, but the ends are always the same.

It starts with this

Posted Image

then the body, the repeatable part, repeats as much as is necessary. The body looks like this:

Posted Image

Then last, it ends with this:

Posted Image

How do I do this?

This post has been edited by Snipeye: 20 September 2009 - 07:20 PM

Was This Post Helpful? 0
  • +
  • -

#6 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Border, Background image, end border?

Posted 21 September 2009 - 07:09 AM

You could just create three DIV's and three ID's with the three different background images and set the body one to repeat-x

tommyflint
Was This Post Helpful? 0
  • +
  • -

#7 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: Border, Background image, end border?

Posted 21 September 2009 - 07:21 AM

I've tried to come up with something here, see what you think, copy and paste into a new .html file, make sure to include your three images (same names) in same folder as the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Snipeye section header image example</title>
		<style type="text/css">
			body {
				background: url(http://kcnye.com/files/QuickSiteImages/white_stripe_background_op_800x344.jpg);
				font-family: "Arial",sans-serif;
				margin: 2em auto auto auto;
				width: 70%;
			}
			
			.section {
				border: 1px solid #555555;
				background-color: #ebebeb;
				padding: 0px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			}
			
			.secheader {
				background: url(headerimagebody.jpg);
				background-repeat: repeat-x;
				color: #ffffff;
				font-size: 9pt;
				padding: 0px;
				height: 19px;
				line-height: 19px;
				text-align: center;
			}
			
			.secheaderleft {
				background: url(headerimageleft.jpg);
				background-repeat: no-repeat;
				float: left;
				height: 19px;
				width: 22px;
			}
						
			.secheaderright {
				background: url(headerimageright.jpg);
				background-repeat: no-repeat;
				display: block;
				float: right;
				height: 19px;
				width: 22px;
			}
			
			.section p {
				color: #333333;
				font-size: 9pt;
				padding: 0px 8px 10px 8px;
			}
			
			a {
				color: blue;
				text-decoration: none;
			}
			
			h1 {
				color: #555555;
				font-family: "Georgia",serif;
				margin-bottom: 0px;
				margin-left: 8px;
			}
			
			img {
				padding: 12px;
				padding-bottom: 3px;
			}
			
			.author {
				color: #555555;
				font-size: 8pt;
				margin: auto auto 10px auto;
				text-align: right;
				width: 90%;
			}
		</style>
	</head>
	<body>
		<div class="section">
			<div class="secheader">
				<div class="secheaderleft">&nbsp;</div>
				<strong>Welcome to my awesome website!</strong>
				<div class="secheaderright">&nbsp;</div>
			</div>
			<img src="http://www.jail.se/software/firefox/images/firefox-128.png" alt="Image" style="float: left;" />
			<h1>Title of this article</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum nisi eu 
				risus dignissim ac sollicitudin quam eleifend. In id elit nunc. Praesent luctus pulvinar 
				orci ut vulputate. Integer ac neque tortor. Vestibulum sodales neque a lacus tempor ut
				aliquam quam vulputate. Duis elementum sodales commodo. Aenean sed egestas sapien. Quisque
				eu lectus vitae ipsum vehicula sodales. Aliquam facilisis porta condimentum. Fusce 
				sagittis fermentum lorem, sed congue elit fringilla ut. Cras quis lorem sed lacus ultricies 
				scelerisque vel ut felis. Curabitur faucibus ipsum nec erat eleifend ut luctus nulla
				elementum. Praesent et lectus sed sem vestibulum ullamcorper. Maecenas odio dui, aliquet 
				eu dignissim ac, ultricies sed nunc. Vestibulum sit amet lectus at purus porttitor viverra.
			</p>
			<p>
				Sed sagittis lacinia congue. Maecenas sit amet nisi lorem. Duis congue neque justo. Integer
				cursus porta sagittis. Suspendisse eros diam, feugiat nec elementum at, elementum pulvinar
				risus. Curabitur euismod ornare viverra. Pellentesque at risus a mauris interdum suscipit et
				a lectus. Pellentesque a arcu massa. Sed turpis nunc, tincidunt vitae volutpat sit amet, 
				interdum sed erat. Cras sollicitudin sagittis felis quis ultrices. Donec fringilla 
				condimentum lectus, vel vehicula erat lobortis elementum. Quisque sed tellus ut lectus 
				dictum euismod id id nibh. Aenean luctus, nisi vel dignissim gravida, est purus iaculis lacus,
				in facilisis augue orci a eros. In bibendum feugiat iaculis. Ut sit amet scelerisque tellus.
				Phasellus cursus sagittis nibh quis elementum. Nunc eget erat turpis, id facilisis urna. 
				Pellentesque lorem nunc, sollicitudin nec fermentum eu, vestibulum accumsan tortor. Sed quis nunc
				eu velit porttitor volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
				ridiculus mus.
			</p>
			<div class="author">
				<strong>Posted by</strong>: <a href="http://www.elison.org.uk/">Christopher Elison</a> on Monday, 21 September 2009 14:52 GMT.
			</div>
		</div>
	</body>
</html>



The headed section expands and shrinks to fit the width of the parent (in this case, the body set to 70%).
Posted Image
Have tried and confirmed it works in both FF 3.5 and IE 8. Hope this helps!

This post has been edited by Christopher Elison: 21 September 2009 - 07:41 AM

Was This Post Helpful? 0
  • +
  • -

#8 Snipeye  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 77
  • Joined: 19-September 09

Re: Border, Background image, end border?

Posted 21 September 2009 - 01:20 PM

Thank you very much, but how would I integrate this into the code I posted previously? It's a css document... I'd like to keep it in a single css file, mostly because the person I'm working on this site with needs it to work with the GUI website builder that he has, and I don't know how to get that to work exactly.
Was This Post Helpful? 0
  • +
  • -

#9 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: Border, Background image, end border?

Posted 21 September 2009 - 01:36 PM

You can paste the .section .secheader .secheaderleft and .secheaderright ito your current CSS stylesheet and copy the "section" DIV into your existing HTML, be warned though, if you're using an HTML WYSISWYG editor, there is a good chance of it being messed up and not appearing as it should (one of the reasons I only do handcoded HTML).
Was This Post Helpful? 0
  • +
  • -

#10 Snipeye  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 77
  • Joined: 19-September 09

Re: Border, Background image, end border?

Posted 21 September 2009 - 08:10 PM

Well that's just the thing - my friend uses, and needs, the wysiwyg editor, so I was wondering if there's any way to incorperate the header into only the css, so every time to make an "element" the header will automatically do this?
Was This Post Helpful? 0
  • +
  • -

#11 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: Border, Background image, end border?

Posted 21 September 2009 - 09:55 PM

if you copy the css code given above into your main css file and you give your divs some class it will work as you would like it too.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1