Login

icephoenix21 · 2013-04-01, 02:15 PM

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

And the accompanying css:

Spoiler

Zelkova · 2013-04-01, 02:42 PM

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

icephoenix21 · 2013-04-01, 03:12 PM

Zelkova Wrote: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

Takebacker · 2013-04-01, 03:31 PM

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

icephoenix21 · 2013-04-01, 04:32 PM

Takebacker Wrote: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.

Takebacker · 2013-04-01, 04:35 PM

icephoenix21 Wrote: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.

icephoenix21 · 2013-04-01, 04:42 PM

Takebacker Wrote: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.

Dusk · 2013-04-01, 04:54 PM

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;

}

Megalookin · 2013-04-02, 10:53 AM

icephoenix21 Wrote: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>

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

Pretty much sums up everything you're trying to do!

Zelkova · 2013-04-02, 12:08 PM

icephoenix21 Wrote: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

icephoenix21 · 2013-04-02, 12:14 PM

Zelkova Wrote: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

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.

KhainiWest · 2013-04-02, 12:27 PM

Takebacker Wrote: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.

Takebacker · 2013-04-02, 12:30 PM

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

Locked · 2013-04-02, 04:15 PM

Takebacker Wrote: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.

Takebacker · 2013-04-02, 04:33 PM

Locked Wrote: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)

Zelkova · 2013-04-02, 04:39 PM

Takebacker Wrote: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

?>

Dusk · 2013-04-02, 05:26 PM

Locked Wrote: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.

Takebacker · 2013-04-02, 07:06 PM

Zelkova Wrote:<?php

?>

Ohhhh i see i was seeing this

Code:
<!--[if lte IE 6]>

<link href="path here" rel="stylesheet" type="text/css" />

<![endif]-->

<!--[if IE 7]>

<link href="path here" rel="stylesheet" type="text/css" />

<![endif]-->

and got confused. Sorry.

icephoenix21 · 2013-04-02, 07:45 PM

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

Login
Username:
Password:	Lost Password?
	Remember me