How can I accommodate a large number of absolute divs with a little CSS?
I need a way to make it div
repeat a certain number (36) times vertically, with 1px of space in between. The divs are absolutely positioned, so each one individually will have tons of CSS.
I don't mind placing 36 divs in HTML directly, although I would rather not do that, but styling each one would be ineffective.
source to share
How about a nest?
you can nest them with relative positioning or maybe some positioning: http://jsfiddle.net/zWbUu/
Html
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}
If you want some int content you can use nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}
source to share
As others have said, you cannot do this using pure HTML or CSS. If you want to do it with PHP, you can do something like this:
Say your div has a class called mydiv. This class should have Position: Absolute Height: 10px Width: 10px Border-Border: 4px as you said. In addition to these add a 1px top margin.
Your CSS should now look something like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make the Div repeat, put in your HTML code similar to the following wherever you want.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
As I said, this uses PHP. If you've never used PHP before, then you should check if your web server supports. See This for more information on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code is probably not perfect, but I'm sure you can work with it.
source to share
This is not possible with absolute positioning, because as you stated with absolute positioning, you have to determine the coordinates of the target as it is being output from the document stream.
However, you can do it with float. Take the following code for example:
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder
div smaller than the width of two box
divs, you force the next div rectangle to appear on a new line below the previous one without specifying the exact positioning value. Then just add a space.
source to share
The only way to do it with one div
is to create an image of what the current one looks like div
, with a space 1px
. This way you can create a fixed width / height div
at which the background repeats. This will give the illusion you want with just one div
.
Otherwise, as said, you need x amount divs
to get the repetition you want. This can be easily achieved with jQuery or something similar, but if you really only want one div
then a background image might be the way to go.
source to share