HTML Help

waitwhat · Joined: 17 Nov 2008 Posts: 9

Hi, I am new to this site and am very happy I found it. Thank you for viewing my post.

I am designing my resume website and am experiencing problems with the table I built. The whole page is designed in a table. It can be viewed here:
http://www.mattboehlerresume.com/three.html

The problem is in-between the rollover links on the left and the body section of the page to the right.

Thanks you for your help!!![/code]

Corey Bryant · Posted: Tue Nov 18, 2008 6:47 am

You have quite a few tables in there - way too many.

For the rollover part, check out this rollover script.

For the table part, check out the places you have them set at 100%. Starting at 100% means the table will vary on different resolutions. If you need a certain width, consider using a specific number of pixels instead of a percentage. That would be the first step - do you want the web page to expand based on the user's resolution or be a specific width?

_________________
Corey
Hosted Exchange Service | Mile High Merchant Accounts | Expression Web Blog

waitwhat · Joined: 17 Nov 2008 Posts: 9

Thank you for your reply Corey.

I am still in the beginning stages of developing web content, which is why there are so many tables. As far as the problem that I have with the spacing, is that due to a problem with the rollover coding, or the table widths? To answer your question, I would like the webpage to expand based on the user's resolution. But, I do need columns in the table to be a certain width so that the blue toolbar is correctly displayed (as a straight line, with no spaces).

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Quote: waitwhat
I am still in the beginning stages of developing web content, which is why there are so many tables.

Since you are in the beginning stage it is best to move away from tables as a design method and move to css designing. I'll work up a start for you and post it latter today. You can help yourself in the learning process by reading the tutorial here and searching for others.

Corey Bryant · Posted: Tue Nov 18, 2008 9:39 am

I would say it is the 100%. Are you using a WYSIWYG editor to help you with this?

I agree that divs are much better than tables to help you with this but I also know that sometimes it is just easier to use tables.

You should be able to probably get rid of most of those tables in the layout - most are inside <td> elements and just are not needed.

_________________
Corey
Toll Free Fax Numbers | Mile High Merchant Accounts | Expression Web Blog

waitwhat · Joined: 17 Nov 2008 Posts: 9

sticks464 wrote: Quote: waitwhat
I am still in the beginning stages of developing web content, which is why there are so many tables.

Since you are in the beginning stage it is best to move away from tables as a design method and move to css designing. I'll work up a start for you and post it latter today. You can help yourself in the learning process by reading the tutorial here and searching for others.

Thank you for your help. I am using Dreamweaver to put the site together. I am familiar with CSS, but like Corey had said I rely on tables typically because it is much easier for the content to display correctly.

waitwhat · Joined: 17 Nov 2008 Posts: 9

Can someone suggest what the best way to design the site would be, with or without tables? The problem I am having is with the blue toolbar at the top... I want the toolbar to have a shadow, but only over the section that is white. I dont want to create a new image that is like 900px wide. I want to use just a 1x1 image for the toolbar and have it repeat.

Corey Bryant · Posted: Tue Nov 18, 2008 11:52 am

You can use Dreamweaver and the tables, just don't get carried away with the tables - I did that years ago when I started with FrontPage (now using Expression Web).

The header probably can be one table with two cells splitting the second:
Code: <table style="width: 900px">
<tr>
   <td rowspan="3"> </td>
   <td> </td>
</tr>
<tr>
   <td> </td>
</tr>
<tr>
   <td> </td>
</tr>
</table>
And then the main part could just be a table with two cells - you don't need to put the images (for the nav) in a table, they will lay in the cell OK
Code: <table style="width: 900px">
<tr>
   <td style="width: 135px"> </td>
   <td> </td>
</tr>
</table>
It is a start. If you start over with your site, relying a bit more on the cells than the tables, you should be OK.

_________________
Corey
Residential Office Solutions | Mile High Merchant Accounts | Expression Web Blog

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here's a css layout that works in IE6-7, FF, Safari and Opera.
You will have to change the paths for the images.
I would redo the images without the text and insert them into the paths I have left for them in the css. It will only take two images, one normal and one for hover. This will increase accessability and use if images are turned off.

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>Untitled Document</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
border:none;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #fff;
font-size: 1em;
line-height: 1.5;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
background:#FFF;
}
#header {
position: relative;
width: 100%;
height: 75px;
background: #000;
}
#space {
background: transparent url(images/barshadow.jpg) repeat-x;
height:37px;
}
#content {/* use for left sidebar, menu etc. */
color: #000;
float: right;
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
color: inherit;
float: left;
width: 180px;
/*padding: 10px;*/
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}

/* content styles */
#header h1 {
font-size: 32px;
color: #FFFFFF;
font-style: italic;
padding: 35px 0 0 10px;
}
#header address p {
position: absolute;
top:10px;
left: 52%;
color: #fff;
text-align: right;
width: 120px;
font-weight: bold;
font-size: 1.1em;
font-style: normal;
}
#header address p span {
font-weight: normal;
font-size: .75em;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#menu {
height:168px;
width:150px;
background:url(images/button-bottom.jpg) ;
}
#menu li {
width:144px;
height:28px;
background:url(images/button-bot.jpg) no-repeat top left;
}
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
font-weight:bold;
display:block;
width:135px;
height:22px;
border:3px solid #fff; /*delete this line if button image used */
border-color:#666 #666 #333 #333; /*delete this line if button image used */
margin-left:9px;
text-align:center;
background:#000 /*url(images/button.jpg)*/;
color:#fff;
}
#menu a:hover {
border-color:#666 #666 #333 #333; /*delete this line if button image used */
background:#ccc /*url(images/button.jpg)*/;
}
#box {
position:relative;
width:75%;
border:2px solid #000;
}
#box p {border-top:2px solid #333;}
#box #super {
position:absolute;
border-top:none;
top:30%;
left:40%;
}
#super span {font-weight:bold;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Multimedia Portfolio</h1>
<address>
<p>Matt Boehler<br />
<span>555 Fake Rd<br />
Anytown, US 12345</span></p>
</address>
</div>
<div id="space"></div>
<div id="content">
<div class="wrapper">

<div id="box">
<img src="images/Super_High_Me.jpg" width="150" height="200" alt="" title"" />
<p id="super"><span>"Monks, professors gather for Burma teach-in"</span><br />
Written on October 8, 2007</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>

<div id="sidebar">

<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Writing Samples</a></li>
<li><a href="#nogo">Graphic Samples</a></li>
<li><a href="#nogo">Video Samples</a></li>
<li><a href="#nogo">Resume</a></li>
</ul>
</div>
<div class="clearer"></div>

<div id="footer">
</div>
</div>
</body>
</html>