/    Sign up×
Community /Pin to ProfileBookmark

center layout

Copy linkTweet thisAlerts:
Sep 20.2006

This is my layout [url]http://ruriko.awardspace.com/[/url]
How do I make my layout centered horizontally?

[CODE]/* CSS Document */

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
background-position: 130px;
background-color: #9CCFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00349C;
}
.style1 {
font-size: 12px;
font-weight: bold;
}
#layout {
position:absolute;
width:200px;
height:491px;
z-index:1;
left: 130px;
top: 0px;
}

#content {
position:absolute;
width:473px;
z-index:1;
left: 229px;
padding: 10px;
top: 366px;
}
#nav {
position:absolute;
width:169px;
height:0;
z-index:1;
left: 150px;
top: 0px;
padding: 10px;
}
#credit {
position:absolute;
width:167px;
left: 151px;
bottom: 0px;
padding: 10px;
z-index: 2;
}
a:link {
color: #00349C;
text-decoration: none;
}
a:visited {
color: #00349C;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #00349C;
text-decoration: none;
}
[/CODE]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@XeelSep 20.2006 — Try to use margin attribute in the external div. Also sometimes the only way to do it is to calculate work screen size with javascript using onload attribute of body, and then manually change the upper margin size (also with JS). But it's for very special cases, like when you have your webpage vertical size fixed for ex.

Also, just as a note, your website is very far from XHTML 1.0 Transitional, it has tons of errors (depricated attributes, unclosed tugs, wrong tag parentage, etc). I'd recommend consulting W3C and ohter resources for more info on the markup gramma:

[URL=http://www.topxml.com/xhtml/xhtml_tag_h1_h6.asp]TopXML : The - Tags (XHTML Reference)[/URL]

[URL=http://www.w3schools.com/tags/default.asp]W3Schools - HTML 4.01 / XHTML 1.0 Reference[/URL]

[URL=http://openlab.ring.gr.jp/k16/htmllint/tagslist.cgi?HTMLVersion=XHTML1-Transitional]XHTML1.0 Transitional Tags List[/URL]

Tables and relative position rule. ?
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — Alter your coding to be like this:
<i>
</i>body {text-align: center; background-color: #9CCFFF;}
#wrapper {
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
background-position: 130px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00349C;
margin: auto;
padding: 0;
width: ###px; /* place your preferred width here
text-align: left;
}
×

Success!

Help @Ruriko spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...