attached is a sample website, but i want to make it center, ive tried everything but it does not work, any ideas?
thanks in advance
Printable View
attached is a sample website, but i want to make it center, ive tried everything but it does not work, any ideas?
thanks in advance
This is a very outdated table-based layout, and a pretty messily coded one at that. First and foremost, I would urge you not to use this at all but to find another sample layout - one that is based on correctly used HTML (or XHTML) and CSS. This is damn near impossible to work with in the long run.
If you're still dead set on using this layout, I did manage to center it with some trouble. It's an ugly solution, but that's to be expected when manipulating a layout like this. It still needs some adjustments, but it's too time demanding to fix every detail.
I still say you should scrap this and get a good sample layout instead. If not - hope this helps.
thanks for taking the time to try it, yeah i think its a bit messy to center.. hmm what if i'll just increase the width of the left windows the one with the news and contact and just increase the picture sizes, will that be workable? i tried changing the widths but i cant seem to increase the left side
I think what Rantz is saying is that if you use this website as a cornerstone for your web-development knowledge, you're going to have a very poor set of skills. And he's right; you should be investigating table-less layouts, which often use <div> elements instead of <table> ones. If you can't be bothered reading why, then click here to skip to the answer to your question. :p
This is one of the the most basic of table-less layouts, which can be expanded upon pretty easily:
Which produces something very similar to this:PHP Code:<html>
<head>
<title>Page</title>
<style type="text/css">
body {
font: 10px Verdana;
}
#container {
margin: 0 auto;
width: 608px;
border: 1px solid yellow;
}
#header {
height: 40px;
border: 2px solid blue;
background: #AAAADD;
}
#menu {
height: 200px;
width: 150px;
border: 2px solid red;
background: #DDAAAA;
float: left;
}
#body {
height: 200px;
width: 450px;
border: 2px solid green;
background: #AADDAA;
float: right;
}
#footer {
height: 40px;
border: 2px solid aqua;
background: #AADDDD;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu/navigation</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Header Menu/navigation Body Footer
Using a table-less layout takes much of the structural information in tables and puts it in the CSS. As a result, here's the difference in the structural code for the actual HTML of your page. As you can see, the divs are a lot neater and easier to understand and code:
PHP Code:<!-- note that these two bits of code accomplish exactly the same thing in this context -->
<!-- table-less layout -->
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu/navigation</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<!-- using tables -->
<table cellpadding="0" cellspacing="0" id="container">
<tr>
<td colspan="100%" valign="top" id="header">Header</td>
</tr>
<tr>
<td valign="top" id="menu">Menu/navigation</td>
<td valign="top" id="body">Body</td>
</tr>
<tr>
<td colspan="100%" valign="top" id="footer">Footer</td>
</tr>
</table>
If you still absolutely must keep playing with this layout and still want to centre it, there are two things you need to do in the first <table> tag:
1. Change the width attribute to something less than 100%. Whichever width looks the nicest to you.
2. Insert a style attribute defining the margin. The tag should wind up similar to this:
PHP Code:<table height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" width="70%" style="margin: 0pt auto;">
this is what i did, centering should be okay but will it possible to extend the stripes background to the left and the right side?
i have tried the right, this should be okay but i hope i can get the background on the left im not sure how or is there a solution for it