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'> Waiters/Bar Staff</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Legal Secretaries</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Office Juniors</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Customer Services Coordinators</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Receptionists</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Office Managers</a>
<a href='../Jobs/Sales.htm'> Telesales Operatives</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Ledger Clerks</a>
<a href='../Jobs/Industrial.htm'> Pickers/Packers</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Personal Assistants</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> HR Managers</a>
<a href='../Jobs/Industrial.htm'> Forklift Drivers</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> HR Admin/Officers</a>
<a href='../Jobs/Sales.htm'> Internal & External Sales Staff</a>
<a href='../Jobs/Industrial.htm'> Drivers All Categories</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Team Secretaries</a>
<a href='../Jobs/Industrial.htm'> Warehouse Staff</a>
<a href='../Jobs/Industrial.htm'> Machine Operators</a>
<a href='../Jobs/HR-Admin-Professionals.htm'> Data Entry Clerks</a> </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!
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
