PDA

View Full Version : A Test Template!


Master Austin
11-23-2002, 01:07 AM
I finsihed my layout about 5 minutes ago.

http://austinjg.tripod.com/test.html

For some reason the banner is off about 1 pxl from the right. I'll fix that later.

HZR
11-23-2002, 05:08 AM
Some quick things:
1. your links, you use a middot, why not use a list instead?
2. It's built for your resoulution

saw more too that have to be fixed, but I don't have time to post them right now, maybe later.

Master Austin
11-23-2002, 05:35 AM
How can I fix the resolution? And how do I make a list?

ByteWizard
11-23-2002, 05:51 AM
How can I fix the resolution? And how do I make a list?

The Wizard Answer (http://www.htmlib.demon.co.uk/hlbsetup.exe)

DCElliott
11-23-2002, 08:15 AM
In your banner table, make the table full width, and make the TDs and image with %ages that add up to 100%. That way you get full, flexible coverage. In fact. Instead of having 3 banner images, make a 1px wide slice and make it a background and it will tile horizontally. Low bandwidth and fully elastic.

Regarding the list, try:

<ul style="list-style-type:square; margin:0">
<li><a href="whatever1">list item one</a></li>
<li><a href="whatever2">list item two</a></li>
<li><a href="whatever3">list item three</a></li>
</ul>
or play around with this bit of code with embedded styles:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
body {font:normal normal 1em/1.1em verdana,
tahoma, helvetica, arial, sans-serif;
color:darkslateblue;}
a:link {color:darkslateblue; font-weight:bold;}
a:hover, a:active
{background:limegreen;color:yellow;}
div.menu ul {list-style-type:square;
direction:rtl;
margin:0 20px 0 0;font-size:10px; line-
height:10px;}
div.menu li {font-size:10px; line-height:10px;}
div.menu a {text-decoration:none; color:inherit;}
div.menuwrapper {width:120px;border: 1px solid
black; border-top:thick double
black;background:limegreen;font:small-caps bold
10pt inherit; text-align:center;}
div.menu {border-top:thick double
black;background: palegreen;padding:2px;text-
align:right;}
-->
</style>
<title>Untitled</title>
</head>

<body>
<div class="menuwrapper ">
Main Menu
<div class="menu">
<ul>
<li><a href="whatever1">list item one</a></li>
<li><a href="whatever2">list item two</a></li>
<li><a href="whatever3">list item three</a></li>
</ul>
</div>
</div>
</body>
</html>Play with the list-style-type (it can even be an image) and look at it with and without direction:rtl. Notice how div class=menu gives the context for the menu. a list created outside the menu div would behave in a conventional fashion.

Master Austin
11-24-2002, 04:48 PM
This is a little weird but I learned a few things from the script you just made.

Thanks.

DCElliott
11-24-2002, 05:51 PM
The important point I was trying to make was that you can make a graphic -appearing site without using any graphics at all. Sometimes you just have to intelligently use the tools that are at our disposal.
I use a lot of CSS because, if I plan it right, it does the work for me. I figure out the functions of different parts of the page, and how those parts should look or be oriented or interact with the user. I then make things like the "wrapper" div that will be used not only to situate the content but also determine the appearance of the tags within the div. You have to be really methodical about it but the payoff is great. While some folks play with 20 nested tables doing stuff, I create a stylesheet that does layout, menus, buttons (with mouseovers) all without a single graphic, spacer gifs. The page code is then really simple and easy to read - it is mostly content rather than presentation. Normally all the <style> stuff would be in another file.

I'd urge you to learn a fair bit of CSS before getting into a lot of the server-side technologies - they can be incredibly enhanced when coupled with CSS. Keep at it and we will make you one stylin' dude.http://206.47.27.187/phpBB2/images/smiles/icon_cool.gif

Master Austin
11-25-2002, 02:35 AM
Well, I know ssi. No problem with that. I know a little bit about php. And after reading all of those scripts you just made I know alot more about css than the other two.

Right now I'm working on a new template. The one above was to get my html skill back since I just started coding again and forgot most of the old html I use to know.

The next one should look alot nicer with a light, dark, and smooth look.

That script you just made might come in handy somtimes. I rather make my graphics than make fake ones. But who knows what I'll need em for.:D