SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 58 of 58
  1. #51
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is "Proof of Concept" code for a fluid "call2action" box based on the images in your original design. This demo code expects the background-colors added to the image containers to be visible instead of images.

    As it sits, it would require 9 individual images for :link and 9 more for :hover.
    However, by using sprites, one can reduce the number of images required to 5 total.

    Tested in IE8+, FF, Opera, & Chrome.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    Another fluid image-based container.  Proof of concept.  Colored boxes represent image segment containers.
    9 image background;  18 images with :hover;  OR 5 (maybe 6) images total if sprites are used (recommended!)
    This arrangement attempts to add fluid symmetry to a not-so-symmetrical fixed image design.
    IE8+, FF, Opera, Chrome.
    -->
    <head>
        <title>call2action Colors 5c</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
    html,body {
        padding:0;
        margin-:0;
    }
    body {
        background-color:#555;
    }
    
    #call2action {
        display:table;
        position:relative;
        margin:0 auto;
    }
    #call2action .tl,
    #call2action .tr,
    #call2action .bl,
    #call2action .br {
        position:absolute;
        width:20px;
        height:50%;
    }
    #call2action .tl {
        top:0;
        left:0;
    }
    #call2action .tr {
        top:0;
        right:0;
    }
    #call2action .bl {
        bottom:0;
        left:0;
    }
    #call2action .br {
        bottom:0;
        right:0;
    }
    #call2action .tcl,
    #call2action .tcr,
    #call2action .bcl,
    #call2action .bcr {
        position:absolute;
        height:20px;
    }
    #call2action .tcl {
        left:20px;
        right:50%;
        top:0;
    }
    #call2action .tcr {
        left:50%;
        right:20px;
        top:0;
    }
    #call2action .bcl {
        left:20px;
        right:50%;
        bottom:0;
    }
    #call2action .bcr {
        left:50%;
        right:20px;
        bottom:0;
    }
    #call2action .mid {
        position:absolute;
        left:20px;
        top:20px;
        right:20px;
        bottom:20px;
    }
    
    #call2action .tl {background:#8f8 url('imgs/tl.gif') no-repeat left top;}   /* top left */
    #call2action .tr {background:#8cf url('imgs/tr.gif') no-repeat right top;}   /* top right */
    #call2action .bl {background:#fb8 url('imgs/bl.gif') no-repeat left bottom;}   /* bottom left */
    #call2action .br {background:#f8a url('imgs/br.gif') no-repeat right bottom;}   /* bottom right */
    #call2action .tcl {background:#faf url('imgs/tcl.gif') repeat-x left top;}   /* top center left */
    #call2action .tcr {background:#ffa url('imgs/tcr.gif') repeat-x right top;}   /* top center right */
    #call2action .bcl {background:#aaf url('imgs/bcl.gif') repeat-x left bottom;}   /* bottom center left */
    #call2action .bcr {background:#8ff url('imgs/bcr.gif') repeat-x right bottom;}   /* bottom center right */
    #call2action .mid {background:#fff url('imgs/mid.gif') repeat 50% 0;}
    
    #call2action:hover .tl {background-image:url('imgs/tl-hover.gif')}
    #call2action:hover .tr {background-image:url('imgs/tr-hover.gif')}
    #call2action:hover .bl {background-image:url('imgs/bl-hover.gif')}
    #call2action:hover .br {background-image:url('imgs/br-hover.gif')}
    #call2action:hover .tcl {background-image:url('imgs/tcl-hover.gif')}
    #call2action:hover .tcr {background-image:url('imgs/tcr-hover.gif')}
    #call2action:hover .bcl {background-image:url('imgs/bcl-hover.gif')}
    #call2action:hover .bcr {background-image:url('imgs/bcr-hover.gif')}
    #call2action:hover .mid {background-image:url('imgs/mid-hover.gif')}
    
    #call2action a {
        display:block;
        position:relative;
        z-index:1;
        padding:20px;
    }
    #call2action a:link,
    #call2action a:visited {color:#009;text-decoration:none;}
    #call2action a:hover {color:#fff;}
    #call2action a:active {color:#f00;}
    
    #call2action .message {
        display:block;
        font-weight:bold;
        font-style:italic;
        font-size:1.75em;
        line-height:1.1;
        text-align:center;
        text-decoration:underline;
        text-shadow:1px 1px 1px #000;
        letter-spacing:1px;
        padding:0px 6px 3px;
        margin:0;
    }
        </style>
    </head>
    <body>
    
    <div id="call2action">
        <div class="tl"></div>
        <div class="bl"></div>
        <div class="tr"></div>
        <div class="br"></div>
        <div class="tcl"></div>
        <div class="tcr"></div>
        <div class="bcl"></div>
        <div class="bcr"></div>
        <div class="mid"></div>
        <a href="">
            <span class="message">This is Exactly what I Need to Do For Myself Right Now!</span>
        </a>
    </div>
    
    </body>
    </html>

  2. #52
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    updated test page

    So, I have been analyzing the new CSS in particular. Obviously, HTML is much more simple.

    For the bottom link section, now #call2action nested inside of #bottomlink. I'm not quite sure why having #bottomlink as a container adds more stability to the page, seeing as all that #bottomlink has for attributes is aligning text to the center and padding. #call2action has relative positioning so that the absolutely positioned child divs can take on the positioning based on its parent as they are removed from the document flow.

    There is also a sort of table-like flow made out of #lpfoot, which has display:table;. There are child containers with the class of .footbox that are displayed in table-cell. Again, I'm not sure of how this benefits the stability and versatility across web browsers.

    Let's look at this snippet (lines 303-311):
    Code:
    @media screen and (max-width:600px) {
        .footbox {
            display:block;
            width:auto;
        }
        .footbox + .footbox {
            padding-top:6px;
        }
    }
    Why do we switch back to block display? The second part means that for every .footbox that succeeds .footbox (if it's a sibling element), we add 6px of top padding.

    Just my thoughts on looking this over and examining the theory of it all.

  3. #53
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The updated test page is not pointing to the updated HTML.

  4. #54
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see all the updated stuff on my end. Clear cache yet?

  5. #55
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The current "updated test page" is pointing to your old HTML:

    http://www.worldreviewgroup.com/insu...ssreview1.html

    The previous updated link points to the new HTML:

    http://www.worldreviewgroup.com/insu...fereview1.html

    (the image names are still misleading, but they work).

  6. #56
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oops. A g00ber moment.

    It is 2insure4lesslifereview1

    Oh, well, let the image names be misleading. At least I understand the concept enough to re-create the same effect. It's good practice on positioning.

    Now, I'm off to copy the new HTML into the existing files. That's going to take a minute.

    Then, I am going to be writing new pages and editing down the current ones. A lot of the text content is fluffy & wastes too much time on ultimately useless points. It's not exactly the best-written, but that's what editing is for. When editing these, I'm going to be adding in tables on some. Some may even have little bar graphs. Tables make for good review content.

  7. #57
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Might I suggest that you make a "template" of the new HTML, duplicate it, and copy the content from your other pages into the template. You can test as you go. That would be less likely to create problems than copying the new into the old; unless you are just copying something simple.

    Like your new avatar, BTW

  8. #58
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Back to your questions in post #52.

    Compatibility: all of the code that I've suggested has been tested in IE8+ and the latest FF, Chrome, and Opera browsers. It breaks in IE7.

    Quote Originally Posted by etidd View Post
    For the bottom link section, now #call2action nested inside of #bottomlink. I'm not quite sure why having #bottomlink as a container adds more stability to the page, seeing as all that #bottomlink has for attributes is aligning text to the center and padding.
    Conveniently, #bottomlink was already in your code and already set to {text-align:center}. So, I set #call2action to {display:inline-block} and it works in FF3.6 (who cares?). If the two divs were rolled into one, #call2action would be {display:table;margin:0 auto;} and break in FF3.6. No other reason.

    Quote Originally Posted by etidd View Post
    There is also a sort of table-like flow made out of #lpfoot, which has display:table;. There are child containers with the class of .footbox that are displayed in table-cell. Again, I'm not sure of how this benefits the stability and versatility across web browsers.
    There were several problems in #lpfoot. Therefore, the construction was changed to {display:table} so the two items could be put into individual containers with {display:table-cell} which fixed those problems: (1) #emailbox is no longer floated which had a couple of untoward side effects, and (2) that little undescribed "glitch" involving the links is less likely to appear because they have more width in which to move.

    Quote Originally Posted by etidd View Post
    Let's look at this snippet (lines 303-311):
    Code:
    @media screen and (max-width:600px) {
        .footbox {
            display:block;
            width:auto;
        }
        .footbox + .footbox {
            padding-top:6px;
        }
    }
    The media query in #lpfoot changes the table-cells to blocks so the 2 lpfoot containers, .footbox, center align their contents in two rows in narrow windows. The padding makes the second row 6px taller, thereby adding a little space between the GoBackTo links and #emailbox.

    If you are not interested in changing the names of the images so they resemble their placement, at least copy the comments beside those images in post #51 into your code. Someday, you'll be glad you did.


Tags for this Thread

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
  •