/    Sign up×
Community /Pin to ProfileBookmark

need help with tables

Copy linkTweet thisAlerts:
Oct 14.2005

im creating my first template for my upcoming website. im a bit stuck iv got a basic template set up i dont need the nav bar to be expandable or the affilates bar to be either but i want the main contents area to be expandabel but im strugling to do this without messing up the whole design if any 1 could give me a few pointers or could do it for me it would realy help thank you in addvance

[url]http://www.safeasfcuk.initro.net/[/url] is the first version i now have a psd with the affilates box under the main nav. any 1 pls

i can supply the psd file if any 1 needs it im realy suck here guys im ok at photoshop but not html lol

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@rincewind456Oct 14.2005 — A couple of points.

First: Why a transitional doctype, your not transitioning from one type to another are you?.

Second: you need to optimise the header2.jpeg, a quick run through PSP 9.0 reduced it to 39kb.

Third: Why tables, you have no tabular data!

Fourth: Your navigation isn't very accessible as images it really ought to be a list.

Anyway all that said this will do what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

body{background-color: #0099CC;color:#000;}

#main{margin:auto; padding:0;width:800px; }

#header{margin:auto; width:800px;}

#nav{float:left;width:180px;padding:0;}

#content{width:615px;float:right;background-color:#0099CC;}

</style>

<meta name="Generator" content="TextPad 4.7">

<meta name="Author" content="Rincewind">

<meta name="Keywords" content="?">

<meta name="Description" content="?">

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

</head>

<body>

<div id="main">

<div id ="header">

<img src="images/header2.jpg" alt="Image">

</div>

<div id="nav">

<!--This really should be changed to a list such as

<ul>

<li>Navigation</li>

<li><a href="http://?">Home</a></li>

<li><a href="http://?">Where to Stay</a></li>

<li><a href="http://?"></a>Beaches</li>

<li><a href="http://?"></a>Villages</li>

<li><a href="http://?">Activities</a></li>

<li><a href="http://?"></a>Maps</li>

<li><a href="http://?">Forum</a></li>

<li><a href="http://?">Advertise</a></li>

<li><a href="http://?">Link to Us</a></li>

<li><a href="http://?">Contact us</a></li>

</ul>

You could then change how it looks with css-->

<table border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/nav_01.gif" width="178" height="23" /></td>

</tr>

<tr>

<td><img src="images/nav_03.gif" width="178" height="25" /></td>
</tr>

<tr>

<td><img src="images/nav_04.gif" width="178" height="25" /></td>

</tr>

<tr>

<td><img src="images/nav_05.gif" width="178" height="25" /></td>

</tr>

<tr>

<td><img src="images/nav_06.gif" width="178" height="25" /></td>
</tr>

<tr>

<td><img src="images/nav_07.gif" width="178" height="26" /></td>

</tr>

<tr>

<td><img src="images/nav_08.gif" width="178" height="25" /></td>

</tr>

<tr>

<td><img src="images/nav_09.gif" width="178" height="25" /></td>
</tr>

<tr>

<td><img src="images/nav_10.gif" width="178" height="25" /></td>

</tr>

<tr>

<td><img src="images/nav_11.gif" width="178" height="25" /></td>

</tr>

<tr>

<td width="175"><img src="images/nav_12.gif" width="178" height="25" /></td>
</tr>

</table>

</div><!--End of Nav Div-->

<div id="content">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

</p>

</div><!--End of Content Div-->


</div> <!--End of Main Div-->

</body>

</html>
Copy linkTweet thisAlerts:
@safeasfcukauthorOct 14.2005 — omg thank you so much that is the best reply i could of had! iv taken what you said into consideration and decided to learn css and creat the layout in css. thank you so much for that i see that you used css for the layout. im going to read a few books on css and then use what you showed and then maby il be able to understand it a bit more thank you so much tho!
Copy linkTweet thisAlerts:
@ericShawnSentryOct 15.2005 — That CSS solution is cool, how would you put in a footer?

And is this supported by all browsers?

thanks.
Copy linkTweet thisAlerts:
@rincewind456Oct 15.2005 — That CSS solution is cool, how would you put in a footer?

And is this supported by all browsers?

thanks.[/QUOTE]

There is a footer in one of the pages of the zip file, and it works in all the browsers I have access to, which is IE6, Opera 8.5 and FF1.07

[upl-file uuid=2c9192e0-3e1c-465b-9eda-0f75474094e2 size=4kB]safeasfcuk.zip[/upl-file]
×

Success!

Help @safeasfcuk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...