SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Need to get this IMG stretched vertically

    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    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&#37; 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.

  5. #5
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Quote Originally Posted by Paul O'B View Post
    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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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