Jump to content

[SOLVED] Alinging tables and side border designs. (Simple Q for you guys!)

Solarpitch

By Solarpitch
in HTML Help

Recommended Posts

Solarpitch Advanced Member

Solarpitch

Posted
Posted
Hi Guys,

I just feel so fed up! What should be a simple part of web development is causing me so much hassle and its probably so easy for you lot :(

Could someone please just help me with this and I can put it to rest. Basically what I am trying to achieve is have a web page that is centered in a browser. Now that part I can do fine . . ie align = "center". The problem comes when I try and add the 2 sides designs to the page. The table keeps resizing and messing up. I have an example as follows:

[url=http://xs.to][img]http://xs411.xs.to/xs411/07016/example001.gif[/img][/url]

Page Code:

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #666666;
}
-->
</style></head>

<body>
<table width="694" border="0" align="center" cellspacing="0" cellpadding="0">
  <tr>
    <td width="77" height="278" align="left" valign="middle" style="background-image: url('file:///C|/websdesigns/left_bar.jpg'); background-repeat: repeat-y">&nbsp;</td>
    <td width="544" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="73" align="right" valign="middle"  style="background-image: url('file:///C|/webs/designs/right_bar.jpg'); background-repeat: repeat-y">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>[/code]


As you can see the side images are fine there but when I start to nest tables within the main tables it puts it all arse ways and its driving me mad. Just want to get this out of the way so I can move on with development! :L

Can anyone show me the best techinque/ practice in achieving this, thanks.
ToonMariner Advanced Member

ToonMariner

Posted
Posted
Going radical here but I love the idea of leaving all teh styling to teh style sheet. Now one techniquire you could use is to give both the html AND the body a back ground that way you don't need any extra html to put these borders on!!!!!

I did this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--

html {
background: #fff url(left.jpg) repeat-y left;
padding: 0;
width: 100%;
height: 100%
}

body {
background: transparent url(right.jpg) repeat-y right;
height: 100%;
margin: 0;
}

div#header ,
div#wrapper ,
div#footer
{
margin: 0 100px;
border: 1px solid #333;
}

-->
</style></head>

<body>
<div id="header">
<h1>Logo</h1>
</div>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">

</div>
</div>
<div id="footer">
</div>
</body>
</html>

obviously you need to make the two images for the left and right - id did these quikc from your original post. Enjoy.

[attachment deleted by admin]

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.