Wickham

January 26, 2012

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.

January 26, 2012

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>

January 25, 2012

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

January 25, 2012

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

January 20, 2012

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

January 20, 2012

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

January 19, 2012

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.

January 19, 2012

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.

January 18, 2012

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.

January 18, 2012

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.

January 18, 2012

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

January 17, 2012

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.

January 12, 2012

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.

January 10, 2012

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.

January 10, 2012

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.

January 10, 2012

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;} 
?>

January 8, 2012

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.

January 7, 2012

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

January 7, 2012

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

January 7, 2012

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.

January 6, 2012

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.

January 6, 2012

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.

December 23, 2011

Wickham

"Personally, I've gone back to html with etc."

What doc type do you use?

I like the "simplicity" of the html5 type but if the world is not ready yet I will wait. Also the validation with conditions bothers me. Might be a character flaw.

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

December 23, 2011

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.

December 23, 2011

True that it doesn't break the site. However, if you want your site to validate then you ought to use the proper html for whatever doctype you use. Standard HTML uses while XHTML uses . I don't recall if HTML5 uses one or the other or both. I guess you could google 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 or

It just raises one warning about HTML5 being an experimental feature.

Personally, I've gone back to html with 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 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 is closed with whereas in old HTML the could be omitted. HTML5 spec says "A p element's end tag [ the full end tag ] 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).

Sign In

Profiles

Forums

Events

Downloads

Gallery

Store

Posts posted by Wickham