Jump to content
Killersites Forums

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by Wickham

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

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

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

    • Upvote 1
  4. 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.

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

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

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

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

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

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

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

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

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

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

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

  16. Wickham

    "Personally, I've gone back to html with <br> 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, <br> etc.

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

    • Upvote 1
  18. 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 <br> while XHTML uses <br />. 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 <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).

×
×
  • Create New...