Hopefully the solution isn't too complicated, but how do I center the content of my webpage so that it's centered on all screen resolutions?
Something may look centered on my screen, but if I send the site to anyone else, it's totally off.
Here's what it looks like now:
Spoiler
I also tried using the 'rigid' method as mentioned here: http://www.dreamweaverclub.com/css-center-content.php
but when I do, it shifts the tabs at the top, whereas I'd like to keep those on the top left of the page.
If needed, here is my code (forgive me if it's messy ;-; I kinda really suck at coding)
Spoiler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Sheet</title>
<link href="css/phoenixcontactsheet.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<style type="text/css">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
*{
padding: 0; margin: 0;
}
.grid1{
width: 220px;
margin-left: 20px;
float: left;
}
.grid2{
width: 460px
margin-left: 20px;
float: left;
}
.grid3{
width: 700px;
float: left;
top: 200px;
left:35%;
position:relative;
margin:0px auto
}
.grid 4{
width: 940px;
margin-left: 20px;
float: left;
}
.push1{
margin-left: 260px;
}
.push2{
margin-left: 500px;
}
.push3{
margin-left: 740;
}
html{
font-family: 'Helvetica-Neue', Helvetica, sans-serif;
font-size: 100%;
}
form{
background-color: #e3cdae;
margin-left:20%;
margin-right: 20%;
margin-top: 20%;
border-radius: 25px;
box-shadow: 1px 1px 5px #191919;
border-left: 8px solid #bd9449;
}
form, form input{
font-size: 24pt;
margin-top: 10%;
}
fieldset{
margin: 10px 5px;
border: none;
}
input{
border: none;
background-color: #efefef;
padding: 10px;
border-radius: 25px;
}
button{
font-size: 24pt;
padding: 10px;
border-radius: 15px;
-webkit-border-radius:- 15px;
-moz-border-radius: 15px;
margin: 10px;
border: none;
background-color: #fff;
}
label{
font-size: 30px;
padding-top: 20px;
padding-bottom: -30px;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<!--header-->
<div id="header">
<div>
<a class="logo-image" href="index.html" name="top">
<img alt="Phoenix Photography. Est. 1990" src="images/Phoenix_lettering_small.png"></img>
</a>
</div>
</div>
<!--navigation-->
<div id="nav">
<ul>
<h4><a class="selected" href="phoenixhome.html"> Home </a>
<a href="phoenixgallery.html"> Gallery</a>
<a href="phoenixclient.html"> Clients</a>
<a href="phoenixinfo.html"> About</a>
<a href="phoenixcontact.html"> Contact</a>
<a href="http://icephoenixphotography.tumblr.com"> Blog</a></h4>
</ul>
</div>
<!--form-->
<div class="container">
<div class="row">
<div class="grid4">
<h1 class="Name"></h1>
<h1 class="displayEmail"></h1>
</div>
</div>
</div>
<div class="row">
<div class="grid3 top">
<form class="formy" method="post" action="ClientThankYou.html">
<fieldset>
<label for="Name">Name:</label>
<input type="text" name="Name" value="" placeholder="First and last name" required/>
</fieldset>
<fieldset>
<label for="phone">Phone</label>
<input type="phone" name="phone" value="" placeholder="(xxx)xxx-xxxx" required/>
</fieldset>
<fieldset>
<label for="userEmail"> Email Address:</label>
<input type="email" name="userEmail" value="" placeholder="name@email.com" required/>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
console.log(localStorage["Name"]);
$(document).ready(function(){
if(localStorage["Name"] ==""){
localStorage["Name"] = "";
}else{
$('.displayName').append(localStorage["Name"]);
$('.displayEmail').append(localStorage["userEmail"]);
}
});
$('.formy').submit(function(){
localStorage["Name"] = $("input[name='userName']").val();
localStorage["Email"] = $("input[name='userEmail']").val();
});
</script>
</body>
</html>
And the accompanying css:
Spoiler
body{
background: url(../images/background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: fixed;
min-width: fixed;
text-align : center ;
min-width : 770px ;
}
.grid2{
margin-top: 30px;
}
#header{
left: 33%;
position: absolute;
}
a{
color:#FFC !important;
}
Bookmarks