css positioning for iPad help please!

Discussion in 'Web Design and Development' started by CavemanUK, Sep 15, 2011.

  1. CavemanUK macrumors 6502

    CavemanUK

    Joined:
    Jun 29, 2006
    Location:
    Rhyl, North Wales
    #1
    Hi, I'm trying to make a web based user interface for a site I'm playing with. I'm trying to make large buttons using a transparent css background, an image and some text. these are to be arranged in a 3 x 2 grid so there will be 6 icons on screen. I wanted to make them central on the screen and to cope when the iPad is changed to landscape... can anyone help me.. I'm really struggling with the positioning relative to each parent div and can't get it to centre properly at all either...

    here is the html and css

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>HTML5 template</title>
    	<meta charset="utf-8" />
     	
     	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
    
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    	 <link rel="apple-touch-startup-image" href="../images/startup.png" />
     
    	<link type='text/css' media='screen' rel='stylesheet' href='css/stylesheet.css' />
     	
     	
     	
    </head>
    <body>
    <div id='mainmenuwrapper'>
    <div class='menuboxwrapper' id='menubox1'>
    	<img src='images/jobs.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Jobs</span>
    </div>
    <div class='menuboxwrapper' id='menubox2'>
    	<img src='images/parts.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Parts</span>
    </div>
    <div class='menuboxwrapper' id='menubox3'>
    	<img src='images/email.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Email</span>
    </div>
    <div class='menuboxwrapper' id='menubox4'>
    	<img src='images/prefs.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Prefs</span>
    </div>
    <div class='menuboxwrapper' id='menubox5'>
    	<img src='images/admin.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Admin</span>
    </div>
    <div class='menuboxwrapper' id='menubox6'>
    	<img src='images/settings.png' />
    	<div class='menuboxbackground'>&nbsp</div>
    	<span>Settings</span>
    </div>
    
    </div>
    
    </body>
    </html>
    Code:
    * {
    			margin: 0;
    			padding: 0;
    }
     
    body {
    	font: 13px/22px Verdana, Arial, sans-serif;
    	background: #791118;
    	background-image:url('../images/background.jpg');
    	color: white;
    }	
    
    .menuboxwrapper {
    	width:160px;
    	height:160px;
    	padding:10px;
    	position:absolute;
    }
    
    
    
    .menuboxbackground {
    	background-color: black;
    	opacity: 1;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	width:100%;
    	height:100%;
    	opacity:0.4;
    }
    
    .menuboxwrapper img {
    	position: absolute;
    	opacity: 1;
    	left:58px;
    	top:58px;
    	z-index: 1000;
    }
    
    .menuboxwrapper span {
    	position: absolute;
    	font-size: 20px;
    	font-weight: normal;
    	bottom:15px;
    	right:15px;
    }
    
    #mainmenuwrapper {
    	
    	border-color: #00ff13;
    	border-style: solid;
    	border-width: 1px;
    	width: 600px;
    	height: 600px;
    	
    }
    
    #menubox1 {
    	left:100px;
    	top:100px;
    }
    
    #menubox2 {
    	position:absolute;
    	left:400px;
    	top:100px;
    }
    
    #menubox3 {
    	position:absolute;
    	right:100px;
    	top:100px;
    }
     
  2. Laird Knox macrumors 68000

    Joined:
    Jun 18, 2010
    #2
    Check out this post for a good writeup on rotation and CSS. I haven't gotten to the point where I need to write that part of my web site yet -- still working on the landscape layout. This seems to be the key here:

    Code:
    @media only screen and (orientation:portrait){
       /* portrait styles here */
       #wrap {
          width:768px;
       }
    
    You can do one layout in CSS and then overwrite some of it for a portrait layout (or the vice versa).
     

Share This Page