Need help with creating three column table that works! 1

RodS2 · Sep 11, 2007

So I am trying to create a 3 column table to no avail. I am new to dreamweaver and I am teaching myself how it works, but it is just not lining up correctly no matter what I do.

The image file is here..

http://www.reesegs.com/image.jpg

Notice there are three columns. The last column contains an image, the middle column contains image headers (consulting & services) and then text underneath. And the first column has image at the top (services) and then linked text underneath.

Any help would be greatly appreciated as soon as possible.

Thank you!

vacunita · Sep 11, 2007

First: Using tables for layout is a big non no these days in Web design. You should be using DIVs and CSS.

Second: If you are learning HTML, don't use Dreamweaver. Dreamweaver should be a tool, not a crutch. Learn the basics of HTML before having an application do them for you. If you know how HTML works, then you can use Dreamweaver to build some stuff for you, but be able to edit the code, to make it do what you want, as sometimes Dreamweaver is a little rigid in its constructions.

Third: I'm not entirely sure what you meant by the don't line up, I saw the image And they seem to be lining up just fine, but to better diagnose your problem and help you, its a good practice to post your HTML code. Click on the Code View tab, so show it and copy and paste it here between code tags. [ignore]

Code:

code goes here

[/ignore]

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

RodS2 · Sep 11, 2007

Hi,

What you saw is just the image. I created the web design first in photoshop, so that is the image from photoshop. I am trying to convert that now into HTML. Honestly, I'm not really sure where to begin. Does anyone have any sample code that accomplishes something similar. That way maybe I could figure it out.

lebisol · Sep 11, 2007

...trying to convert that now into HTML"
Look towards Image Ready. Slice your images and then discard the html produced by IR. Recreate your layout using either tables or divs and position your images as close as you can so they match your PS layout.
The only images you should need are 'headers' or 'titles' of services,consulting and solutions...the rest can be done with css and html. Honestly, even headers can be plain text unless there is some odd font or something that would be hard to create in html.
All the best!

:--------------------------------------:

All around in my home town,
They tryin' to track me down...

vacunita · Sep 11, 2007

Googling for a 3 column layout produces many hits.

Now you might want to look into

http://www.w3schools.com/

They have a bunch of tutorials, that can help you design this.
For starters this might give you some ideas:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>WebPage Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body{
font-family:Verdana;
font-size: 11px;
color:#555555;
background-color:#FFFFEE
}
#leftcolumn{
width:15%;
float:left;
}
#middlecolumn{
width:40%;
float:left;
padding-right:10px;
}
#rightcolumn{
width:25%;
border:1px solid black;
float:left;
}
#title1{
width:100%;
text-align:center;
font-family:MS Sans Serif;
font-size:16px;
color:#bebd66;
font-weight:bold;

}

#title2{
font-family:MS Sans Serif;
font-size:12px;
font-weight:bold;
color:#bebd66;
border-bottom:1px dotted grey;
}

#imageholder{
height:250px;
text-align:center;
background-color:grey;
}

</style>
</head>

<body>
<div id="leftcolumn">
<div id=title1>services</div>
<ul>
<li>Consulting</li>
<li>Strategy</li>
<li>Marketing</li>
<li>Design</li>
<li>Development</li>
</ul>
</div>
<div id="middlecolumn">
<span id=par1><h3 id=title2>Consulting</h3>
A Consisten look reflects better on your company. Let our desing team layout your 

corporate identity...
</span>
<span id=par2><h3 id=title2>Solutions</h3>
<ul><li>Campaign management</li>
<li>Web Site reporting</li>
<li>Infrastructure Development</li>
...
</span>
</div>

<div id="rightcolumn">
<div id=imageholder>IMAGE HERE</div>
</div>


</body>
</html>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

RodS2 · Sep 11, 2007

vacunita, that example is working out great. The only question is, I am linking the text on the left and now the links shows up as underlined at all times. Also, is there a way to change the style when it is hovered over. I have been using CSS and it has been working, but now that I am referencing it within the file it is not working. Do <div> tags not work with CSS files?

vacunita · Sep 11, 2007

Sure they do. The Divs I placed in my example are being affected by CSS So they are in the correct location, but instead of giving them a class, i gave them an ID.

For links you can have the link classes, and give them all a decoration of none to remove the underline.
you can also change their colors there:

Code:

a.link{
color:red;
decoration:none;
}
a.visited{
color:black;
decoration:none;
}
a.active{
color:white;
decoration:none;
}
a.hover{
color:green;
decoration:none;
}

This should produce links that have no underline, and are red to begin with, change to green on hover and the to black after being clicked.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

RodS2 · Sep 11, 2007

How do I reference it?? Right now my code looks like

<div id=blText>:<a href="consulting.html">Consulting</a></div>
<br>

<div id=blText>:Strategy</div><br>
<div id=blText>:Marketing</div><br>
<div id=blText>

esign</div><br>
<div id=blText>

evelopment</div>

I have only provided a link for the first one "Consulting

Do I change <div id=blText> to <div id=a> ??

vacunita · Sep 11, 2007

?Just like I posted. Links are referenced by the "a." construct.

Of course you can also give the links a class.

Code:

.mylink{
color:black;
...
}

and then just add the class to your link:

Code:

<a href="consulting.html" class=mylink>Consulting</a>

But the "a." way is the better choice.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

RodS2 · Sep 11, 2007

OK, the reason why I ask is because it is not working.

<div id="a"><a href="consulting.html">:Consulting</a></div>

And not sure why.

vacunita · Sep 11, 2007

Ohh sorry, just realized I have a typo for the link styles it should be:

Code:

a[red]:[/red]link{
color:red;
decoration:none;
}
a[red]:[/red]visited{
color:black;
decoration:none;
}
a[red]:[/red]active{
color:white;
decoration:none;
}
a[red]:[/red]hover{
color:green;
decoration:none;
}

notice I changed the period between "a" and the state, for a colon ":".

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Need help with creating three column table that works! 1

RodS2

IS-IT--Management

vacunita

Programmer

RodS2

IS-IT--Management

lebisol

IS-IT--Management

vacunita

Programmer

RodS2

IS-IT--Management

vacunita

Programmer

RodS2

IS-IT--Management

vacunita

Programmer

RodS2

IS-IT--Management

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor