Forum Moderators: not2easy

Message Too Old, No Replies

Can't get a simple PAGE CURL graphic to automatically resize itself

Using a static (non-animated) transparent GIF

         

semicolon

7:49 pm on Mar 10, 2010 (gmt 0)

10+ Year Member



I have a very basic layout that I'm trying to get to render properly and I'd appreciate anyone setting me to rights on what property I'm missing to get this little graphic to stretch vertically. You can view both the screenshot of what I'm trying to achieve -and- the actual html file itself at
sites.google.com/site/semicodin/ohTHAT


The html file is titled
semi99_899.html



Thanks for any help. This is just driving me nuts.

semi





<!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>

rocknbil

8:11 pm on Mar 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard semicolon . . . which little graphic?

A knee jerk reaction, you can get a graphic's width to "stretch" with CSS, but what you can do is pare out part of it as a background image, and tile it horizontally . . . .

#some-element { background: #ff0000 url(/images/some-bg.gif) top left repeat-x; }

Then inside some-element, the part that would look weird if stretched can just sit left, or center, or whatever.

<div id="some-element">
<img src="some-image.gif">
</div>

(shorthand on the img)

semicolon

8:41 pm on Mar 10, 2010 (gmt 0)

10+ Year Member



CURLY.gif

It's my page-curl graphic.

Fotiman

8:56 pm on Mar 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Your markup is invalid. You have a random closing </a> tag after your curly image.

When it doubt, always try validating first [validator.w3.org].

semicolon

9:06 pm on Mar 10, 2010 (gmt 0)

10+ Year Member



whoa sorry about that. :)