Wickham

You can use Browsershots http://browsershots.org/ Remember to add more time after every 27 or 28 minutes as it will stop processing all your browser choices after 30 minutes otherwise. You could download ietester http://ietester.en.softonic.com/ Personally, I construct websites in Firefox, test in IE9, then IE8, then IE7 then IE6, then at the very end on Google Chrome and Opera and Safari. However, I often don't need to test Chrome, Opera and Safari as if a site works on Firefox it's usually OK on them. Dreamweaver is known to be no good as a browser. I don't have it as I code manually.

My reply was about link (or hyperlink) states where you can have different styles for link (normal unvisited), visited, hover and active (as you press the mouse button). Additionally you can have more than one class for a tag (but only one ID beginning with #), with a space between them like this:- CSS .type1 { background: #eee; } .here:link { color:red; text-decoration:underline; } .here:hover { color:#00F; } HTML markup:- <p>You can download a joining form <a class="here type1" href="../text/joining.doc">here</a>.</p>

Why not add a link style:- .here:link { text-decoration:underline; } .here:hover { color:#00F; } HTML <p>You can download a joining form <a class="here" href="../text/joining.doc">here</a>.</p> :link must be coded before :hover You can also add :visited and :active The usual order is :link :visited :hover :active

It's called pagination. Google Pagination javascript. Here's one link using jQery (a type of javascript) for client-side pagination:- http://www.script-tutorials.com/how-to-create-easy-pagination-with-jquery/ It can also be server-side pagination, see the discussion on whether to use client-side or server-side:- http://java.dzone.com/articles/pagination-server-side-or-clie

Yes, F12 in IE9 shows browser mode and document mode for IE7 and IE8.

There's probably a Killersites video tutorial (Killersites Network, top right) or have a look at this:- http://www.wickham43.net/generaladvice.php#backgroundimages or http://www.w3schools.com/cssref/pr_background-position.asp

A frequently asked question, but quite difficult to deal with if you have fluid width columns. However, you have a fixed width #wrapper with two floated divs inside, so the easiest method is "faux-columns" which means creating an image for the wrapper width x say 5px high with the two colors of the columns (and any borders between them if you want) and using repeat-y to repeat that background-image down behind the two columns. See http://www.wickham43.net/firefoxbackground.php#faux-columns Item 19 is another solution for fixed width columns. Items 16 to 19 on the same link show other solutions, some are for fluid width columns.

People layout stylesheets differently, but there should be some logic and neatness to them. Here's one using Meyer's Reset:- http://www.broadchalke.info/broadchalkehtml5.css This one dates from 2005 before I knew about reset styles, but it shows the order that I used:- http://www.wickham43.net/tutorial.css This one http://www.broadchalke.info/history/css/history.css has a shorter version of Meyer's reset, based on what shelfimage posted on the old Killersites forum http://www.killersites.com/mvnforum/mvnforum/viewthread_thread,10970 The Meyer reset is OK but it has more than I usually need, so I sometimes cut bits out of it.

It's often recommended to start with reset styles like all those shown in Meyer's reset:- http://meyerweb.com/eric/tools/css/reset/ Copy those to the top of your stylesheet and it will make all browsers work the same way, getting rid of their different default margins, padding, etc. Themn you will have to code the styles for your page. As you have made all margins and padding 0 using the reset, you will have to add back margins and padding where you want them. I normally start with the body, then all the h1 to h6 and p tags, then the divs, ul tags and other main elements including working from the top of the page with header, navbar, content and footer, then link styles and special menu styles, perhaps for a dropdown menu.

Here are two tutorials:- http://www.webdeveloper.com/forum/showthread.php?t=63946 http://www.htmlhelpcentral.com/messageboard/showthread.php?8002-Hyperlink-Select-Menu but it's not usual to use select boxes to form links, in case someone has javascript disabled.

Your hosting service should have given you their DNS numbers (two sets of numbers, one primary and one secondary). You then open your domain name provider's website account with your username amnd password and change the temporary DNS numbers to the ones given to you by your hosting service. Click OK or Save and wait at least a few hours, maybe a day for this new info to get around the internet before you can see your website in a browser. Assuming that you have used ftp to upload your files to the file manager of your hosting service. See some advice here:- http://www.wickham43.net/generaladvice.php#hosting

This seems to be a "equal height columns" question. If you have a fixed width for the columns, the "faux columns" method is probably the easiest. You create an image 5px high with the background colors (if any) and the border(s) between the columns and use repeat-y in a containing div to repeat it down both columns. See item 18 here:- http://www.wickham43.net/firefoxbackground.php#faux-columns OR use position: absolute divs behind your columns as this example:- http://www.wickham43.net/backgroundsfullheight2colabsolute.html There are other methods for fluid width columns. See Items 16 to 19 in the first link which show other solutions.

You can use JavaScript (or jQuery) to change content on the same page, but I don't know the code for that. You will have to Google for it. This depends on the viewer having JavaScript/ActiveX enabled, which some people can't use if their IT department has disabled it. You can also use PHP which doesn't depend on JavaScript/ActiveX. See items 3 or 4 on this page http://www.wickham43.net/showform.php#phpnewsbox where PHP shows different content after a link has been clicked. The links could be thumbnail image links. I think it should work if videos are coded into the "include" files that show on the same page, but I haven't tested.

Is this it? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#999; } .secondary ul { list-style:none; margin:0; padding:0; /*width:20%;*/ /*float:left;*/ background-color:#CCC; display:inline; } .secondary { float: left; width:20%; background-color: yellow;/*#CCC;*/ } .secondary ul a { color:white; text-decoration:none; margin-left:1.22em; } .wrapper { width:58%; margin: 0 auto; background: teal; } .header { background-color:#333; height:110px; padding:5px; } .header h3 { color:white; text-shadow:3px 3px 3px #000; margin: 1em 0 0 2em; } .header p { color:white; font-size:12px; margin: 1em 0 0 2em; } .content { margin-left: 20%; margin-right: 20%; background-color:white; } .thirdcol { background: skyblue; float: right; width: 20%; } .footer { clear: both; background-color: green; } --> </style> </head> <body> <div class="wrapper"> <div class="header"> <h3>myBlog</h3> <p>Blog site</p> </div> <div class="secondary"> <ul class="nav"> <li><a href="#">blog</a></li> <li><a href="#">About</a></li> <li><a href="#">contact</a></li> <li><a href="#">download</a></li> <li><a href="#">blog</a></li> <li><a href="#">tagGroup</a></li> <li><a href="#">checkList</a></li> </ul> </div> <div class="thirdcol"><p>Third Column</p></div> <div class="content"> <div class="primary"> <!--<div class="primary">--> <h3>Lorem ipsum</h3> <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare. Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula. </p> </div></div><!--</div>--> <div class="footer"><p>Footer</p></div> </div><!--end of .wreapper--> </body> </html> First code the float:left and float: right cols, then code the middle (.content) column with no width and no float but add side margins equal to the left and right cols like I have. Here are some variations of layouts, some with floats. http://www.wickham43.net/threecolumns.php I used item 9 in my code above (with % instead of px) or 17 but you could use three floated divs like item 5. Remember that margin, padding and borders add to the element's basic width so if you add those to the side divs the margins on the middle div will need to be increased.

Try this:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#999; } .secondary ul { list-style:none; margin:0; padding:0; /*width:20%;*/ /*float:left;*/ background-color:#CCC; display:inline; } .secondary { float: left; width:20%; background-color: yellow;/*#CCC;*/ } .secondary ul a { color:white; text-decoration:none; margin-left:1.22em; } .wrapper { width:58%; margin: 0 auto; background: teal; } .header { background-color:#333; height:110px; padding:5px; } .header h3 { color:white; text-shadow:3px 3px 3px #000; margin: 1em 0 0 2em; } .header p { color:white; font-size:12px; margin: 1em 0 0 2em; } .content .primary { float: right; width:40%; background-color:white; } .thirdcol { background: skyblue; } .footer { clear: both; background-color: green; } --> </style> </head> <body> <div class="wrapper"> <div class="header"> <h3>myBlog</h3> <p>Blog site</p> </div> <div class="content"> <div class="primary"> <!--<div class="primary">--> <h3>Lorem ipsum</h3> <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare. Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula. </p> </div></div><!--</div>--> <!--<div class="secondary">--> <div class="secondary"> <ul class="nav"> <li><a href="#">blog</a></li> <li><a href="#">About</a></li> <li><a href="#">contact</a></li> <li><a href="#">download</a></li> <li><a href="#">blog</a></li> <li><a href="#">tagGroup</a></li> <li><a href="#">checkList</a></li> </ul> </div> <div class="thirdcol"><p>Third Column</p></div> <div class="footer"><p>Footer</p></div> </div><!--end of .wrapper--> </body> </html> I've added a doctype at the top, closed unclosed tags, deleted duplicate secondary divs, changed the styles from .content .secondary to just .secondary as .secondary isn't inside the .content div and a few other things. You can nest another div inside .content if you want, at moment it only has the nested .primary div inside. It validates with no errors. I'm not quite sure if it's what you want, but you can edit it.

I think there's a missing closing curly brace near the end. I think it should be:- <?php switch ($_GET['part']) { case 'reports/boxingday.php' : include('reports/boxingday.php'); break;} ?>

Have a look at a tutorial like w3schools http://www.w3schools.com/html/ or Google div boxes or one of the Killersites video tutorials for more info.

As many as you want. #outercontainer { position: relative; background-color: blue; width: 500px; height: 500px; } #innercontainer1 { position: absolute; left: 80px; bottom: 15px; background-color: pink; width: 200px; height: 100px; } #innercontainer2 { position: absolute; left: 10px; bottom: 75px; background-color: red; width: 40%; height: 100px; } <div id="outercontainer"> <div id="innercontainer1"> Inner1 div<br /> Inner1 div<br /> Inner1 div </div> <div id="innercontainer2"> Inner2 div </div> </div><!--end of #wrapper div-->

If your outer (containing or parent) div has position: relative; the inner (nested or child) div will take its positions from the corners of the containing div, not the corners of the window. CSS #outercontainer { position: relative; background-color: blue; width: 500px; height: 500px; } #innercontainer { position: absolute; left: 10px; top: 75px; background-color: red; width: 30%; height: 100px; } HTML <div id="outercontainer"> <div id="innercontainer"> Inner div </div> </div><!--end of #wrapper div-->

If you are using an image or background-image for a link without link text, you need to add link text so that a screen reader can read it out to a blind person who cannot see the image link. You then code the link text as display: block; margin-left: -9999px; so that it doesn't show on the screen, but a screen reader will still read it even if it's oustside the screen window. CSS #floating_contact_image{background: url(http://www.url.com/images/contact.png) no-repeat; z-index:2; width:90px; height: 90px; position:absolute; top:0px; right:0px; } #floating_contact_image span { display: block; margin-left: -9999px; } HTML <a id="floating_contact_image" href="link1.html"><span>Link 1</span></a> The "a" tag could be inside a p tag or a div, or just by itself. I've tested the above with one of my images.

I must have another look at my statistics to see if I can find out how many small-screen devices like mobile phones, tablets, etc. are being used. I've been told that they are 6% of internet use and rising. They may be in the "other browsers" which are a small % so far for me.

What's interesting is how it varies from one website to another. I have a local community website where most users probably just buy a computer and use IE as it's the only choice with old computers or the first choice with a new one. My website shows Windows 80%, Mac 16%, Internet Explorer (all versions) 43%, Firefox 25%, Safari 15%, Chrome 13%. 99% of visitors are UK. My HTML/CSS tutorial shows Windows 80%, Mac 14%, Firefox 41%, Chrome 32%, Internet Explorer (all versions) 18%, Safari 5%, Opera 2%. Most visitors are from the USA. January so far has USA 1957 pages, India 1128, GB 669, Netherlands 325, Germany 253, Canada 207, Australia 173, then Poland, Philipines, Turkey, France, China, Brazil, Sweden, Indonesia, Spain, Russian Federation, Italy, Pakistan, Israel, Ukraine, Jordan, Finland, Singapore, European Country. I'm surprised Russia is so low considering that they create such a lot of spam on forums. 4996 unique visitors so far (9am 6th January). IE has gone right down with techie people despite IE9 being quite good, but Firefox is still top although Chrome is not far behind. Google is almost 100% of searches. Bing is virtually nothing. Google 4885, Bing 34, Yahoo 16. My personal website with a blog is somewhwere in between the two.

Badly worded by me. I meant that I use HTML5 doctype now, but with the old HTML4 method of closing tags, <br> etc.

Most poeople wouldn't try to code one from scratch, just download a whole package like phpBB3 http://www.phpbb.com/ Run it to install, then use the admin menus to set up boards, permissions and any other edits that you want. I changed to background-image on mine, I had to search a lot of files to find the default one, but coding edits should be as few as possible or you will risk affecting the performance, just use the admin menus from the admin control panel. There are different skins or themes available. These seem to be coded by other people but I assume that phpBB approve them. http://www.phpbb.com/styles/ Some people use Wordpress http://wordpress.org/ which is blog software but you can make a forum from it.

I've noticed that the validator doesn't raise any errors or warnings if you have a mixture of closed and self-closed tags like <br> or <br /> It just raises one warning about HTML5 being an experimental feature. Personally, I've gone back to html with <br> etc. EDIT: I've just found this http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/ which differentiates between tags that have no content <br> and meta tags. We're all wrong (but is the link correct?). HTML5 http://dev.w3.org/html5/spec/Overview.html#normal-elements is extremely long but I notice it has <meta http-equiv="Refresh" content="20; URL=page4.html"> <hr> <p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p> <p>P. Sherman<br> 42 Wallaby Way<br> Sydney</p> but note that the <p> is closed with </p> whereas in old HTML the </p> could be omitted. HTML5 spec says "A p element's end tag [ the full end tag </p> ] may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element." hr img and br are not shown with a space/slash. I don't use self-closing tags like <p>The coat of arms depicts a lion, sitting in front of a tree. /> but it seems that these are allowed (for meta tags too, I suppose).