Menu
Community /Pin to ProfileBookmark
@NogDogJan 11.2006 — #I played around with it and came up with the following CSS file. The only change you need to make to the html is to wrap all the content in a <div id="container>...(content)...</div> set of tags. By use of margins and floats, I was able to get rid of all the absolute positioning, which allows the page to adjust better to font resizes by the user.
CSS:
centering an absolutely positioned site?
Hi! I’m still a newbie to the whole CSS thing, so bear with me please.
[URL=http://www.team847.com/]This site
I know it is hard to center things in CSS, but how do I center the site I made?
Just FYI, I use a strict html 4.01 doctype and my pages validate (except the photo gallery, I’ll be working on that later).
Thanks alot!
=edit=
oh, and if anyone has suggestions as to the color scheme, let me know!
thanks again
Sign in
to post a comment7 Comments(s) ↴
0
@NogDogJan 11.2006 — #I played around with it and came up with the following CSS file. The only change you need to make to the html is to wrap all the content in a <div id="container>...(content)...</div> set of tags. By use of margins and floats, I was able to get rid of all the absolute positioning, which allows the page to adjust better to font resizes by the user.CSS:
<i>
</i>html, body {
background-color: #636163;
color: #ffc308;
font-family: veranda, arial, sans-serif;
font-size: 10pt;
height: 100%;
text-align: left;
width: 100%;
}
* {
border: 0;
margin: 0;
padding: 0;
}
#container {
width: 704px;
margin: 10px auto;
padding: 0;
}
#banner {
border: 2px #ffc308 solid;
color: #ff0000;
height: 100px;
left: 10px;
width: 700px;
background-color:#000000;
}
#banner .banner_img {
width:700px;
height:100px;
}
#navigation {
background-color: #000000;
color:#ffc308;
border: 2px #ffc308 solid;
text-align: center;
margin: 10px 0;
padding: 3px;
}
#navigation li {
display: inline;
list-style-type: none;
margin: 0 5px
}
#navigation A:link, #navigation A:visited {
background-color: #000000;
color: #ff9900;
font-size: 10pt;
text-decoration: none
}
#navigation A:hover, #navigation A:active {
background-color: #000000;
color: #ef7518;
font-size: 10pt;
text-decoration: none
}
#main {
background-color: #000000;
border: 2px #ffc308 solid;
color:#ffc308;
height: auto;
left: 10px;
padding: 3px 5px 3px 5px;
float: left;
width: 575px;
}
#main h3 {
background-color: #ffc308;
color: #000000;
font-size: 10pt;
font-weight: bold;
margin-bottom: 0;
padding-left: 10px;
}
/* --- all paragraphs except bottom --- */
#main .article1 {
background-color: #333333;
color: #ffc308;
height: auto;
margin-bottom: 15px;
margin-top: 0;
padding: 3px 5px;
text-align: left
}
/* --- bottom or single paragraph only --- */
#main .article2 {
background-color: #333333;
color: #ffc308;
height: auto;
margin-top: 0;
padding: 3px 5px;
text-align: left
}
#main .article1 A:link, #main .article1 A:visited {
background-color: #333333;
color: #FF9900;
font-size: 10pt;
text-decoration: none
}
#main .article1 A:hover, #main .article1 A:active {
background-color: #333333;
color: #ef7518;
font-size: 10pt;
text-decoration: none
}
#main .article2 A:link, #main .article2 A:visited {
background-color: #333333;
color: #FF9900;
font-size: 10pt;
text-decoration: none
}
#main .article2 A:hover, #main .article2 A:active {
background-color: #333333;
color: #ef7518;
font-size: 10pt;
text-decoration: none
}
#subnav {
background-color: transparent;
border: 0;
height: auto;
width: 104px;
float: right;
}
#subnav h3 {
font-size: 10pt;
font-weight: bold;
margin-left: 5px
}
#subnav .subnav1 {
background-color: #454545;
color:#ffc308;
border: 2px #ffc308 solid;
height: auto;
margin-bottom: 10px;
text-align: left;
}
#subnav .subnav1 A:link, #subnav .subnav1 A:visited {
background-color: #454545;
color: #FF9900;
font-size: 10pt;
text-decoration: none
}
#subnav .subnav1 A:hover, #subnav .subnav1 A:active {
background-color: #454545;
color: #ef7518;
font-size: 10pt;
text-decoration: none
}
#subnav .subnav1 ul {
padding: 5px 5px 3px 5px
}
#subnav .subnav1 li {
list-style-type: none;
margin-bottom: 5px
}
/*--- alignment ---*/
#main .left {
float:left;
border:0;
margin-right:5px;
background-color:#000000;
color:#FFCC00;
}
#main .right {
float:right;
border:0;
margin-left:5px;
background-color:#000000;
color:#ffc308;
}