SitePoint Sponsor

User Tag List

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

    Post Responsive Design Layout for Homepage

    Hello all,

    So, it's time for me to re-make the home page design for my website, and I have a very sloppy start at this link. The first (original) link displays how I'd like this to come out at full viewport width. I would like for the side windows that have the "Most Popular" and "Not Recommended" links to be re-positioned below the body content when the viewport is skinny (say less than 500px). I would like for the drop down menu content to stop dropping down at a similar viewport width, leaving just the section button for the user to click through to.

    Rough HTML Draft
    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" />
    	<title>World Review Group&ndash; Product Articles</title>
        <meta name="Description" content="Curious about a product before you buy it? Come here for reviews on today&apos;s hot products! Some of our categories include home business, dating, consumer electronics, and many others." />
        <meta name="Keywords" content="product review site, review article database, World review group, product reviews online, product articles, online product and service reviews" />
        <meta http-equiv="Content-Language" content="en" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link href="style/homepage.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
        <link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
    	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    </head>
    <body>
    	<!-- begin container div -->
    	<div id="container">
    		<!-- side window left -->
    		<div id="sidewindowleft">
    			<div id="leftsidestart"></div>
    			<div id="leftsidebody">
    				<h2 class="sidewindowheadertext">Most Popular</h2>
    				<ul class="sidewindowlinks">
    					<li><a href="#">Peapod</a></li>
    					<li><a href="#">South Beach Diet</a></li>
    					<li><a href="#">Brandcaster Coupons</a></li>
    				</ul>
    			</div><!-- end left window body -->
    			<div id="leftsideend"></div>
    		</div><!-- end side window left -->
    		<!-- begin top row -->
    		<div class="row">
                <div id="topleft"></div>
                <div id="topcenter">
    				<!-- logo image with underlying text -->
    				<h1>World Review Group<span></span></h1>
    				<div id="lowerlogo"></div>
    			</div>
                <div id="topright"></div>
    		</div>
    		<!-- begin middle row -->
    		<div class="row">
    			<div id="midleft">
    			<!-- begin midcenter div -->
    			<div id="midcenter">
    				<div id="wrapper"><!-- begin menu wrapper -->
    					<!-- BEGIN PERSONAL NAVIGATION MENU -->
    					<ul id="pMenu">
    						<!-- begin health -->
    						<li><a href="health.html" title="Health Page">health</a> 
    							<div id="health"> 
    								<!-- weight loss -->
    								<h2>weight loss &amp; wellness</h2>
    								<!-- fitness -->
    								<h3><span>fitness</span></h3>
    								<ul>
    									<li><a href="health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
    									<li><a href="health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
    									<li><a href="health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
    									<li><a href="health/fitness/turbofire1.html">TurboFire Fitness</a></li>
    								</ul>
    								<!-- dieting -->
    								<h3><span>dieting</span></h3>
    								<ul>
    									<li><a href="health/dieting/healthetrimdiet1.html">Health&eacute; Trim Diet</a></li>
    									<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
    								</ul>
    								<!-- supplements -->
    								<h2>supplements</h2>
    								<ul>
    									<li><a href="health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
    									<li><a href="health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
    									<li><a href="health/Rx/libigrow1.html">Libigrow</a></li>
    									<li><a href="health/Rx/smokedeter1.html">Smoke Deter</a></li>
    									<li><a href="health/Rx/prorexin1.html">Prorexin</a></li>
    								</ul>
    								<!-- skin care -->
    								<h2>skin care</h2>
    								<ul>
    									<li><a href="health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
    									<li><a href="health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
    								</ul>
    							</div>
    							</li><!-- end health -->
    							<!-- begin insurance -->
    							<li><a href="insurance.html" title="Insurance Page">insurance</a> 
    								<div id="insurance"> 
    									<!-- property insurance -->
    									<h2><a href="insurance/propertyinsurance1.html">home&frasl;property insurance</a></h2>
    									<ul>
    										<li><a href="insurance/bestquoteshomereview1">BestQuotes</a></li>
    										<li><a href="insurance/usinsuranceonlinehomereview1.html">USInsuranceOnline</a></li>
    									</ul>
    									<!-- auto insurance -->
    									<h2><a href="insurance/autoinsurance1.html">auto insurance</a></h2>
    									<ul>
    										<li><a href="insurance/bestquotesautoreview1.html">BestQuotes</a></li>
    										<li><a href="insurance/atlascarinsurancereview1.html">Atlas Car Insurance</a></li>
    										<li><a href="insurance/cheapcarinsurancetrick1.html">Cheap Car Insurance Trick</a></li>
    										<li><a href="insurance/usinsuranceonlineautoreview1.html">U.S. Insurance Online</a></li>
    									</ul>
    									<!-- health insurance -->
    									<h2><a href="insurance/healthinsurance1.html">health insurance</a></h2>
    									<ul>
    										<li><a href="insurance/betterhealthquotereview1.html">Better Health Quote</a></li>
    										<li><a href="insurance/bestquoteshealthreview1.html">BestQuotes</a></li>
    										<li><a href="insurance/2insure4lesshealthreview1.html">2Insure4Less</a></li>
    									</ul>
    									<!-- life insurance -->
    									<h2><a href="insurance/lifeinsurance1.html">life insurance</a></h2>
    									<ul>
    										<li><a href="insurance/2insure4lesslifereview1.html">2Insure4Less</a></li>
    										<li><a href="insurance/usinsuranceonlinelifereview1.html">USInsuranceOnline</a></li>
    									</ul>
    									</div>
    								</li><!-- end insurance --> 
    								<!-- begin general -->
    								<li><a href="general.html" title="General Page">general</a> 
    									<div id="general"> 
    									<!-- electronics -->
    									<h2>electronics</h2>
    									<!-- gaming -->
    									<h3><span>gaming</span></h3>
    									<ul>
    										<li><a href="gaming/haltgamereview1.html">Halt Game</a></li>
    										<li><a href="gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
    										<li><a href="gaming/gsn1.html">GSN Gaming</a></li>
    									</ul>
    									<!-- electronic gadgets -->
    									<h3><span>electronic gadgets</span></h3>
    									<ul>
    										<li><a href="electronics/kindle1.html">Kindle e&ndash;Reader</a></li>
    										<li><a href="electronics/ecig1.html">Electronic Cigarettes</a></li>
    									</ul>
    									<!-- style and fashion -->
    									<h2>style &amp; fashion</h2>
    									<!-- makeup -->
    									<h3><span>makeup</span></h3>
    									<ul>
    										<li><a href="makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
    										<li><a href="makeup/simplykaren1.html">Simply Karen</a></li>
    									</ul>
    									<!-- food/dining -->
    									<h2>food&frasl;dining</h2>
    									<!-- net grocers -->
    									<h3><span>net grocers</span></h3>
    									<ul>
    										<li><a href="food/efooddepot1.html">eFood Depot</a></li>
    										<li><a href="food/peapod1.html">Peapod</a></li>
    									</ul>
    									<!-- coupons -->
    									<h3><span>coupons</span></h3>
    									<ul>
    										<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
    									</ul>
    									<!-- cars/auto -->
    									<h2>cars&frasl;auto</h2>
    									<ul>
    										<li><a href="auto/carfax1.html">Carfax Vehicle History Reports</a></li>
    										<li><a href="auto/carprices1.html">CarPrices.com</a></li>
    									</ul>
    									<!-- security -->
    									<h2>security</h2>
    									<ul>
    										<li><a href="security/adtalarm1.html">ADT Alarm System</a></li>
    									</ul>
    									<!-- hobby -->
    									<h2>hobby</h2>
    									<!-- music -->
    									<h3><span>music</span></h3>
    									<ul>
    										<li><a href="music/guitartricksreview1.html">GuitarTricks</a></li>
    										<li><a href="music/jamoramareview1.html">Jamorama&ndash; Learn Guitar</a></li>
    									</ul>
    								</div>
    							</li><!-- end general -->
    							<!-- begin dating -->
    							<li><a href="dating.html" title="Dating Page">dating</a> 
    								<div id="dating"> 
    									<!-- dating sites -->
    									<h2>dating sites</h2>
    									<ul>
    										<li><a href="dating/30sdatingreviews1.html">30&apos;s Dating</a></li>
    										<li><a href="dating/maturedatingreviews1.html">Mature Dating</a></li>
    										<li><a href="dating/seniordatingreviews1.html">Senior Dating</a></li>
    										<li><a href="dating/gaydatingreviews1.html">Gay &amp; Lesbian Dating</a></li>
    										<li><a href="dating/germandatingreviews1.html">German Dating</a></li>
    										<li><a href="dating/scandinaviandatingreviews1.html">Scandinavian Dating</a></li>
    										<li><a href="dating/russiandatingreviews1.html">Russian Dating</a></li>
    										<li><a href="dating/australiandatingreviews1.html">Australian Dating</a></li>
    									</ul>
    									<!-- books and advice -->
    									<h2>books &amp; advice</h2>
    									<ul>
    										<li><a href="dating/askapril1.html">Ask April</a></li>
    										<li><a href="dating/bounceback1.html">Bounce Back to Dating Formula</a></li>
    										<li><a href="dating/datingsecrets1.html">Dating Secrets</a></li>
    									</ul>
    								</div>
    							</li><!-- end dating --> 
    							<!-- begin education -->
    							<li><a href="education.html" title="Education Page">education</a> 
    								<div id="education">
    									<ul>
    										<li><a href="education/scholzone1.html">Scholarship Zone</a></li>
    										<li><a href="education/speedstudytechniques1.html">Speed Study Techniques</a></li>
    										<li><a href="education/stimulusgrants1.html">Stimulus Grants	</a></li>
    										<li><a href="education/teachmetoday1.html">Teach Me Today</a></li>
    										<li><a href="education/winningsurveys1.html">Winning Surveys</a></li>
    										<li><a href="education/basicskillsassessments1.html">Basic Skills Assessments</a></li>
    									</ul>
    								</div>
    							</li><!-- end education --> 
    						</ul>
    						<!-- END PERSONAL NAVIGATION MENU --> 
    						<!-- BEGIN BUSINESS NAVIGATION MENU -->
    						<ul id="bMenu">
    							<!-- business opportunities -->
    							<li><a href="startyourownbusiness.html" title="Business Opportunities Page">business opportunities</a> 
    								<div id="bizopps">
    								<ul>
    									<li><a href="bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
    									<li><a href="bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
    									<li><a href="bizopps/anthonymorrison1.html">Anthony Morrison&apos;s Big Profits Secret</a></li>
    								</ul>
    								<!-- home business scams -->
    								<h2>home business scams</h2>
    								<ul>
    									<li><a href="bizopps/medicalbillinghomebusiness1.html">The Medical Billing Home Business Bible</a></li>
    								</ul>
    								<!-- medical -->
    								<h2>medical</h2>
    								<ul>
    									<li><a href="bizopps/freesitesignup1.html">Cash&ndash;Pulling Affiliate Marketing Websites</a></li>
    									<li><a href="bizopps/biggerbloggingprofitsreview1.html">Bigger Blogging Profits</a></li>
    								</ul>
    								<!-- affiliate marketing -->
    								<h2>affiliate marketing</h2>
    								<ul>
    									<li><a href="bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
    									<li><a href="bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
    								</ul>
    								<!-- trading/investing -->
    								<h2>trading&frasl;investing</h2>
    								<ul>
    									<li><a href="bizopps/swagbucks1.html">Swag Bucks</a></li>
    									<li><a href="bizopps/corsentialsurvey1.html">Corsential</a></li>
    								</ul>
    								<h2><a href="bizopps/makemoneywithsurveys1.html">surveys</a></h2>
    								<ul>
    									<li><a href="bizopps/thepeoplesprogram1.html">The People&apos;s Program</a></li>
    								</ul>
    							</div>
    						</li><!-- end business opportunities -->
    						<!-- business services -->
    						<li><a href="businessservices.html" title="Business Services Page">business services</a>
    							<div id="bizservices">
    								<ul>
    									<li><a href="bizopps/shipping1.html">Truckload&frasl;LTL Shipping</a></li>
    								</ul>
    								<!-- shipping solutions -->
    								<h2>shipping solutions</h2>
    								<ul>
    									<li><a href="telecommasterquoteagency1.html">Telecom Master Quote Agency</a></li>
    								</ul>
    								<!-- technology solutions -->
    								<h2>technology solutions</h2>
    								<ul>
    									<li><a href="bizservices/projmgmttemplates1.html">Project Management Templates</a></li>
    								</ul>
    								<!-- project management -->
    								<h2>project management</h2>
    							</div> 
    						</li><!-- end business services -->
    						<!-- begin business legal -->
    						<li><a href="legal.html" title="Legal Services Page">legal services</a>
    							<div id="bLegal">
    								<ul>
    									<li><a href="legal/willcreation1.html">Create My Will</a></li>
    								</ul>
    								<!-- will creation -->
    								<h2>will creation</h2>
    								<ul>
    									<li><a href="legal/DUIattorney1.html">DUI Attorney</a></li>
    								</ul>
    								<!-- defense attorney -->
    								<h2>defense attorney</h2>
    								<ul>
    									<li><a href="legal/divorcedocuments1.html">Divorce Documents</a></li>
    								</ul>
    								<!-- divorce -->
    								<h2>divorce</h2>
    								<ul>
    									<li><a href="debt/debtnegotiator1.html">Debt Negotiator</a></li>
    								</ul>
    								<!-- credit debt -->
    								<h3><span><a href="legal/creditdebt1.html">credit debt</a></span></h3>
    								<ul>
    									<li><a href="debt/evalbankruptcy1.html">Bankruptcy Lawyer Finder</a></li>
    									<li><a href="legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
    								</ul>
    								<!-- bankruptcy -->
    								<h3><span><a href="legal/bankruptcy1.html">bankruptcy</a></span></h3>
    								<!-- debt -->
    								<h2>debt</h2>
    								<ul>
    									<li><a href="mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
    									<li><a href="mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
    								</ul>
    								<!-- mortgage -->
    								<h2>mortgage</h2>
    								<ul>
    									<li><a href="debt/urgenthomerelief1.html">Urgent Home Relief</a></li>
    								</ul>
    							</div>
    						</li>
    					</ul>
    					<!-- END BUSINESS NAVIGATION MENU --> 
    				</div><!-- end wrapping div -->
    				
    				<!-- first e-mail submission form -->
    				<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
    				<div>
    					<label for="go" class="hidden">Enter Your E-mail:</label>
    					<input type="text" name="email" id="go" value="your e-mail" maxlength="30" />
    					<input type="submit" id="submit" value="Join" />
    				</div>
    				</form>
    				<div id="invalidemail"></div>
    				
    			</div><!-- end midcenter div -->
    			<div id="midright"></div>
    		</div>
    		<!-- begin bottom row -->
    		<div class="row">
    			<div id="botleft"></div>
    			<div id="botcenter"></div>
    			<div id="botright"></div>
    		</div>
    		
    		<!-- side window right -->
    		<div id="sidewindowright">
    			<div id="rightsidestart"></div>
    			<div id="rightsidebody">
    			    <h2 class="sidewindowheadertext">Not Recommended</h2>
    				<ul class="sidewindowlinks">
    					<li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
    					<li><a href="#">Mobile Mass Media</a></li>
    					<li><a href="#">Prorexin</a></li>
    				</ul>
    			</div><!-- end right window body -->
    			<div id="rightsideend"></div>
    		</div><!-- end side window right -->
    	</div><!-- end container div -->
    	
    	<!-- {position:fixed} objects BELOW this line -->
        <div id="blackoverlay"></div>
        
        <div id="submissionform">
            <div class="submittop"></div>
            <div class="submitmid">
                <div class="submitcontent">
                    <form name="form2" method="post" action="../Scripts/confirmform.php">
                        <div>
                            <label for="confirmemail">Confirm your e&ndash;mail:<span class="required">*</span></label>
                            <input class="inputwidth" type="text" name="confirmemail" id="confirmemail" value="" maxlength="34"/>
                        </div>
                        <div>
                            <label for="name">Enter your name:<span class="required">*</span></label>
                            <input class="inputwidth" type="text" name="name" id="name" value="" maxlength="34"/>
                        </div>
                        <div>
                            <label for="age">Enter your age:</label>
                            <input type="text" maxlength="3" name="age" id="age" />
                        </div>
                        <div>
                            <label for="gender">Select your gender:</label>
                            <select class="inputwidth" name="gender" id="gender">
                                <option selected="selected">Select Gender</option>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </div>
                        <div>
                            <label for="country">Select your location:<span class="required">*</span></label>
                            <select class="inputwidth" name="country" id="country">
                                <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>
                        <div>
                            <label id="spamtext">To prevent spam, please answer:<span class="required">*</span></label>
                            <div id="spammath">
                                <label id="math" for="addition"></label>
                                <input id="addition" name="addition" value="" maxlength="3"/>
                            </div>
                        </div>
                        <div id="errormessage">
                            <p>The following errors occurred with your submission:</p>
                            <ul></ul>
                        </div>
                        <div class="submitbutton">
                            <label class="aicatcher" for="aicatcher">Please leave this field blank:</label>
                            <input class="aicatcher" id="aicatcher" name="aicatcher" type="text" value=""/>
                            <input class="formsubmitbutton" id="finalsubmit" type="submit" value="Sign Me Up!"/>
                            <input class="formsubmitbutton" id="cancel" type="reset" value="Cancel"/>
                        </div>
                    </form>
                </div> <!-- .submitcontent -->
            </div> <!-- .submitmid -->
            <div class="submitbotm"></div>
        </div> <!-- #submissionform -->
        
        <div id="successfulsubmit">
            <div class="success-top"></div>
            <div class="success-mid">
                <div class="successcontent">
                    <h3>Thanks for joining the e-mail list, <span id="person"></span>!</h3>
                    <p>Your e&ndash;mail address is:</p>
                    <p id="email"></p>
                    <p class="back2u">You should receive an automated acknowledgement within a few minutes. Check your &quot;spam&quot; folder if it&apos;s late.</p>
                    <p class="exit"></p>
                </div>
            </div>
            <div class="success-botm"></div>
        </div>
    
    <!-- {position:fixed} objects ABOVE this line -->
    </body>
    </html>
    CSS styles:
    Code:
    /* home page CSS document */
    body {
        background:url("bgspring.gif");
        background-position:50% 0;
        background-attachment:fixed;
        padding:0 0 10px;
        margin:15px 10px 0;
    }
    
    #container {
    	display:table;
    	table-layout:fixed;
    	border-spacing:0 0;
    	max-width:960px;
    	min-width:440px;
    	
    }
    .row {display:table-row;}
    .row > div {
        display:table-cell;
        padding:0;
    }
    
    #topleft{background:url("headerleft.gif") no-repeat 100% 0;}
    #topcenter{background:url("headercenter.gif") repeat-x 0 0;}
    #topright{background:url("headerright.gif") no-repeat 0 0;}
    #midleft{background:url("bodyleft.gif") repeat-y 100% 0;}
    #midcenter{background:url("bodycenter.gif") repeat 0 0; min-height:120px;}
    #midright{background:url("bodyright.gif") repeat-y 0 0;}
    #botleft{background:url("footerleft.gif") no-repeat 100% 0;}
    #botcenter{background:url("footercenter.gif") repeat-x 0 0;}
    #botright{background:url("footerright.gif") no-repeat 0 0;}
    
    #topleft,#topright,#midleft,#midright,#botleft,#botright {width:16px;}
    
    #leftside{
    	position:absolute;
    }
    	#leftsidestart{
    		float:left;
    		background:url("sidewindowstartleft.gif");
    		width:27px;
    		height:250px;
    		margin:0;
    	}
    	#leftsidebody{
    		margin:0 auto;
    		float:left;
    		background:url("sidewindowbody.gif") repeat-x;
    	}
    	#leftsideend{
    		float:left;
    		background:url("sidewindowendleft.gif");
    		width:16px;
    		height:250px;
    		margin:0;
    	}
    	
    #middle{
    	width:626px;
    	margin:0 auto;
    	padding-right:7px;
    }
    #rightside{
    	position:absolute;
    }
    	#rightsidestart{
    		background:url("sidewindowstartright.gif");
    		float:left;
    		width:27px;
    		height:250px;
    	}
    	#rightsidebody{
    		background:url("sidewindowbody.gif") repeat-x;
    		float:left;
    		margin:0 auto;
    		height:250px;
    		position:relative;
    	}
    	#rightsideend{
    		background:url("sidewindowendright.gif");
    		float:right;
    		width:16px;
    		height:250px;
    	}
    
    /* header logo/lower logo */
    h1{
    	height:206px;
    	width:626px;
    	position:relative;
    	padding:0;
    	margin:0;
    	text-align:center;
    }
    /* mac hide */
    h1{overflow:hidden;}
    /* end hide */
    h1 span{
    	background:url("logo.png");
    	position:absolute;
    	left:0;
    	top:0;
    	display:block;
    	height:206px;
    	width:626px;
    }
    #lowerlogo{
    	background:url("lowerlogo.gif") 0 0 no-repeat;
    	width:500px;
    	height:29px;
    }
    
    /* first e-mail submission form */
    #emailbox{
    	background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
    	height:220px;
    	width:156px;
    	margin:0 0 0 8px;
    	position:absolute;
    	top:96%;
    }
    #go{width:80px; margin-top:186px; margin-left:8px;}
    #submit{width:50px;}
    #invalidemail{background:url("invalidemail.gif") no-repeat scroll 50%; width:140px; height:40px;position:absolute; top:166%; left:17px; z-index:-1;}
    
    /* form submission and related elements */
    /* -------------------------------------------- *\
        {position:fixed} objects = #blackoverlay, #submissionform, #successfulsubmit
    \* -------------------------------------------- */
    #blackoverlay {
        display:none;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:black;
        z-index:1;
        -moz-opacity:.80;
        opacity:.80;
    	filter:alpha(opacity=80);
    }
    
    /* ----------------------------- */
    #submissionform {
        display:none;
        width:360px;
        position:fixed;
        left:0;
        right:0;
        top:60%;
        z-index:1;
        padding-bottom:16px;
        margin:-15em auto 0;
    }
    .submittop {
        height:60px;
        background:url("emailsubmissiontop.gif") no-repeat 50% 0;
    }
    .submitmid {
        background:url("emailsubmissionmid.gif") repeat-y 50% 0;
        padding:1px 0;    /* 1px vertical padding is required! */
    }
    .submitbotm {
        height:14px;
        background:url("emailsubmissionbot.gif") no-repeat 50% 100%;
    }
    .submitcontent {
        overflow:hidden;    /* required! */
        margin:0px 28px -28px;
    }
    
    .inputwidth {
        display:block;
        width:70%;
        margin:3px auto 2px;
    }
    .required {color:#f00;}
    
    #spamtext {
        padding:3px 0;
        margin:0;
    }
    #spammath {
        padding-left:15%;
        margin:3px 0 2px 0;
    }
    #math {font-weight:bold;}
    #addition {width:50px;}
    
    .aicatcher {
        display:none;
        visibility:hidden;
    }
    
    /* ----------------------------- */
    #errormessage {
        display:none;
        min-height:12px;
        color:#f00;
        font-weight:bold;
        font-size:.9em;
    	font-family:Arial,sans-serif;
        position:relative;    /* required */
        padding:4px 8px 1.3em;
    }
    #errormessage p {
        padding:0;
        margin:0;
    }
    #errormessage a {color:#09c;}
    #errormessage a:hover {color:#0cc;text-decoration:none;}
    #errormessage ul{padding-left:10px;}
    #errormessage ul li{
    	list-style:disc;
    	font-size:.8em;
    }
    
    .submitbutton {
        text-align:center;
        position:absolute;
        left:0;
        right:0;
        top:100%;
    }
    .submitbutton input {
        margin:2px 12px 0;
    }
    .formsubmitbutton {
        cursor:pointer;
        font-size:1.1em;
        padding:.0625em .75em .125em;
    }
    
    #age{width:1.7em; margin:3px auto 2px;}
    /* ------------------------------------- */
    #successfulsubmit {
        display:none;
        width:400px;
        position:fixed;
        left:0;
        right:0;
        bottom:50%;
        z-index:1;
        margin:0px auto -3em;
    }
    .success-top {
        height:14px;
        background:url("successfulsubmit-top.gif") no-repeat 50% 0;
    }
    .success-mid {
        background:url("successfulsubmit-mid.gif") repeat-y 50% 0;
        padding:1px 20px;    /* 1px vertical padding is required! */
    }
    .success-botm {
        height:14px;
        background:url("successfulsubmit-bot.gif") no-repeat 50% 100%;
    }
    .successcontent {
        min-height:40px;
        padding:0px 0px;    /* Padding around content can be assigned here, if desired. */
        margin:-10px 0 0;
    }
    #successfulsubmit h3 {
        line-height:normal;
        text-align:left;
        text-shadow:1px 1px 1px #0c3;
        padding:1px 0 2px;
        margin:.25em 0;
    }
    #successfulsubmit p {
        margin:.325em 0;
    }
    #successfulsubmit #email {
        color:#00f;
        font-weight:bold;
        font-size:1em;
        font-family:Arial,sans-serif;
        text-align:center;
        margin:.25em 0 .5em;
    }
    #successfulsubmit .back2u {
        font-size:.9em;
    }
    #successfulsubmit .exit {
        color:#f00;
        font-weight:bold;
        font-size:1.1em;
        text-align:center;
        min-height:1.2em;
    }
    /* END FORM-RELATED ELEMENTS */
    dropdownmenus.css (same as original)
    Code:
    @charset "utf-8";
    /* Drop Down Menus */
    
    /*******************/
    /*PERSONAL NAV MENU*/
    /*******************/
    #pMenu{
    	padding:94px 0 0 47px;
    	background:url("pMenuBG.gif") no-repeat scroll 50% 39px transparent;
    	height:350px;
    	z-index:50;
    	margin:0 auto;
    }
    
    #pMenu ul{
    	margin:0;
    	padding:0;
    }
    
    #pMenu li{
    	list-style:none;
    	float:left;
    	margin-right:10px;
    	position:relative;
    	letter-spacing:2px;
    }
    
    #pMenu li li{
    	width:100%;
    	padding-top:1px;
    	margin-right:2px;
    	text-align:left;
    	list-style:square;
    	list-style-position:inside;
    	min-width:140px;
    	letter-spacing:1px;
    }
    
    #pMenu a{text-decoration:none;}
    #pMenu li > a{
    	color: #FFF;
    	text-shadow:1px 1px 3px #000;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
    	min-width:50px;
    	padding:3px;
    	border:5px groove #BB0013;
    	font-size:16px;
    	font-weight:bold;
    	
    	/*begin main gradient*/
    	background: #a90329; /* Old browsers */
    	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    	/*end main gradient*/
    }
    
    #pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
              color:#FF0;
    		  
    		  /*begin hover gradient top level*/
    		  background: #a0030b; /* Old browsers */
    		background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); 		/* FF3.6+ */
    		background: -webkit-gradient(linear, left top, left bottom, 			color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
    		background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
    		background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
    		background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); 				/* IE10+ */
    		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
    		background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
    }
    	
    #pMenu li > div{
    	visibility:hidden;
    	opacity:0;
    	transition:visibility 0s linear .3s,opacity .3s linear;
    	transition-delay:0s;
    	position:absolute;
    	margin-top:8px;
    	border:2px solid #003;
    	padding:4px;
    	z-index:2;
    		
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    
    #health{width:275px;}
    #insurance{margin-left:-30px; width:260px;}
    #general{margin-left:-78px; width:280px;}
    #dating{margin-left:-87px; width:200px;}
    #education{margin-left:-108px; width:225px;}
    
    #pMenu li li a, #pMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    
    #pMenu li li a:hover, #pMenu li li a:active, #pMenu li:hover li a:hover, #pMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #pMenu div a, #pMenu div a:hover, #pMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    
    #pMenu h3, #pMenu h2{margin:0;}
    #pMenu li li{padding:0 2px 0 0;}
    
    #pMenu h2{
    	font-style:bold;
    	text-align:left;
    	font-size:14px;
    	padding-left:3px;
    }
    #pMenu li h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #pMenu li:hover h2 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3{
    	text-align:left;
    	color:#000000;
    	font-size:13px;
    	padding-left:20px;
    }
    #pMenu li h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3 span{
    	display:list-item;
    	list-style-type:disc;
    	list-style-position:inside;
    }
    /******************/
    /*END PERSONAL NAV*/
    /******************/
    
    /**************/
    /*BIZ NAV MENU*/
    /**************/
    #bMenu{
    	background:url("bMenuBG.gif") no-repeat scroll 50% 82px transparent;
    	width:560px;
    	margin:0 auto;
    	height:78px;
    	padding-top:100px;
    	z-index:40;
    }
    
    #bMenu li{
    	list-style:none;
    	float:left;
    	position:relative;
    	margin-right:11px;
    	letter-spacing:2px;
    }
    
    #bMenu ul{margin:0; padding:0;}
    #bMenu h2{margin:0;}
    #bMenu li li{padding-top:0; padding-bottom:0; margin:0;}
    
    #bMenu a{text-decoration:none;}
    #bMenu li > a{
    	color: #FFF;
    	/*text shadow*/
    	text-shadow:1px 1px 3px #000;
    	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
    	font-weight:bold;
    	width:auto;
    	padding:3px;
    	border:5px groove #09F;
    	font-size:16px;
    
    	/*main gradient*/
    	background: #1e5799; /* Old browsers */
    	background: -moz-linear-gradient(top, #1e5799 0%, #5578e0 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#5578e0)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* IE10+ */
    	background: linear-gradient(top, #1e5799 0%,#5578e0 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5578e0',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li:hover a, #bMenu a:hover, #bMenu li:active a, #bMenu a:active{
        color:#FF0;
    	
    	/*main hover gradient*/
    	background: #738fdd; /* Old browsers */
    	background: -moz-linear-gradient(top, #738fdd 0%, #1e5799 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fdd), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* IE10+ */
    	background: linear-gradient(top, #738fdd 0%,#1e5799 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fdd', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li li{
    	width:100%;
    	padding-top:1px;
    	padding-bottom:1px;
    	margin-left:2px;
    	text-align:left;
    	list-style:square;
    	list-style-position:inside;
    	letter-spacing:1px;
    }
    
    #bMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    
    #bMenu li > div{
    	visibility:hidden;
    	opacity:0;
    	bottom:25px;
    	transition:visibility 0s linear .3s,opacity .3s linear;
    	transition-delay:0s;
    	position:absolute;
    	padding:4px;
    	border:2px solid #003;
    	
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li li a, #bMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #bMenu li li a:hover, #bMenu li:hover li a:hover, #bMenu li li a:active, #bMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #bMenu div a:hover, #bMenu div a:focus, #bMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    
    #bMenu h2{
    	font-style:bold;
    	text-align:left;
    	font-size:14px;
    	padding-left:3px;
    }
    #bMenu li h2 a, #bMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #bMenu li:hover h2 a:hover, #bMenu li:hover h2 a:active{color:#33C; text-decoration:none;}
    
    
    #bMenu h3{
    	text-align:left;
    	font-size:13px;
    	padding:4px 0 0 25px;
    	color:#000000;
    	margin:2px 0 2px 0;
    }
    #bMenu li h3 a, #bMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #bMenu li:hover h3 a:hover, #bMenu li h3 a:hover, #bMenu li:hover h3 a:active, #bMenu li h3 a:active{color:#33C; text-decoration:none;}
    
    #bMenu h3 span{
    	display:list-item;
    	list-style-type:disc;
    	list-style:disc;
    	list-style-position:inside;
    }
    
    #bizopps{width:260px; z-index:3;}
    #bizservices{width:280px; margin-left:-68px; z-index:3;}
    #bLegal{width:240px; margin-left:-121px; z-index:3;}
    /********************/
    /** END BUSINESS NAV*/
    /********************/
    
    #wrapper{height:auto; width:auto; background:url("homepagedivider.gif") no-repeat 50% 20px;}
    Thanks,
    Tyler

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Ty. First impressions....

    As designed, the center section of your page is 600px wide. It has to be redesigned before it can be narrowed to 500px or below.

    The dropdown menus have a similar and a different problem. If the user uses a slightly larger font/font-size than you expect, the menu items wrap. This will also happen if you try to fit those menus into a smaller width. The dropdowns will not align under the buttons as they seem to do at this time. Go ahead and zoom text-only larger (Firefox) and see for yourself.

    The wings can be shifted to the bottom, but they won't fit side-by-side since they total about 580px. Would you consider a different layout?... because, IMHO, this one won't really fly as a responsive/fluid layout. The only part that is fluid is the "Hello everyone..." message box. You can see that when you zoom the font-size, also.

    Whaddaya think?

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm getting rid of that dinky "hello everyone" text and putting something more compelling and short like: "promoting integrity with common sense product reviews"

    I updated the files at the test page.

    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" />
    	<title>World Review Group&ndash; Product Articles</title>
        <meta name="Description" content="Curious about a product before you buy it? Come here for reviews on today&apos;s hot products! Some of our categories include home business, dating, consumer electronics, and many others." />
        <meta name="Keywords" content="product review site, review article database, World review group, product reviews online, product articles, online product and service reviews" />
        <meta http-equiv="Content-Language" content="en" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link href="style/homepage.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
        <link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
    	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    </head>
    <body>
    	<!-- begin container div -->
    	<div id="container">
    		<!-- begin top row -->
    		<div class="row "id="toprow">
                <div id="topleft"></div>
                <div id="topcenter">
    				<!-- logo image with underlying text -->
    				<h1>World Review Group<span></span></h1>
    				<div id="lowerlogo"></div>
    			</div>
                <div id="topright"></div>
    		</div>
    		<!-- begin middle row -->
    		<div class="row">
    			<div id="midleft">
    			<!-- begin midcenter div -->
    			<div id="midcenter">
    				<div id="wrapper"><!-- begin menu wrapper -->
    					<!-- BEGIN PERSONAL NAVIGATION MENU -->
    					<ul id="pMenu">
    						<!-- begin health -->
    						<li><a href="health.html" title="Health Page">health</a> 
    							<div id="health"> 
    								<!-- weight loss -->
    								<h2>weight loss &amp; wellness</h2>
    								<!-- fitness -->
    								<h3><span>fitness</span></h3>
    								<ul>
    									<li><a href="health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
    									<li><a href="health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
    									<li><a href="health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
    									<li><a href="health/fitness/turbofire1.html">TurboFire Fitness</a></li>
    								</ul>
    								<!-- dieting -->
    								<h3><span>dieting</span></h3>
    								<ul>
    									<li><a href="health/dieting/healthetrimdiet1.html">Health&eacute; Trim Diet</a></li>
    									<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
    								</ul>
    								<!-- supplements -->
    								<h2>supplements</h2>
    								<ul>
    									<li><a href="health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
    									<li><a href="health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
    									<li><a href="health/Rx/libigrow1.html">Libigrow</a></li>
    									<li><a href="health/Rx/smokedeter1.html">Smoke Deter</a></li>
    									<li><a href="health/Rx/prorexin1.html">Prorexin</a></li>
    								</ul>
    								<!-- skin care -->
    								<h2>skin care</h2>
    								<ul>
    									<li><a href="health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
    									<li><a href="health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
    								</ul>
    							</div>
    							</li><!-- end health -->
    							<!-- begin insurance -->
    							<li><a href="insurance.html" title="Insurance Page">insurance</a> 
    								<div id="insurance"> 
    									<!-- property insurance -->
    									<h2><a href="insurance/propertyinsurance1.html">home&frasl;property insurance</a></h2>
    									<ul>
    										<li><a href="insurance/bestquoteshomereview1">BestQuotes</a></li>
    										<li><a href="insurance/usinsuranceonlinehomereview1.html">USInsuranceOnline</a></li>
    									</ul>
    									<!-- auto insurance -->
    									<h2><a href="insurance/autoinsurance1.html">auto insurance</a></h2>
    									<ul>
    										<li><a href="insurance/bestquotesautoreview1.html">BestQuotes</a></li>
    										<li><a href="insurance/atlascarinsurancereview1.html">Atlas Car Insurance</a></li>
    										<li><a href="insurance/cheapcarinsurancetrick1.html">Cheap Car Insurance Trick</a></li>
    										<li><a href="insurance/usinsuranceonlineautoreview1.html">U.S. Insurance Online</a></li>
    									</ul>
    									<!-- health insurance -->
    									<h2><a href="insurance/healthinsurance1.html">health insurance</a></h2>
    									<ul>
    										<li><a href="insurance/betterhealthquotereview1.html">Better Health Quote</a></li>
    										<li><a href="insurance/bestquoteshealthreview1.html">BestQuotes</a></li>
    										<li><a href="insurance/2insure4lesshealthreview1.html">2Insure4Less</a></li>
    									</ul>
    									<!-- life insurance -->
    									<h2><a href="insurance/lifeinsurance1.html">life insurance</a></h2>
    									<ul>
    										<li><a href="insurance/2insure4lesslifereview1.html">2Insure4Less</a></li>
    										<li><a href="insurance/usinsuranceonlinelifereview1.html">USInsuranceOnline</a></li>
    									</ul>
    									</div>
    								</li><!-- end insurance --> 
    								<!-- begin general -->
    								<li><a href="general.html" title="General Page">general</a> 
    									<div id="general"> 
    									<!-- electronics -->
    									<h2>electronics</h2>
    									<!-- gaming -->
    									<h3><span>gaming</span></h3>
    									<ul>
    										<li><a href="gaming/haltgamereview1.html">Halt Game</a></li>
    										<li><a href="gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
    										<li><a href="gaming/gsn1.html">GSN Gaming</a></li>
    									</ul>
    									<!-- electronic gadgets -->
    									<h3><span>electronic gadgets</span></h3>
    									<ul>
    										<li><a href="electronics/kindle1.html">Kindle e&ndash;Reader</a></li>
    										<li><a href="electronics/ecig1.html">Electronic Cigarettes</a></li>
    									</ul>
    									<!-- style and fashion -->
    									<h2>style &amp; fashion</h2>
    									<!-- makeup -->
    									<h3><span>makeup</span></h3>
    									<ul>
    										<li><a href="makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
    										<li><a href="makeup/simplykaren1.html">Simply Karen</a></li>
    									</ul>
    									<!-- food/dining -->
    									<h2>food&frasl;dining</h2>
    									<!-- net grocers -->
    									<h3><span>net grocers</span></h3>
    									<ul>
    										<li><a href="food/efooddepot1.html">eFood Depot</a></li>
    										<li><a href="food/peapod1.html">Peapod</a></li>
    									</ul>
    									<!-- coupons -->
    									<h3><span>coupons</span></h3>
    									<ul>
    										<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
    									</ul>
    									<!-- cars/auto -->
    									<h2>cars&frasl;auto</h2>
    									<ul>
    										<li><a href="auto/carfax1.html">Carfax Vehicle History Reports</a></li>
    										<li><a href="auto/carprices1.html">CarPrices.com</a></li>
    									</ul>
    									<!-- security -->
    									<h2>security</h2>
    									<ul>
    										<li><a href="security/adtalarm1.html">ADT Alarm System</a></li>
    									</ul>
    									<!-- hobby -->
    									<h2>hobby</h2>
    									<!-- music -->
    									<h3><span>music</span></h3>
    									<ul>
    										<li><a href="music/guitartricksreview1.html">GuitarTricks</a></li>
    										<li><a href="music/jamoramareview1.html">Jamorama&ndash; Learn Guitar</a></li>
    									</ul>
    								</div>
    							</li><!-- end general -->
    							<!-- begin dating -->
    							<li><a href="dating.html" title="Dating Page">dating</a> 
    								<div id="dating"> 
    									<!-- dating sites -->
    									<h2>dating sites</h2>
    									<ul>
    										<li><a href="dating/30sdatingreviews1.html">30&apos;s Dating</a></li>
    										<li><a href="dating/maturedatingreviews1.html">Mature Dating</a></li>
    										<li><a href="dating/seniordatingreviews1.html">Senior Dating</a></li>
    										<li><a href="dating/gaydatingreviews1.html">Gay &amp; Lesbian Dating</a></li>
    										<li><a href="dating/germandatingreviews1.html">German Dating</a></li>
    										<li><a href="dating/scandinaviandatingreviews1.html">Scandinavian Dating</a></li>
    										<li><a href="dating/russiandatingreviews1.html">Russian Dating</a></li>
    										<li><a href="dating/australiandatingreviews1.html">Australian Dating</a></li>
    									</ul>
    									<!-- books and advice -->
    									<h2>books &amp; advice</h2>
    									<ul>
    										<li><a href="dating/askapril1.html">Ask April</a></li>
    										<li><a href="dating/bounceback1.html">Bounce Back to Dating Formula</a></li>
    										<li><a href="dating/datingsecrets1.html">Dating Secrets</a></li>
    									</ul>
    								</div>
    							</li><!-- end dating --> 
    							<!-- begin education -->
    							<li><a href="education.html" title="Education Page">education</a> 
    								<div id="education">
    									<ul>
    										<li><a href="education/scholzone1.html">Scholarship Zone</a></li>
    										<li><a href="education/speedstudytechniques1.html">Speed Study Techniques</a></li>
    										<li><a href="education/stimulusgrants1.html">Stimulus Grants	</a></li>
    										<li><a href="education/teachmetoday1.html">Teach Me Today</a></li>
    										<li><a href="education/winningsurveys1.html">Winning Surveys</a></li>
    										<li><a href="education/basicskillsassessments1.html">Basic Skills Assessments</a></li>
    									</ul>
    								</div>
    							</li><!-- end education --> 
    						</ul>
    						<!-- END PERSONAL NAVIGATION MENU --> 
    						<!-- BEGIN BUSINESS NAVIGATION MENU -->
    						<ul id="bMenu">
    							<!-- business opportunities -->
    							<li><a href="startyourownbusiness.html" title="Business Opportunities Page">business opportunities</a> 
    								<div id="bizopps">
    								<ul>
    									<li><a href="bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
    									<li><a href="bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
    									<li><a href="bizopps/anthonymorrison1.html">Anthony Morrison&apos;s Big Profits Secret</a></li>
    								</ul>
    								<!-- home business scams -->
    								<h2>home business scams</h2>
    								<ul>
    									<li><a href="bizopps/medicalbillinghomebusiness1.html">The Medical Billing Home Business Bible</a></li>
    								</ul>
    								<!-- medical -->
    								<h2>medical</h2>
    								<ul>
    									<li><a href="bizopps/freesitesignup1.html">Cash&ndash;Pulling Affiliate Marketing Websites</a></li>
    									<li><a href="bizopps/biggerbloggingprofitsreview1.html">Bigger Blogging Profits</a></li>
    								</ul>
    								<!-- affiliate marketing -->
    								<h2>affiliate marketing</h2>
    								<ul>
    									<li><a href="bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
    									<li><a href="bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
    								</ul>
    								<!-- trading/investing -->
    								<h2>trading&frasl;investing</h2>
    								<ul>
    									<li><a href="bizopps/swagbucks1.html">Swag Bucks</a></li>
    									<li><a href="bizopps/corsentialsurvey1.html">Corsential</a></li>
    								</ul>
    								<h2><a href="bizopps/makemoneywithsurveys1.html">surveys</a></h2>
    								<ul>
    									<li><a href="bizopps/thepeoplesprogram1.html">The People&apos;s Program</a></li>
    								</ul>
    							</div>
    						</li><!-- end business opportunities -->
    						<!-- business services -->
    						<li><a href="businessservices.html" title="Business Services Page">business services</a>
    							<div id="bizservices">
    								<ul>
    									<li><a href="bizopps/shipping1.html">Truckload&frasl;LTL Shipping</a></li>
    								</ul>
    								<!-- shipping solutions -->
    								<h2>shipping solutions</h2>
    								<ul>
    									<li><a href="telecommasterquoteagency1.html">Telecom Master Quote Agency</a></li>
    								</ul>
    								<!-- technology solutions -->
    								<h2>technology solutions</h2>
    								<ul>
    									<li><a href="bizservices/projmgmttemplates1.html">Project Management Templates</a></li>
    								</ul>
    								<!-- project management -->
    								<h2>project management</h2>
    							</div> 
    						</li><!-- end business services -->
    						<!-- begin business legal -->
    						<li><a href="legal.html" title="Legal Services Page">legal services</a>
    							<div id="bLegal">
    								<ul>
    									<li><a href="legal/willcreation1.html">Create My Will</a></li>
    								</ul>
    								<!-- will creation -->
    								<h2>will creation</h2>
    								<ul>
    									<li><a href="legal/DUIattorney1.html">DUI Attorney</a></li>
    								</ul>
    								<!-- defense attorney -->
    								<h2>defense attorney</h2>
    								<ul>
    									<li><a href="legal/divorcedocuments1.html">Divorce Documents</a></li>
    								</ul>
    								<!-- divorce -->
    								<h2>divorce</h2>
    								<ul>
    									<li><a href="debt/debtnegotiator1.html">Debt Negotiator</a></li>
    								</ul>
    								<!-- credit debt -->
    								<h3><span><a href="legal/creditdebt1.html">credit debt</a></span></h3>
    								<ul>
    									<li><a href="debt/evalbankruptcy1.html">Bankruptcy Lawyer Finder</a></li>
    									<li><a href="legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
    								</ul>
    								<!-- bankruptcy -->
    								<h3><span><a href="legal/bankruptcy1.html">bankruptcy</a></span></h3>
    								<!-- debt -->
    								<h2>debt</h2>
    								<ul>
    									<li><a href="mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
    									<li><a href="mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
    								</ul>
    								<!-- mortgage -->
    								<h2>mortgage</h2>
    								<ul>
    									<li><a href="debt/urgenthomerelief1.html">Urgent Home Relief</a></li>
    								</ul>
    							</div>
    						</li>
    					</ul>
    					<!-- END BUSINESS NAVIGATION MENU --> 
    				</div><!-- end wrapping div -->
    				
    				<!-- first e-mail submission form -->
    				<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
    				<div>
    					<label for="go" class="hidden">Enter Your E-mail:</label>
    					<input type="text" name="email" id="go" value="your e-mail" maxlength="30" />
    					<input type="submit" id="submit" value="Join" />
    				</div>
    				</form>
    				<div id="invalidemail"></div>
    				
    			</div><!-- end midcenter div -->
    			<div id="midright"></div>
    		</div>
    		<!-- begin bottom row -->
    		<div class="row">
    			<div id="botleft"></div>
    			<div id="botcenter"></div>
    			<div id="botright"></div>
    		</div>
    		
    		<!-- side window left -->
    		<div id="sidewindowleft">
    			<div id="leftsideend"></div>
    			<div id="leftsidebody">
    				<h2 class="sidewindowheadertext">Most Popular</h2>
    				<ul class="sidewindowlinks">
    					<li><a href="#">Peapod</a></li>
    					<li><a href="#">South Beach Diet</a></li>
    					<li><a href="#">Brandcaster Coupons</a></li>
    				</ul>
    			</div><!-- end left window body -->
    			<div id="leftsidestart"></div>
    		</div><!-- end side window left -->
    		
    		<!-- side window right -->
    		<div id="sidewindowright">
    			<div id="rightsidestart"></div>
    			<div id="rightsidebody">
    			    <h2 class="sidewindowheadertext">Not Recommended</h2>
    				<ul class="sidewindowlinks">
    					<li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
    					<li><a href="#">Mobile Mass Media</a></li>
    					<li><a href="#">Prorexin</a></li>
    				</ul>
    			</div><!-- end right window body -->
    			<div id="rightsideend"></div>
    		</div><!-- end side window right -->
    	</div><!-- end container div -->
    	
    	<!-- {position:fixed} objects BELOW this line -->
        <div id="blackoverlay"></div>
        
        <div id="submissionform">
            <div class="submittop"></div>
            <div class="submitmid">
                <div class="submitcontent">
                    <form name="form2" method="post" action="../Scripts/confirmform.php">
                        <div>
                            <label for="confirmemail">Confirm your e&ndash;mail:<span class="required">*</span></label>
                            <input class="inputwidth" type="text" name="confirmemail" id="confirmemail" value="" maxlength="34"/>
                        </div>
                        <div>
                            <label for="name">Enter your name:<span class="required">*</span></label>
                            <input class="inputwidth" type="text" name="name" id="name" value="" maxlength="34"/>
                        </div>
                        <div>
                            <label for="age">Enter your age:</label>
                            <input type="text" maxlength="3" name="age" id="age" />
                        </div>
                        <div>
                            <label for="gender">Select your gender:</label>
                            <select class="inputwidth" name="gender" id="gender">
                                <option selected="selected">Select Gender</option>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </div>
                        <div>
                            <label for="country">Select your location:<span class="required">*</span></label>
                            <select class="inputwidth" name="country" id="country">
                                <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>
                        <div>
                            <label id="spamtext">To prevent spam, please answer:<span class="required">*</span></label>
                            <div id="spammath">
                                <label id="math" for="addition"></label>
                                <input id="addition" name="addition" value="" maxlength="3"/>
                            </div>
                        </div>
                        <div id="errormessage">
                            <p>The following errors occurred with your submission:</p>
                            <ul></ul>
                        </div>
                        <div class="submitbutton">
                            <label class="aicatcher" for="aicatcher">Please leave this field blank:</label>
                            <input class="aicatcher" id="aicatcher" name="aicatcher" type="text" value=""/>
                            <input class="formsubmitbutton" id="finalsubmit" type="submit" value="Sign Me Up!"/>
                            <input class="formsubmitbutton" id="cancel" type="reset" value="Cancel"/>
                        </div>
                    </form>
                </div> <!-- .submitcontent -->
            </div> <!-- .submitmid -->
            <div class="submitbotm"></div>
        </div> <!-- #submissionform -->
        
        <div id="successfulsubmit">
            <div class="success-top"></div>
            <div class="success-mid">
                <div class="successcontent">
                    <h3>Thanks for joining the e-mail list, <span id="person"></span>!</h3>
                    <p>Your e&ndash;mail address is:</p>
                    <p id="email"></p>
                    <p class="back2u">You should receive an automated acknowledgement within a few minutes. Check your &quot;spam&quot; folder if it&apos;s late.</p>
                    <p class="exit"></p>
                </div>
            </div>
            <div class="success-botm"></div>
        </div>
    
    <!-- {position:fixed} objects ABOVE this line -->
    </body>
    </html>
    I see all those problems. The graphics need to be changed to jpg, but I'm tackling this one step at a time. I did get the header to nestle nicely up to the top of the page. Don't really know how I want to position these side windows.

    You're right. It isn't going to need to be very fluid, but I'd like for the header change at a certain width. That should be simple enough. I really want this page to appear somewhat better on smaller devices. The landing page styles you helped me with look great on mobile devices. I should think I'm on the right track. A lot of these styles were originally copied over from the original- haven't quite gotten around to every part of it yet. I started with the header so far, and I'm getting that cleaned up.

    Just a bunch of random thoughts (this is a big task),
    Ty

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I have a suggestion. It might be helpful to use a couple of pictures/images of what you would like to see at wide and narrow widths (or at each change in the media query). You could put the image on your web site and post a link to it. There's no need to post the HTML as long as we have a link to the test site and it is up to date. Right now, the test page looks a bit like it exploded and could use some duct tape .

    Yes, this do-over will take some time.

    Baby steps for starters.... What would you like to move first?

    EDIT: and try to be specific about dimensions. You mentioned 500px width, but that is not realistic with the current design. If your goal is 500px, then we need to talk about changes that will help get there.

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

    Lightbulb

    Okay, if this sounds reasonable, I'd like for the middle of the site to shrink to 600 px.

    first original/full width design - Something like the original will do fine for full width display

    shrunken width - The side windows and e-mailbox are moved down below the main home page content.

    When the page is shrunken, the drop down menus should just turn into buttons (or maybe you have a better idea).

    The other thing is I've made the logo/header image with a smaller version below it. The background position property, along with the width, should be adjusted to display the miniature version of the header. I can post a screenshot of that, too, but I'm confident you know all about image splicing instead of loading a completely different image.

    More random thoughts... I guess we should focus on the screenshots I've posted now.

    -Ty

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Tyler,

    I've put a fabricated screen shot in your dropbox folder: https://www.dropbox.com/sh/rcq9yw46mgtsxnu/HKfyNAWNL9 It's similar to the one you posted.

    This page is awkward to work with. It seems to waste lots of screen space. The"Most Popular" and "Not Recommended" boxes will shift to the bottom like those in this image at window widths below 1200px (pretty wide); initially there will be 300px of empty space on each side of the content area..

    I'm not sure where to put the "WRG.com Updated" box from the bottom, and I'm not feelin' warm and fuzzy about the "join our mailing list" ribbon. It looks lost down there.

    What do you think? Is something like this what you want for the long term? Think creatively.

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

    Yes, I do agree that the email submission looks like it's just hanging out like a fox's tail at the bottom - hardly even noticeable. Maybe the idea is to have another image splice for a long, horizontal e-mail submission form that covers a lot of the bottom width when it shifts from its original perch. I guess I'll have to make my own screenshot, but I think that would be a good change for the e-mail box.

    I did update the files at the test page. You'll notice the header and lower logo should be positioned correctly. The drop down menus have been changed to get away from using pixels as units for everything. The next thing is how to size up and position the #midcenter div into its place in the middle of the layout.

    About the windows shifting at 1200 pixels, we can make the inner grid reflexive, correct? Using percentages for the div sizes (for the mid center) should be able to determine max-width, no? Just like on the landing page layout images, those styles enable those images to shrink and expand, so, possibly, the drop down menu backgrounds can do the same? It seems we can cut down on the width using things like that, so the sides don't shift at such a wide width. If they shifted at 1000px, that would be a step in the right direction (if not acceptable).

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    I did update the files at the test page.
    The test page doesn't seem to be responding at the moment.

  9. #9
    Non-Member
    Join Date
    Jan 2014
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The test page doesn't seem to be responding at the moment.
    I do not think so

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It should be just fine. I see it on my PC.

    I'm thinking the e-mail box needs to take on the graphic style of the rest of the graphics and placed below the drop down menus. That way it won't look so out of place.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Ty, Please see the latest screen shot. This is what I see in Firefox and Chrome. I can't tell what you are aiming to do. Sorry.
    https://www.dropbox.com/sh/rcq9yw46mgtsxnu/HKfyNAWNL9

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah... my work is complete. Total chaos.

    Looks like switching to em units threw off the drop down menu text. It looks fine on my PC.

    I want to focus on one thing at a time. Right now, I'm trying to get the middle with the menus positioned in place- the center.

    This is very difficult. I am certainly still getting a grip on CSS.

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

    Here are some diagrams I've created that demonstrate what the objective is.
    Full width
    Window shift

    I've also updated the files on the test page.

    I am still focused on aligning the #midcenter div back into the center as my next step. I am simply befuddled. It won't budge.

    I added a middle content container with the i.d. of #middle, which surprisingly brought the side windows together.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Do you mind if I revert back to the old CSS that works on my PC (and presumably others)? Percents and ems are still out of control If you do the reversion, that would be better because my latest copy is probably older than yours before you changed to ems and %.

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, reverting to something that actually works is the way to go; however, I remember you saying this about the text size on the drop downs (post #2):

    The dropdown menus have a similar and a different problem. If the user uses a slightly larger font/font-size than you expect, the menu items wrap. This will also happen if you try to fit those menus into a smaller width. The dropdowns will not align under the buttons as they seem to do at this time. Go ahead and zoom text-only larger (Firefox) and see for yourself.
    Apparently, I need to learn how to use percentages, em's, and pt. in theory and practice. I'm under the impression that %'s are used on layout measurements (usually targeting div's), em's are used on padding and margin, and points are used for font sizes.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The application of units of measure is not so black-and-white. We'll talk more about them as we progress using applicable examples.
    For the time being, consider percents as being useful as dimensions on fluid pages whose width is subject to adapt to a browser's window width without a media query, or for font sizes. Ems are most useful for font sizes, sometimes for padding or margins if you want the padding or margin to change if the font size changes, and sometimes for widths in media queries. Points and pixels are not generally recommended for font sizes because they are fixed units; ems and rems or even percents are preferred. Percents and ems are equivalent as units of measure for fonts.

  17. #17
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I already knew that percentages were used to make fluid designs without media queries, but it appears to have slipped my mind when changing the units on the drop down elements. I found this tutorial when we were working on the landing page design? Have you seen my paper design for landing pages? Check this design out!

    I guess I am waiting for your suggestion as to why the midcenter div does not center... well, when you get a chance to take a look. It's Friday after all.

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Tyler,

    I put a new folder entitled "WRGHome(4Ty)" in your dropbox with the hope that it behaves the way you wish. Please don't try to use the code for your working page... it is not well tested and it may be possible to accomplish the changes more easily if you change you graphics. Let's just call this a "test run". It works in Opera, Chrome, FF, and should work in IE9+ (NOT IE8).

    I did not use your existing home page code as a model for this code. So, none of the <div>s or classes can be plugged into your real code, plus the graphics have been recreated... in pieces. Remember... "test run".

    It is based on your current working design which has a 600px center section (626px, to be more exact).
    With wings, this one is 1200px wide (the breakpoint to drop the wings is at 1220px).
    It is fluid below 626px, with one breakpoint at 560px (your choice).

    There are more notes on the HTML page.

    Try it out. See if it fits your wishes.

    https://www.dropbox.com/sh/rcq9yw46mgtsxnu/HKfyNAWNL9

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

    Cool Drop Down Menu Application

    Hi, Ronpat, and thanks for the diligent input once again.

    Overall, this definitely makes a lot more sense. It looks absolutely wonderful, too, on a mobile phone.

    I have added the drop down menu markup and styles into the mix now. I have an uploaded test site at: this new test page.

    Next step I'm looking at right now is how to adjust the dropdownmenus.css stylesheet. A few things that need to be accomplished with the menus are...

    -on a mobile device, the main-level list items need to stack/display vertically...
    -on mobile-size displays/viewports, the child div menus need to stay hidden, and the parent list-items will just be links
    -the size of these links appears way too huge on mobile.
    -the background of the drop down menu needs to change with graphics I'll alter for that to look nicely when the list items are vertical

    I was able to get the last test page looking okay (on desktop), but this is definitely a solid foundation to build on.

    Thanks,
    Tyler

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Ty.

    In my zeal to get the test file out the door, I didn't think to debug the z-indexes. Your menus are not clickable . I've replaced the WRGHome.css file in the dropbox with (rev1) that is layered properly.

    I would like to suggest that you make some sketches of how you would like the menus to look at different widths. I'm not good with mobile menus as my JavaScript skills are nil. I can help get you in the ballpark design-wise, but the JS functionality will require other's skills.

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

    Question Updated Files

    Ronpat,

    test site files updated

    Added e-mail box graphic.The graphic over-extends and looks terrible on a mobile device, but good on normal desktop. Do I need to chop the e-mail graphic into 3 pieces? That should be simple enough.

    Wondering why the <h3> inside of .leftwing and .rightwing won't take on the text shadow that I tried to apply.

    Also, the drop down menus don't unfold and show the child list. I will make a wild guess here, but is that because of the clearfix? Also, I tried changing the font-sizes for the main-level list items, and they are still extremely huge and wrap when viewed on a mobile device.

    Thanks,
    Ty

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I see the green text-shadow inside the wings just fine.

    Regarding "clearfix"... think of it as a device that comes to your rescue when "overflow:hidden" won't work, such as in some dropdown menus. "clearfix" is unlikely to be a problem.

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

    Files Updated, focused on Sign Up Box

    Ronpat,

    Okay. I understand that there will be a little bit of JS involved, and I should be able to do that even by myself. It may only be one or two lines of code to do something like change the style sheet from dropdownmenus.css to dropdownsmobile.css, and that may be all it takes. I'll get to that in a later post, but right now I'm focused on the e-mail submission box.

    The graphics don't want to display. I have used the following styles:
    Code:
    #singupbox:before{
    	background:url("emailboxleft.gif") transparent no-repeat 0 0;
    	width:110px;
    	height:100px;
    	border-radius:0 0 16px 16px;
    }
    #signupbox {
        /*border:8px solid #d44;
        background-color:rgba(255,160,160,.6);  /* TEST */
    	background:url("emailboxcenter.gif") transparent repeat-x 0 0;
        width:70%;
        height:100px;   /* UNNECESSARY after content is added */
        text-align:center;   /* if needed */
        margin:0 auto;
    }
    #signupbox:after{
    	background:url("emailboxright.gif") transparent no-repeat 0 0;
    	width:114px;
    	height:110px;
    }

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I do not use IDs unless they are needed for JavaScript or form references or fragment identifiers for on-page anchors. Change the hash marks to dots and see if that makes a difference. I have not tried it.

    Also, the green text-shadow needs a comma in the middle.
    Code:
    .leftwing h3, .rightwing h3 {
    	text-shadow:1px 2px 1px #0C0, 2px 3px 4px #093;
    }

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

    Post

    Okay. Updated the files again. I'm seeing the middle piece of the sign up box, but not the :before or :after targets. There was a typo in the :before element in the first code, but fixing that didn't make it display.

    I'm also looking for some ideas for responsive nav menus. Here and here are some screenshots with what we could do with the background graphics. There are vertical background bars there to change to using the background-position property using a media query at smaller viewport sizes, correct? I guess JS would be used to remove the child menu content at the smaller widths, and then just another media query in CSS could have the main items just stack vertically using the display property?


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
  •