PDA

View Full Version : html help please



syun_ukiya
09-05-2010, 06:29 PM
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

Rantz
09-05-2010, 09:00 PM
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.

syun_ukiya
09-06-2010, 07:35 PM
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

o_O
09-07-2010, 07:28 AM
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 &lt;div&gt; elements instead of &lt;table&gt; ones. If you can't be bothered reading why, then click <a href="#lol">here</a> 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:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page&lt;/title&gt;
&lt;style type="text/css"&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="container"&gt;
&lt;div id="header"&gt;Header&lt;/div&gt;
&lt;div id="menu"&gt;Menu/navigation&lt;/div&gt;
&lt;div id="body"&gt;Body&lt;/div&gt;
&lt;div id="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Which produces something very similar to this:

<table cellpadding="0" cellspacing="0" style="margin: 0 auto; border: 1px solid yellow; width: 600px; font: 10px Verdana;"><tr><td colspan="100%" valign="top" style="border: 2px solid blue; background: #aaaadd; width: 100%; height: 40px;">Header</td></tr><tr><td valign="top" style="border: 2px solid red; background: #ddaaaa; width: 150px; height: 200px;">Menu/navigation</td><td valign="top" style="border: 2px solid green; background: #aaddaa; width: 450px;">Body</td></tr><tr><td colspan="100%" valign="top" style="border: 2px solid aqua; background: #aadddd; width: 100%; height: 40px;">Footer</td></tr></table>

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:



<!-- 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>




<a name="lol">If</a> 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 &lt;table&gt; 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:

<table height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" width="70%" style="margin: 0pt auto;">

syun_ukiya
09-07-2010, 01:03 PM
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?

syun_ukiya
09-07-2010, 01:09 PM
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