Hello,
I've got a problem I can't figure out on my own. Hope someone can help me. I've already been looking everywhere I thing, but haven't found anything that helped me really.

Here is my problem.
I've got a graphic that I position in the middle of the site with this code - no problem:

background:url(collection.jpg);
position:absolute;
top:50%;
left:50%;
margin:-40 0 0 -200;
width:400px;
height:80px;

The height and with are actually the size of collection.jpg. Now I need to extend collection.jpg to both sites with a line which I've got as graphic as well. These lines are supposed to start at both endings of collectin.jpg and shall reach to both ends of the screen. And I have no idea how to realize this. I would like to only use CSS and hope this can actually be done. Using tables this what not be a problem.

Hope someone got an idea! Thanks alot!
c2k

c2k can you post the rest of the code for the page? I think I understand what you're looking for, but I think the rest of the page will be helpful in coming up with a solution. It will for me anyway.

Sure thing I could do that but actually there is not more code for the page. That's badically all I've got right now. It's for a titlepage, so no big code coming more to it.

This it what it shall look like:

------------------------------ @$$$$$$$$$$$$$$$$$$$$$$$@ -----------------------------
 (this is the graphic line,         (some logo right here,          (other site of the line,
variable width)                        fixed width)                         variable width as well)

Hope that helps a bit to picture it.
Thanks for your help!

c2k

It will depend some on how you structure the html for everything, but what I was thinking was you could have col 1, col 2 (with the image), and col 3 all wrapped inside a container div. You could then set a border-top on the container div to get a line all the way across. That wouldn't involve using an image for the line, but if the image is basically just a solid line you should be able to get the look you want.

If you need to use the image it will probably be easiest to use css positioning to place the image wherever you want. How you place it will depend again on how you structure your html.

It will depend some on how you structure the html for everything

Seriously, no structure at all. Imagine just an empty site with NO code at all. All I would like to do is center a graphic in the middle of the page (look for the code in my first posting) and than have two lines, each on one site of the centered graphic, starting at the centered graphic and running to both ends of the screen (look at my second posting - a rough outline)

... , but what I was thinking was you could have col 1, col 2 (with the image), and col 3 all wrapped inside a container div. You could then set a border-top on the container div to get a line all the way across. That wouldn't involve using an image for the line, but if the image is basically just a solid line you should be able to get the look you want.

That won't work. I actually need the graphics.

If you need to use the image it will probably be easiest to use css positioning to place the image wherever you want.

Well, that's what I am trying to figure out: How to place the "line-graphics". Well no big deal to position them, but the problem is, that I don't know the width of the "line-graphics", since resolution, browserwindowsize, etc will alter.

Thanks.
c2k

I think we are a bit confused because you are talking about columns then saying you want the image borders to reach the sides of the page

<div id="header">
  <div id="top"></div>
  <div id="logo"><a href="/"><img src="/path/image" alt="alt text"/></a></div>  <!-- logo -->
  <div id="bottom"></div>
</div><!-- header -->

CSS

body {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size:1em;
	margin:0px;
}
#header {
	position:relative;
	text-align:center;
	width:100%;
	height:120px;
}
#logo {
	position:relative;
	border:0px;
	margin:0px auto;
}
#logo img {
	position:relative;
	border:0px;
}
#top, #bottom{
	position:relative;
	height:10px;
}
#top {
	background-image: url(background_image);
	background-repeat: repeat-x;
}
#bottom {
	background-image: url(background_image);
	background-repeat: repeat-x;
}

looks something like http://www.candsdesign.co.uk/article...der/layout.asp

Hey,
thanks alot for your help! I appreciate it very much!
Unluckily we still missunderstand each other. I made a rough sketch, which I hope will clear all missunderstandings.

Here the image:


Once again
The graphic in the middle is positioned as posted in my first posting. No big deal.
In the picture that would be columne two. I called it colums, since it kinda has something of columns (watch the the picture above) and I just didn't know how else to call it.

On both sides of the centered picture I need a graphic that starts at either end of the centered graphic and ends at the side of the screen. The tricky thing about it is, that these two graphics (columns 1 and 3 in the picture), aren't supposed to be at the same height. If this was so, I could just let the graphic expand over the whole site and lay the centered graphic over it - but this is not this way.

Since columns 1 and 3 are of an unknown width, I don't know how to accomplish this.
Once again: Thanks alot for your help!

BTW: (c) by MS Paint. Need, isn't it?

maybe if you made a sketch of what its suppose to look like, then i think people will have an idea of what to try fix

Originally Posted by hellhound121

maybe if you made a sketch of what its suppose to look like, then i think people will have an idea of what to try fix

?!?

you mean you want to do this
http://www.candsdesign.co.uk/article...age/layout.asp

body {
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size:1em;
margin:0px;
}
#header {
position:absolute;
float:left;
left:0px;
top:40%;
width:100%;
height:120px;
}
#logo {
position:relative;
clear:left;
border:0px;
z-index:1;
margin:0px auto;
}
#logo img {
position:relative;
border:0px;
border:1px solid red;
}
#top, #bottom{
position:relative;
height:10px;
width:30%;
z-index:0;
}
#top {
float:left;
top:25%;
background-image: url(/images/css/fills/red-diag-10x10-fwd.jpg);
background-repeat: repeat-x;
}
#bottom {
float:right;
top:-25%;
background-image: url(/images/css/fills/red-diag-10x10-bck.jpg);
background-repeat: repeat-x;
}

Awesome!! This is exactly what I've been looking for! Very nice!
Why haven't I thought about it.

Just a quick hint of mine: The width of the two lines should be 50% instead of 30%. That way you make sure no matter how wide the window is, that the lines will always reach the logo. When using 30% it is theoratically still possible, that they will become too short to reach either way the logo or the side of the viewport.

Thanks for being patient!