12 replies to this topic

[/quit]

Hey, been a while since I've posted, but i'm in dire need of a little p2l guidance.
In my site, I want to try and make a horizontal line using css, but I want it to be dual layered, since my description is shoddy and you probably have no idea what I mean, i'll post a picture.



Obviously, mine is going to be relatively skinnier, but you get the idea. Help would be much appreciated. Thanks .

[Stu]

what is that picture of? its just a big black splodge

going by your description my best guess would be to use the hr tag and style it...

http://www.sovavsiti.cz/css/hr.html
http://www.blakems.c...xperimental/hr/

[/quit]

well the "splodge" is supposed to look like two lines on top of eachother, each of different length.

[Stu]

oh i seeeee, in that case could you not use the horizontal rule styling like above with an image?

[/quit]

yeah thats the problem though, with the background i made for the sitei really cant use images in that part of it, which is why im trying to do it strictly code, is it possible?

[Stu]

not as far as i know, but then again this is me...

you could do it with use of divs i suppose, for example under your content have the border full length and then directly under that have another div layer set to 98% and aligned to the right. im not sure how do-able/overly-complicated that is or how it would work out though... in theory it wouldnt be top to bottom as it leaves a small space between divs doesnt it?

why is it you cannot use images? could you not even use a tiny one alinged to the left maybe 5-10px long, and then have it repeat all the way to the right? the image would be so small in filesize it would pretty much be invisible in load time to the naked eye (assuming load time is the issue?)

[/quit]

i never thought about having the two lines as seperate images, would you be able to have it so that there would be no space between them?

[rc69]

Depending on how you code it, the space shouldn't be a problem. I'd recommend setting margin and padding to 0 on the div's in question IF a space does show up.

[greg]

Why not just use one image? Maybe I'm missing something.

[/quit]

I can't use 1 image because it would have to be a transparent image to be possible, and I just don't like working with transparent images.

[greg]

Once again, maybe I'm missing something important here, because this just seems too obvious to me...

What's wrong with using a transparent bar image? If it's only 2px high, the 1px transparent opening will be aliased and won't cause any problems.

[/quit]

im gonan try and mae a transparent .gif and see how it translates to web and ill be baack if it doesn't.

[sq3r]

There's a pretty simple way I just discovered that you can use a couple divs to make like Stu said.

Here's the code:

<style type="text/css">
#customHr{
	padding:0;
	margin:0;
	height:4px;
	width:100%;
	border-top:1px solid blue;
	}
#customHr div{
	padding:0;
	margin:0;
	height:1px;
	width:90%;
	border-top:1px solid red;
	float:right;
	}
</style>

You won't need the padding and margin properties, but in case you have something like div{padding:5px;} or something, this prevents it from inheriting that.

Then you just place this code wherever you want it to appear:

<div id="customHr"><div></div></div>

Of course you can change the colors if you want, I just made them red and blue to contrast each other.

Hope that helped. I tested it in IE, Opera, Netscape and Firefox and it works the same in all of them.

Edited by sq3r, 13 February 2006 - 08:16 AM.