[SOLVED] solved Css Issue, not aligning (at all)

Ninjakreborn · December 6, 2006

this
[code]
/*
Joyel Puryear / Master Configuration System
The Freelance Businessman
http://www.freelancebusinessman.com
Copyright Joyel Puryear 2006
©Master Framework
Global CSS file, used with the master framework
*/

#frontend {
background-color: #000000;
color: #000000;
text-align: center;
width: 100%;
height: 100%;
margin-top: 0;
}

#frontendwrap {
padding-top: 25px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
color: #000000;
width: 700px;
height:700px;
margin-top: 0;
}

#frontendheader {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100px;
background-color: #9b9292;
color: #bdbcbb;
}

#frontendheader h1 {
float: left;
margin-top: 50px;
margin-left: 5px;
}

#frontendheader ul {
list-style: none;
margin-left: 0;
padding-left: 0;
float: right;
}

#frontendheader li {
display: inline;
}

#frontendheader a:link {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
}

#frontendheader a:visited {
color: #FFFFFF;
}

#frontendheader a:hover {
color: #FFFFFF;
}

#frontendbodycontent {
width: 700px;
height: 500px;
margin-left: auto;
margin-right: auto;
}

#frontendleftcol {
background-color: #acb4b5;
width: 320px;
height: 400px;
}

#frontendrightcol {
background-color: #e3ebea;
width: 140px;
height: 400px;
}
[/code]
and this

[code]<?php require_once("./master/config/config.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once($docroot . "/master/includes/meta.inc.php"); ?>
</head>
<body id="frontend">
<div id="frontendwrap">
<div id="frontendheader">
<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li> </li>
<li><a href="postsecret.php" title="Post Secret">Post Secret</a></li>
<li> </li>
<li><a href="about.php" title="About">About</a></li>
</ul>
<h1></h1>
</div>
<div id="frontendbodycontent">
<div id="frontendleftcol">
<h1>Display Information</h1>
<p>Here is some content</p>
</div>
<div id="frontendrightcol">
<p>Here is somemore content for the right side.</p>
</div>
</div>
</div>
</body>
</html>
[/code]

Give me this

It's suppose to be the same all the way down.
You see hte header is centered.
Then directly (and evenly) below the header should be the left column, right colum. With some spacing on the left and right, and in between each element, liek the head is. There should be a little space in between the header and the otehr 2 elemtns, but when I try to throw a float:left on the leftcol, and rightcol, the leftcol flys over to the right, and the right col goes funny.

Any advice on what might be causing this?

wildteen88 · December 6, 2006

The problem is to do with the header. I removed the floats from the header elements completely as it was not needed. I also removed alot of the margins/padding you had too. This fixed the problem you where having.

I also added a 20 picels of bottom margin to header it self so you get a 20px gap bettwen the header and two floated cols.

The CSS:
[code]/*
Joyel Puryear / Master Configuration System
The Freelance Businessman
http://www.freelancebusinessman.com
Copyright Joyel Puryear 2006
©Master Framework
Global CSS file, used with the master framework
*/

#frontend {
background-color: #000000;
color: #000000;
text-align: center;
width: 100%;
height: 100%;
margin-top: 0;
}

#frontendwrap {
padding-top: 25px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
color: #000000;
width: 700px;
height:700px;
margin-top: 0;
}

#frontendheader {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100px;
background-color: #9b9292;
color: #bdbcbb;
margin-bottom: 20px;
}

#frontendheader h1 {
margin: 0 0 0 5px;
padding-top: 10px;
text-align: left;
}

#frontendheader ul {
list-style: none;
margin: 0;
padding: 5px 10px 10px 0;
text-align: right;
}

#frontendheader li {
display: inline;
}

#frontendheader a:link {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
}

#frontendheader a:visited {
color: #FFFFFF;
}

#frontendheader a:hover {
color: #FFFFFF;
}

#frontendbodycontent {
width: 700px;
height: 500px;
margin-left: auto;
margin-right: auto;
}

#frontendleftcol {
background-color: #acb4b5;
width: 320px;
height: 400px;
float: left;
}

#frontendrightcol {
background-color: #e3ebea;
width: 140px;
height: 400px;
float: right;
}[/code]

Ninjakreborn · December 6, 2006

Thanks wildteen.
This will fix a majority of my issues, from here I can shape it into the proper layout, it got me past a major problem, and fixed up a few more I was going to encounter.

Thanks again.

Ninjakreborn · December 7, 2006

Ok, I ran into another problem, here is the CSS

[code]/*
Joyel Puryear / Master Configuration System
The Freelance Businessman
http://www.freelancebusinessman.com
Copyright Joyel Puryear 2006
©Master Framework
Global CSS file, used with the master framework
*/

#frontend {
background-color: #000000;
color: #000000;
text-align: center;
width: 100%;
height: 100%;
margin-top: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#frontendwrap {
padding-top: 25px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
color: #000000;
width: 700px;
height:700px;
margin-top: 0;
}

#frontendheader {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100px;
background-color: #9b9292;
color: #bdbcbb;
margin-bottom: 20px;
}

#frontendheader h1 {
margin: 0 0 0 5px;
padding-top: 10px;
text-align: left;
}

#frontendheader ul {
list-style: none;
margin: 0;
padding: 5px 10px 10px 0;
text-align: right;
}

#frontendheader li {
display: inline;
}

#frontendheader a:link {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
}

#frontendheader a:visited {
color: #FFFFFF;
}

#frontendheader a:hover {
color: #FFFFFF;
}

#frontendbodycontent {
width: 700px;
height: 500px;
margin-left: auto;
margin-right: auto;
}

#frontendleftcol {
background-color: #acb4b5;
width: 400px;
height: 560px;
float: left;
margin-left:50px;
}

#frontendrightcol {
background-color: #e3ebea;
width: 184px;
height: 560px;
margin-left:15px;
float: left;
}[/code]

Firefox - perfect
Internet Explorer - left aligned instead of centered aligned

If someone can help me now find out what's causing this, I would appreciate it.

Ninjakreborn · December 7, 2006

anybody have any advice on this new problem?

wildteen88 · December 7, 2006

Have you sorted the problem as looking at the site displays fine in IE(7). Or perhaps this is an IE6 issue.

Ninjakreborn · December 7, 2006

yes, firefox is perfect too, and
I just checked opera, it's perfect there too
but in ie
let me double check
in Ie version 6 (which is what he is using)
it shows the 2 content boxes (only) both floated left, the same spacing in between the left and right column, and hte same spacing between the header and the 2 boxes, but they are aligned to the right in ie instead of the center, like the other browsers.

Ninjakreborn · December 7, 2006

anybody?

Sign In

[SOLVED] solved Css Issue, not aligning (at all)

Recommended Posts

Ninjakreborn

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information