SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Losing centered layout on a tablet stylesheet

    I've tried to figure this out for days now, so I'm hoping someone here can help.

    I have a site that is centering on the screen just like I want it to when viewed via my regular desktop stylesheet (style.css) but left aligns on my tablet stylesheet (tablet.css). The main problem areas are the navigation and the #main div, which holds all the main content below navigation. (The footer, which is just some centered text inside a 100%-width div, is centering fine.)

    A simple example page to look at would be the Performing Live page. Here's a screenshot of the tablet view on the iOS Simulator I'm using to view the site on a tablet. You can see that the navigation and main content are all left aligning when I'd like them to be centered.

    grabze.jpg

    Relevant html for this page, which is directly inside the body tag:

    Code:
    <div id="container"> 
    
    <div class="clearfix" id="nav_bg">  <header class="container clearfix">  
    <div id="logo"> 
    <a href="index.php"><img src="img/logo.png" width="272" height="110" alt="DanaGould.com"></a></div> 
      <!-- end LOGO -->
    <nav class="clearfix"><div id="navbuttons"><ul>
    <li><a href="podcast.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Podcast','','img/podcast_on.png',1)"><img src="img/podcast_off.png" alt="Podcast" name="Podcast" border="0"></a></li>
    <li><a href="live.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('PerformingLive','','img/performing_on.png',1)"><img src="img/performing_off.png" alt="Performing Live" name="PerformingLive" border="0"></a></li>
    <li><a href="video.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Video','','img/video_on.png',1)"><img src="img/video_off.png" alt="Video" name="Video" border="0"></a></li>
    </ul></div><!-- end NAVBUTTONS --> 
    
    <div class="clearfix" id="socialmedia"><ul>
    <li></li>
    <li><a href="http://www.facebook.com/officialdanagould" target="_blank"><img src="img/facebook_icon.png" alt="Facebook" border="0"></a></li>
    <li><a href="https://twitter.com/#!/DanaJGould" target="_blank"><img src="img/twitter_icon.png" alt="Facebook" border="0"></a></li>
    <li><a href="http://danagould.tumblr.com/" target="_blank"><img src="img/tumblr_icon.png" alt="Facebook" border="0"></a></li>
    <li><a href="http://feeds.feedburner.com/TheDanaGouldHour" target="_blank"><img src="img/rss_icon.png" alt="Facebook"  border="0"></a></li>
    </ul>
    </div><!-- end SOCIALMEDIA --> 
    </nav>
    
    </header>
    <div class="clearfix" id="mobilebar"><img src="img/mobilebrush.png"></div><!-- end MOBILEBAR -->
    
    </div><!-- end NAV_BG -->
    
    <div class="clearfix" id="main"> 
    
    <!-- InstanceBeginEditable name="Main" --><div id="fullwidthblank"><div id="liveheader">
      <h1>Performing Live</h1>
      </div><!-- end LIVEHEADER -->
     <div id="livebody"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
    
    ...
    
    </table>
    </div><!-- end LIVEBODY -->
    </div><!-- end FULLWIDTHBLANK -->
    <!-- InstanceEndEditable -->
    </div><!-- end MAIN -->
    <footer class="clearfix">
    &copy; 2012 Dana Gould  <a href="about.php" target="_self">About</a>  Web Design by <a href="http://www.saraholt.com" target="_blank">Sara Holt</a></footer>
    </div><!-- end CONTAINER -->
    Relevant styles from style.css (desktop):

    Code:
    html {
    	font-size: 100%;
    	-webkit-text-size-adjust: 100%;
    	-ms-text-size-adjust: 100%;
    	 height:100%;
        overflow-y:scroll; /*keep scrollbox present at all times*/
    }
    
    html, button, input, select, textarea {
    	font-family: sans-serif;
    	color: #222;
    	margin: 0 auto;
    }
    	
    body {
    	margin: 0 auto;
    	font-size: 1em;
    	line-height: 1.4;
    	color: #fffeb9;
    	text-decoration: none;
    	background-image: url(../img/bg_papertexture.jpg) ;
    	background-repeat: repeat;
    	background-position: center center;
    }
    
    
    #container	{
    	background-image: url(../img/radialglow.png); 
    	background-repeat: no-repeat;
    	background-position: center top;
    	width: 100%;
    	margin:0 auto;
    	min-height: 400px;
    }
    
    
    #nav_bg {
    	height: 110px;
    	width: 100%;
    	background-image:url(../img/nav_bg.png);
    	background-repeat: repeat-x;
    	margin: 30px auto 0;
    }
    
    header {
    	width: 960px;
    	margin: 0 auto;
    	height: 110px;
    	text-align: left;
    }
    
    .container {
        /* for IE */
        text-align: center;
    }
    
    #main {
    	margin: 0 auto;
    	width: 960px;
    	padding-bottom: 0px;
    }
    
    nav {
    	text-align: left;
    	height: 75px;
    	width: 60%;
    	margin: 0 auto 0 25px;
    	float:left;
    	
    }
    
    #logo {
    	
    	margin-left: 30px;
    	float: left;
    	height: 110px;
    	width: 292px;
    }
    
    
    #nav_bg header nav #navbuttons ul {
    	list-style-type: none;
    }
    #nav_bg header nav #navbuttons ul li {
    	display: inline;
    }
    
    #navbuttons	{
    	float: left;
    	margin-top:25px;
    	
    }
    	
    
    #socialmedia	{
    	float:left;
    	margin-left: 20px;
    	margin-top:25px;
    
    }
    
    
    #socialmedia ul{
    	list-style-type: none;
    }
    
    #socialmedia ul li	{
    	display: inline;
    }
    
    #mobilebar	{
    	display: none !important; visibility: hidden;
    }
    
    #fullwidthblank	{
    	width: 900px;
    	margin-left: 50px;
    	margin-top: 15px;
    }
    
    #liveheader	{
    	background-image: url(../img/brushes_header_live.png);
    	background-repeat: no-repeat;
    	background-position: right top;
    }

    Relevant styles from tablet.css:

    Code:
    html, body	{
    	width:100%;
    	height: 100%;
    	overflow-y: scroll;
    	margin: 0 auto;
    }
    
    body	{
    	text-align:center;
    	margin:0 auto;
    	height:auto;
    	overflow: hidden;
    	
    }
    
    
    #container	{
    	width: 100%;
    	background-image: url(../img/radialglow.png); 
    	background-repeat: no-repeat;
    	background-position: center 100px;
    	background-size: auto 500px;
    	text-align:center;
    	margin: 0 auto;
    	height:auto;
    	padding:0;
    	
    }
    
    #nav_bg {
    	width:100%;
    	background-image:url(../img/nav_bg.png);
    	background-repeat: repeat-x;
    	background-size: auto 80px;
    	margin: 0 auto;
    	padding:0;
    	text-align:center;
    	height: 85px;
    	
    }
    
    #main	{
    	width: 768px;
    	margin: 0 auto;
    	padding: 0;
    	
    }
    
    header	{
    	height: auto;
    	margin: 0 auto;
    	width: 768px;
    	text-align:center;
    }
    
    
    
    #logo	{
    	height:auto;
    	padding:0;
    	margin: 0 auto;
    	float:left;
    	width: 23%;
    	
    	
    }
    
    #logo img	{
    	height:auto;
    	width:100%;
    	
    }
    
    nav		{
    	min-height:35px;
    	width: 60%;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 18px;
    	text-align: center;
    	height:auto;
    	
    }
    #navbuttons	 {
    	float: left;
    	margin-top: 0px;
    
    	
    }
    
    #navbuttons	img {
    	float: left;
    	max-height: 35px;
    	width: auto;
    	
    }
    
    #socialmedia	{
    	float:left;
    	margin: 0;
    	padding-left: 10px;
    	
    
    }
    
    
    #socialmedia ul{
    	list-style-type: none;
    	
    }
    
    #socialmedia ul li	{
    	display: inline;
    	float: 	left;
    }
    
    #socialmedia ul li img	{
    	float: left;
    	max-height: 35px;
    	width: auto;
    }
    
    #fullwidthblank	{
    	margin:0 auto;
    	width:100%;
    	
    }
    
    #liveheader	{
    	background-image: none;
    	width:100%;
    	margin: -25px 0 0 0;
    }
    What am I missed here? Any help would be greatly appreciated!

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? This is the very last thing I need to figure out before my site goes live. Thank you!

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

    The index page does not have a valid !DOCTYPE. Try putting
    <!DOCTYPE html>
    alone as the very top line in the file and see if that helps.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, it would be good to get rid of this at the top of the page if you can:

    Code:
    <!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="true" -->

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Darn, I thought I already took care of that. Ok, it's fixed now. Doc type is first. I'm still seeing everything left aligned on a tablet.

  6. #6
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and the site is live, so the links are changed as follows:
    Site
    style.css
    tablet.css

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This may not help, but anyhow, don't put anything between the doctype and the <head> element, except perhaps a language type:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    So move all those conditional comments etc. down into the <head>.


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
  •