Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts

    looking for suggestions for improving code...

    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

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Welcome.

    First off, I'd recommend getting rid of the tables. There shouldn't be any need for tables for layout (read this), 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 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 - great for picking up small errors like missing alt tags on images, and bigger errors like closing tags. Also use the CSS validator.

  • Users who have thanked SB65 for this post:

    ptsiii (11-09-2009)

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.....
    Last edited by ptsiii; 11-09-2009 at 08:37 PM. Reason: have done more research...

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The iframe could be a candidate for a php include.

    Struggling to see a yellow box....

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    haha - sorry if Im frustrating you



    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?

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Quote Originally Posted by ptsiii View Post
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    ptsiii (11-10-2009)

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptsiii (11-10-2009)

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by puffnstuff; 11-11-2009 at 12:29 AM. Reason: add the p.s.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •