Wickham

I did a Google search for 17 adobe layouts and found this:- http://www.designerstalk.com/forums/web-design/43399-standard-layouts-adobe.html It seems that they are a little less polite over there

I did a tracert on www.killersites.com and it showed 14 hops and 94ms UK to USA My own website showed 7 hops and 22ms all UK Numion in Netherlands for the speed test from UK was 9 hops and 25ms It was the UK business day but before the US business day so I'm surprised it was so much slower than from my own website. Numion shows the speed to/from its server of 4392kbps but it also does a simulated world-wide internet route downloading lots of icons from different countries which showed average 146kbps, but downloading your tutorial was coming in at 80 to 240kbps so I suppose it was achieving the same as Numion's average for outside UK.

I've just been looking at one of Stefan's PHP videos and the download speed was slow (there is a warning on the page); it was between 80 and 240kbps. I then tested my speed with Numion and the download speed was 4382kbps. I then tried one of my own videos up on one of my sites and it downloaded at 6500kbps; I tried again on Opera where it couldn't be in cache and it again downloaded at 6500kbps according to Netlimiter. Is the download speed built into the killersites video? The slow speed does mean that there are pauses when the display catches the download which gives time to think about what the video has been teaching, but it is a bit slow. I then tried to repeat the video thinking that it would have been cached, but it started another slow download. Am I missing something? How can it be stored to view at a faster speed later? It's occurred to me that my video only has one or two hops to me from my hosting service in UK but the killersites videos must have about 30 hops from USA to UK but the difference is much more than I expected.

It depends on what you want to achieve; it's sometimes correct, sometimes not. I left the form tags outside the table as Graeme had it, and my version works and validates. I think he had one form tag outside and the other inside. The most important rule is to close them "from the inside out" ie close the inner element before you close the outer one. Edit: I've just remembered - he had a lot of tags opened but not closed which included one of the form or table tags if I recall, which should always be done with XHTML although with very old HTML it was allowed to leave them unclosed. He had a form tag with the action, some p tags with hidden input boxes, then a table for the visible input boxes which is quite common to line up the boxes inside a form with the box description.

You may not find exactly that form of tutorial because no one knows what sort of page you want to make - two column? three column? side or top menu? I think one good way is to use Google to search for a "free website template" that is close to what you want, and simple if you are a beginner, and start editing it. When you make a bad mistake you can always go back to the template and start again.

The bbc image is just a plain color 994px wide, which means that it shows the image as side borders in a 1024px wide window without a scrollbar as the total width is less than 1024px minus the scrollbar. You want the inner content to be say 1006px wide and NOT show the borders in 1024px window, only if the window is bigger, which means that you cannot put it in a div with a width greater than 1024px without creating the horizontal scrollbar as you already said, so you could use it as a body background, which you don't want to do because of the gradient background outside the borders. Try this:- Make the body have your gradient background-image repeating across and down. Make the background div width: 100% and put the gray image 1026px wide in it as a background-image, centered and repeat-y only. Make a main container fixed width 1006px wide, centered, so that it fills a normal 1024px wide window inside a scrollbar and doesn't show the gray background, but if the window is wider than 1024px the div will be centered inside the 100% wide background div with the 1026px wide centered gray image and both will be inside the body gradient background.

The second type of sticky footer is item 1b on my link above, which leads here:- http://ww w.wickham43.net/footerfix.php You will see from the source code that the footer is OUTSIDE the container to be independent of it; while the container has min-height: 100%. The footer has a negative top margin to drag it back over the bottom of the container which has a space at the bottom as described next. There has to be a clearfooter div (empty) with the same height as the footer at the bottom of the container so that the footer doesn't overlap the content of the container if the window height is too small for everything. So in normal circumstances the container uses 100% of the height, the footer would be below it out of sight but is dragged back up by the negative margin-top into view. If the container uses more than the 100% height the footer just sits below it as normal.

What you seem to want is a "sticky footer" page. There seem to be two main types which don't need javascript:- 1. The footer sticks to the bottom of any viewport resolution and if the page content is longer, it is accessed by a vertical scrollbar and it comes up behind the fixed footer, so the footer is always visible. 2. The footer is fixed to the bottom of the viewport only when there is not much content on the page, so there is a space between content and footer, but when the viewport is made less high or the content is more, the footer stays below the content and comes into view with scrolling. I don't think you have have it combining both. See http://w'>http://w ww.visibility inherit.com/tools.php the 100% height with sticky footer and some of the three column layouts and http://w ww.wick ham43.net/headerfooterfix.php (delete spaces in urls).

I imagine that it's like Eric's because it uses position: absolute for #left_under, #center_under and #right_under but it's not fluid in the width. As you say, you can use a javascript width:expression which will work in IE6 (if the viewer has ActiveX enabled) or you can use min-width and max-width to put limits on the fluidity (but this won't work in IE6 unless you use width:expression just for IE6). Here's a completely different all-css method which works in modern browsers without ActiveX or javascript, but occasionally it needs a refresh to get the columns in the precise positions. It doesn't use position: absolute divs as a backing for the divs. Only the middle column is flexible. IE6 has to be a fixed width unless you add the width:expression ActiveX. http://w ww.wickham43.net/backgroundsfullheight.html

I don't follow what you are doing; if your background-image borders.gif is a fixed width (it has to be) of say 1024px, what happens in a resolution of 1280*1024? At 1280*1024 your div width: 100% will be 1280 less the side scrollbar but your background-image will still be only 1024px or whatever width it is, so you still need a background-image with a very wide width or repeat-x. An alternative is to use max-width: 1009px for your div and put the background-image in the body, then when the page is less wide than 1009px you won't see the background but over 1009px the body background will start to show, giving borders of a few px in 1024*768 resolution and more in greater resolutions. IE6 will have to have a fixed width of say 1009px and will scroll in smaller resolutions as IE6 does not support max-width. Remember that the vertical scrollbar varies in different browser between about 16px and 19px and can be varied by a viewer altering his browser settings.

Me neither. I've spent some time with Firefox with javascript enabled and disabled and clicked on the search box and the username and password boxes and seen nothing unusual. The code looks OK. What I did notice was that Firefox was using 99% CPU continuously when javascript was enabled and I had to kill Firefox.

Edit: read the bottom paragraphs. [Add the background to the li tag, not the "a" tag:- ul#navmenu li { background: red; display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ float:left; position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: grey url(bg1.gif) top left repeat-x ; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 100%; /*For IE*/ } As you can see I've added a red background but left the "a" tag as it was and with a simple html markup (as I don't have your markup) the li tags turned red.] Edit:- on further testing I found that in IE7 my red color showed (and light gray on hover) but in Firefox the grey shows normally (instead of red) and then light gray on hover. This suggests that my red color on the li tag should not be required as the grey is showing in Firefox where it is coded in the same style as the gradient image, so there seems to be a problem with the codes for IE7. In Firefox the gradient image should show if you have the correct path and will replace the grey color. I tried a background-image of mine and it showed in Firefox but not in IE7. THE ANSWER: Edit grey to gray; Firefox recognises the alternative spelling grey but IE7 does not. I never knew that because grey is supposed to be a correct alternative. When IE7 fails to recognise grey it blocks the image in the style.

It's actually nothing to do with voice-family, or at least not using it for that purpose, it's a hack to use a browser bug for a different purpose. IE browsers 5.0 and 5.5 use the first image, the .gif, but browsers which parse correctly will overwrite the .gif with the .jpg image because they ignore the \ and } in specific places when used with the voice-family attribute and apply the second image while IE5.0 and IE5.5 stop at the special \ and }. See http://www.ericmeyeroncss.com/bonus/trick-hide.html and http://tantek.com/CSS/Examples/boxmodelhack.html and http://archivist.incutio.com/viewlist/css-discuss/37121 which explain the hack when used in different circumstances. I don't think it's used much now, people prefer to use a conditional comment.

I suggest you try my solution again because it worked fine in IE6, IE7 and Firefox (an dprobably Safari and Opera).

I can get the solution in IE7 and FX with different codes, but can't find a common solution (so ? use inline conditional comments?). http://w ww.wickham43.com/forumposts/newseed-list-test.html

I have experimented with a span tag inside the li tag and a class on the li tag, both attempting to reposition the li tag further left, but it doesn't work. The spacing is obviously a browser default.

This now validates:- http://www.wickham43.com/forumposts/graemeweddings090113.html CSS file:- http://www.wickham43.com/forumposts/graemedefault090113.css There were so many edits it's easier to put my version online. You had the right idea with the lower clear div (although Susie offered an alternative) but to make it work you need to put it inside the closing tag of the #content div which was missing. The upper clear div does nothing, as Thelma said. You can still see most of the edits I made.

It simply showed it as code This happens if the file has been saved with a .txt filename extension, you tried to save it as say homepage.html but it's actually been saved as homepage.html.txt. Look at your file list with details shown so that you can see if it has the .txt extension, then rename it with only the .html extension and then open it in Firefox. In Windows Explorer we Right click "Open with" Notepad to get the Notepad version for editing but double click to open in a default browser or right click "open with" Firefox; I'm not sure if this is how Macs work. Learn HTML and CSS and then PHP (server-side processing). MySql will be useful to use with PHP for form processing or image storage and display. Javascript or the more modern Ajax for client-side processing is also useful. Dreamweaver is merely a way to code the above; you won't learn much using design view which produces over-complicated and repetitive code because it has to deal with every eventuality. Use the manual code facility and learn from that. Flash will be too complicated until you have mastered the above.

Very nasty situation, many homes don't have fireplaces to burn the furniture these days. Just remember James Bond and "shared bodily heat"; (that was with a Russian spy, Barbara Bach; perhaps there is one where you are!).

You can write conditional comments directly into the markup, but it isn't often done and I'm not sure if experts approve. (It's done for dropdown menus where IE6 has to have a small table inserted but other browsers don't need it.) However, your code would apply two images in IE6; (one wouldn't work but it would leave a space) so you have to insert several conditional comments, one for IE greater than IE6, one for NOT IE (other browsers) and then one for IE6, something like this although I haven't tested it:- Note the space between ie and 6. lte means less than or equal, gte means greater than or equal. The not ie code can be nested inside the if gte ie code as an alternative. See http://w ww.javascriptkit.com/howto/cc2.shtml where the nested ........ is NOT IE. Note the different start and ending.

OK a new thread has been started; check it and lock it.

Question:- I've got a site with 100 pages and I don't want to edit the menu on every page. Answer:- Form one page complete in the normal way with the menu and check that it validates and displays properly. Open up Notepad or a text editor (not Word) and cut the code that repeats in every page completely (as much or as little as you want, without doctype, html, head or body tags) and paste it into Notepad and save as an "include" file called menu.inc. You then have only one file to edit if the menu changes. Substitute the code you have cut out with PHP code <?php include ("menu.inc"); ?> in the main file and save it with .php filename extension instead of .html or .htm. Do the same with other main pages where the menu repeats. You can use .txt, .php, .html or .htm for the "include" file but it distinguishes it as an "include" file in your file list if you use .inc as the filename extension and it's even better if you put all "include" files in a different directory/folder. If you use a complete page as an "include" file with .html or .htm for the filename extension the final processed page will have two doctypes, two html tags, two head sections, etc. in an unusual place which is not a good idea. You can have different "include" files on the same main pages for header and footer and even use "includes" for the parts of the head section that repeat. The PHP code needs to be processed by a server before the result can be seen, either by the hosting service's server just before downloading or by a server like WAMP (which includes Apache) on your computer for local viewing. SHTML works the same way but the "include" file must have .txt filename extension and the main pages have the code and the .shtml filename extension. Check that your hosting service supports PHP or SHTML as free webspaces provided by ISPs usually do not. Stefan has 2 great video tutorials explaining exactly this in the PHP tutorials: PHP includes part 1 and PHP includes part 2. Not sure if this is in the videos - but it's generally a good idea, especially if the site is set up with sub-folders, to use the absolute paths pointing to the include files, and for anything the include itself points to - that can save a lot of wondering why something suddenly isn't showing up.

Thelma is right, it was a mess but I've edited quite a lot here:- http://www.wickham43.com/forumposts/thornappletemplate090112.html and in the css file http://www.wickham43.com/forumposts/thornapplestyle090112.css I added to the stylesheet style.css negative top or bottom sizes and position: relative to move the navbars closer to the content. Your doctype is incomplete and you have duplicated several bits of the head section. Some tags like param and meta do not have /> closing tags in HTML, just > without / I moved the #topnav closing tag, added alt="" to images, saved the file as html but encoding as ANSI not utf-8 as this raises a Byte-Order Mark warning. It now validates. Edit: I created new border images nav-bg-black.png and nav-bottom-border-black.png by changing the originals to negative and saving them as png again with transparency as they had white backgrounds before.

The "magic" button would be a link to another page. but you could use the first page as a template, use the same structure and stylesheet, just edit the text to a different language, then save under a different filename to be used in the link (and vice versa frorm the new page back to the old page).

Elements inherit the opacity from parents and you can't go back to 100% (no opacity). However, as Eric's link describes, if the elements not having the same degree of opacity are positioned over the top with position: absolute (ie not nested within the elements with opacity) they are isolated and therefore unaffected.