4 replies [Last post]
Someone New
Offline
newbie
Last seen: 15 years 9 weeks ago
Joined: 2007-08-13
Posts: 7
Points: 0

http://www.freewebs.com/elitezenith/CSS%20Template/index.html

That is driving me mad. I figured how to make it work so it would use percentages, but percentages only work if the position is fixed and if position is fixed then the columns and the whole site is messed up. Please someone help me before I would have to take some mental institute. I think CSS has to be re-done but this is my very first attempt at a CSS site and I require some help from you guys. Please help.

http://www.freewebs.com/elitezenith/CSS%20Template/scripts/layout.css - My CSS

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Too many problems for me to

Too many problems for me to bother describing them all, so I just rewrote the CSS instead:

body { background-color: #222222; margin-top: 0; margin-bottom: 0; margin-left: 5%; margin-right: 5%; } a { text-decoration: none; color: #FF0033; } a:visited { color: #99CC00;; } a:hover { color: #009900; } a:active { color: #33CCFF; }

blockquote {
background-color: #777777;
border-color: #000000;
border-style: dashed;
border-width: thin;
font-family: monospace;
font-size: 14px;
font-variant: normal;
text-align: left:

}

h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
margin-top: 0;
}
.Header {
background-color: #444444;
border-color: #111111;
border-style: solid;
border-width: thin;
}
.ContentBox {
background-color: #444444;
border-color: #111111;
border-style: solid;
border-width: thin;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.NavigationEnclosure {
background-color: #333333;
width: 25%;
float: left;
}
.Navigation {
background-color: #666666;
}
.Advertisement {
background-color: #555555;
margin-top: 2px;
}
.Content {
background-color: #999999;
border-color: #000000;
border-style: dotted;
border-width: thin;
float: right;
width: 74.5%;
}
.Footer {
clear: both;
background-color: #444444;
border-color: #111111;
border-style: solid;
border-width: thin;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Someone New
Offline
newbie
Last seen: 15 years 9 weeks ago
Joined: 2007-08-13
Posts: 7
Points: 0

Some more questions.

That was great. Thank you very much. I fixed some other things I wanted with my site. Thanks very much.

How do I make the Content Box as wide as the header and the footer?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Someone New wrote:How do I

Someone New wrote:
How do I make the Content Box as wide as the header and the footer?

Either give them all the same width or give whatever element contains them all a width and they'll automatically take up that space (with border, margin and padding deducted).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Someone New
Offline
newbie
Last seen: 15 years 9 weeks ago
Joined: 2007-08-13
Posts: 7
Points: 0

Thank you so much

I figured it out. All I did was put...

max-width: 1024px;
margin-left: auto;
margin-right: auto;

... in header and footer as well Smile

Thank you so much Laughing out loud