dsonesuk

How are you creating html documents, Notepad? are you saving using encoding UTF-8? also try <img src="file:///C|/Users/Len0/Documents/HTML%20Tutorials/goose.bmp" alt="This is a bmp picture" />

normally jquery is written as $(document).ready(function(){ }); but sometimes using $, causes a conflict with other scripts (mootools is one), so jQuery.noConflict(); was created, you now replace $ with jQuery jQuery.noConflict(); jQuery(document).ready(function(){ }); if you use without first declaring 'jQuery.noConflict();' it does not recognise it as being used in place of '$' and it gives a undefined error.

make backup of html and css, replace original html with below <div id="menu-bar"> <ul> <li><a href="http://www.roxannedavisphotography.com">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Bands</a> <ul> <li><a href="http://www.roxannedavisphotography.com/DespairsRay.html">D'espairsRay</a></li> <li><a href="http://www.roxannedavisphotography.com/Versailles.html">Versailles</a></li> <li><a href="http://www.roxannedavisphotography.com/Queensryche.html">Queensrÿche</a></li> <li><a href="http://www.roxannedavisphotography.com/Love_Said_No.html">Love Said No</a></li> <li><a href="http://www.roxannedavisphotography.com/Soundevice.html">Soundevice</a></li> </ul> </li> <li><a href="http://www.roxannedavisphotography.com/seniors.html">Seniors</a></li> <li><a href="http://www.roxannedavisphotography.com/wedding.html">Wedding</a></li> <li><a href="http://www.roxannedavisphotography.com/people_portraits.html">People & Portraits</a></li> <li><a href="http://www.roxannedavisphotography.com/pets.html">Pets</a></li> <li><a href="http://www.roxannedavisphotography.com/commercial.html">Commercial</a></li> <li><a href="http://www.roxannedavisphotography.com/graphics.html">Graphics</a></li> </ul> </li> <li><a href="#">Fine Art Prints</a> <ul> <li><a href="#">Scenic</a></li> <li><a href="#">Wildlife</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Miscellaneous</a></li> </ul></li><li><a href="#">Price Lists</a> <ul> <li><a href="http://www.roxannedavisphotography.com/price_list.html">Session & Prints Price List</a></li> <li><a href="http://www.roxannedavisphotography.com/wedding_price_list.html">Wedding Price List</a></li> </ul> </li> <li><a href="http://roxannedavis.zenfolio.com/">Customer Order Page</a></li> <li><a href="http://www.roxannedavisphotography.com/profile.html">About the Owner</a></li> <li><a href="http://www.roxannedavisphotography.com/contact.html">Contact Me</a></li> </ul></div> replace original css with body{ padding:0px; background: #000000; font-size: 12px; color: white; font-family: 'Pontano Sans', sans-serif; } #menu-bar, #menu-bar ul, #menu-bar li{font-family: 'Pontano Sans', sans-serif; font-size:18px; text-indent:0; padding:0; margin:0; } #menu-bar li{ white-space:nowrap; list-style: none; position: relative; float: left; /* this makes the lists to appear horizontally */ height: 50px; text-align: center; background-color: #000000; line-height: 50px; padding: 0 22px 5px; padding-bottom:5px; } #menu-bar li:last-child {padding:0; } #menu-bar li li, #menu-bar li li:last-child{ width:100%; text-align: left; padding-left:25px; padding-right:0px; } #menu-bar li a{ display:block; /*added by dsonesuk */ text-decoration:none; color: white; } #menu-bar li:hover{ background-color:#000000; } #menu-bar ul ul{ position:absolute; /*added by dsonesuk */ width:225px; /*added by dsonesuk */ top:50px;/*amended by dsonesuk */ /*visibility:hidden;*/ /*background-image:/graphics/menu_background.jpg;*/ } #menu-bar ul li:hover ul{ visibility:visible; background-color:#CC9999; } #menu-bar ul ul ul{ top:0px;} /*reset positon for all sublevels below sublevel 1*/ #menu-bar ul ul li a {display:block; width:100%; height:100%; line-height:50px; float:none; } /*for every new sublevel add preffix ul (ul li:hover li ul = sublevel 1, ul ul li.hover li ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead )*/#menu-bar ul ul,#menu-bar ul li:hover li ul, /*sublevel 1*/#menu-bar ul ul li:hover li ul /*sublevel 2*/{left:-999999em;} /*xxxxxxxxxxxxx set hover xxxxxxxxxxxxx*/#menu-bar ul li:hover,#menu-bar ul li ul{z-index:99;} /*prevents overlap from neighbouring images and borders*/ #menu-bar ul li:hover, #menu-bar ul ul li a:hover, #menu-bar ul ul li:hover {background-color:#333;} /*for every new sublevel add prefix ul (ul li:hover ul = sublevel 1, ul ul li:hover ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead, THESE MUST BE DONE SEPARATE as below and not grouped together )*/ /*sublevel 1*/#menu-bar ul li:hover ul{left:0px;} /*sublevel 2*/ #menu-bar ul ul li:hover ul {left:0;margin-left: 250px;} /*sublevel 3*/#menu-bar ul ul ul li:hover ul {left:0;margin-left: 250px;} Here ends the difficult, copy and paste lesson for today.

You can get same result using unordered list element, with position: absolute elements <!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><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">ul,li {margin:0; padding:0; text-indent: 0; list-style-type:none;}#outer {height: 500px;width: 600px;margin-right: auto;margin-left: auto;position:relative;}.parent {height: 500px;width: 600px;border: 1px solid #F00;position:relative;}.elder-sibling {background-color: #000;height: 200px;width: 200px;position: absolute;color: #FFF;top:0;left:0;}.younger-sibling {background-color: #00F;height: 100px;width: 100px;position: absolute;top: 250px;color: #FFF;z-index:20;}#b2 {top:0; left:0; width:200px; height:200px; z-index:30;}#b1 {top:0; left:0; width:100%; height:100%; z-index:10;}ul li b { display:block; height:100%; width: 100%; position:absolute; z-index:0;}ul li li b { height:100%; width: 100%;}ul li li li b { height:100%; width: 100%;}ul.younger-sibling li, ul.elder-sibling li{height: 100%; width:100%; z-index:0;}#b1:hover + b {background-color:#FFFFFF;}#b2:hover + b { background-color:#FFFFFF;}ul li:hover{background-color:yellow;}ul li li:hover{background-color:red;}ul li li b:hover{background-color:#000;}ul li li li b:hover{background-color: blue;}</style></head><body><ul id="outer"><li class="parent"><b id="b1"> </b><b> </b><b id="b2"> </b><b> </b> <ul class="elder-sibling"> <li><b>elder-sibling</b> <ul class="younger-sibling"> <li><b>younger-sibling</b></li> </ul> </li> </ul></li></ul></body></html>

At present there's no way to target preceding sibling elements OR parent element in CSS, for a succeeding sibling element yes! with '+' or '~', this could be achieved using JavaScript/Jquery though.

You Have major validation errors, misplaced <center> and </center> tags, which should be corrected body{ padding:0px; background: #000000; font-size: 12px; color: white; font-family: 'Pontano Sans', sans-serif; } #menu-bar, #menu-bar ul, #menu-bar li{font-family: 'Pontano Sans', sans-serif; font-size:18px; text-indent:0; padding:0; margin:0; } #menu-bar li{ white-space:nowrap; list-style: none; position: relative; float: left; /* this makes the lists to appear horizontally */ height: 50px; text-align: center; background-color: #000000; line-height: 50px; padding: 0 22px 5px; padding-bottom:5px; } #menu-bar li:last-child {padding:0; } #menu-bar li li, #menu-bar li li:last-child{ width:100%; text-align: left; padding-left:25px; padding-right:0px; } #menu-bar li a{ display:block; /*added by dsonesuk */ text-decoration:none; color: white; } #menu-bar li:hover{ background-color:#000000; } #menu-bar ul ul{ position:absolute; /*added by dsonesuk */ width:225px; /*added by dsonesuk */ top:50px;/*amended by dsonesuk */ /*visibility:hidden;*/ /*background-image:/graphics/menu_background.jpg;*/ } #menu-bar ul li:hover ul{ visibility:visible; background-color:#CC9999; } #menu-bar ul ul ul{ top:0px;} /*reset positon for all sublevels below sublevel 1*/ #menu-bar ul ul li a {display:block; width:100%; height:100%; line-height:50px; float:none; } /*for every new sublevel add preffix ul (ul li:hover li ul = sublevel 1, ul ul li.hover li ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead )*/#menu-bar ul ul,#menu-bar ul li:hover li ul, /*sublevel 1*/#menu-bar ul ul li:hover li ul /*sublevel 2*/{left:-999999em;} /*xxxxxxxxxxxxx set hover xxxxxxxxxxxxx*/#menu-bar ul li:hover,#menu-bar ul li ul{z-index:99;} /*prevents overlap from neighbouring images and borders*/ #menu-bar ul li:hover, #menu-bar ul ul li a:hover, #menu-bar ul ul li:hover {background-color:#333;} /*for every new sublevel add prefix ul (ul li:hover ul = sublevel 1, ul ul li:hover ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead, THESE MUST BE DONE SEPARATE as below and not grouped together )*/ /*sublevel 1*/#menu-bar ul li:hover ul{left:0px;} /*sublevel 2*/ #menu-bar ul ul li:hover ul {left:0;margin-left: 250px;} /*sublevel 3*/#menu-bar ul ul ul li:hover ul {left:0;margin-left: 250px;}

?? What do you mean transfer/import 3d model? from 3d application like 'truespace', 'Swift3D', long time since i used these, but they just created a 3d model and you save it as a flash movie, might have changed since then, to use slider rotate etc.OR scan 3d model of plane for example, which sounds expensive, honestly don't know.

??? iconbar or iconslist, anyway changed it to iconbar for this, in this situation it would be easier to us jquery to hide the counter when icon hovered over $(document).ready(function(){$("#iconbar").hover(function(){$("#unread_container").hide()},function(){$("#unread_container").show();});}); The other way would be apply position: relative; to li elements then remove the image from anchor link element, and place it beside it so anchor element it is now empty, you then make the anchor links the same size as images, and use position: absolute to place these above the respective image, AND the counter by using a higher z-index,

Give the container position: relative;, with icon background-image, with counter inside overlapping icon, create anchor and make it display: block; position: absolute; top:0; left: 0; right:0; bottom:0;, this will overlap both icon image and counter, but you may have to adjust z-index; to fully overlap.

Right!, because different browser show different borders, and IF you are allowed too, I suggest using cellspacing="1" with a background colour (black for instance) to show between spacing, the problem with this is you have to use, for instance a white background colour for each cell, but the results are consistent in all browsers, but you still end up with double border on bottom and left of five row table.

The only way I can see this being done without the use of css, and with text appearing in blank left hand side of 5 cell rows, is by using two tables, one without borders on left, obviously the other with borders on right. You will!, end up with double borders showing in some browser, you may be able to use 'frame' attribute to help remove non required borders from showing in these browsers. IT is very much harder to achieve a design like this, that will look identical in all browsers, without the use of css.

You don't require two tables, you just need to use border-collapse: and apply/remove borders to cells to achieve the same end result.

Usually you don't lose quality shrinking, its usually the other way round, when you enlarge a small pixel image to a larger size it ends up pixelated and colour blurs from on pixel to the next. All you need to do is get the proportion correct, when he's finished, use high res for scanner while scanning the images, the file size will be huge, but then you just reduce it in size and res to go into you website to the quality you are happy with.

150px = 3.96875cm is exactly right, what you could do is draw these boxes in a graphics program, print it out and compare.

It searches the whole domain and its sub pages, so you just need the domain name, you type in you keyword, it searches for listing in search engines if found it will show rank IF lower than ranking 200, and then list the url where it was found as inhttp://www.DomainName.com/dsonesuk.html so stop moaning.

A free rank checker, which i use is seobook.com rank checker, you have to register, you enter your domain, then keyword/s and then click start, it then searches through the major search engine google.com, google.co.uk, bing, yahoo etc and list your ranking in each.

page names should use hyphens /news-of-keyword.html AND NOT underscore news_of_keyword.html, google is able to separate hyphenated words so it will search by 'news', 'of', 'keyword' compared with search just 'news_of_keyword' which will return near zero results. The same also goes for image filenames my-keyword-01.jpg and my-keyword-02.jpg, you can also use the keyword in <h2> and <h3> as well but don't over do it.

Works fine on mine, as soon as i reduce the height of table_inner div so the data content is greater than that element height, so can scroll the data content, and the header is fixed!

Must be my PC and browsers then? getting a lot of that here recently, guess I'm a lucky chappy, cause the headers fixed on mine.

??? I think you will they are fixed, IF the content data exceeds the height set for .table_inner

The only way I could get this to work cross browser was this method <!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><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.table_wrapper {width:1024px; overflow-x:auto;}.table_inner{height:500px; overflow-y:auto; width:2021px;padding-bottom:60px;} .tloc { width: 110px; } .tsite{ width: 110px; } .tbusunit { width: 180px; } .titem { width: 200px; } .taction { width: 200px; } .tspecial { width: 130px; } .tFM { width: 50px; } .tcompliant { width: 90px; } .tdatecomp { width: 120px; } .tdatereview { width: 120px; } .tfreq { width: 100px; } .tremedial { width: 100px; } .tcnw { width: 120px; } .tcomments { width: 160px; } .tinforce { width: 180px; } .tlastchange { width: 180px; } .tnotes { width: 180px; }</style><!--[if lte IE 7]> <style> .table_wrapper{overflow-y:hidden;} </style><![endif]--><!--[if IE 8]> <style> .table_inner table{ padding-bottom:60px;} </style><![endif]--></head><body><div class="table_wrapper"><table width="2004" border="1" cellspacing="0" cellpadding="0"> <tr> <td class="tloc">first head</td> <td class="tsite">head</td> <td class="tbusunit">head</td> <td class="titem">head</td> <td class="taction">head</td> <td class="tspecial">head</td> <td class="tFM"> </td> <td class="tcompliant">head</td> <td class="tdatereview">head</td> <td class="tfreq">head</td> <td class="tremedial">head</td> <td class="tcnw ">head</td> <td class="tcomments">head</td> <td class="tinforce">head</td> <td class="tlastchange">head</td> <td class="tnotes">last head</td> </tr> </table> <div class="table_inner"> <table width="2004" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#CCFFCC"> <td class="tloc">first rec</td> <td class="tsite"> </td> <td class="tbusunit"> </td> <td class="titem"> </td> <td class="taction"> </td> <td class="tspecial"> </td> <td class="tFM"> </td> <td class="tcompliant"> </td> <td class="tdatereview"> </td> <td class="tfreq"> </td> <td class="tremedial"> </td> <td class="tcnw "> </td> <td class="tcomments"> </td> <td class="tinforce"> </td> <td class="tlastchange"> </td> <td class="tnotes">last rec</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></div></div></body></html> With the usual conditional fixes for crappy IE. Note: not tested in IE9.

Or just use normal js of jquery formula window.onload = function(){var tdChild = document.getElementsByTagName("td");for(var i=0; i<tdChild.length; i++){ if(tdChild[i].getAttribute("itemprop")=="productID") { alert(tdChild[i].innerHTML); }}}

if you want to find that custom attribute, you might want to consider jquerys each() and attr() <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){$("td").each(function(){ if($(this).attr("itemprop")=="productID") { alert($(this).html()) } });});/*--*//*]]>*/</script>

Geees, i thought we had finally got rid of this posting with no body, and then DAMN! got me doing it now. Please terminate this posting.

Oh my Gosh you are right! the background colours, solid borders, not to mention dashed borders, and there's totally the wrong number of images, wrong background(well there's no background actually) all would make this code unusable. if only there was a way to remove these, and restrict the number of images to be resized and reposition? looks like a job for Mr Picky! enter YOU.