Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertically positioned floated image stacks

    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:






    Thanks in advance.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •