PDA

View Full Version : border-length possible?



rmedek
Aug 21st, 2004, 06:50 AM
Who's ready for a CSS challenge?

Ok, at least it's a challenge to me. Here's my question. Let's say I want to put a dotted border on the left side of each major block of text for a visual effect. Easy enough, but now let's say I would like the border to only stretch about 80% of the way, sort of like the old <hr width="80%">, but vertical. It would look like the image below. I'm not sure I can figure out a method using CSS only. Any ideas?
http://richardmedek.com/temp/border.gif

hemebond
Aug 21st, 2004, 07:46 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Partial Border</title>
<style type="text/css">
#container {
position:relative;
}
#border {
border-left:1px dotted #000;
position:absolute;
top:3em;
left:0em;
bottom:3em;
}
p {
padding:1em;
}
</style>
</head>
<body>
<div id="container">
<div id="border"></div>
<p>
This is text<br>
This is text
</p>
<p>
This is text<br>
This is text
</p>
<p>
This is text<br>
This is text
</p>
</div>
</body>
</html>

mindlessLemming
Aug 21st, 2004, 07:56 AM
**edit: I knew I shouldn't have gotten distracted half way through posting this... :rolleyes: I think he wins^ :D

Challenge accepted...

..challenge completed


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>80% High Borders</title>
<style type="text/css">
body{
padding:100px;
}
div {
border-left:3px dotted #333;
width:500px;
padding-left:30px;
position:relative;
}
p {
position:relative;
z-index:2;
}
span {
position:absolute;
width:510px;
height:50px;
background:#fff;
display:block;
}
span.a {
top:-10px;
left:-10px;
}
span.b {
bottom:-10px;
left:-10px;
}
</style>
</head>

<body>

<div>
<span class="a"><!-- --></span>
<p>Lorem ipsum where did I put that damn filler text. Ah, there it is..Aliquam erat volutpat. Pellentesque at quam vitae sem pharetra ornare. Nam tempus feugiat est. Maecenas dictum augue eget lorem. Nam libero. Phasellus quam. Vestibulum tincidunt metus. Nulla facilisi. In id nibh sed dolor blandit ultrices. Nullam ante enim, semper eget, ultricies eu, iaculis adipiscing, est.</p>
<p>Lorem ipsum where did I put that damn filler text. Ah, there it is..Aliquam erat volutpat. Pellentesque at quam vitae sem pharetra ornare. Nam tempus feugiat est. Maecenas dictum augue eget lorem. Nam libero. Phasellus quam. Vestibulum tincidunt metus. Nulla facilisi. In id nibh sed dolor blandit ultrices. Nullam ante enim, semper eget, ultricies eu, iaculis adipiscing, est.</p>
<p>Lorem ipsum where did I put that damn filler text. Ah, there it is..Aliquam erat volutpat. Pellentesque at quam vitae sem pharetra ornare. Nam tempus feugiat est. Maecenas dictum augue eget lorem. Nam libero. Phasellus quam. Vestibulum tincidunt metus. Nulla facilisi. In id nibh sed dolor blandit ultrices. Nullam ante enim, semper eget, ultricies eu, iaculis adipiscing, est.</p>
<p>Lorem ipsum where did I put that damn filler text. Ah, there it is..Aliquam erat volutpat. Pellentesque at quam vitae sem pharetra ornare. Nam tempus feugiat est. Maecenas dictum augue eget lorem. Nam libero. Phasellus quam. Vestibulum tincidunt metus. Nulla facilisi. In id nibh sed dolor blandit ultrices. Nullam ante enim, semper eget, ultricies eu, iaculis adipiscing, est.</p>
<span class="b"><!-- --></span>
</div>
</body>
</html>

A little heavy on markup, but good cross browser support and it resizes well.
All 'px' units could be replaced with 'em' or perhaps even '%' (though '%' will get varying results).
:thumbsup:

rmedek
Aug 21st, 2004, 09:40 AM
Hemebond:

#container {
position:relative;
}
#border {
border-left:1px dotted #000;
position:absolute;
top:3em;
left:0em;
bottom:3em;
}


<div id="container">
<div id="border"></div>
That is tricky, oh so tricky. I like it. I'm not sure how (why) the border has length at all, because the div closes with no content. My guess is the absolute positioning makes it fill out the relative div?

Anyhow, I can't get it to work in IE. But on Mozilla it works great.


Andrew: I didn't think to use negative positioning... I was thinking from the outside in. That's a great idea and it works, but I'm going to try to clean up the code a bit...

Thanks for your help guys... I'll let you know how this turns out :thumbsup: