Member Avatar for tinabina22

I am having trouble vaildating my web-design. I am trying to change over from a table based design to a div base. Problem is I started out with tables so I now have a combination of both and sure how to fix it. I have pasted my code here: Please help!

<!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>
<title>correctedhomepage.html</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<meta name="Generator" content="Alleycode HTML Editor" />
<meta name="Description" content="Your description here..." />
<meta name="Keywords" content="Your keywords here..." />
<link rel="stylesheet" href="/include/easy.css" type=
"text/css" />
</head>
<body>
<div id="centernavigation">
<div size="80%" cellspacing="0" cellpadding=
"0" align="right">
<table>
<tr>
<td>
<div style=width"90%" cellspacing="0" cellpadding="0" align="center">
<br />
<br />
<br />
<a href=
"javascript:if(document.all)window.external.AddFavorite(location.href,document.title);%20else%20if(window.sidebar)window.sidebar.addPanel%20(document.title,location.href,'');">
<font color="blue">Bookmark this page</font></a><br />
<br />
<br />
<div align="right"></div>
<div sytle=width="90%" cellspacing="0" cellpadding="0" align="center">
</div>
<div width="80%" cellspacing="0" cellpadding="0" align="center">
</div>
<br />
<br />
<br />
<br />
<p style="text-align:center">I Can Do That is a small business
created out of my love for computers (and everything made
possible with them) run out of my home. The possibilities are
endless, if you can think of it, I have either done it or will
try to do it. Many of the items on our price list have been
developed from customers asking me "Can you do". To name a few,
photo posters 13x19", photo packages made to order, photo taking
(although I am not a professional), photo playing cards with a
photo on every card, DVD videos of your children-wedding-birthday
party etc., with the music of your choice added for effect
(please note if the song has a copyright we would need to get
permission from the owner to use it), transferring of your old
VCR tapes to DVD's. There are too many to list here but take a
minute and look at the list to see if there is anything you might
be interested in or just take a tour through our web-site.</p>
<p style="text-align:center"><b><font color="purple">For all the
happenings in your life! I Can Do That</font></b></p>
<table>
<tr>
<td></td>
</tr>
<tr>
<td width="40%" align="left"><img align="left" src="image001.gif"
alt="image001" height="500" width="400" /></td>
</tr>
<tr>
<td>
<ul>
<li><b><a href="correctedhomepage.html"><font color=
"darkviolet">Home</font></a></b></li>
<li style="list-style: none"><br />
<br /></li>
</ul>
<ul>
<li><b><a href="correctedphotosandenhancements.html"><font color=
"darkviolet">Photos and Enhancements</font></a></b></li>
<li style="list-style: none"><br />
<br /></li>
</ul>
<ul>
<li><b><a href="correctedprojectlist.html"><font color=
"darkviolet">Project List</font></a></b></li>
<li style="list-style: none"><br />
<br /></li>
</ul>
<ul>
<li><b><a href="correctedpricelist.html"><font color=
"darkviolet">Price List</font></a></b></li>
<li style="list-style: none"><br />
<br /></li>
</ul>
<ul>
<li><b><a href="correctedorderform.html"><font color=
"darkviolet">Order Form</font></a></b></li>
<li style="list-style: none"><br />
<br /></li>
</ul>
<ul>
<li><b><a href="correctedcontactpage.html"><font color=
"darkviolet">Contact Page</font></a></b></li>
<li style="list-style: none"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Edited by pritaeas because: Added code tags.
  • 7 Contributors
  • 10 Replies
  • 724 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by diceadmin

Dani AI

Generated

Good move switching away from tables — the mistakes you see on mixed pages usually come from leftover presentational attributes, inline styling/HTML (lots of <br>, <font>, align on elements) and a few malformed attributes that break validation. Fixing the page is best done incrementally: keep the page functional, replace layout tables one area at a time, and tidy the stylesheet between changes. is right to start with the CSS; and are also correct that sharing a link or the stylesheet makes debugging far quicker, and ’s point about openness applies — CSS used for layout isn’t secret.

Practical checklist (small steps, test between each step):

  1. Identify which tables are truly tabular data and which are there only for layout. Only remove layout tables.
  2. Add a single central wrapper (a .site or #page-wrapper) and control centering with max-width + margin: 0 auto.
  3. Replace the navigation table with a semantic nav + ul and center it with CSS (Flexbox or inline-block).
  4. Replace inline presentational markup (<font>, align, inline widths) with classes in the stylesheet.
  5. Validate and inspect after each change; use the browser inspector to watch box sizes and floated elements.

Example patterns you can drop in (replace your table areas one at a time):

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<img class="hero" src="…" alt="hero image">

CSS

.main-nav ul { display:flex; justify-content:center; gap:16px; padding:0; margin:0; list-style:none; }
.main-nav a { text-decoration:none; font-weight:bold; color:#5a2b7f; }
.hero { display:block; margin:1rem auto; max-width:100%; height:auto; }

Quick troubleshooting tips: use the inspector to toggle display on containers, add temporary borders or background colors to see block boundaries, and comment out the table markup in small chunks instead of deleting everything at once. If you need to support very old browsers, use the inline-block + text-align:center fallback for nav. Progress in small, testable steps will get you to a clean, centerable layout without breaking the site.

Recommended Answers

All 10 Replies

Member Avatar for corazondeluz

Hi there Tina,
OK yes there are some problems here :) I really need to see your CSS file to really help you clean up. It seems that you've tried simply substituting div tags for table tags. What you are trying to do really isn't that hard, you just need to be pointed in the right direction. If you want to send me your html file as well as the css file, I'll help you clean it up quick-quick :)

Edited by Ezzaral because: Snipped email. Keep it on site.
Member Avatar for diceadmin

Hi Tinabina22,
At dice we never recommend sharing your CSS file or codes to anyone but professional support. You can read our support article on HTML hope that will help incase you feel like you still need to have an expert view do reply back.
SNIP

Edited by happygeek because: spam link deleted
commented: You need to read the site rules. -3
commented: which helps solve the problem, in what particular fashion?? +0
Member Avatar for tinabina22

What are the risk of me supplying my css code?

Member Avatar for Member #46692

What are the risk of me supplying my css code?

None! Unless you have passwords in there ;)

All I can see is a problem with not using .css properly.

Short learn css. A good site is 960gs and if you're doing responsive design try using the skeleton template (google it.)

Member Avatar for diceadmin

Well again it depends on how you look at it , if it is something unique that you have written or desgning then it can easly be replicated. Second some key tags can also be hide into your CSS content and that will help other to gain milage. Remm this is a competitve world.
Nothing against any one but wise man once said don't trust blindly.

Member Avatar for Ezzaral

: Then why are you bothering to post here on an open discussion board? These forums aren't here to collect private business.

If the questions and answers cannot be openly shared, they don't belong here at all.

Member Avatar for almostbob

start tv episode voiceover..
* Does insane paranoia automatically decrease once you get more than a month in or ten posts?
* will it always stay an unhelpful peanut,
* stay tuned for the next episode in "life of a scared mind"
..end voiceover

Tinabina, post what you need to get the help you need, css files will identify your class names, about the most unscary thing there could be, someone may discover you like blue hover states.
your css file is DL to every user who accesses your site, so there are no issues of security to answer, its already out there.
some people like to push their agenda, some people like to help, some manage to do both at the same time.
looks like everybody except one, is trying to help, doesnt take a roll of the dice to determine which one. generally post count and 'attaboys' go together, you can see the attaboys list by clicking the username
Ezzeral got the honorific 'most valued' and is a moderator (bit like the 'Thats god, he likes to pretend he's bill Gates' jokes) sits in the top10
Iamtwee is in the top20 on every list, problems solved, people who get attaboys, most posts,

the number of users- couple hundred thousands, you got 7 & 13 on your side

Corazon, not forgettin him(/her no sexism intended) is in the same logical progression, ex table - divs are positioned in css, need to see the css to find bugs
the history of those trying to assist you reflects their intent, they are trying to assist

Edited by almostbob
Member Avatar for ko ko

With my thought, better pick up a CSS framework such or 960.gs would help you to make your template easily with their default CSS properties in a short while. You can also try free CSS templates to download into your PC and customize those templates according to your needs. Or post your web site link here and then, no one need to download your CSS and everyone can see your CSS via their browser view source and they can also fix your CSS bugs and let you know what you need to do. Good luck. Table layout sucks yet! :)

Member Avatar for tinabina22 
Thank you everyone so much especially corazondeluz whom I have working with via email.  The problem I am now having is getting everything to center the way I want it.  I want the buttons (home, contact etc.) lined up on either the top or bottom and centered.  The photo on the home page I would like to get centered as well.  I already tried to post this but nothing happened so I'm going to try this again.  Here is my css code that (thank goodness) corazondeluz has helped me with.

@charset "utf-8";
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:2.00; padding:0;}              /* reset CSS */
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:2em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {horizontal-align:top;}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

#page_wrapper {
    width: 700px;
    margin: auto;
    text-align: center;
    padding: 20px;
}

a.bookmark:link, a.bookmark:visited {
    color: purple;
    text-decoration: none; /* takes away the underlining under the link */
    font-size: 14px;
}

a.bookmark:hover {
    text-decoration;
}

p.slogan {
    color: purple;
    font-weight: bold;
    font-size: 16px;
}

ul.menu {
    text-align: left;
    margin-left: 150px;
}

ul.menu li {
    padding-bottom: 20px;
}

ul.menu a:link, ul.menu a:visited {
    color: purple;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

ul.menu a:hover {
    text-decoration: underline;
}
Member Avatar for diceadmin

Way to go corazondeluz ... Thumbs up for your effort ..!!

All the best tina seems like you are in safe hands do post a link once your site is up :)

PS: I don't have any thing against anyone and I am definatly not trying to pitch a thing here ..Cheers ..!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.