Jump to content

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

Ninjakreborn

By Ninjakreborn
in CSS Help

 Share

Recommended Posts

Ninjakreborn Prolific Member

Ninjakreborn

Posted
Posted
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>&nbsp;</li>
<li><a href="postsecret.php" title="Post Secret">Post Secret</a></li>
<li>&nbsp;</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?
Link to comment
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted
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
&copy;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]
Link to comment
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted
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
&copy;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.
Link to comment
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted
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.
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.