...

View Full Version : Creating Columns in specific spots



jonnythesaint
10-23-2009, 10:53 AM
ok, it sounds odd but i want to create a small column or div with an image and text, i need four of them to line up, then four under that, and then another set of four.

think jpeg gallery.
only i need them to be in a specific spot.
and they should be sort of fixed, a i guess jello style layout.


i created a jpeg to go underneath them, as a template and to give the illusion of a drop shadow.

now,

i go it to work....sort of, my code looks like someone of severe mental disorder created it.

it worked in safari, looks like absolute crap in IE7, and is slightly off in Firefox.


if anyone has a way to do this...err the proper way.
i've been up for days and nights, no sleep and getting pretty insane thinking about this.


even if you could just point me in the right direction.
:confused:


http://img.photobucket.com/albums/v335/nevers/demo1-1.jpg

jonnythesaint
10-23-2009, 11:18 AM
i think i can make png's with the shadow and then position them.

could i do this with a container and list items??

would i need to place the main image as the background of the container and could i center the unordered list inside the container and set parameters on the container?

jonnythesaint
10-23-2009, 11:31 PM
ok here is what i got so far. this is just a tester.

is there a way to position this on top of an image and have them both locked in position in a jello style layout?


<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 2px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: left;
font-weight: normal;
width: 145px;
margin: 2px 2px 2px 25px;
}
div.one
{
text-align: left;
font-weight: normal;
width: 120px;
margin: 2px 2px 2px 2px;

}
.project {
font-weight: bold;
}

#container {
width: 800px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="images/vo.png" alt="Klematis" width="152" height="145" /></a>
<div class="desc"><span class="project">Vaughan Oliver</span><br />poster series</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="images/onebrick.png" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="images/hellboy.png" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="images/warning.png" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="152" height="145" /></a>
<div class="desc"><span class="project">Vaughan Oliver</span><br />poster series</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="152" height="145" /></a>
<div class="desc">Add a description of the image here</div>
</div>

</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum