25 replies [Last post]
DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

...I'm going to act like the total n00b that I am and ask questions without following the How to ask questions guidelines.

But I have good reason! (I think anyway)

The problem is I don't know how to ask the question or where to begin. I have manipulated code before but not really done anything from scrath so I'm more than green at this CSS thing.

My problem is this and I think you guys will probably know immediately...

http://cave76.org

I need to get that right hand menu in place and it's wandering to the right on me. The PHP theme.tpl file refers to the CSS for layout and this is the code for both the TPL and the CSS:

Theme.tpl wrote:
<DIV id=rightcontent>
<DIV class=box1>
<DIV class=title>Main Menu</DIV>
<DIV class=content>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><BR><a href="http://www.cave76.org">Home</a><BR><a href="http://www.cave76.org/forums">Forums</a><BR><a href="http://www.cave76.org">Photo Album</a>
</TD>
</TR>
</TBODY>
</TABLE>

style.css wrote:
#rightcontent {RIGHT: 0px; BACKGROUND: #DEB887; WIDTH: 250px; POSITION: absolute; TOP: 0px}

So as far as I can tell it's doing everything ok code wise. Menu is 250px wide, it's at the far right and top of the page, color is perfect. Why the off the page thingy?

Any help is appreciated and if and when my site is completed I'd love to link back to you guys as being a source of mine.

- DaBrode

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm very sorry to do this to you all but...

Hi DaBrode,

The first thing your going to have to do is to fix up the errors in the markup of your page, you have some fundamental flaws such as closing out you <head> section before it's content has finished missing body tags and missing closing div tags.

There is not much point dealing with the layout until those are fixed.
If you aren't already, get a copy of Firefox along with the html-tidy plugin and do your checking in that browser, html-tidy will catch markup errors such as you have.

The layout you have at the moment is not really correct use of CSS positioning, you don't want to be using any position absolute at this stage and you do not want to trying to position by shifting a relative positioned element from it's rendered flow point.

Likewise on a layout this simple please don't use tables there's no reason and loose all the <br> tags you should not use these for positioning , that's what margins and padding are for.

The reason the layout looks odd is that you are shifting a box to the right off the screen but it's space is still preserved on the left. The layout should really follow along the lines of a overall container div default position property, margin auto left and right to center it on page, everything else will nest within this structure, but you do not need to use absolute or top/left on position relative. The menu you will likely float to the right so it may be a good idea to read up on the use of floats.

It may also be a good idea to just Google around for some good two column layouts that you can study and use to give you a better idea of how to layout this sort of page.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Wow...great info Hugo and thanks for being kind enough to reply.

So I should come to grips with the fact that my site is a coding nightmare? hehe.

Well...I don't doubt it. I'll start by finding and closing tags and work from there I guess.

Thanks for your help thus far and if I post an update I'd love to hear more if you can find the time.

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm very sorry to do this to you all but...

Not a coding nightmare, but at the moment you are lacking in the understanding of the positioning of elements both absolute and relative positioned have their uses but not initially in laying out the main framework of your page you need to read up on the positioning and flow of elements and to get an understanding that your main elements will position themselves using the default position static.

But the most important thing is to always check your code for errors before moving on. Fix those up then re-post the layout and we can take another look and guide you a little more.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Ok Made some changes Hugo....used Tidy to clean it up some.

My Themes.tpl file wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en">
<head>
<title>{TITLE}</title>
</head>

{METATAGS}
{JAVASCRIPT}
{STYLE}

<DIV id=header>
<DIV id=header-left align=right>
</DIV></DIV>
<DIV id=columns>
<DIV id=mainsitetitle><A title=CAVE76 4x4 href="http://www.cave76.org/">CAVE76 4x4</A>
</DIV></DIV>

<DIV id=centercontent>
<DIV class=box1>
</DIV></DIV>
<DIV class=title>An Online Community for Jeep and Other 4x4 Enthusiasts</DIV>
<DIV class=content>
</DIV>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top>Welcome to Cave76 4x4 one of the more recent online communities based out of

the northeast catering specifically to Jeep and other various 4x4 enthusiasts. Our intent is to provide

you with an easy-to-use, fun-for-the-whole-family, online experience where you may discuss, display

photos and all around enjoy the growing numbers of 4x4 vehicle owners in the northeast region of the

United States.You can expect to see our main page here grow with time as we have several ideas that are

currently in the planning stages that should separate us from the rest of the pack. For now, we would

like to invite you to join our online message boards. You will find a link in the right hand menu of

this page.We'll see you there!<BR><BR>- The Forefathers of Cave76</TD>
<TD vAlign=top align=center><IMG title="Welcome to Cave76.org!" alt="Welcome to Cave76.org!"

src="/themes/Default/images/cave76stoneseal-wh.gif" height=300 width=300 border=0>
</TD>
</TR>
</TBODY>
</TABLE>

<table border="0" cellpadding="5" cellspacing="0" width="100%" summary="Layout table">
<tr>
<!-- BEGIN LEFTSIDE -->
<td width="15%" valign="top" align="center">
{header-left}
{LEFT_COL_TOP}
{LEFT_COL_MID}
{LEFT_COL_BOTTOM}
</td>
<!-- END LEFTSIDE -->
<td valign="top" width="70%">
{TOP}
{BODY}
{BOTTOM}
</td>
<!-- BEGIN RIGHTSIDE -->
<td width="15%" valign="top" align="center">
{RIGHT_COL_TOP}
{RIGHT_COL_MID}
{RIGHT_COL_BOTTOM}
</td>
<!-- END RIGHTSIDE -->
</tr>
</table>

<DIV class=box3>
<div class="smalltext" style="text-align : center">
Cave76 4x4 would like to thank <a href="http://www.heylsystems.com">Heyl Systems</a> © for their

continuing support.<br /><br />
Copyright © Appalachian State University 2002 - 2004<br />
This Site is powered by phpWebSite © The Web Technology Group, Appalachian State University<br />
phpWebSite is licensed under the <a href="http://www.gnu.org/copyleft/lesser.html">GNU LGPL</a>
</div></div>

<DIV id=rightcontent>
<DIV class=box1>
<DIV class=title>Main Menu</DIV>
<DIV class=content>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><BR><a href="http://www.cave76.org">Home</a><BR><a

href="http://www.cave76.org/forums">Forums</a><BR><a href="http://www.cave76.org">Photo Album</a>
</TD>
</TR>
</TBODY>
</TABLE>
{EXAMPLE}
</html>

My Style.css file wrote:
#header {
BACKGROUND-IMAGE: url(./images/tile.jpg); BACKGROUND-REPEAT: repeat-x
}
#header-right {
BACKGROUND-POSITION: right 50%; BACKGROUND-COLOR: #F5DEB3
}
#header-left {
BACKGROUND-POSITION: left 50%; BACKGROUND-IMAGE: url(./images/main/rotator.php); BACKGROUND-REPEAT: no-repeat; HEIGHT: 800px
}
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: url(./images/vert_tile.jpg); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat-y; HEIGHT: 100%; BACKGROUND-COLOR: #F5DEB3
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.9em; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, helvetica, sans-serif; HEIGHT: 100%; BACKGROUND-COLOR: transparent
}
.smalltext {
FONT-SIZE: 0.9em
}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
P {
LINE-HEIGHT: 125%; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TABLE {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
TD {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; TEXT-ALIGN: left
}
#columns {
LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 115px; HEIGHT: 100%
}
#centercontent {
LEFT: 115px; MARGIN-RIGHT: 380px; POSITION: relative
}
#mainsitetitle {
FONT-WEIGHT: bold; FONT-SIZE: 28px; LEFT: 110px; COLOR: #252525; MARGIN-RIGHT: 380px; FONT-FAMILY: Times, serif; WHITE-SPACE: nowrap; POSITION: absolute; TOP: -51px
}
#mainsitetitle A {
COLOR: #C7C6C6; FONT-STYLE: normal; FONT-FAMILY: Arial
}
#mainsitetitle A:hover {
TEXT-DECORATION: none
}
#rightcontent {
RIGHT: 0px; BACKGROUND: #DEB887; WIDTH: 200px; POSITION: absolute; TOP: 99px
}
.bg_light {
COLOR: black; BACKGROUND-COLOR: #ededed
}
.bg_medium {
COLOR: black; BACKGROUND-COLOR: #ababab
}
.bg_dark {
COLOR: black; BORDER-BOTTOM: #aaaaaa 4px ridge; BACKGROUND-COLOR: transparent
}
.white {
COLOR: black; BACKGROUND-COLOR: transparent
}
.padding-bottom {
COLOR: black; BACKGROUND-COLOR: #9a9a9a
}
.padding-top {
COLOR: black; BACKGROUND-COLOR: #9a9a9a
}
.box1 {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BACKGROUND-COLOR: transparent
}
.box2 {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px; BACKGROUND-COLOR: #DEB887
}
.box3 {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; BACKGROUND-COLOR: #660000
}
.title {
PADDING-RIGHT: 4px; BORDER-TOP: #444444 3px solid; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 1.4em; PADDING-BOTTOM: 4px; COLOR: #565656; PADDING-TOP: 4px; BORDER-BOTTOM: #444444 1px solid; FONT-STYLE: bold; FONT-FAMILY: Arial; BACKGROUND-COLOR: transparent
}
.read {
PADDING-RIGHT: 4px; BORDER-TOP: #41200c 3px solid; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 1.1em; PADDING-BOTTOM: 4px; COLOR: #444444; PADDING-TOP: 4px; FONT-STYLE: italic; FONT-FAMILY: Times, serif; BACKGROUND-COLOR: transparent
}
B {
FONT-WEIGHT: bold; COLOR: #353535
}
A:link {
FONT-WEIGHT: bold; COLOR: #3a5574; TEXT-DECORATION: none
}
A:visited {
FONT-WEIGHT: bold; COLOR: #2d3d55; TEXT-DECORATION: none
}
A:hover {
COLOR: #496c93; TEXT-DECORATION: underline
}
A:active {
COLOR: #496c93; TEXT-DECORATION: underline
}
.clear {
CLEAR: none
}
.content {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; COLOR: #353535; PADDING-TOP: 4px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#tabmenu {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; MARGIN-BOTTOM: -2px; PADDING-BOTTOM: 3px; MARGIN-LEFT: -2px; WIDTH: 100%; PADDING-TOP: 3px
}
#tabmenu LI {
BORDER-RIGHT: #606e50 3px ridge; PADDING-RIGHT: 5px; BORDER-TOP: #606e50 3px ridge; DISPLAY: inline; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; BORDER-LEFT: #606e50 3px ridge; PADDING-TOP: 5px; BORDER-BOTTOM: #606e50 0px solid; LIST-STYLE-TYPE: none
}
#tabmenu LI.active {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 4px; COLOR: white; PADDING-TOP: 5px; BACKGROUND-COLOR: #92b4de; BORDER-BOTTOM-STYLE: none
}
#tabmenu LI.inactive {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 2px; PADDING-TOP: 5px; BACKGROUND-COLOR: #cbdfeb
}
#tabmenu LI.active A:link {
DISPLAY: block; COLOR: #3a5574; TEXT-DECORATION: none
}
#tabmenu LI.active A:visited {
COLOR: #2d3d55; TEXT-DECORATION: none
}
#tabmenu LI.active A:hover {
COLOR: white; TEXT-DECORATION: none
}
#tabmenu LI.inactive A:link {
COLOR: #3a5574; TEXT-DECORATION: none
}
#tabmenu LI.inactive A:visited {
COLOR: #2d3d55; TEXT-DECORATION: none
}
#tabmenu LI.inactive A:hover {
COLOR: white; TEXT-DECORATION: none
}
#tabmenu LI.inactive:hover {
BACKGROUND: #9fc5ef; COLOR: white
}
#frame {
BORDER-RIGHT: #7b95b4 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #7b95b4 2px solid; MARGIN-TOP: -2px; PADDING-LEFT: 5px; BACKGROUND: #92b4de; PADDING-BOTTOM: 5px; MARGIN-LEFT: 1px; BORDER-LEFT: #7b95b4 2px solid; WIDTH: 100%; PADDING-TOP: 5px; BORDER-BOTTOM: #7b95b4 2px solid; HEIGHT: auto
}
#backgrd {
PADDING-RIGHT: 5px; BORDER-TOP: #7b95b4 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #7b95b4 2px solid; WIDTH: 100%; PADDING-TOP: 5px; HEIGHT: 100%; BACKGROUND-COLOR: white
}
DIV.link {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 0.8em; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: 5px; WIDTH: 150px; PADDING-TOP: 5px; POSITION: relative
}
DIV.link IMG {
FLOAT: left; MARGIN: 5px 5px 20%
}
DIV.link A {
FONT-WEIGHT: bold; FONT-SIZE: 0.9em
}

Anonymous
Anonymous's picture
Guru

I'm very sorry to do this to you all but...

You really need to validate your work: http://validator.w3.org/

Smile

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

And the site looks whacky now...

http://cave76.org

drhowarddrfine
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

I'm very sorry to do this to you all but...

You don't have a body tag and your links are in the wrong place and you really, really need to re-read that html book you're reading.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

It's very odd that you guys are saying this about this code. I'm basically reverse engineering here as I didn't write the code to start with but I've changed VERY little thus far other than colors and graphics.

Anonymous
Anonymous's picture
Guru

I'm very sorry to do this to you all but...

It would seem that you are "reverse engineering" a poor example of an xhtml page.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

I'm very sorry to do this to you all but...

I think at this point, you might be better off creating something from scratch, rather than "reverse engineering."

Quote:
It's very odd that you guys are saying this about this code. I'm basically reverse engineering here as I didn't write the code to start with but I've changed VERY little thus far other than colors and graphics.

It is not very odd if the code we are talking about is like splattered with errors. Even if you didn't write the code, then you should evaluate if the markup is worth keeping or not. What you have is something that is easier to create from the get-go, rather than trying to fix what you currently have. If you are willing to get your hands a little dirty, people here are usually willing to help. Smile

This is my big chance . . . yep, I blew it . . .

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Oh absolutely! I'm getting my hands dirty now muckin' with all this. And btw if my previous post came off disbelieving of what you all are telling me here I apologize. I was chuckling at the fact that I got this from a rather reputable source and apparantly they don't code so well either.

I'll brush up the TPL file some and repost it. I'll indent appropriately etc.

Also if I came across acting as though I know anything about the art you folks perform on a daily basis then I mislead you.

I know very little about html/xhtml/css and the lot of them. I'm just more tactile in nature and can't read from a book and get this stuff right. I wish I could take a class on it to tell ya the truth but unfortunately $$$ is tight right now.

Stand by for update...

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

I'm very sorry to do this to you all but...

All part of a healthy forum process. Wink

The best info is online to learn html/xhtml/css. I have a lot of books that are collecting dust. Books cannot update like the web can. Also, books cannot illustrate live examples as well. The web has many tools that a book does not have. If you are tactile then draw up you want and let us have a look.

Make sure you stick around here; because frankly, the advice that goes around here is top-notch, people here really keep up.

Final note, do not use tables for layout purposes. Use CSS to for layout and to position your elements.

**on standby**

This is my big chance . . . yep, I blew it . . .

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Ok I keep hearing "No Tables!" well the problem is...if I remove the tables...it looks like a bomb exploded on my website as opposed to now where it only has a menu that's out of line.

I'll blow away the tables but is anyone gonna be on the forum for a bit to help a brotha out? Can't have the site down too long is all.

Thanks guys!

Current code posted in a sec...

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Where do I start deleting? :oops:

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en">
<head>
<title>{TITLE}</title>
</head>

{METATAGS}
{JAVASCRIPT}
{STYLE}

<DIV id=header>
<DIV id=header-left align=right>
<DIV id=header-right1 title="CAVE76.ORG" align=right>
</DIV>
</DIV>
</DIV>

<DIV id=columns>
<DIV id=mainsitetitle><A title=CAVE76 4x4 href="http://www.cave76.org/">CAVE76 4x4</A></DIV>
<DIV id=centercontent>

<DIV class=box1>
<DIV class=title>An Online Community for Jeep and Other 4x4 Enthusiasts</DIV>
<DIV class=content>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><BR>Welcome to Cave76 4x4 one of the more recent online communities based out of the northeast catering specificly to Jeep and other various 4x4

enthusiasts. Our intent is to provide you with an easy-to-use, fun-for-the-whole-family, online experience where you may discuss, display photos and all around enjoy the growing numbers of 4x4

vehicle owners in the northeast region of the United States.<BR><BR>You can expect to see our main page here grow with time as we have several ideas that are currently in the planning stages that

should separate us from the rest of the pack. For now, we would like to invite you to join our online message boards. You will find a link in the right hand menu of this page.<BR><BR>We'll see

you there!<BR><BR>- The Forefathers of Cave76
</TD>
<TD vAlign=top align=middle><IMG title="Welcome to Cave76.org!" height=300 alt="Welcome to Cave76.org!" src="/themes/Default/images/cave76stoneseal-wh.gif" width=300

border=0></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>

<TABLE width="100%" border=0>
<table border="0" cellpadding="5" cellspacing="0" width="100%" summary="Layout table">
<tr>
<!-- BEGIN LEFTSIDE -->
<td width="15%" valign="top" align="center">
{header-left}
{LEFT_COL_TOP}
{LEFT_COL_MID}
{LEFT_COL_BOTTOM}
</td>
<!-- END LEFTSIDE -->

<td valign="top" width="70%">
{TOP}
{BODY}
{BOTTOM}
</td>

<!-- BEGIN RIGHTSIDE -->
<td width="15%" valign="top" align="center">
{RIGHT_COL_TOP}
{RIGHT_COL_MID}
{RIGHT_COL_BOTTOM}
</td>
<!-- END RIGHTSIDE -->
</tr>
</table>

<DIV id=rightcontent>
<DIV class=box1>
<DIV class=title>Main Menu</DIV>
<DIV class=content>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top><a href="http://www.cave76.org">Home</a><BR><a href="http://www.cave76.org/forums">Forums</a><BR><a href="http://www.cave76.org">Photo Album</a></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
</DIV>

<DIV class=box3>
<div class="smalltext" style="text-align : center">Cave76.org would like to thank <a href="http://www.heylsystems.com">Heyl Systems</a> © for their continuing support.<br /><br />
Copyright © Appalachian State University 2002 - 2004<br />This Site is powered by phpWebSite © The Web Technology Group, Appalachian State University<br />phpWebSite is licensed under the

<a href="http://www.gnu.org/copyleft/lesser.html">GNU LGPL</a></div>

</DIV>
</DIV>

<br/>
{EXAMPLE}
</html>

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

The only thing off is that main menu...if it fell into place...regardless of how bad my code would be...I swear I'd use it as is!

Sorry I'm coded out.

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Okay if you have IE...that's how I want it to look.

If you have Firefox...ugh...I'm sorry I made you look at that travesty.

However in both applications the tables seem to work. Can you guys elaborate on why the tables are a bad idea and how to get rid of them successfully?

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I'm very sorry to do this to you all but...

DaBrode wrote:
Can you guys elaborate on why the tables are a bad idea and how to get rid of them successfully?


hrmmm...easy to answer, but a lot of work ahead possibly...

a much quoted resources on the subject of the evils of tables for layout is

http://www.hotdesign.com/seybold/

basically, tables are there to display tabular data. they aren't semantic, they bloat your code (making it take longer to download, and for larger sites costing more to host), easy to change the layout with css (want the menu at the bottom of the page? just a couple of seconds in css, and an indefinite time on each page with tables), and they make your web page inaccessible to a lot of people with disabilities.

frankly, once you've looked at the issues there can be no doubt that using tables for presentation is a waste of time.

as to getting rid of them...I'm afraid the best way is probably to start from scratch, handcoding each page (cut and paste any text).

in addition, a menu bar is a list of links right? therefore it should be in a list format. that's something I'd look at when recoding your page. a helpful site for links and ideas for the future is:

http://css.maxdesign.com.au/listamatic/index.htm

good luck!

larmyia

DaBrode
Offline
Regular
Last seen: 14 years 47 weeks ago
Joined: 2005-10-27
Posts: 11
Points: 0

I'm very sorry to do this to you all but...

Thank you...I'll be reading up ASAP.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

I'm very sorry to do this to you all but...

The hardest thing for a newbie and even for old timers of the table layout variety to understand is that markup and presentation are separate. You have the content which is marked up with tags that describe what that bit of content is. Then, you have style rules that tell how those bits will be displayed.

Start by taking your content and simply adding the appropriate tags. Put <p>s around paragraphs, <hx>s around headers, wrap the menu in a list, &c.. That's all you need to do to begin.

Bring that and your labeled sketch of the desired layout back, and we can get you rolling.

[edit] Just because I stop in the middle of composing to feed the cat and myself, and take out the garbage, is no reason to jump in front of me. [/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I'm very sorry to do this to you all but...

Laughing out loud

in addition, I think it's useful to think of a web page in terms of layers (like a trifle, which I personally don't like to eat, but is a good analogy). in fact I have just found the link I was thinking of. when I heard Andy Clarke describe a web page in this way I thought it was brillient.

http://www.stuffandnonsense.co.uk/archives/web_standards_trifle.html

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I'm very sorry to do this to you all but...

larmyia wrote:
I think it's useful to think of a web page in terms of layers (like a trifle, which I personally don't like to eat, but is a good analogy).

Personally, I always think of it as one of those fantastic quad layered death by chocloate cakes, with cream of course. :twisted:

Trifle reminds me too much of very sad birthday parties when I was young (60's). Ugghhh Sad

Trevor

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I'm very sorry to do this to you all but...

mmm I like that. trifle is a great analogy but tastes horrid. now, chocolate cake

yum yum

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm very sorry to do this to you all but...

Look here I'm starving and all I find myself reading about is food :mad:
now I've got to go a buy a Sarah Lee cake thingy and spend the the evening pondering strange web analogies, while gorging myself.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

I'm very sorry to do this to you all but...

A Sarah Lee cake? Now that's sad :-({|=

feeling for you,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

larmyia
Offline
Elder
London
Last seen: 12 years 1 week ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

I'm very sorry to do this to you all but...

Hugo, I can only hope I've caught you before you've before you've committed this travesty, but Marks & Sparks do a wicked chocolate cake. In fact, save me a piece.

Laughing out loud