...

View Full Version : Generate horizontal lines inside div



vishal_ok12
01-21-2012, 10:43 AM
Is it possible to fill a div with horizontal lines using css?

http://images3.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-black-white-22hgfh.png

Thanks in advance.

tracknut
01-21-2012, 04:02 PM
Sure, use background-image:


#content {background-image:url('lines.png')}


Dave

Excavator
01-21-2012, 04:20 PM
Hello vishal_ok12,
I'm not sure what it's intended for, but the lines are easy to put under some sort of content. There is no specific CSS way of generating lines though.

Look at this example with an empty ul, assuming you have a semantic reason for using a ul...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 400px;
margin: 30px auto;
padding: 20px;
background: #ccc;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
height: 14px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--end container--></div>
</body>
</html>

Kevin_M_Schafer
01-21-2012, 06:55 PM
Hi vishal_ok12,

From what I've found, Excavator is correct. There's no simple way to create repeating horizontal lines in css and html. Below, I came up with something that works, but, like Excavator's, it's not a simple line of code; it's several lines of code.

VIPStephan, an expert coder here at CodingForums, once stated a few weeks ago that simple, empty div tags are not pure coding techniques. My method may fall into that impure concept. I apologize to VIPStephan if I misunderstood his comment. At the time, he was referring to floats. It seems to me that empty div tags are pretty silly. Maybe he will post to this.

The following code does validate, so it should work without causing conflicts; but, again, a more experienced coder may tell us that this is impractical.

Tracknut's method would certainly be the easiest and fastest.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontal Line Repeat</title>
<style type="text/css">
#container {
width:450px;
height:432px;
border: 1px solid #000;
background-color:#f1f5fb;
margin: 70px auto; }
.repeatline-div {
width:450px;
margin-top:18px;
background-color: #cacaca;
height:1px; }
.repeatline-div div {
position:absolute;
margin-top:18px;
width:450px;
background-color: #cacaca;
height: 1px; }
</style>
</head>
<body>
<div id="container">
<div class="repeatline-div">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div></div>
</body>
</html>

--Kevin

.

Sammy12
01-21-2012, 07:09 PM
There are a lot of things you can do with content:after {} and counters, including the <hr />'s for lines, but I don't think I have the patience to figure that out. content: ; and :before & :after don't work in IE6 or IE7 either
http://nicolasgallagher.com/pure-css-gui-icons/

Just use an image, it's very, very easy.
http://www.youtube.com/watch?v=PUWqZvVEtUs

Basically, you just create a small pattern of squares, then you repeat it. That's all there is to it.

tracknut
01-21-2012, 07:09 PM
Boy, you guys sure saw a different question here than I did!

Dave

Kevin_M_Schafer
01-21-2012, 07:16 PM
Hi Dave,

Lol! I was almost done creating what I used before I thought of using an image! I think an image would really be easiest way to go.

Don't forget, though, my and Excavator's way simply shows that you can, indeed, travel east by sailing west. :p

--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum