PDA

View Full Version : HTML layout question

Sparky
04-02-2003, 11:48 AM
Hello! just registered, what wonderfull forums!

I have a question reguarding simple layout/HTML.

I am trying to make an site/page, i have a general idea about the layout - i am just unsure how to go about constructing it. I am aiming for something like this (ignore colours and stuff, just a rough scetch off the layout i am after):-

http://www.awars.com/stuff.png

So, border down LHS with a header that overlaps it.

I know that if i were just too have the border as a background, it would be easy - but i wanted the whole front page too be constructed with %'s, and belive that using a bg image with such a setup causes problems.

So, what would be the easiest way in HTML too construch such a simple layout?
Mhtml
04-02-2003, 12:36 PM
Hello and welcome to the forums! We hope you enjoy your ride and please remember to keep all arms and legs inside the vehicle at all times. :)

Ok down to business, firstly we create the header!

<div class="HeaderDiv" align="center">
<!--- Header Table --->
<table width="80%" cellspacing="0" cellpadding="0">
<tr>
<td><h2>Title.</h2></td>
</tr>
<tr>
<td align="right">
<p><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a></p>
</td>
</tr>
</table>


Now to do the left hand side menu and the content area on the right we can just use a very simple layout.

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10%">
<!--- Menu Cell ---->
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</td>
<td width="90%">
<!--- Content cell ---->
<p>Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text</p>
<p>Text Text Text Text Text Text</p>
</td>
</tr>
</table>


Ok now you are probably wanting to know how to get the header over the top of the layout? Well we use CSS (Cascading Style Sheets) to do that!

Simply insert this into your <head></head> area.

<style>
div.HeaderDiv {
position:relative;
down:100px;
}
</style>


Basically we have just told the browser to locate the div with the class "HeaderDiv" down 100 pixels relative to it's current location.

To learn more about CSS have a look at http://www.w3schools.com :thumbsup:
ASAAKI
04-02-2003, 12:47 PM
decided to spoil u coz it's ur first post:D
http://www10.brinkster.com/asaakitesting/eg.html
all done. check the source for the code. it's done entirely using styles.

<edit>
arrrgghhhh...so i see someone made it before me ;)
</edit>
Mhtml
04-02-2003, 12:51 PM
:eek: overlapping of links!
ASAAKI
04-02-2003, 12:54 PM
really??:confused::o
looks fine to me.
cud i have a look-see?
Mhtml
04-02-2003, 12:56 PM
Should have added when the window is not maxamised!
lol No problem when maxamised, at least not on 1024x768. No need for worry ;)
ASAAKI
04-02-2003, 01:23 PM
:confused: ?

it's maximised:
Sparky
04-02-2003, 05:46 PM
Ahhhh, thats great - thanks very much. I was on the verge of posting a reply saying that i was having touble with your idea Mhtml, when ASAAKI's source had come to the rescue.

I had looked into 'layers' to solve the problem, but all the books i had told me that layers were bad and nasty, and that i should be using CSS elements instead. I wasnt aware that you could use CSS for such pure structural tasks (infact, i thought it wasnt even supposed to be used for that!).

Thanks for the help guys.
ASAAKI
04-02-2003, 06:41 PM
Originally posted by Sparky
I wasnt aware that you could use CSS for such pure structural tasks (infact, i thought it wasnt even supposed to be used for that!).

oops! it's quite the contrary. designs/layouts are supposed to be done by CSS. or at least it's highly recommended.
'layers', by the way, only work on netscape.
Sparky
04-02-2003, 10:21 PM
I had always been under the impression (in my limited experience as a web designer) that HTML was too provide the structure and layout off a page, and that the CSS was best used too provide text formatting, colour schemes and stuff like that?
ASAAKI
04-02-2003, 10:56 PM
HTML is for providing the structure and layout of a page, which is done using its elements (div, table, p, etc).
CSS is for styling those elements. which are not limited to text, colors, etc.
using CSS for only typographical/other minor formatting, etc, has been common practice for a while but it's gradually fading. visit http://www.glish.com/css/, and alistapart.com, and you'll get used to it. oh yes, and another good article:
http://www.youngpup.net/?request=/articles/iconologic-and-standards.xml
:thumbsup:
Sparky
04-03-2003, 12:34 AM
Oh my. I have just spent the last 2 hours reading all thoes articles, and in turn the articles and sites they linked too. I think i have about 30 new entries in my favourites list.

I look foward to trying some of the methods they speak off myself on my current project...
Grant Palin
04-03-2003, 02:14 AM
I hope you've got a fair bit of time on your hands because it is a LOT of reading. But very interesting reading. Enjoy!
Sparky
04-03-2003, 05:44 PM
Am I right in thinking that instead off using CSS too seperate structural and layout from style color and presentation, the goal of the people/sites linked too is too use CSS more too seperate content from design?
liorean
04-03-2003, 05:56 PM
The main purpuse of stylesheets is separating presentation from structure and content. Presentation includes elements of both layout and design: colours, fonts, sizing and positioning. It also includes usability and accessibility through a number of differnt interfaces or removeal of non-accessible code from html. Structure also includes elements of layout, though - but only because of deficiencies of the stylesheet languages.