PDA

View Full Version : Uber noob Question.?


realizment
03-03-2009, 03:01 AM
Hi I'm making my first site and have just inserted a couple of tables and a banner and im about to get my layout so i can create a template for the over all site. My question is how do i keep it all centered or for it to be centered and stretch right across screen left to right? If i could just get it centered for now id be happy. Thanks guys. its currently aligned to the left.

Ps: how would i go about keeping the same page size troughout so the footer always stays at the bottom and the vertical navigatio etc stays the same trough out? Thank you

edbr
03-03-2009, 03:30 AM
do a search onthe forum there is also a stiky that will answer this for you

realizment
03-03-2009, 03:40 AM
ok thanks ill try find it.

realizment
03-03-2009, 04:07 AM
the problem is i dont know what exactly im searching for lol, i cant seem to find it. sorry.

Its a html page if that makes any difference??

edbr
03-03-2009, 04:30 AM
ok no worries. i thought it was in a sticky but its not.
the short answer is do not use tables use css and divs
explanation http://www.dreamweaverclub.com/forum/showthread.php?t=28741
heres a tutorial
http://www.dreamweaverclub.com/css-center-content.php
is an example given which although demonstrates something else it has a centred layout

realizment
03-03-2009, 04:38 AM
great thank you, only one problem ive already used tables and no css i dont know anycode, will i still be able to center this?

edbr
03-03-2009, 05:19 AM
yes but if you are just starting and all you have done is as you say insert a couple of tables its a good time to learn . use my example nd 'play' with it. you could insert tables in the wrapper div but it would not be the best way to go

realizment
03-03-2009, 02:45 PM
lol now im confused. I dont know where to really place that code etc.

d a v e
03-03-2009, 03:36 PM
have a look at these
http://www.htmldog.com
http://www.w3schools.com/
http://www.cssbasics.com
http://www.opera.com/wsc/

realizment
03-03-2009, 07:05 PM
These look like fantastic and easy to navigate sites, which i will definitely follow up on, right now im a little tied for time, so may I ask in the following html code where do i place the "<div class="wrapper"> all page content goes here </div>" and "div.wrapper {
margin-left : 10%;
margin-right : 10%;
}" In order to get my desired result? heres the html from my DW site "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Shadeans Florist</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #F6F;
}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="770"><a href="../index.html"><img src="../Images/Shadeans.jpg" width="766" height="154" alt="banner" /></a></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="center" bgcolor="#FE59D9"><div align="center"><a href="../index.html"><strong>Home</strong></a> || <a href="../Opening hours.html"><strong>Opening Hours</strong></a> || <a href="../Specials.html"><strong>Specials</strong></a> || <a href="../Contact us.html"><strong>Contact Us</strong></a></div></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="20">
<tr>
<td width="164" valign="top" bgcolor="#66CC33"><!-- TemplateBeginEditable name="left NAV" -->
<p>Nav</p>
<!-- TemplateEndEditable --> <p>&nbsp;</p></td>
<td width="526" valign="top" bgcolor="#99FF00"><!-- TemplateBeginEditable name="Content" -->
<p>Content </p>
<!-- TemplateEndEditable -->
<p>&nbsp;</p></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="center" bgcolor="#FE59D9"><p>Shadeans Florist, 1 Belton House, Castle Street, Bray Co.Wicklow, Ireland</p>
<p><strong>T </strong>+ 353 1 2760611 <strong>F </strong>+ 353 1 2760611<strong> <a href="mailto:info@shadeans.ie">Email: info@shadeans.ie</a></strong></p></td>
</tr>
</table>
</body>
</html>"

Thanks guys this will really help me and be much appreciated.

edbr
03-04-2009, 12:53 AM
select from <table> to </table> and insert >layout objects>div tags then use wrap around selection

realizment
03-04-2009, 01:45 AM
this didnt work i highlight from the first <table> to the the last/table and it didnt center it? Thanks for your help man, .

edbr
03-04-2009, 01:52 AM
post your new code. you did add the css to your page or css sheet right?

edbr
03-04-2009, 01:58 AM
here this gives you a 10% margin on the left
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Shadeans Florist</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #F6F;
}
#wrapper{ margin-left:10%;}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div id="wrapper">
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="770"><a href="../index.html"><img src="../Images/Shadeans.jpg" width="766" height="154" alt="banner" /></a></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="center" bgcolor="#FE59D9"><div align="center"><a href="../index.html"><strong>Home</strong></a> || <a href="../Opening hours.html"><strong>Opening Hours</strong></a> || <a href="../Specials.html"><strong>Specials</strong></a> || <a href="../Contact us.html"><strong>Contact Us</strong></a></div></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="20">
<tr>
<td width="164" valign="top" bgcolor="#66CC33"><!-- TemplateBeginEditable name="left NAV" -->
<p>Nav</p>
<!-- TemplateEndEditable --> <p>&nbsp;</p></td>
<td width="526" valign="top" bgcolor="#99FF00"><!-- TemplateBeginEditable name="Content" -->
<p>Content </p>
<!-- TemplateEndEditable -->
<p>&nbsp;</p></td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="center" bgcolor="#FE59D9"><p>Shadeans Florist, 1 Belton House, Castle Street, Bray Co.Wicklow, Ireland</p>
<p><strong>T </strong>+ 353 1 2760611 <strong>F </strong>+ 353 1 2760611<strong> <a href="mailto:info@shadeans.ie">Email: info@shadeans.ie</a></strong></p></td>
</tr>
</table>
</div>
</body>
</html>"

realizment
03-04-2009, 02:13 AM
Great thanks alot this worked fantastic it was still alittle to the left in browser so i made it 12%, is 10 supposed to be dead center? Thanks so much for this. I really exected a simplar way in DW though like just select all and click center or something lol.

realizment
03-04-2009, 02:14 AM
Now, next question lol is there a way to set a lenght to make footer stay same place troughout all pages?