Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Center entire web site

Status
Not open for further replies.
redletterrocko

redletterrocko

Programmer
Aug 8, 2005
53
US
I'm creating a web site right now with what I've referred to as "soft edges," meaning, there can be margin room without destroying the graphics and such (hard lines showing the end of the graphic, etc). This is something I've never done before. The page itself has been designed for 1024x768, and I was wondering how I would center the entire page so that if someone with a 1280x1024 resolution were to view it, it wouldn't be stuck over on the left end. I've tried a <div> statement before the rest of the page, but it doesn't seem to work. Any ideas?
 
Sort by date Sort by votes
Would putting the entire page in a table work for you? I've done that before.
Code: 
<body>
<table width="100%">
<tr>
<td width="100%" align="center">
    <!---  Put your code in here --->
</td>
</tr
</body>
 
Upvote 0 Downvote
How do I work with the <div> tags so that it will look at my html. Currently, they ignore the table or outside <div> tag (which I had tried on my own) and then the header and footer and main body of the text all overlap. Currently, this is what my template page looks like:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lan="en">

<head>

        <title>Miles 4 Smiles Children's Cancer Foundation</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="header">
        <div style="position:absolute;top:10px;left:10px;border-style:none;">
        <a href="home.html">Home</a> |
        <a href="whoweare.html">Who We Are</a> |
        <a href="donate.html">Donate</a> |
        <a href="research.html">Research</a> |
        <a href="volunteer.html">Volunteer</a> |
        <a href="news.html">News and Events</a> |
        <a href="facts.html"></a> |
        <a href="sitemap.html">Site Map</a>
        </div>
</div>

<div style="position:absolute;top:60px;left:60px;border-style:none;">

</div>

<div id="footer">
        <div align="center">
        Footer
        </div>
</div>

</body>
</html>

Code: 
body {

        background:#fff;
        background-image:url(img/main.02.jpg);
        background-repeat:repeat-y;
        background-position:0px 0px;

        font-family:verdana;
        font-size:small;
        font-variant:small-caps;

        margin:0px;
        padding:0px 0px;

}

#header {

        position:absolute;
        height:75px;
        border:0px;
        background-image:url(img/main.01.jpg);
        background-repeat:no-repeat;
}

#footer {

        position:absolute;
        height:50px;
        border:0px;
        background-image:url(img/main.03.jpg);
        background-repeat:no-repeat;
}

h1 {

        font-family:verdana;
        font-size:large;
        font-variant:small-caps;
        font-stretch:wider;
        font-weight:bold;

}

ul {

        list-style-type:circle;

}

ol {

        list-style-type:lower-roman;

}
 
Upvote 0 Downvote
First question: Do you want the page centered just horizontally or vertically as well? If it is the first, the answer is simple. If the second, it is quite a pain and frankly, I don't think it is worth the effort. I am as impressed with a page that starts on top as I am with a page that is in the center.

Other than that, your request will be difficult to fulfill with absolute positioning, but then again, I see absolutely no reason for using absolute positioning in the first place. I think your first objective should be to get rid of that.

Lastly, why are you using xhtml1.1 if your page is not valid xhtml1.1?
 
Upvote 0 Downvote
Just want it centered to horizontally, with the header at the head and the footer at the foot. Positioning doesn't matter at all, but I've found defining it is better than not, and I just default to absolute over fixed.

The doctype thing is something I learned about in school, never had used before I learned about it, and don't completely understand. Usually, I use Transitional 1.0, but thought I would try my hand at 1.1 and see if I could touch up my code writing techniques and methodologies. I might end up stepping it back anyway. What makes it not valid xhtml 1.1?
 
Upvote 0 Downvote
If you want to horizontally position your page in the center, add [tt]margin: 0 auto;[/tt] to every element you need centered. And for this to work, the element must not be positioned absolutely, but as I said, you should avoid that in the first place.

After you put a doctype in run your page through a validator to check if it adheres to the rules specified in that doctype. You're using xhtml 1.1 which is the most severe one. Validator can be found here:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
422
spamjim
spamjim
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
100
pendle666
pendle666
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
77
tyutghf
tyutghf
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
143
ChrisHirst
ChrisHirst
Carlvic
  • Locked
  • Question
Web Development Tools, Plugins &amp; Etc Suggestions 1
Replies
4
Views
94
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top