...

View Full Version : Vertically positioned floated image stacks



Arashi86
07-22-2008, 06:21 AM
I like to think I'm not that bad at CSS, but implementation of this design idea is completely evading me.

I'm designing a site that uses a floated stack of differently-sized images on either side of the main text to create an interesting dual-sided text wrap. The image stacks are simply 180-degree rotations of one another, one being positioned at the top right corner of the main content div and the other being positioned at the bottom left corner. All of this is fine so far, but I want the bottom-left image stack to be attached to the bottom edge of the div as with position:absolute, so that the amount of content in the page will determine the amount of vertical space between the image stacks. Visual mock-ups below. Position:absolute is, of course, not working since it destroys the text wrap, and position:relative adjustment is resulting in the text wrapping around the space where the image would have been without the positioning. I've been looking around the web, but haven't found anything particularly helpful; is this effect possible without excessive markup?

Mockups:
http://img.photobucket.com/albums/v605/daajenai/page-nocontent.jpg

http://img.photobucket.com/albums/v605/daajenai/page-somecontent.jpg

http://img.photobucket.com/albums/v605/daajenai/page-lotsofcontent.jpg

Thanks in advance.

effpeetee
07-22-2008, 06:28 AM
How about giving us the images and some of your code. It's very difficult to work without the images, and your code will let us see what you are trying.

Frank

Arashi86
07-23-2008, 08:40 AM
Oh, whoops. Certainly. All that's in my code right now is the basic float stuff; I've been taking any new code I try back out once I determine it's not working.

All the pertinent images are hosted at http://www.libr8.org/etc/[imagename]

HTML:

<html>

<head>
<title>Squidmonkey Design Studio - Info</title>
<link rel="stylesheet" type="text/css" href="squid.css" />
</head>
<body>

<a href="index.html"><img src="titlebar-2.png"/></a><img class="head" src="infohead.png"/><img class="monkey" src="squidmonkey-resized.png"/>
<div class="navbar"><img src="navbar-1.png"/><a href="gallery.html"><img src="navbar-2.png"/></a><a href="contact.html"><img src="navbar-3.png"/></a></div>
<br/>

<div class="textscoot">
<img src="topright-1.png" class="curve"/><img src="bottomleft-14.png" class="curveend"/>
<img src="topright-2.png" class="curve"/><img src="bottomleft-13.png" class="curveend"/>
<img src="topright-3.png" class="curve"/><img src="bottomleft-12.png" class="curveend"/>
<img src="topright-4.png" class="curve"/><img src="bottomleft-11.png" class="curveend"/>
<img src="topright-5.png" class="curve"/><img src="bottomleft-10.png" class="curveend"/>
<img src="topright-6.png" class="curve"/><img src="bottomleft-9.png" class="curveend"/>
<img src="topright-7.png" class="curve"/><img src="bottomleft-8.png" class="curveend"/>
<img src="topright-8.png" class="curve"/><img src="bottomleft-7.png" class="curveend"/>
<img src="topright-9.png" class="curve"/><img src="bottomleft-6.png" class="curveend"/>
<img src="topright-10.png" class="curve"/><img src="bottomleft-5.png" class="curveend"/>
<img src="topright-11.png" class="curve"/><img src="bottomleft-4.png" class="curveend"/>
<img src="topright-12.png" class="curve"/><img src="bottomleft-3.png" class="curveend"/>
<img src="topright-13.png" class="curve"/><img src="bottomleft-2.png" class="curveend"/>
<img src="topright-14.png" class="curve"/><img src="bottomleft-1.png" class="curveend"/>

<p>This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text.</p>
</div>

</body>

</html>

CSS:

p {
font-size: 12pt;
font-family: serif;
text-align: left;
color: rgb(194,234,222);
margin: 0px 15px 0px 0px
}

body {
background-color: rgb(0,0,0);
background-image: url(sq-background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

.monkey {
position:fixed;
right:5px;
bottom:5px;
}

.head {
position:absolute;
right:100px;
}

.navbar {
width:220px;
position:fixed;
right:5px;
bottom:210px;
}

.textscoot {
position:relative;
margin-left:10px;
margin-right:210px;
margin-top:10px;
margin-bottom:20px;
min-height: 600px;
}

a img {
border:0;
}

img.curve {
float:right;
clear:right;
margin:0;
}

img.curveend {
float:left;
clear:left;
margin:0;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum