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
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'> </div>
<span>Jobs</span>
</div>
<div class='menuboxwrapper' id='menubox2'>
<img src='images/parts.png' />
<div class='menuboxbackground'> </div>
<span>Parts</span>
</div>
<div class='menuboxwrapper' id='menubox3'>
<img src='images/email.png' />
<div class='menuboxbackground'> </div>
<span>Email</span>
</div>
<div class='menuboxwrapper' id='menubox4'>
<img src='images/prefs.png' />
<div class='menuboxbackground'> </div>
<span>Prefs</span>
</div>
<div class='menuboxwrapper' id='menubox5'>
<img src='images/admin.png' />
<div class='menuboxbackground'> </div>
<span>Admin</span>
</div>
<div class='menuboxwrapper' id='menubox6'>
<img src='images/settings.png' />
<div class='menuboxbackground'> </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;
}