(Another) question about html and css

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
http://puu.sh/2rYl7

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>

<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>

<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>

<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;
}

Re: (Another) question about html and css

I typically use the "rigid method" and it works just fine.

Re: (Another) question about html and css

Quote:

Originally Posted by Zelkova

I typically use the "rigid method" and it works just fine.

I can use that, and it looks fine in chrome, but not in firefox.
Although the above mentioned site offers a solution for it, it makes it look okay in firefox, but not in chrome.

chrome: http://puu.sh/2s0TS
firefox: http://puu.sh/2s0Uj

(Another) question about html and css

There's no if logic to save you is there?

Re: (Another) question about html and css

Quote:

Originally Posted by Takebacker

There's no if logic to save you is there?

I guess not. Considering your sentence makes no sense to begin with.

Sorry for asking for help concerning a subject that I've stated many times that I do not understand and easily get confused by.
If you have nothing productive to contribute, then please leave.

(Another) question about html and css

Quote:

Originally Posted by icephoenix21

I guess not. Considering your sentence makes no sense to begin with.

Sorry for asking for help concerning a subject that I've stated many times that I do not understand and easily get confused by.
If you have nothing productive to contribute, then please leave.

I was trying to help...considering i'm in the middle of building two websites i figured we might be able to learn something. Until that post, anyway...

I was wondering if an if statement would help. I'm just using center tags for my images so far and i can't decipher much of css.

Re: (Another) question about html and css

Quote:

Originally Posted by Takebacker

I was trying to help...considering i'm in the middle of building two websites i figured we might be able to learn something. Until that post, anyway...

I was wondering if an if statement would help. I'm just using center tags for my images so far and i can't decipher much of css.

Ah, it sounded like some sarcasm to me, as in 'you have no logic to save you, do you', because I've never heard of an 'if statement' before.
I even asked two others what they thought you meant :S
In that case, my apologies.

Re: (Another) question about html and css

Keep your .body the way it is. You need to define a style for .h4 (what you're using for the links) that overrides the body.

Code:

.h4 { text-align: left; }

Re: (Another) question about html and css

Quote:

Originally Posted by icephoenix21

Ah, it sounded like some sarcasm to me, as in 'you have no logic to save you, do you', because I've never heard of an 'if statement' before.
I even asked two others what they thought you meant :S
In that case, my apologies.

I think he was referring to an "if" or "if / else" statement. A quick google search brought this to light.

http://www.quirksmode.org/css/condcom.html

I personally have only used this once or twice, and it was to redirect IE users :heart:

Re: (Another) question about html and css

Quote:

Originally Posted by Zelkova

I think he was referring to an "if" or "if / else" statement. A quick google search brought this to light.

http://www.quirksmode.org/css/condcom.html

I personally have only used this once or twice, and it was to redirect IE users :heart:

Ah, I see. That makes a bit more sense. I wish it were for firefox. I'm not so much concerned with IE, though since a majority of people do not use it.

Re: (Another) question about html and css

Quote:

Originally Posted by Takebacker

I was trying to help...considering i'm in the middle of building two websites i figured we might be able to learn something. Until that post, anyway...

I was wondering if an if statement would help. I'm just using center tags for my images so far and i can't decipher much of css.

To be fair it did seem like you were calling her stupid when I first read it too LOL. Like "There's no logic to save you is there". USE QUOTATIONS BRO.

(Another) question about html and css

Sorry for thinking ifs are like the most fundamental coding structure that everyone should know before knowing what code even looks like. :/

Re: (Another) question about html and css

Quote:

Originally Posted by Takebacker

Sorry for thinking ifs are like the most fundamental coding structure that everyone should know before knowing what code even looks like. :/

I don't believe there are if statements in CSS and HTML. JavaScript and PHP obviously have them though.

(Another) question about html and css

Quote:

Originally Posted by Locked

I don't believe there are if statements in CSS and HTML. JavaScript and PHP obviously have them though.

Not natively yeah. It is like zelkova said, for checking browser version. I didn't know if it could go beyond that though but i threw it out there anyway. You can do php within html with <? > i think (or <?-- --> don't remember)

Re: (Another) question about html and css

Quote:

Originally Posted by Takebacker

Not natively yeah. It is like zelkova said, for checking browser version. I didn't know if it could go beyond that though but i threw it out there anyway. You can do php within html with <? > i think (or <?-- --> don't remember)

<?php

?>

Re: (Another) question about html and css

Quote:

Originally Posted by Locked

I don't believe there are if statements in CSS and HTML. JavaScript and PHP obviously have them though.

Conditional comments exist, but yeah HTML and CSS are not code, so there is no branching logic.

Of course, you still have conditions. A CSS document tells your browser "if the content is a paragraph, display it this way. if it is a level 3 header, display it that way." And your body definition is an else catch-all that tells the browser how to display things that don't have a specific definition.

Re: (Another) question about html and css

Quote:

Originally Posted by Zelkova

<?php

?>

Ohhhh i see i was seeing this

Code:

 

and got confused. Sorry.

Re: (Another) question about html and css

Another question, if I'm making a type of 'Terms of Service agreement' anyone know what I would put in the javascript so that after they hit the 'I accept' box, it would redirect them to the next page? This is the coding I have:

Spoiler

<form name="myform">

<p>Terms of service</p>
<div class=tostext>

<p>Pariatur mlkshk DIY culpa dreamcatcher echo park. Sustainable +1 mcsweeney's, butcher non laborum deserunt. Flannel sartorial aute biodiesel sint. Irony hella voluptate ethnic, magna tempor ennui. Squid portland dolor, scenester nesciunt et irony meh. Lomo 90's you probably haven't heard of them quis, raw denim ullamco nostrud locavore portland. Williamsburg try-hard cupidatat, deserunt quis 90's meggings reprehenderit deep v leggings.

Literally 3 wolf moon retro viral mumblecore adipisicing, scenester brunch ut banjo tofu. Gentrify pinterest portland, trust fund ennui iphone neutra street art pour-over artisan et brooklyn ullamco pitchfork seitan. Raw denim leggings nulla accusamus. Occaecat proident pinterest leggings VHS lo-fi etsy sunt art party dreamcatcher pop-up gluten-free biodiesel elit. Non swag gentrify, ethical flannel proident ethnic ugh williamsburg. Lo-fi ullamco tattooed letterpress. Dolor pickled shoreditch incididunt commodo try-hard, umami meh authentic semiotics craft beer fixie letterpress.</p>
</div>

<p>By clicking the checkbox I hereby accept the Terms of Service:<P>
<input type="checkbox" name="mycheck" onclick="toggleform('document.myform','mycheck','p name,pemail,ptext')"> I Accept</p>
</form>