Web Design: Table HELP!

Deleted · 2011-09-14, 07:19 AM

Hey, y'all.
I'm taking a web design course, but today my teacher aint here. I'm using Dreamweaver to create website and now I need help with positioning tables.

I've managed to create four tables in a row with the correct spacing between them, however, I can't get them to go on top of the image I've put in. Right now it's either going above or below my website background which isn't quite what I need.

I need it to be ON TOP of my image. How on earth do I do this? x.x

Greatful for any help,
Vx.

**shoebox** · 2011-09-14, 07:22 AM

Have you set the image to be the background of the webpage? as that is what i assume you want, or do you just want the image to be the background of the table?

**Drunkenvalley** · 2011-09-14, 07:24 AM

I assume you're not all that far into the course.

Are you using <img> for your, well, img, or is it a CSS background?

**Djinni** · 2011-09-14, 07:25 AM

there is in css, an option called z-index, which should allow you manually set the order of the way things display ontop of one another.
In dreamweaver you will probably find a "Send to back" option on your picture.

Deleted · 2011-09-14, 07:25 AM

Originally Posted by shoebox

Have you set the image to be the background of the webpage? as that is what i assume you want, or do you just want the image to be the background of the table?

I've made the background black... Can I set the image to be the background and still keep the black around, or must I add some width to the image and make that black?

Also, how do I make my image ze background? :>

---------- Post added 2011-09-14 at 07:27 AM ----------

Originally Posted by Drunkenvalley

I assume you're not all that far into the course.

Are you using <img> for your, well, img, or is it a CSS background?

Yeah, not far into it at all. It's an img file.

---------- Post added 2011-09-14 at 07:29 AM ----------

I can share with you what I have put down atm.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body bg bgcolor="#000000">

<img src="Vixen Art Mall TRUE.jpg" width="1200" height="1662" />
</center>

<body>

<center> <TABLE BORDER CELLPADDING=100>
<TABLE HEIGHT=4 BORDER=1>
<TABLE BORDER CELLSPACING=120>

<TR><TD>Index</TD><TD>About</TD><TD>ArtGallery</TD><TD>Login</TD>
</TABLE>
</center>

</body>
</html>

**Drunkenvalley** · 2011-09-14, 07:31 AM

http://htmldog.com/guides/cssinterme...kgroundimages/

You can also use this site to generally pick up and brush your skills overall.

**Cryonic** · 2011-09-14, 07:32 AM

I wish I could use tables when I did my test as our teacher told us tables are not used anymore, only DIV should be used..

**shoebox** · 2011-09-14, 07:33 AM

You can use <div> </div> within <div> </div> to create sections for each thing you want.

e.g
<div>this can be your base template (you can make the background the image)
<div>

</div>
</div>
you can then use CSS to size the div tags so that they position the way you want, so the main div tag (this first one) will contain all the other div tags which then you can give width and height, and center it, or push it to the left or right, and they can contain your table or nav bar w/e you want.

Div tags are away to divide and organize your content.

---------- Post added 2011-09-14 at 07:34 AM ----------

Originally Posted by Cryonic

I wish I could use tables when I did my test as our teacher told us tables are not used anymore, only DIV should be used..

Using tables for organising large amounts of content is bad practice, and much more tricky then using div tags.

---------- Post added 2011-09-14 at 07:35 AM ----------

http://www.w3schools.com/html/default.asp

Deleted · 2011-09-14, 07:45 AM

I am still confused, lolz. Using DREAMWEAVER only, how do I get the image to merge with the black background, and how do I get those tables to bloody move? xD

This is the design so far. I want the, 'Index, About, Art Gallery, Login' to be clickable, which the tables will help me with by being invisible. I'll then create a link within each cell.

**shoebox** · 2011-09-14, 07:52 AM

place the tables within the div tags i.e <div height=1000px width=500px><div height=50px width=500px><table></table></div></div> i cant remember the positioning variables are, but im sure someone else can tell you, pretty much you give the division tags a size, and a position.

Deleted · 2011-09-14, 08:13 AM

Just as an aside, for when you are more familiar with HTML...

Using <table> for layout is a no-no in the web community - I'm surprised you're being taught this.

If I was to create that menu, it'd look a little like:

<ul id="menu">
<li class="index"><a href="/index">Index</a></li>
<li class="about"><a href="/about">About</a></li>
<li class="art"><a href="/gallery">Art Gallery</a></li>
<li class="login"><a href="/login">Login</a></li>
</ul>

#menu {
position: absolute;
top: 20px;
right: 20px;
margin: 0;
padding: 0;
list-style-type: none;
}

#menu li {
float: left;
margin: 0 20px;
}

#menu li a {
display: block;
height: 15px;
}

#menu li.index a {
width: 100px;
background: url(/images/menu_index.png) top left no-repeat;
}

**Djinni** · 2011-09-14, 08:21 AM

Originally Posted by cloakedninjas

Just as an aside, for when you are more familiar with HTML...

Using <table> for layout is a no-no in the web community - I'm surprised you're being taught this.

In schools (in England at any rate) they teach tables to begin with, because its an easy way to divvy up content without also having to teach CSS, which as far as a teacher at school is concerned is another language all together. Not to mention not part of the exam. Teaching Web Design etc.. is a very "long" process when you only have maybe an hour or two a week to teach it. So anything not required to pass the exam is generally left out. Even at University they only taught us very very basic CSS.

But certainly for my HCI class (Human Computer Interface) we started off using tables to define where content would go on the screen, as it only took maybe 20mins to put together a basic 3 or 4 page website that way once you had a base template (probably 15 of which I tended to spend looking for pictures lol.)

The exams don't tend to care much about the code itself, so much as what the end result looks like. And since all the files are serrved "locally" speed and compatibility with other browsers isn't really a consideration.

---------- Post added 2011-09-14 at 09:29 AM ----------

Something I really hate about todays teaching methods and exam timetable.. Pushing teachers into the mentality that if you don't need it for the exam, it becomes a secondary priority and probably won't get taught.

**TaintedOne** · 2011-09-14, 08:50 AM

Originally Posted by -Vixen-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body bg bgcolor="#000000">

<img src="Vixen Art Mall TRUE.jpg" width="1200" height="1662" />
</center>

<body>

<center> <TABLE BORDER CELLPADDING=100>
<TABLE HEIGHT=4 BORDER=1>
<TABLE BORDER CELLSPACING=120>

<TR><TD>Index</TD><TD>About</TD><TD>ArtGallery</TD><TD>Login</TD>
</TABLE>
</center>

</body>
</html>

My HTML is super rusty and outdated but you can try this...

The closing </center> tag I bolded has no opening tag to it (not sure if that affects the positioning of the other elements though) add a opening center tag before the img tag or delete the closing tag. The body tag I bolded is extra and should be deleted (at least thats how it was back when i learned html, one set of body tags per page).

... But I'm pretty sure it wont help with your problem

Deleted · 2011-09-14, 08:55 AM

How is CSS or DIV's slower than tables? I can crank out CSS-based templates like mad. Just do it more and learn it properly. DIVs and CSS positioning is a lot more logical than messing with clunky tables. It's stupid schools still teach this crap because it's not even a good basis.

**XenuMC** · 2011-09-14, 08:56 AM

Originally Posted by Twf

How is CSS or DIV's slower than tables? I can crank out CSS-based templates like mad. Just do it more and learn it properly. DIVs and CSS positioning is a lot more logical than messing with clunky tables. It's stupid schools still teach this crap because it's not even a good basis.

Sorry, this was my reply but my brother was still logged in. I wish people learned from the start that seperating content and markup is important. It's a lot harder to learn when you've gotten used to putting your formatting and markup everywhere you want.

**Djinni** · 2011-09-14, 08:58 AM

Originally Posted by -Vixen-

I can share with you what I have put down atm.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body bg bgcolor="#000000">

<img src="Vixen Art Mall TRUE.jpg" width="1200" height="1662" />
</center>

<body>

<center> <TABLE BORDER CELLPADDING=100>
<TABLE HEIGHT=4 BORDER=1>
<TABLE BORDER CELLSPACING=120>

<TR><TD>Index</TD><TD>About</TD><TD>ArtGallery</TD><TD>Login</TD>
</TABLE>
</center>

</body>
</html>

Perhaps try this instead:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body background="Vixen Art Mall TRUE.jpg" width="1200" height="1662" bgcolor="#000000">

<center> <TABLE BORDER CELLPADDING=100>
<TABLE HEIGHT=4 BORDER=1>
<TABLE BORDER CELLSPACING=120>

<TR><TD>Index</TD><TD>About</TD><TD>ArtGallery</TD><TD>Login</TD>
</TABLE>
</center>

</body>
</html>

I have highlighted the changes for you.
Also think about using Notepad++ for contextual highlighting, it will help you make sure your tags are in the right places and that you haven't forgotten any. (Dreamweaver is a terrible way to learn)

You should also use lowercase tags, (It's supposed to work better in a wider range of browsers and platforms)

**Aevy** · 2011-09-14, 09:07 AM

It's pretty simple, to set those links on that image.

You can split the image in 2 pieces. The "header" and the "rest". Then you can use a map on that image to mark the links.

Code:

<img src="header.png" usemap="#menumap" />
<br/>
<div style="background-image:url(the-rest.png);">
  random text, content, etc
</div>
<map name="menumap">
  <area shape="rect" coords="x1,y1,x2,y2" href="about.htm" alt="About" />
</map>

Where x1,y1 are the coordinates in pixels, relative to the image, of the top-left corner of the link, and x2,y2 are the coordinates for the bottom-right corner.
http://www.w3schools.com/tags/tag_map.asp

This is the simplest approach to it, to avoid using a table. Tables are not really used anymore for doing the layout of a website. They are still used on website, there were you really need... a table.

**Djinni** · 2011-09-14, 09:08 AM

Might also be worth you reading here:

http://www.w3schools.com/tags/tag_body.asp
http://www.w3schools.com/tags/tag_table.asp

**XenuMC** · 2011-09-14, 09:11 AM

Originally Posted by Aevy

It's pretty simple, to set those links on that image.

You can split the image in 2 pieces. The "header" and the "rest". Then you can use a map on that image to mark the links.

Code:

<img src="header.png" usemap="#menumap" />
<br/>
<div style="background-image:url(the-rest.png);">
  random text, content, etc
</div>
<map name="menumap">
  <area shape="rect" coords="x1,y1,x2,y2" href="about.htm" alt="About" />
</map>

Where x1,y1 are the coordinates in pixels, relative to the image, of the top-left corner of the link, and x2,y2 are the coordinates for the bottom-right corner.
http://www.w3schools.com/tags/tag_map.asp

This is the simplest approach to it, to avoid using a table. Tables are not really used anymore for doing the layout of a website. They are still used on website, there were you really need... a table.

Yeah and using maps is so much better to use for the layout of a website than tables, right? Come on, don't teach people wrong stuff. Maps have their place but creating a menu is definitely not one of them. I'd rather have the OP stick to his tables than him getting used to what you suggested.

Deleted · 2011-09-14, 09:15 AM

Originally Posted by XenuMC

It's a lot harder to learn when you've gotten used to putting your formatting and markup everywhere you want.

Indeed - I remember when we had to use <table> inside <table> for 1px borders - then I was the one tasked in my office to "learn CSS".

If this course is important and you think webdesign is something you want to carry on with, start looking into CSS and if the course is about getting something to "look right" instead of "use tables to do this" CSS will serve you better in the long run. If though, you're putting up with this class for some easy module points ignore me

Recent Blue Posts

Yet another Timewalking loot post ( As directed by GM)

Opened timewalking Cache before hotfix

Splintered Spark of awakening? Bug?

Limited PvP -> PvE Free Character Transfers

Currency Conversions Coming with Patch 4.4.0 on 1 May

Currency Conversions Coming with Patch 4.4.0 on April 30

Embrace Two New Races in Cataclysm Classic

Recent Forum Posts

Additional Character Slots, Season of Discovery Hotfixes - April 23, 2024

Did Blizzard just hotfix an ilvl requirement onto Awakened LFR?

Currency Conversions Coming with Patch 4.4.0 on April 30

Boosting payments.

Embrace Two New Races in Cataclysm Classic

The WoW Companion App is Retiring

Every Allied Race should be removed... except two

Thread: Web Design: Table HELP!

Thread Tools

Web Design: Table HELP!

Posting Permissions

Social Media

Services

Resources

Our Communities

MOBAFire Network