...
PDA

looking for suggestions for improving code...

ptsiii
11-09-2009, 02:33 AM
I know that this site could/should be done differently (better).

I am looking for someone to take a quick look over my code and give me some suggestions as to how to better accomplish what im trying to do. The page basically looks like I want it to look but is extremely inflexible.

With my limited knowledge this was the only way I knew how to put it together. Its a bit of a mess....

Any help would be greatly appreciated.

the site is:

www.bootsandpants.com/bts


<html>
<head>
<title>BTS_Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-image: url(images/BTSbkrnd.jpg);
}
#Table_01 tr td table tr td p {
font-size: 11px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #1E0E00;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/homeOn.png','images/galleryOn.png','images/menuOn.png','images/PlaceAnOrderOn.png','images/contactOn.png','images/testimonialsOn.png','images/faqOn.png','images/aboutChefOn.png','images/friendsOn.png')">
<p>
<!-- ImageReady Slices (BTS_Layout.psd) -->
</p>
<table width="862" height="678" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5" rowspan="2">
<img src="images/logo.png" width="336" height="147" alt=""></td>
<td colspan="6">
<img src="images/BTS_Layout_02.png" width="458" height="107" alt=""></td>
<td>
<img src="images/BTS_Layout_03.png" width="67" height="107" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="107" alt=""></td>
</tr>
<tr>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','images/PlaceAnOrderOn.png',1)"><img src="images/PlaceAnOrderOff.png" name="Image28" width="75" height="84" border="0"></a></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','images/contactOn.png',1)"><img src="images/contactOff.png" name="Image29" width="75" height="84" border="0"></a></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','images/testimonialsOn.png',1)"><img src="images/testimonialsOff.png" name="Image30" width="73" height="84" border="0"></a></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/faqOn.png',1)"><img src="images/faqOff.png" name="Image31" width="76" height="84" border="0"></a></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/aboutChefOn.png',1)"><img src="images/aboutChefOff.png" name="Image32" width="91" height="84" border="0"></a></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','images/friendsOn.png',1)"><img src="images/friendsOff.png" name="Image33" width="68" height="84" border="0"></a></td>
<td rowspan="3">
<img src="images/BTS_Layout_10.png" width="67" height="516" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/BTS_Layout_11.png" width="61" height="476" alt=""></td>
<td>
<img src="images/BTS_Layout_12.png" width="16" height="44" alt=""></td>
<td><a href="www.brooklyntreatshoppe.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','images/homeOn.png',1)"><img src="images/homeOff.png" name="Image25" width="91" height="44" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','images/menuOn.png',1)"><img src="images/menuOff.png" name="Image27" width="80" height="44" border="0"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','images/galleryOn.png',1)"><img src="images/galleryOff.png" name="Image26" width="88" height="44" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td height="433">
<img src="images/BTS_Layout_16.png" width="16" height="432" alt=""></td>
<td colspan="9" bgcolor="#FDDAAC"><table width="717" height="414" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="259" height="18" align="center" valign="middle" bgcolor="#FFD9A8">&nbsp;</td>
<td width="15" rowspan="3"><p>&nbsp;</p></td>
<td width="429" rowspan="3"><p>Brooklyn Treat Shoppe is a dessert catering company that specializes in flavor combinations that bring back memories of childhood and a sense of nostalgia.&nbsp;</p>
<p>As your internet bakery and &lsquo;the' online hot spot for sweet treats, we offer personal touches to any event. </p>
<p>Our mission is to create fantastic finishing touches where we thrive on flavor combinations that make you think of your childhood, a comfortable place or a special holiday.</p>
<p>Sculpted cake masterpieces, or Cake Art, are our specialty but we also love to make classic cakes, miniature desserts and specialized cupcakes. And, yes, we do Wedding cakes too!</p>
<p>Heart and soul goes into every treat that makes its way out of our door - large or small. </p>
<p>We are here to please, the Brooklyn way!<br>
Have an idea? We'll make it happen.</p>
<p>Do you have an event that needs a dessert? <br>
Need a cake?</p>
<p>Contact us!<br>
718-866-5333<br>
customer_service@brooklyntreatshoppe.com</p></td>
<td width="14" rowspan="3">&nbsp;</td>
</tr>
<tr>
<td height="133" align="center" valign="middle" bgcolor="#FFD9A8"><iframe src ="http://www.bootsandpants.com/bts/news.html" width="90%" height="90%">
<p>Your browser does not support iframes.</p>
</iframe></td>
</tr>
<tr>
<td height="263" align="center" valign="bottom"><img src="images/HomepagePics.png" width="259" height="225" align="middle"></td>
</tr>
</table></td>
<td>
<img src="images/spacer.gif" width="1" height="432" alt=""></td>
</tr>
<tr>
<td>
<img src="images/BTS_Layout_18.png" width="61" height="54" alt=""></td>
<td colspan="10">
<img src="images/BTS_Layout_19.png" width="733" height="54" alt=""></td>
<td>
<img src="images/BTS_Layout_20.png" width="67" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
SB65
11-09-2009, 08:18 AM
Welcome.

First off, I'd recommend getting rid of the tables. There shouldn't be any need for tables for layout (read this (http://www.hotdesign.com/seybold/)), and I think they clutter up your code and make it more complicated to maintain.

I'm not sure of the need for the iframe here either, since it looks like it's just displaying "ordinary" data.

Next, your page looks ugly in IE6 because IE6 has no native support for transparent png files. Have a look here (http://www.twinhelix.com/css/iepngfix/) or Google IE6 png transparency for possible fixes.

You have no doctype on your pages. The absence of this causes browsers to revert to "quirks mode", aimed at pages using old html. This is quite likely to cause inconsistent display in different browsers, particularly IE.

Finally, validate your pages using the W3C validator (http://validator.w3.org/check?uri=http://bootsandpants.com/bts/) - great for picking up small errors like missing alt tags on images, and bigger errors like closing tags. Also use the CSS validator (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbootsandpants.com%2Fbts%2F&profile=css21&usermedium=all&warning=1&lang=en).
ptsiii
11-09-2009, 05:13 PM
Thank you for the welcome and the advice. I knew that I should be doing this in CSS and not in tables, that was the reason for my post...

I was using the iframe because my client wanted a "news" page that she could update herself, I figured she could just update the page that is in the iframe without affecting the mainlayout of the site.

now.. some more questions....

Im not exactly sure how to go about what Im trying...

I can set the background with css... then how do i get the floating yellow box with the drop shadow... ideally I'd like to make this expandable depending on the content of that box....? how then could I apply the shadows?

Im not looking for anyone to do my work for me, just point me in the right direction to teach myself how.... I just don't know what to look for.

Thanks Again.



would this be something I could achieve using layered divs? I have read about using z-index css.....
SB65
11-09-2009, 07:36 PM
The iframe could be a candidate for a php include (http://www.w3schools.com/PHP/php_includes.asp).

Struggling to see a yellow box....:confused:
ptsiii
11-09-2009, 09:05 PM
haha - sorry if Im frustrating you :)

http://www.bootsandpants.com/bts.jpg

so what i was referring to as the yellow box, is the table that i currently have...

Ok... i have been searching and reading all day....

should I use one div that contains the NavBar and the content and another div layered on top (with z-index) containing the logo, and style all of it with external css?

how to handle the drop shadow?

can I make a div elastic so that it is as long as its contents dictates?
rnd me
11-09-2009, 11:53 PM
should I use one div that contains the NavBar and the content and another div layered on top (with z-index) containing the logo, and style all of it with external css?

how to handle the drop shadow?

can I make a div elastic so that it is as long as its contents dictates?

standard divs i use:
wrapper - on everything in the body
header - static header
logo - inside header
nav - navigtion (between header and content)
content - the actual contents and sub-divs
footer - contact info, privacy notices, etc...

drop shadow is still best done with images.
if you don't care about everyone, it can be done in CSS-only for about 10% of existing browsers.

you can make divs elastic. set width to 100%, use margin-left and margin-right to squeeze the visual width based on a container, or use display:inline, or display: inline-block to stretch based upon contents.

in general, make sure the page HTML is logical and usable when viewed without CSS, then worry about making it pretty.

When you start adding tags to the content just to use CSS, you take away from the semantic structure of the page.
ptsiii
11-10-2009, 02:03 AM
how would I use images to make the dropshadow without using a table?

If im making the div elastic then how would i make a shadow that could stretch with the div when it grows?
Excavator
11-10-2009, 02:15 AM
Hello ptsiii,
Have a look at this demo - http://nopeople.com/CSS/slider/index.html
Look at the source to see how it's done.
ptsiii
11-10-2009, 08:59 PM
ok folks,

I think I have enough information to put a page together better. Thank you all so much for the helpful advice and pointing me in the right direction.

I'll start a new thread once i have rebuilt the page and run into new problems.


thanks again.
puffnstuff
11-10-2009, 11:25 PM
I'm no expert, just a beginner myself with CSS.

Just wanted to pop in to say that I really like the simplicity and interest of the site.

The comments are correct about how it looks in IE.
If I were you, I'd not worry too much about the drop shadow right now. So many browsers won't even see it, and as the background is fairly dark anyway, the shadow is barely noticeable.

Work on the other things first, getting it to display using CSS, and replacing your tables with DIVs. You can also use CSS to do the mouseover effects on your menu items, and then you can get rid of all that javascript, too.


p.s. the main box color looks more like "peachy pink" to me than yellow, but that might be due to different monitors, although I've looked at it on 3 monitors.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum