#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Converting website to mobile-fluid layouts using CSS


    Hi everyone,

    Rather than create a whole new website for iphone/ipads/etc I want to create CSS sheets that will adjust / hide elements to make it easier to scroll on smaller devices.

    I'm getting an annoying gap at the moment. See this!

    http://i231.photobucket.com/albums/ee171/jazzzza8/photo.png

    So, in my html page I'm using to test this I've got the following

    Code:
    <?php
      $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
        if ($browser == true){
        $browser = 'iphone';
      }
    ?>
    
    <?php if($browser == 'iphone'){ ?>
      <meta name="viewport"
      content="width=device-width,
      minimum-scale=1.0, maximum-scale=1.0" />
    <?php } ?>
    
    <?php if($browser == 'iphone'){ ?>
    
    <link href="../Styles/iphone.css" rel="stylesheet" type="text/css" />
    
    <?php }else{ ?>
    
    <link href="../Styles/Master.css" rel="stylesheet" type="text/css" />
    
    <?php } ?>
    and my css this links to is (keeping it neat and tidy):

    Code:
    @import url("basic.css");
    @import url("Navigation.css");
    @import url("contentItems.css");
    @import url("Links.css");
    @import url("Forms.css");
    @import url("iphonecss.css");
    and (now this is the messy bit because I've been trying to get rid of the gap unsuccessfully)

    Code:
    @media screen and (max-device-width: 480px){
        /*--- iPhone only CSS here ---*/
    
    	#branding { background-image: none; max-width:480px;}
    
        	body{
            -webkit-text-size-adjust:none;
            font-family:Helvetica, Arial, Verdana, sans-serif;
            padding:5px;
    	max-width:480px;
       	}
    
    #rightWrapperHome,#rightWrapper {float:left;}
    
    	#wrapper,#mainContent,rightWrapper,rightWrapperHome {max-width: 480px; float:left;}
    
    #middleWrapper {
    	width:480px;	padding: 0;
    	margin: 0;
    	clear: both;
    	background-color: #FFFFFF;float:left;
    }
    
    #mainContent {
    	float: left;
     overflow:hidden; width:480px;}
    
    #mainNav { width:0%;}
    
    	#topNav {max-width: 480px;float: left;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	overflow: hidden;
    }
    
    	#mainNav, #scroller,#rightWrapperHome {display: none;}
    
    	#footer {display:none;}
    
    	#footerLeft {display:none;}
    
    	img{
            max-width:480px;
            height:auto; }
    any one able to point me in the right direction?


    Oh, and the full HTML page is this :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <?php
      $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
        if ($browser == true){
        $browser = 'iphone';
      }
    ?>
    
    <?php if($browser == 'iphone'){ ?>
      <meta name="viewport"
      content="width=device-width,
      minimum-scale=1.0, maximum-scale=1.0" />
    <?php } ?>
    
    <?php if($browser == 'iphone'){ ?>
    
    <link href="../Styles/iphone.css" rel="stylesheet" type="text/css" />
    
    <?php }else{ ?>
    
    <link href="../Styles/Master.css" rel="stylesheet" type="text/css" />
    
    <?php } ?>
    
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22693941-2']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="" />
    
    
    <meta name="description" content="" />
    
    <link rel="SHORTCUT ICON" href="../YourImage.ico" />
    <title></title>
    
    <script type="text/javascript" src="Scripts/superPopup.js"></script>
    </head>
    
    <body>
    <!--Start Main Wrapper//-->
    <div id="wrapper">
    
    <!--Start Banner//-->
    <div id="branding">
      <div id="rightBanner"><!-- #BeginLibraryItem "/Library/Search.lbi" -->  <form action="" method="get" id="search" title="Site Search">
    <p class="padmebottom">
      <input class="searchBox" name="q" type="text" id="q" value="search" /></p>
    </form>  <p class="purple"></p></div>
     <div class="clearme"><img src="../images/empty.gif" alt="" /></div>
    </div><!--End Banner//-->
    
    
    <!--Start Top Navigation//-->
    <div id="topNav"> <ul class="horiz">
         <li><a href="../Contact-Us.htm">CONTACT US</a></li>
      <li><a href="../Jobs.htm">JOBS</a></li>
      <li><a href="../Our-Clients.htm">OUR CLIENTS</a></li>
      <li><a href="../Candidates.htm">CANDIDATES</a></li>
      <li><a href="../Our-Services.htm">OUR SERVICES</a></li>
      <li><a href="About.htm">ABOUT US</a></li>
      <li class="firstLink"><a href="../index.htm">HOME</a></li>
    </ul><div class="clearme"><img src="../images/empty.gif" alt="" /></div>
    </div><!--End Top Navigation//-->
    
    <!--Start Content Wrapper//-->
    <div id="middleWrapper">
    
     <!--Start Left Column//-->
     <div id="mainNav">
     <ul class="bar">
       <li><a href="About">ABOUT DOVETAIL</a></li>
       <li><a href="Why-Choose-.htm">WHY CHOOSE</a></li>
       <li><a href="Professional-Affiliations.htm">PROFESSIONAL AFFILIATIONS</a></li>
     </ul>
    <a href="Professional-Affiliations.htm">
     <p class="centreme margintop" style="padding-bottom: 20px;"><img src="../images/reclogo.gif" alt="REC" /></p>
     <p class="centreme margintop" style="padding-bottom: 20px;"> <img src="../images/iip.gif" alt="Investors in People" /></p>
     <p class="centreme margintop" style="padding-bottom: 20px;"> <img src="../images/cofc.jpg" alt="Thames Valley Chamber of Commerce Member" /></p>
     <p class="centreme margintop" style="padding-bottom: 20px;"> <img src="../images/teamlogo.jpg" alt="TEAM" /></p>
     <p class="centreme margintop"> <img src="../images/BIFM.jpg" alt="BIFM" /></p>
    </a></div>
     <!--End Left Column//-->
    
    <!--Start rightWrapper//-->
    <div id="rightWrapper">
    
    <!--Start Main Content//-->
    <div id="mainContent">
    <img src="../images/headers/img.jpg" alt="Handshake" />
      <h1> About</h1>
      <div class="floatright padmeleft" style="width:22%;"><img src="" alt="" class="marginbottom"  />
      <p>QUOTE</p>
      <p style="margin-bottom: 0;"><strong>    Managing Director
       </strong></p>
      </div>
      <p>TEXT</p>
      <p>TEXT</p>
    
    
    </div>
    <!--End Main Content//-->
    
    <!--Start Right Column//-->
    <!--End Right Column//-->
    <div class="clearme"></div>
     </div>
    <!--End rightWrapper//-->
     
     <div class="clearme"><img src="../images/empty.gif" alt="" /></div>
    </div><!--End Content Wrapper//-->
    <div id="scroller" class="eightyPercent"><marquee behavior=scroll loop=-1 height=19 direction=left scrollamount=3 scrolldelay=40 onmouseover=this.stop() onmouseout=this.start();>
    <a href='../Jobs/Catering.htm'>&nbsp;Waiters/Bar Staff</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Legal Secretaries</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Office Juniors</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Customer Services Coordinators</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Receptionists</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Office Managers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Sales.htm'>&nbsp;Telesales Operatives</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Ledger Clerks</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Industrial.htm'>&nbsp;Pickers/Packers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Personal Assistants</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;HR Managers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Industrial.htm'>&nbsp;Forklift Drivers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;HR Admin/Officers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Sales.htm'>&nbsp;Internal &amp; External Sales Staff</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Industrial.htm'>&nbsp;Drivers All Categories</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Team Secretaries</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Industrial.htm'>&nbsp;Warehouse Staff</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/Industrial.htm'>&nbsp;Machine Operators</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href='../Jobs/HR-Admin-Professionals.htm'>&nbsp;Data Entry Clerks</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</marquee><!-- #EndLibraryItem --></div>
     <!--Start Footer//-->
    <div id="footer">
    	<div id="footerLeft"><p class="seventyPercent White padmetop" style="margin-bottom: 0">CONTACT</p>	
    	</div>
    	<div id="footerRight"><ul class="horizBottom">
    			<li class="firstLink"><a href="../Bottom-Bar/Privacy-Policy.htm">Privacy Policy</a></li>
      <li><a href="../Candidates/Candidates-Terms.htm">Candidate Terms</a></li>
    	    <li><a href="../Bottom-Bar/Customer-Terms-and-Conditions.htm">Customer Terms</a></li>
      <li><a href="../Bottom-Bar/Environmental-Policy.htm">Environmental Policy</a></li>
      <li><a href="../Bottom-Bar/Recommended-links.htm">Links</a></li>
        </ul></div>
        <div class="clearme"><img src="../images/empty.gif" alt="" /></div>
    </div> <!--End Footer//-->
    
    </div><!--End Main Wrapper//-->
    </body>
    </html>
    if you'd like to take a look at any of the other css files please let me know!
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    two things: Which gap? I can see several, its not clear for anyone that is not a visionary

    Second, You might want to post this stuff online somewhere. quite some things can cause a gap (mainly margins). Not knowing what styles apply to this page its kinda hard to solve it.

IMN logo majestic logo threadwatch logo seochat tools logo