2 replies [Last post]
dekadem
Offline
newbie
Last seen: 16 years 24 weeks ago
Joined: 2004-08-02
Posts: 6
Points: 0

How could I get a straight blue line floating left next to the content of the div? The width of the line should be scalable.. Is this even possible in the following method?

Here's the code:
<div id="comment">Some text here</div>

And here's the result I'm looking for:

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 24 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Horizontal line next to text content?

You could do it with a background image...

<html>
<head>
<style type="text/css">
#container {
 width:700px;
 text-align:right;
}
p {
 background:#fff;
 padding:0 7px;
 display:inline;
}
span {
 background:url(bar.png);
 background-repeat:repeat-x;
 background-position:bottom left;
 display:block;
}
</style>
</head>
<body>
<div id="container">
<span><p>some text here</p></span>
</div>
</body>
</html>

Where bar.png is a horizontal line, covered up by whatever text you have, giving the appearance you suggested.

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 12 years 6 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Horizontal line next to text content?

How about this solution;

HTML

<html> 
<head> 
<style type="text/css"> 
#content { 
  text-align:right; 
} 
#content h1 { 
position: relative;
top: 12px;
display: inline;
padding: 0 5px 0 5px;
} 
#content ul {
border: solid 3px blue;
}
</style> 
</head> 
<body> 
<div id="content">
<h1>Some Text</h1> 
<ul>
<li>This is a list item</li>
</ul>
</div> 
</body> 
</html>

This forces the <h1> text to position itself over the blue border of the unordered list.

Mind you, I have only tested this in IE 6 (PC) and I am using an <ul> with the border style, but perhaps it will get you on the right track.

Good luck!
cb.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.