Need to get this IMG stretched vertically

**semicolon** · Mar 10, 2010 12:27

Hi there Sitepoint, this is my first official post and I hope some of you GURUs can help me out. I'll post the code below, but you can also see a screenshot of what I'm trying to achieve -- as well as the actual HTML -- at . . .

sites.google.com/site/semicodin/ohTHAT

and click on ver. 99_899 in HTML which, because of google's proprietary layout structure, needs to be opened cached or you won't see it correctly. Alternatively you can just drop in the code below if you're uncomfortable with opening the page in a non-static environment. Either way, the URL is in my public profile for permanent reference.

Well the objective here is very simple (or at least I hope so lol):
I'm trying to get that little page curl to stretch vertically + automatically resize (along with GRAPHIC1) so that all the edges join. Apologies for the garrish TILE I'm using, I wanted to be able to hilight any areas where the seams have holes.

Thanks for any help. I'm so glad I found this great site, and I'm looking forward to learning a TON about CSS, in particular.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SEMICODIN&rsquo;S CSS MARKUP &loz;&loz;&loz;&loz;DRAFT&loz;&loz;&loz;&loz;</title>

<style type="text/css">

body {margin: 0; background-image: url(http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg);}

body,td,th {font-family: Arial; font-size: medium; color: #000000;}
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
a:link {color: #009900; text-decoration: none;}
a:visited {color: #009900; text-decoration: none; color: #000000;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

#BANNEROW {margin-top: 50px; margin-left: 10%; margin-right: 10%;}
#BANNEROW div img {width: 66%;}

#LOGO {float: LEFT; background-color: #FFFFFF; width: 80%; }

#CURL {float: RIGHT; background-color: TRANSPARENT; width: 20%;}

#CONTENT {float: LEFT; background-color: #FFFFFF; padding: 7%; border: 3px solid #000000; margin-left: 10%; margin-right: 10%;}
#CONTENT div img {width: 80%;}

</style>
</head>

<body>

<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BANNEROW \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="BANNEROW">

<div id="LOGO">
<div style="border-left: 3px solid #000000; border-top: 3px solid #000000; padding: 2%;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div>


<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CURL \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CURL">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/CURLY.gif" style="border: 0px; width: 100%; height: 100%;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div><!-- Closing BANNEROW -->


<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CONTENT">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
<br>
<br>
<div style="text-align: center;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC2.jpg" style="border: 0px solid #5FB7FC;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>

</div><!-- Closing CONTENT -->

</body>
</html>

**Paul O'B** · Mar 11, 2010 09:51

Hi,

Welcome to Sitepoint

It's generally a bad idea to scale images in the browser and is really only suitable for simple images.

I would have used a fixed width background image for that curl rather than scale it up and down.

However I guess something like this would do the job.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, p {
    margin:0;
    padding:0;
}
img {
    border:none
}
body {
    background-image: url(http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg);
    padding:50px 0 10px;
}
#wrap {
    margin-left: 10&#37;;
    margin-right: 10%;
    position:relative;
    min-height:0;
}
* html #wrap, * html #content {
    zoom:1.0
}
#header {
    width:80%;
    float:left;
    background: #FFF;
    padding: 2% 2% 1%;
    border: 3px solid #a0a0a0;
    border-width:3px 0 0 3px;
    position:relative;
    z-index:1;
}
.logo {
    width: 80%;
}
#content {
    padding:7%;
    clear:both;
    position:relative;
    z-index:2;
    border:3px solid #a0a0a0;
    background:#fff;
    margin-top:-10px;
    min-height:0;
}
#content p {
    margin:0 0 1em
}
.curl {
    float:right;
    width: 16%;
    margin-left:-5px;
    position:relative;
}
.curl img {
    width:100%;
    position:absolute;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="header">
        <p><a href="http://sites.google.com/site/semicodin/ohTHAT/bracket"><img class="logo" src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" title="CLICK ANY GRAPHIC" alt=""></a> 
    </div>
    <p class="curl"><img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/LONGCURL.gif" width="100%"  alt="" ></p>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
            felis. Aliquam sit amet felis. Mauris semper,
            velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
            nisl in quam. Etiam augue pede, molestie eget,
            rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
            odio sagittis blandit. Maecenas at nisl. Nullam
            lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
            wisi. Ut ante dui, aliquet nec, congue non, accumsan
            sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
            venenatis. Suspendisse cursus velit vel ligula.
            Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
            suscipit. Aenean quis risus sit amet eros volutpat
            ullamcorper. Ut a mi. Etiam nulla. Mauris interdum</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
            felis. Aliquam sit amet felis. Mauris semper,
            velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
            nisl in quam. Etiam augue pede, molestie eget,
            rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
            odio sagittis blandit. Maecenas at nisl. Nullam
            lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
            wisi. Ut ante dui, aliquet nec, congue non, accumsan
            sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
            venenatis. Suspendisse cursus velit vel ligula.
            Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
            suscipit. Aenean quis risus sit amet eros volutpat
            ullamcorper. Ut a mi. Etiam nulla. Mauris interdum</p>
    </div>
</div>
</body>
</html>

Try to keep the code tidy and don't mix the case of everything as it looks untidy and is prone to errors when typing.

Hope that helps anyway

**semicolon** · Mar 13, 2010 14:13

Originally Posted by Paul O'B

Hi,

Welcome to Sitepoint

I would have used a fixed width background image for that curl rather than scale it up and down.

Paul, YOU ROCK!! Wow. I'm speechless. It will take me awhile to get my arms around your masterpiece — and trust me, I am not going to suffer you to explain every term that is alien to me — but could you give me a very broad introduction to the concept behind this . . . and then I'll go hunt down the tutorials and read about it in greater depth? I just wouldn't know where to start. If you could summarize the main strategy here that would give me a starting point.

Now about the background img strategy you mentioned . . .

I almost dismissed this when I first read it as being mutually exclusive of a >>page background. Of course, that is ridiculous; but you see I've been at this wicked page curl thing for so many days now that I actually had to force myself away from the computer because my right eyeball was beginning to swell up with a stye

(note clever icon). I needed to flush my buffer for a few days because it's obvious my brain left the computer screen at some point and had been calling to my unwilling body to rejoin it in the analog world of all things corporeal heh. But I would like to revisit your suggestion if you (or anyone) is game?

Before I forget here's an important update: In between eyedrops I finally also had my fill of Google Sites and grabbed a free host that will get the hell out of the way of my coding. Everyone will be able to see my projects LIVE at semicodin.mysite.com. I've left a rude graphic on my Google site that summarizes my opinion of their Sites concept. I'll continue to use the site but only for storage (which represents the only authentic value it has, having

completely disabled CSS).

Let me know.

semicodin

**Paul O'B** · Mar 14, 2010 04:18

Originally Posted by semicolon

but could you give me a very broad introduction to the concept behind this . . .

If you mean the curl image then I just floated an element to the right with the correct width and then placed the image absolutely so that it took up no space in the flow and didn't upset the layout.

The curl element has position:relative defined which creates a stacking context for the absolute element which I set to 100% width so that it scales with the page and fills the parent space. The height of the image was omitted so that it is calculated by the browser to maintain the correct aspect ratio of the image.

As your image was nearly square it scaled pretty uniformly and manages to fit in the space allocated. I made sure that the following element #content had a higher z-index in case the image poked out more that it should and #content would hide any overlap.

Now about the background img strategy you mentioned . . .

Rather than scale the curl image up and down I would have used a fixed size background image in that .curl element. Just make the image edges (the side border and top border) bigger than you will ever need so that more gets revealed as the page grows.

**semicolon** · Mar 14, 2010 13:59

Originally Posted by Paul O'B

If you mean the curl image then I just floated an element to the right with the correct width and then placed the image absolutely so that it took up no space in the flow and didn't upset the layout.

The curl element has position:relative defined which creates a stacking context for the absolute element which I set to 100% width so that it scales with the page and fills the parent space. The height of the image was omitted so that it is calculated by the browser to maintain the correct aspect ratio of the image.

As your image was nearly square it scaled pretty uniformly and manages to fit in the space allocated. I made sure that the following element #content had a higher z-index in case the image poked out more that it should and #content would hide any overlap.

Okay. I am . . . printing this thread out needless to say.

Originally Posted by Paul O'B

Rather than scale the curl image up and down I would have used a fixed size background image in that .curl element. Just make the image edges (the side border and top border) bigger than you will ever need so that more gets revealed as the page grows.

This was the strategy I was originally going to do (sort of) — find a way to have the physical dimensions of CURLY larger than the row could ever expand to and then somehow get CURLY to always "sit behind" the cell to its left and the row below it. But because I want as close to perfect scaleability of the image as I can get — expanding/shrinking according to user's monitor width — I couldn't see how I could precisely retain scaleability. The beauty of percentages is that the monitor does the math for you.

I'll play around with this on my site and get a Wordpress up so that you and anyone else can comment. I read through most of your site last night and left you a message on (some board) asking if you were going to include a tutorial on your site for cross-browser-friendly vertical centering of images. I want to put up a few "Under Construction" images on my site and only realized after the fact that Explorer wasn't centering them properly because it doesn't support display: table-cell; (you can read the thread I posted over in Graphics last night).

Any good links for a simple image valign? Thanks Paul.

semi

**RyanReese** · Mar 14, 2010 14:30

http://www.pmob.co.uk/temp/vertical-align.htm
http://www.pmob.co.uk/temp/vertical-align-examples.htm
http://www.pmob.co.uk/temp/vertical-align3.htm
http://www.pmob.co.uk/temp/vertical-align9.htm
http://www.pmob.co.uk/temp/vertical-align11.htm

The last one is whta you want (if you're trying to get around the display:table-cell issue with IE. View source for details

. It's just a dobule relative shift which works off an IE bug

User Tag List

Thread: Need to get this IMG stretched vertically

Thread Tools

Display

Need to get this IMG stretched vertically

Bookmarks

Bookmarks

Posting Permissions