SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Project: Making a Fluid, Responsive Design out of My Existing Pages

    Sheesh! I'm back again!

    This time I'm dealing with media queries in CSS3 to create a fluid design for my landing pages.

    It's a fact- concrete, fixed-size designs simply don't cut it anymore, especially if you want to use your site(s) for internet marketing.

    I started off by reading tutorials like this one.

    I added the following into my HTML file for this landing page:
    inside the <head> tag:
    HTML Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    At the bottom, for browsers that don't handle CSS3 media queries, I link to an external script:
    HTML Code:
    <!--[if lt IE 9]>
    	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    I don't have a catch-all container for the current landing page HTML, but there is a content-wrapper with an i.d., #lpcontent. I guess that will need to be added in, but I do not know what its styles should be.

    The first step here, in my mind, is to figure out how to slim/scale the graphics when the viewport width is less than 960px. I'm not aware of a CSS property that scales graphics, although in the tutorial I linked, the author performs scaling with images.

    This is the only CSS I have so far added in to create a fluid design:
    Code:
    /* if the viewport width is less than 960px (original design size), these styles apply */
    @media screen and (max-width:960px){
    	#bgtop, #bgmid, #bgbotm{
    		max-width:100%;
    		height:auto;
    		width:auto\9; /* ie8 */
    		margin:0;
    		margin-left:2%;
    	}
    	
    	#lpcontent{
    		width:auto;
    	}
    	
    	img{
    		max-width:100%;
    		height:auto;
    		width:auto\9; /* ie8 */
    	}
    }
    Hopefully this thread can help designers with another example of responsive design.

    Thanks, SitePointers!
    -Tyler

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It won't be as easy as plugging in a media query or two. The "look" of your pages is designed around images and containers with fixed dimensions (widths in particular). You will need to come up with a different strategy/layout. This amounts to [almost] "starting all over". When designing for small devices, one generally dispenses with images and things that do not convey the most important content, and progressively adds them for larger viewports where there is room for stuff with eye appeal.

    Let me suggest that you read the following post by @Paul O'B and especially read the articles about fluid design for which he has provided links. The references are quite excellent as they talk about more than just code.

    http://www.sitepoint.com/forums/show...=1#post5329671

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unhappy OH, NO!

    Hiya, Ronpat.

    YIKES! This is not what I wanted to hear, but it's the truth.
    I'm better at CSS than I was before, so beginning again shouldn't be terrible. Hopefully it won't take 3 weeks to a month to get a new design finished.

    Paul links to quite a bit of tutorials. I'll be studying them quite a bit.

    I'm thinking the layout will need to be like this (just a hypothesis/educated guess):

    Nine sectors that form a square with the current graphics broken into smaller, more segmented files.

    <div id="topleft"> <div id="topcenter"> (repeating for smaller widths) <div id="topright">
    <div id="midleft"> <div id="midcenter"> (repeating) <div id="midright">
    <div id="botleft"> <div id="botcenter"> (repeating) <div id="botright">

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    If you want to keep the same graphics, yes they would have to be broken into eight (8) segments. The center could be filled with background-color:#fff.

    Something like this:
    Code:
    <div id="topleft"></div>             <div id="topcenter">(h-repeating)</div>     <div id="topright"></div>
    <div id="midleft">(v-repeating)</div>  <div id=midcenter></div>                  <div id="midright">(v-repeating)</div>
    <div id="botleft"></div>             <div id="botcenter">(h-repeating)</div>     <div id="botright"></div>
    You might want to consider discarding the vertical yellow poles at the smallest widths to allow more room for content.
    Maybe a different look entirely would be worth exploring. Just a thought....

    Yes, your understanding of code has gotten much better!

    Cheers.

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question

    Okay, I set up a new design that resembles a piece of notebook paper. I like it.

    I uploaded to a new test page that has a beta style sheet that I named lptest.css.

    This is the markup on my first try:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="This page contains information on how to get life insurance quotes online, so you can find the best policy for your needs." />
        <meta name="Keywords" content="life insurance quotes online, life insurance quotes, best life insurance rates, best life insurance policy, life insurance rate quotes, life insurance rate quotes online, 2insure4less, 2insure4less review, life insurance quote site, 2insure4less life insurance" />
        <meta http-equiv="Content-Language" content="en" />
    	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link href="../style/lptest.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <title>Eliminating Financial Vulnerabilities with a Life Insurance Policy</title>
    </head>
    <body>
    	<div id="container">
        	<div id="lpcontent"><!-- begin lpcontent div -->
                <div id="topleft"></div>
                <div id="topcenter">
                	<div id="lptitle">
                    	<img src="../insurance/lifeinsurance.gif" class="sectionicon" alt=" " title=" " />
                        <h1>life insurance</h1>
                    </div>            
                </div><!-- end top-center div -->
                <div id="topright"></div>
                <div id="midleft"></div>
                <div id="midcenter"><!-- begin body div -->
                        <p class="headtitle"><span>Quantifying Life Insurance Costs with Online Quoting Tools</span></p>
                    <!-- alternating text and images below this line -->  
                        <div class="floatRight">
                            <img src="../insurance/2insure4lesslifereview1.jpg" title="Life Insurance Policy" alt="Live a bit more securely after obtaining a life insurance policy." />
                            <p class="hazard">Attention: Without a coverage plan, a death in the family leaves successors liable for unnecessary costs.</p>
                            <p class="articletext">Choosing a insurance policy package is nearly always a daunting endeavor, from getting an <span class="bold">accurate quote</span> to signing the paperwork after handling the actual insurance provider, which can be <span class="italic">strenuous in and of itself</span>. When dealing with life insurance, there especially seems to be unexpected avenues, leaving an absence of coverage for something you may have wanted to incorporate before. The use of an online quoting tool eliminates much of the frustration as one can see general estimates and communicate with agents to make sure that the <span class="bold">appropriate coverage level</span> is sought after, as we will discover what are the most common mistakes when looking for a proper policy.</p>
                        </div>
                        <div class="floatLeft">
                            <div class="listwrapper">
                                <img src="../insurance/2insure4lesslifereview2.jpg" title="Ideas for Your Life Insurance" alt="Hopefully, these exposed mistakes help explain how you can make this a simple &amp; painless errand." />
                                <p class="articletext">The majority of folks have not a clue where to start when deciding what their needs are in their life insurance policy. That&apos;s why companies have agents on&ndash;hand to help, but let&apos;s discuss why life insurance can be more confusing &amp; complex than, say, car insurance. The most common hiccups include the following:</p>
                                <ul>
                                    <li><span class="bold">Procrastination in getting a policy</span>
                                    <ul>
                                        <li>The older people become and as their health declines, life insurance becomes increasingly expensive, if not entirely unobtainable.</li>
                                    </ul>
                                    </li>
                                    <li><span class="bold">Purchasing the Wrong Term Length</span>
                                    <ul>
                                        <li>Oftentimes, people request the wrong time length for their coverage.</li>
                                    </ul>
                                    </li>
                                    <li><span class="bold">Choosing the wrong coverage amount</span>
                                    <ul>
                                        <li>Make sure to have a good idea of all the expenses to be covered post&ndash;mortem. An agent can help to calculate the appropriate coverage amount.</li>
                                    </ul>
                                    </li>
                                    <li><span class="bold">Getting life insurance without a medical exam</span>
                                    <ul>
                                        <li>Without recent medical history, an insurance provider has to average out the mortality risk, which usually raises the rates on term life insurance.</li>
                                    </ul>
                                    </li>
                                    <li><span class="bold">Insuring only the breadwinner</span>
                                    <ul>
                                        <li>It&apos;s paramount to realize that other household members hold financial value, as they perform other important tasks like maintaining the home, that otherwise has to be outsourced to maids and lawn service crews.</li>
                                    </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="floatRight">
                            <img src="../insurance/2insure4lesslifereview3.jpg" title="Family Protection with Life Insurance" alt="Every family needs a financial umbrella over them for when a very rainy day comes, and we all know what that means when discussing life insurance." />
                            <p class="articletext">Now, people need to know where they can find general estimates as well as where to gain access to agents that help sound out the specifics of the coverage families &amp; individuals are in pursuit of. Not only that, but it&apos;s also paramount to find the <span class="bold">best brokerage</span> with the most vast network of insurance providers, <span class="bold">guaranteeing</span> that the rates will be the most competitive. This has the effect of expanding one&apos;s horizons instead of just going through the carrier directly. One of the efficient online brokerages we were able to find is <a href="../go/2insure4lesslife2.html">2Insure4Less</a>. Make sure to give them a try to see a rate comparison, and try to have some of the aforementioned information at your disposal when making a request.
                            </p>
                        </div>
                    <!-- end alternating text and images -->	
                        <div id="bottomlink">
                            <h2><a href="../go/2insure4lesslife2.html" title="2Insure4Less">Get Life Insurance Quotes</a></h2>
                        </div>
                    </div><!-- end mid-center div -->
                    <div id="midright"></div>
                    <div id="botleft"></div>
                    <div id="botcenter"><!-- begin bottom-center div -->
                    	<form id="emailbox" name="form1" method="get" action="../Scripts/emailtester.php">
                            <div>
                                <label for="go">Join the Mailing List!<span></span></label>
                                <input type="text" name="go" id="go" value="your e-mail" maxlength="30" />
                                <input type="submit" value="Join" />
                            </div>
                        </form>
                        <div id="invalidemail"></div>
                            
                        <h3>
                        	<a href="../index.html">Back to the Home Page &ndash;&ndash;&gt;</a><br />
                            <a href="../insurance.html">Back to the Insurance Section &ndash;&ndash;&gt;</a>
                        </h3>
                        <h4>&copy;World Review Group</h4>
                   </div><!-- end bottom-center div -->
                   <div id="botright"></div><!-- bottom-right -->
                        <div id="blackoverlay"></div>
                        <div id="submissionform"> <!-- begin 2nd form markup -->
                          <form name="form2" method="post" action="../Scripts/confirmform.php">
                            <div>
                              <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span class="required">*</span></label>
                              <input type="text" name="confirmemail" id="confirmemail" value="" maxlength="30" class="inputwidth" />
                            </div>
                            <div>
                              <label for="name" class="fixedwidth">Enter your name:<span class="required">*</span></label>
                              <input type="text" name="name" id="name" value="" maxlength="25" class="inputwidth" />
                            </div>
                            <div>
                              <label for="age" class="fixedwidth">Select your age range:</label>
                              <select name="age" id="age" class="inputwidth">
                                <option selected="selected">Select an Age Range</option>
                                <option>18-35</option>
                                <option>36-55</option>
                                <option>55+</option>
                                <option>17 or younger</option>
                              </select>
                            </div>
                            <div>
                               <label for="gender" class="fixedwidth">Select your gender:</label>
                               <select name="gender" class="inputwidth" id="gender">
                                 <option selected="selected">Select Gender</option>
                                 <option>Male</option>
                               <option>Female</option>
                               </select>
                            </div>
                            <div>
                              <label for="country" class="fixedwidth">Select your location:<span class="required">*</span></label>
                              <select name="country" id="country" class="inputwidth">
                                <option selected="selected">Select Country</option>
                                <option>United States</option>
                                <option>United Kingdom</option>
                                <option>Canada</option>
                                <option>Australia</option>
                                <option>Russia</option>
                                <option>Brazil</option>
                                <option>Africa</option>
                                <option>Somewhere else</option>
                              </select>
                            </div>
                              <p id="spamtext">To prevent spam, please answer:<span class="required">*</span></p>
                              <label for="addition" id="math"></label>
                              <input name="addition" id="addition" value="" maxlength="3" />
                              <div id="errormessage">
                                  <p>&nbsp;</p>
                              </div>
                                <label for="aicatcher" class="aicatcher">Please leave this field blank:</label>
                                <input type="text" name="aicatcher" class="aicatcher" id="aicatcher" value="" />
                            <input type="submit" value="Sign Me Up!" class="formsubmitbutton" id="finalsubmit"/>
                            <input type="reset" value="Cancel" class="formsubmitbutton" id="cancel"/>      
                          </form>
                        </div>
                      <div id="successfulsubmit">
                          <h3>&nbsp;</h3>
                          <p>&nbsp;</p>
                          <h4>&nbsp;</h4>
                      </div>
                </div><!-- end background middle -->
                <div id="bgbotm"></div>
        	</div><!-- end landing page content -->
        </div><!-- end container div -->
        <script src="http://www.mediatraffic.com/roi.php?iadv=92363"></script>
        <script type="text/javascript" src="../Scripts/jQuery.js"></script>
        <script type="text/javascript" src="../Scripts/lpemailbox.js"></script>
        <script type="text/javascript" src="../Scripts/analytics.js"></script>
        <!--[if lt IE 9]>
    	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    </body>
    </html>
    The styles:
    Code:
    @charset "utf-8";
    /* Landing Page Style Sheet */
    
    *{
        font-family:"Times New Roman", Times, serif;
        padding:0;
        margin:0 auto;
    }
    body{
        background-image:url("lpbg.gif");
        background-position:50% 0;
        background-attachment:fixed;
        margin-top:15px;
    }
    
    #container{width:960px; margin:0 auto;}
    
    #topleft{
    	background-image:url("lptopleft1.png");
    	width:54px;
    	height:84px;
    }
    #topcenter{
    	background:url("lptopcenter1.png") repeat-x;
    	height:84px;
    }
    #topright{
    	background-image:url("lptopright1.png");
    	width:54px;
    	height:84px;
    }
    #midleft{
    	background:url("lpmidleft1.png") repeat-y;
    	width:54px;
    }
    #midcenter{
    	background:url("lpmidcenter1.gif") repeat;
    }
    #midright{
    	background:url("lpmidright1.png") repeat-y;
    	width:54px;
    }
    #botleft{
    	background-image:url("lpbotleft1.png");
    	width:54px;
    	height:64px;
    }
    #botcenter{
    	background:url("lpbotcenter1.png") repeat-x;
    	height:64px;
    }
    #botright{
    	background-image:url("lpbotright1.png");
    	width:54px;
    	height:64px;
    }
    
    /* lpcontent is the content area.  The negative top and bottom margins extend #lpcontent over #bgtop and #bgbotm. */
    #lpcontent{
        width:796px;
        padding:0px;
        margin:-31px auto -70px;
    	position:relative;
    }
    
    /* lptitle contains the section icon and header title */
    #lptitle{
        height:60px;
        overflow:hidden;
    }
    .sectionicon{
        height:60px;
        width:60px;
        float:left;
        margin:0px;
    }
    
    h1{
        position:relative;
        margin:8px 0 0 20px;
        padding:0 3px 0 3px;
    }
    h1{
        float:left;
        text-align:left;
        font-size:25px;
        background:url("lpheaderbody.gif") repeat-x scroll 0 0;
        width:auto;
        height:35px;
        text-shadow:1px 1px 1px #030;
        letter-spacing:1px;
    }
    h1:after{
        content:" ";
        background:url("lpheaderend.gif") no-repeat 100% 0;
        height:35px;
        right:-14px;
        position:absolute;
        top:0;
        width:14px;
        z-index:1;
    }
    h1:before{
        content:" ";
        background:url("lpheaderstart.gif") no-repeat 0 0;
        height:35px;
        left:-14px;
        position:absolute;
        top:0;
        width:14px;
        z-index:1;
    }
    
    .headtitle{
        padding-top:4px;
        padding-bottom:2px;
        margin:0px;
    }
    .headtitle span{
        border-bottom:2px groove #000;
        font-style:italic;
        font-size:14pt;
        line-height:1;
    	font-weight:bold;
    }
    
    .floatRight,
    .floatLeft{
        overflow:hidden;
        margin:8px 0;       /* vertical margin between content sections */
    }
    .floatRight img{
        float:right;
        margin-left:2em;
    	border:3px inset #000;
    }
    .floatLeft img{
        float:left;
        margin-right:8px;
    	border:3px inset #000;
    }
    
    p{
        padding:0;
        margin:0;
    }
    p + p{margin-top:4px;}
    
    /* bottomlink contains the h2 link */
    #bottomlink{
        overflow:hidden;
        padding-top:16px;
        padding-left:130px;
    }
    
    h2 a{
        position:relative;
        margin:0px 0 0px 20px;
        padding:1px 1px 0 1px;
    }
    h2 a{
        color:#009;
        text-shadow:1px 1px 1px #000;
    }
    h2 a{
        float:left;
        font-size:30px;
        font-style:italic;
        font-weight:bold;
    	letter-spacing:1px;
        text-align:center;
        width:auto;
        height:44px;
        background:url("lplinkbody.gif") repeat-x scroll 0 0 transparent;
    }
    h2 a:before{
        content:" ";
        background:url("lplinkstart.gif") no-repeat 0 0;
        height:44px;
        left:-14px;
        position:absolute;
        top:0;
        width:26px;
        z-index:1;
    }
    h2 a:after{
        content:" ";
        background:url("lplinkend.gif") no-repeat 100% 0;
        height:44px;
        right:-14px;
        position:absolute;
        top:0;
        width:26px;
        z-index:1;
    }
    h2 a:hover{color:#FFF; text-decoration:none;}
    h2 a:hover:before{
        content:" ";
        background:url("lplinkstartafter.gif") no-repeat 0 0;
        height:44px;
        left:-14px;
        position:absolute;
        top:0;
        width:26px;
        z-index:1;
    }
    h2 a:hover{
        float:left;
        font-size:30px;
        font-style:italic;
        font-weight:bold;
        text-align:center;
        width:auto;
        height:44px;
        background:url("lplinkbodyafter.gif") repeat-x scroll 0 0 transparent;
    }
    h2 a:hover:after{
        content:" ";
        background:url("lplinkendafter.gif") no-repeat 100% 0;
        height:44px;
        right:-14px;
        position:absolute;
        top:0;
        width:26px;
        z-index:1;
    }
    
    /* lpfoot contains the Mailing List box and the Back To nav links */
    #lpfoot{
        /*overflow:hidden;*/
        padding-top:20px;      /* set space beneath the Quotes link here */
    	position:relative;
    }
    #emailbox{
        float:left;
        height:54px;
        width:216px;
        position:relative;
        overflow:hidden;
        margin:0px 0 0 60px;
    }
    #emailbox label,
    #emailbox label span{
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        height:54px;
        width:216px;
        text-align:center;
        font-size:20px;
    }
    #emailbox label span{
        background:url("sectionemailbox.gif") no-repeat 0 0;
    }
    #go{
        width:130px;
        margin:30px 0 0 19px;
    }
    #emailbox input{
        position:relative;
        z-index:1;
    }
    .submit{
        overflow:hidden;
        margin:26px 0 0;
    }
    
    #submissionform{
    	margin:0 auto;
    	background:url("lpsubmission.gif") no-repeat scroll 50% 0 transparent;
    	width:330px;
    	height:320px;
    	position:absolute;
    	display:none;
    	bottom:80px;
    	left:220px;
    	z-index:2;
    	padding:60px 10px 0 26px;
    	text-align:left;
    }
    #submissionform div{padding-bottom:3px;}
    
    .fixedwidth{
    	width:150px;
    	float:left;
    }
    .inputwidth{width:160px;}
    .required{color:red;}
    
    .formsubmitbutton{margin-left:50px; margin-top:10px;}
    
    #errormessage{color:red; height:40px; padding:0 24px 4px 0; margin-right:10px; font-weight:bold; font-size:15px;}
    #errormessage p{margin:0; padding:0;}
    #errormessage a{color:#09C;}
    #errormessage a:hover{color:#0CC; text-decoration:none;}
    
    #successfulsubmit{
    	margin:0 auto;
    	background:url("lpsubmissionsuccess.gif");
    	width:450px;
    	height:130px;
    	position:absolute;
    	display:none;
    	bottom:268px;
    	left:175px;
    	z-index:3;
    }
    #successfulsubmit p{
    	margin:0;
    	padding-left:27px;
    }
    #successfulsubmit h3{
    	margin:0;
    	text-align:left;
    	padding:15px 0 2px 13px;
    	text-shadow:1px 1px 1px #0C3;
    }
    #successfulsubmit h4{
    	color:red;
    	font-weight:bold;
    	margin:0;
    	font-size:14px;
    	padding:10px 14px 0 0;
    	text-align:right;
    }
    
    #blackoverlay{
        display:none;
        position:fixed;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
    	min-width:1171px;
    	min-height:1010px;
        background-color:black;
        z-index:2;
        -moz-opacity: 0.8;
        opacity:.80;
    	filter:alpha(opacity=80);
    }
    
    .listwrapper ul{
    	margin:0;
    	list-style:disc;
    	list-style-position:inside;
    }
    .listwrapper ul ul{list-style:square; list-style-position:inside; position:relative; left:2em; margin-right:2em;}
    .listwrapper{
    	zoom:1.0;
    	overflow:hidden;
    }
    
    #spamtext{padding:2px 0 2px 0; margin:0;}
    #math{font-weight:bold; text-align:center;}
    #addition{width:50px;}
    
    #invalidemail{background:url("invalidemail2.gif") no-repeat scroll 50%; width:140px; height:40px; position:absolute; top:35px; left:94px; z-index:0;}
    
    .aicatcher{display:none; visibility:hidden;}
    
    input, select{background-color:#FFF;}
    input:focus, select:focus{background-color:#DEE4EF;}
    
    /* webkit browser fixes */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    	#submissionform div{padding-bottom:1px;}
    }
    
    h3{
        line-height:1em;
        text-align:right;
        margin:9px 60px 0px;
    }
    h3 a{
        color:#f60;
        font-size:14px;
    }
    h3 a:hover,
    h3 a:active{
        color:#f90;
        text-decoration:none;
    }
    
    /* "World Review Group" line */
    h4{
        font-size:8px;
        text-align:center;
    	padding-right:260px;
        padding-top:6px;
        margin:0;
    }
    
    #smaller{font-size:13px; font-weight:bold;}
    .hazard{color:#F00; font-size:12pt; font-weight:bold;}
    .hazard:hover{text-decoration:blink;}
    .headerstatement{font-size:12pt; color:#063; font-weight:bold;}
    .articletext{font-size:11pt;}
    .articletext a{color:#06C;}
    .articletext a:hover{color:#0CF; text-decoration:none;}
    .italic{font-style:italic;}
    .bold{font-weight:bold;}
    .ib{font-weight:bold; font-style:italic;}
    
    @media screen and (max-width:960px){
    	#bgtop, #bgmid, #bgbotm{
    		max-width:100%;
    		height:auto;
    		width:auto\9; /* ie8 */
    		margin:0;
    		margin-left:2%;
    	}
    	
    	#lpcontent{
    		width:auto;
    	}
    	
    	img{
    		max-width:100%;
    		height:auto;
    		width:auto\9; /* ie8 */
    	}
    }
    /* END */
    As you will see, there is no mid-left nor mid-right sections appearing. The positioning- well, I'm not really sure what to do there. Maybe the left and right pieces need to be absolutely positioned; whereas, the middle pieces will be relatively positioned. This is what needs to happen first before tackling the media queries.

    This design will have to be for more capable devices with larger screen resolutions. I'm going to need to come up with something else for mobile devices.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You've been busy! Unless you want to soften the blue lines, they tend to make the text more difficult to read. I would like to try some things with your original design, if you don't mind. Don't know if anything will work out, but I'd like to give it a go.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, of course I don't mind, but do you need me to do the same thing with the original design by breaking things down into smaller segments and getting rid of that ornamental gold bar thing?

    I'm all about readability so I may just scrap the blue line thing. I'll see what happens when I lower the opacity of those lines.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Nothing for you to do. I'll do the graphics since I don't really know if this will pan out or not. An experiment!

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, we will talk after Father's Day or sometime soon. Let me know if there is anything I can do to help expedite the experiment.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    etidd,

    The attached screen shots demonstrate a fluid page. For convenience, I used an older, simpler page, but the structure should be almost plug-n-play replaceable in your other pages. The layout uses a CSS display:table arrangement to manage the images and a normal div container for all content.

    The first image shows a {max-width:960px} page that exactly matches your working page.

    The second image shows how the same page looks in a narrower window.

    The third image shows how the page looks in a very narrow window with the yellow poles removed. Removing the yellow poles is done by changing one value in css (the width of the edge containers). Doing this gives you an additional 80px of screen real estate for valuable content. That "responsive" action would be done with a media query for devices with narrower viewports. Notice that some of the existing items "break" at narrow widths, such as the "call to action" button. They will have to be redesigned to adjust in a fluid environment.

    Let me know if this appeals to you.

    fluid1.jpg - - - fluid2.gif - - - fluid3.gif

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Just noticed... I finally took a closer look at your test code and noticed that some of the content is outside of #lpcontent. Some is in #topcenter and some is in #botcenter. That will not work. ALL content MUST be within #lpcontent. No exceptions.

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, the attachments are pending approval, so I won't be able to see them yet. I have seen those take at least a day or two to be approved. It's kind of funny that a mentor (Sitepoint employee?) has to go through the approval process for attachments.

    I guess all the content (including the submission form?) must fall inside #midcenter. #midcenter will also contain #lpcontent and everything inside the page as it did in the former markup, or maybe #lpcontent needs to go in first before everything, right after the <body> tag. Never mind #container, I guess. Who knows? I can't view the attachments.

  13. #13
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I use Photobucket to link to images to avoid the approval process.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    Well, the attachments are pending approval, so I won't be able to see them yet. I have seen those take at least a day or two to be approved. It's kind of funny that a mentor (Sitepoint employee?) has to go through the approval process for attachments.

    I guess all the content (including the submission form?) must fall inside #midcenter. #midcenter will also contain #lpcontent and everything inside the page as it did in the former markup, or maybe #lpcontent needs to go in first before everything, right after the <body> tag. Never mind #container, I guess. Who knows? I can't view the attachments.
    Please re-read my #11. I said that ALL content must reside within #lpcontent ONLY, NOT #midcenter. That's an important distinction! NO content should be placed within #topcenter or #botcenter at any level either. That, too, is important! Remember that the negative margins applied to #lpcontent are specifically intended to cover those areas. That's necessary to preserve the height of the top and bottom row of images in a fluid environment.

    In summary, the only place you should add content is inside #lpcontent, which resides inside #midcenter.

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah, it's hard for me to put it all together sometimes. Shoot.

    Well, all the content is now inside #lpcontent, which is inside of #midcenter. The negative margins kicked into effect, branching the div out to its full 960px. It's validated as well. It should be as you have instructed now.

    Now, the wait continues on the approval process for your attached images. Is there someone I can PM to push this along? I am surprised mentors have to wait this out. Regular and new members are much more probable to upload attachments with objectionable content.

    Edit: I still need to remove the blue lines from the design. I'll get to that tomorrow. I'll modify the old design and segment it up into smaller bits as well to split test in marketing campaigns and see which is more effective.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Just looked at your revised test page. Looks good. I'll set it up with the fluid version of your older images and we'll see how it looks. Will get back with you when done.

    Cheers!

  17. #17
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, they are approved now. That didn't take so long. That fluid design is definitely acceptable. The only thing I see is that the #bottomlink will need to be changed to something else when the page gets down to so thin. In that third image, it says "Get Health". That won't do. I should be able to figure that out, but as I've said before, make me learn it. I'm going to be spending some time dissecting the theory behind this new fluid design.

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is a basic design for an image based fluid/responsive page (IE8+):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    Pink areas are 9 background-images; corners fixed, middles/centers repeat.
    White area with blue outline is the content area.
    Just for fun, a media query reduces the width of the left and right image cells at a narrow window widths to recover screen space.
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Fluid Image Based Page IE8+</title>
        <style type="text/css">
    html,body {
        padding:0;
        margin:0;
    }
    body {
        background-color:#bdf;
        font-family:Verdana,Geneva,sans-serif;
        padding:0 0 10px;
        margin:15px 10px 0;
    }
    #outer {
        display:table;
        table-layout:fixed;
        border-spacing:0 0;
        max-width:960px;         /* max page width: your choice */
        min-width:470px;         /* depends on content; determine by trial and error; affects when h-scrollbar is triggered. */
        margin:0 auto;
    }
    .trow {display:table-row;}
    .trow > div {
        outline:1px solid magenta;  /* TEST OUTLINE */
        display:table-cell;
        padding:0;
    }
    
    #topleft,#topright,#midleft,#midright,#botleft,#botright {width:100px;}    /* width of left and right image cells */
    
    #topcenter {height:68px;}    /* height of top row */
    #botcenter {height:90px;}    /* height of bottom row */
    
    #topleft {background:url(topleft.gif) no-repeat 100% 0 #fdd;}
    #topcenter {background:url(topcenter-rx.gif) repeat-x 0 0 #fdd;}
    #topright {background:url(topright.gif) no-repeat 0 0 #fdd;}
    #midleft {background:url(midleft-ry.gif) repeat-y 100% 0 #fdd;}
    #midcenter {background:url(midcenter-r.gif) repeat 0 0 #fdd;}
    #midright {background:url(midright-ry.gif) repeat-y 0 0 #fdd;}
    #botleft {background:url(botleft.gif) no-repeat 100% 0 #fdd;}
    #botcenter {background:url(botcenter-rx.gif) repeat-x 0 0 #fdd;}
    #botright {background:url(botright.gif) no-repeat 0 0 #fdd;}
    
    #midcenter {vertical-align:top;}
    
    /* #lpcontent is the exclusive content area. */
    #lpcontent {
        outline:2px solid cyan;   /* TEST OUTLINE */
        background-color:rgba(255,255,255,.6);   /* TEST BGCOLOR */
        min-height:200px;    /* just so there is some minimum content height */
        position:relative;
        overflow:hidden;     /* prevents margin collapse */
        padding:0;
        margin:-38px -18px -64px;  /* The negative margins extend #lpcontent outside #midcenter */
    }
    
    h4 {text-align:center;}
    
    /* Yellow poles removed below 700px width (I just picked a number; you should change it to suit yourself). */
    @media screen and (max-width:700px) {
        #topleft,#topright,#midleft,#midright,#botleft,#botright {width:60px;}
        body {margin:15px 0 0;}
    }
    
        </style>
    </head>
    <body>
    <div id="outer">
        <div class="trow">
            <div id="topleft"></div>
            <div id="topcenter"></div>
            <div id="topright"></div>
        </div>
        <div class="trow">
            <div id="midleft"></div>
            <div id="midcenter">
                <div id="lpcontent">
    <!-- content and images below this line -->
                    <div>
                        <h4>Fluid/Responsive Image Based Page, IE8+</h4>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                        <p>ALL content should be placed within #lpcontent.</p>
                    </div>
    <!-- end content and images --> 
                </div> <!-- #lpcontent -->   
            </div> <!-- #midcenter -->
            <div id="midright"></div>
        </div>
        <div class="trow">
            <div id="botleft"></div>
            <div id="botcenter"></div>
            <div id="botright"></div>
        </div>
    </div> <!-- #outer -->
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    </body>
    </html>

  19. #19
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Adjustments

    Well, this is certainly along the lines of what I need to get done.
    New location of page is here in its rightful spot

    Everything down from #bottomlink (changed the i.d. from #getquotes because the h2 link won't always be linked to websites for insurance quotes) needs a few customizations. So far, I removed the h2 link's background image when the viewport is less than 600px wide and changed the hover color of the link.

    These are the styles that I've added in so far:
    Code:
    @media screen and (max-width:700px){
        #topleft,#topright,#midleft,#midright,#botleft,#botright{width:60px;}
        body{margin:15px 0 0;}
    	#emailbox{margin:0 auto;}
    	#invalidemail{margin:0 auto;}
    	h3{margin:0 auto;}	
    }
    @media screen and (max-width:600px){
    	h2 a:before, h2 a, h2 a:after, h2 a:hover:before, h2 a:hover, h2 a:hover:after{background:none;}
    	h2 a:hover{color:#06C;}
    	#bottomlink{height:auto;}
            /*trying to adjust the font-size fluidly as the viewport shrinks in width*/
    	h3 a{
    		max-width:100%;
                    font-size:auto;  /* um... this is invalid, but it was worth a shot */
    		height:auto;
    		width:auto\9; /* ie8 */
    	}
    }
    These are my objectives with the content on the bottom of the page. Let me know which ones are reasonable as some of these may not be practical.

    1. h2 link:
    -make the words wrap into a new line if the content extends beyond the width of the container (#lpcontent). I attempted to do this by adjusting the height to auto. You'll notice that once the viewport shrinks, the words disappear.
    -make its background images go away when #lpcontent closes in on the h2 element. The h2 element will vary in width on different pages (in this case, it reads, "Get Life Insurance Quotes", and on another page it will say, "Get Guitar Lessons" or something else that differs in width.). I'm not sure what media query I need to do this, but I think it will need to be targeted in percentages.

    2. #emailbox and the h3 navigation links
    -make the e-mail submission box position directly on top of the h3 links when the viewport width is 600px or less.

    3. remove the background image for #emailbox when the viewport is less than 400px or so (simple- I can do this one on my own).

    4. h3 links (these get pretty messy and ugly-looking as the width shrinks)
    -ensure that the links don't wrap and stay on their own line
    example: Back to the Home Page
    -->
    -make the font-size adjust fluidly as the viewport shrinks and grows (you'll notice my novice attempt at this above)

    -----------------------
    In the first posts on this thread, you linked a post by Paul. I've been learning some interesting things on responsive design, but none I have read so far really touch on what I want to achieve in the above objectives. I'll keep studying them and hopefully I'll find a good one that gets into issues like such.

    -Tyler

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The <h2> link needs an bit of an overhaul. The text is disappearing at narrow widths because of #bottomlink {overflow:hidden;}.
    Delete overflow:hidden and you will see that the text is wrapping, but it is not pushing the container below it down. That's the result of your original design. The 3 containers at the bottom of the page need an overhaul.

    I will tinker with the <h2> layout as time permits. A redesign would be very easy if you would forego the sawtooth edges If anything works out, I'll let you know, of course.

    I don't think that you necessarily need to remove the background-image for #emailbox, but I haven't looked closely, yet.

    The <h3> links need to be in their own container.

    Yes, {font-size:auto} is invalid. Nice try, though.
    If you want to change the font-sizes, you will need to use media queries.

    Some random thoughts...
    I would like to suggest that you discontinue using styles such as {max-width:100%} and {height:auto} unless they are appropriate. Where needed, max-width:100% can be useful. It can also cause problems if used inappropriately. Most of the time, it is simply unnecessary. Apply styles for a known, valid reason. New responsive/fluid web designers seem to think that {width:100%} should be included almost everywhere, and that's just not true. Block objects have a width of 100% by default .
    Use the SitePoint CSS Reference to learn about properties and their [valid ] values. It's an excellent resource! Highly recommended!

  21. #21
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I agree, this bottom section is really not structured in a way conducive to changing it to a fluid layout.
    I guess I'm to go dig through this CSS reference. Hopefully, I'll gather a clue as to what styles need to be applied to achieve said objectives, but right now, I'm scratching my head. I've said this before, but I need to go grab a CSS book.

    I did add a container to the h3 links.
    HTML Code:
                            <div id="navlinkscontainer">
                                <h3>
                                    <a href="../index.html">Back to the Home Page &ndash;&ndash;&gt;</a><br />
                                    <a href="../insurance.html">Back to the Insurance Section &ndash;&ndash;&gt;</a>
                                </h3>
                            </div>
    I deleted the overflow:hidden; from #bottomlink, and I do see what you're saying as the container height does not change. Could it just be that height needs to be set to auto in the media query styles?

    Again, I'll go take a good look at the CSS reference. This sounds like a resource that should always be open when styling a page.

    Edit: if the sawtooth edges for the h2 link are more easily done without, it is definitely worth scrapping as proper responsive design functionality is more important. With that said, however, I would like to keep it. I think it looks nice and drags users' mouse to that area (I had that in mind when doing the original design).

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Very good.

    As I said, I'll look at the h2 styles with an eye toward keeping the sawtooth pattern, but no rash promises . Just because something seems impossible doesn't mean that it can't be done . Ask any magician (or Paul ) Even if the sawtooth border doesn't work out, you should be able to keep the background pattern.

    I think the form is going to require more work than anything else at the bottom. It needs to be in its own container so it is not influenced by the width of the window. You might want to start there.

    Cheers,
    Ron

  23. #23
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Update:

    Well, I figured out the #bottomlink text-wrapping issue when it doesn't adjust the height of the container. I just added this in:
    Code:
    @media screen and (max-width:600px){
    	h2 a, h2 a:hover{height:auto;}
    }
    It doesn't matter about the sawtooth background when the viewport is less than 600px wide (or when the width of the h2 link exceeds the width of #lpcontent). Is there a way to detect when the sawtooth edges are touching the edges of #lpcontent?

    I tried to use percentages on the h3 links font size, so that it would shrink and grow as the width changes, but I haven't figured that out yet. That's something I would like to accomplish.

    #emailbox is now inside its own container.

    I haven't been able to figure out how to re-position and center #emailbox on top of the h3 links.

    -Tyler

  24. #24
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, as far as the re-position of the bottom h3 links and the email box, I think it makes sense to just re-position them on top of each other at, say, 500px width. That means it will be time to remove the current positioning. Though, the email box has its own container now, and I'm not entirely sure what needs to be put inside of #emailboxcontainer, so right now I'm focused on #emailbox form element itself. The email box has an image absolutely positioned on top of it while the other form elements are sitting underneath, so the positioning of the emailbox form element- I believe- is relative and it's just got margins. Would I just put something like this to put it in the center and negate the current positioning?

    Code:
    @media and screen (max-width:500px){
           #emailbox{position:none; margin:0 auto;}
    }

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The problem that I see with the e-mail form is the "straggling" "Invalid E-Mail" image. It's absolutely positioned; therefore, needs to be within the relatively positioned element. As you said, at this time, the form is that element, so the Invalid E-mail image is outside of it. It's inside #emailboxcontainer, but #emailboxcontainer is not p:r. I'm not intimately familiar with forms, so I will have to read a bit before I can confidently offer any suggestions.


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
  •