Converting from Table to DIV. How do I do it?

autopost · Jan 10, 2008

I am trying to take out all white lines and spaces between the navigation bar after converting from tables, just to see if it is easier (yes I did a backup before converting). 
 
here is the code that after converting: 
 
 
<div class="divtitle"> 
 
<a name="top"><img CLASS="imgtitle" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Resume-of-scott-mercer.gif" 
alt="Resume of Scott Mercer" 
/></a> 
 
<img CLASS="imgshadow" 
name="Top_shadow" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Top-shadow.gif" 
/> 
 
</div> 
 
<div class="navbar"> 
 
 
 
<img CLASS="imgnavintro" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif" 
alt="Introduction" 
/> 
 
 
 
 
 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Education.html" 
onmouseover="changeImages('Education', 'images/Education-over.gif');return true;" 
onmouseout="changeImages('Education', 'images/Education.gif'); return true;" 
> 
 
<img CLASS="imgnaved" 
name="Education" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif" 
alt="Education" 
/> 
</a> 
 
 
 
 
 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Employment_History.html" 
onmouseover="changeImages('Employment_history','images/Employment-history-over.gif'); return true;" 
onmouseout="changeImages('Employment_history','images/Employment-history.gif'); return true;" 
> 
 
<img CLASS="imgnavemploy" 
name="Employment_history" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif" 
alt="Employment History" 
/> 
</a> 
 
 
 
 
 
 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Personal_Qualities.html" 
onmouseover="changeImages 'Personal_qualities_button', 'images/Personal-qualities-over.gif'); return true;" 
onmouseout="changeImages 'Personal_qualities_button', 'images/Personal-qualities.gif');return true;" 
> 
 
 
<img CLASS="imgnavper" 
name="Personal_qualities_button" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif" 
alt="Personal Qualities" 
/> 
</a> 
 
 
 
 
 
 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html" 
onmouseover="changeImages('References_button', 'images/References-over.gif'); return true;" 
onmouseout="changeImages 'References_button', 'images/References.gif'); return true;" 
> 
 
<img CLASS="imgnavref" 
name="References_button" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" 
alt="References" 
/> 
</a> 
 
</div> 
 
 
 
 
 
 
 
<div class="divnavspacer"> 
<img class="imgnavspacer" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif" 
/> 
 
</div> 
 
 
 
 
 
<div class="curve"> 
 
<img class="imgcurve" 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Curve-under-buttons.gif" 
/> 
 
</div> 
 
Please find attached the after conversion screendumpThis is what it looks like before converting (see Attachment). This is in table format and this is how I want it to look 
 
Thanks in advance for helpingYou appear to be using xhtml, which will add 'spaces' if they appear in the script. 
Change containers containing images: 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html"><img class="imgnavref" name="References_button" src="images/References.gif" alt="References" /></a> 
Add to css: img {vertical-align: bottom;} 
If this doesn't solve the problem a full script/link would be helpful. 
CLASS should be lowercase.Add to css: img {vertical-align: bottom;} 
 
That fixed half the problem. Thanks a millon 
 
I still have a problem with spaces left and right of the navigation buttons (see attachment) 
 
I desided that if vertical align fixes the problem verticaly, I thought that text-align would fix it horizontaly. but not so 
 
anyway thanks for your helpJoin all the A and IMG tags into one line.That did not work, and I am not surprised either. with HTML only one space in text will show in browser but not more then one unless you use a tag, tag or whatever, but not in between tagsYou do not "convert" from tables to divs. 
 
You start over by writing semantically meaningful markup.smercer wroteThat did not work, and I am not surprised ... either. 
It works on the meager snippet of code you gave. You are apparently using xhtml where 'spaces' are important. 
If you are not prepared to give the css then further help is pure guesswork.your right again Fang. See Attachment 
 
thanks again everyone including FangThis is what it looks like now. I have put in a background that hides the obvious but the background is out of place and can be seen where it should not be. I would like the navigation buttons together with out the space in between.I've made a few shanges to index.html 
Added a DTD, changed a few entities(special characters), removed some hidden characters added by your editor, added script attribute type, and added some css. 
Your page is now html valid, and if you make a few minor changes to your css, valid css. 
I tested the layout with 1280.css and apart from a small black line at the end of the first image(background image?), there are no problems. 
 
Try to do the layout without tables and use one css, not one for each screen size.Thanks Fang, 
 
You did an amazing job. I got the black line out with photoshop.

Converting from Table to DIV. How do I do it?

autopost

Guest