Jump to content

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

Solarpitch

By Solarpitch
in HTML Help

 Share

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.
Link to comment
Share on other sites
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]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.