Jump to content


Advanced Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Wickham

  1. why this div is in the center of the page? its not written in here!..

    width: 30%; margin: 0 auto;

    width: 30% is a "fixed" (percentage) width and margin: auto; makes the two side margins equal but flexible, so the 30% centers.


    what is text-transform?

    It transforms text from lower case to upper case or the other way depending on the default setting.


    what is the difference between "ul#navlist {..}" and "#navlist ul {..}"

    ul#navlist {..} would apply to html markup like this

    but #navlist ul {..} would apply to html markup like this:-

    so it's the order of the id in the markup which matters.


    ul#navlist li {..}

    applies a style like a size or background-color to the li tag around the link


    ul#navlist li a {..}

    applies a style like text color inside the link to the "a" tag text Home Page


    #navcontainer ul#navlist li a {..}

    this applies a style to the html markup for the text in the "a" tag link ONLY where the list and link is inside an element like a div which has the id="navcontainer"

  2. If you are sure your sites look OK except for pngs, then perhaps you can ignore IE6.


    However, many people find that IE6 causes a jumbled appearance as doubled margins cause divs to drop down to a lower level, we often have to sort out IE6 problems like that here. I think website designers should at least look at their pages in IE6 and if the layout is a disaster, something has to be done.

  3. I am planning to drop support completely for IE6 1st quarter '09 - I can't wait - unless I absolutely need to for a client.


    Another line chart showing a dramatic decline in IE6.



    It's still taking 20% in November 2008 according to http://www.w3schools.com/browsers/browsers_stats.asp

    so I think it's too early to stop checking and using conditional comments if necessary.

  4. I think you've done it. Your first post had a separate stylesheet root.css which cannot be read by an email, but in your last post you have put the styles inside style tags in the head section, so that they are inside the same page code.


    Alternatively you use inline styles, for example for every p tag you would have



    and so on.

  5. I'm fairly sure that the major search engines will notice a new webpage within two or three days, but they don't rate it and list it until it has some importance, such as links from other sites and the regularity with which the site is updated.


    Some of my sites have appeared within two weeks within the top ten or fifteen pages before slowly climbing up after that, but this forum got into the top page almost immediately when searching for "website design forums" or similar words. It also depends a lot on the search criteria, the more specific the better.

  6. I predict that IE8 will be some time in getting to a useable state. The website for reporting problems

    http://w ww.microsoft.com/communities/newsgroups/list/en-us/default.aspx?pg=1&cat=&lang=&cr=&guid=&sloc=en-us&dg=microsoft.public.internetexplorer.beta&fltr=&lc=1033


    shows such a massive number of serious problems I don't see how they can get them sorted quickly. Microsoft have gone from browsers that are not very standards compliant to trying too hard to get one that is, so strictly compliant that it doesn't have enough flexibility.


    Roll on cloud computing; no more installing programs, updating them, backing up on cds and then lossing them or finding that the backup is corrupted. I think Google will continue to advance while Microsoft will fade away slowly.

  7. If you think that viewers may be using IE8 beta 2 and seeing something you don't want them to see, add this immediately after the

    section tag:-



    for XHTML (without the closing / before > if HTML) which makes IE8 work as IE7. It must be immediately after the

    tag, not lower down the head section.


    There are thousands of problems with IE8 at present and I don't want viewers of my sites to use it. It doesn't display some drop down menus correctly and even stops displaying half way down a page sometimes until you refresh. It also doesn't make anchors work if the anchor code is empty. The Opacity attribute isn't supported; only the IE filter.

  8. It breaks in Safari too, which is no surprise as they are both based on WebKit.


    Both should obey the floats the same as other browsers, I've manage dto get the left and right columns to move over to the left where they belong by adding a clearer div:-






    There still seems to be a problem lower down which I haven't got time to sort out.

  9. Normally by setting a style for all p or h tags:-


    p, h1, h2, h3, h4, h5, h6 ( margin-top: 8px; }


    which will apply everywhere


    or set a class so that you can apply it in just selected places:

    p.margintop { margin-top: 8px; }

    h1.margintop { margin-top: 10px; }


    and markup:-





    Note that you can use the same class description like margintop with different sizes provided you have the element like p or h1 in front of the style.


    Edit: the above separates a p or h tag top line from the one above. within each p or h tag, for the second and subsequent lines, you have to set a different line-height.

  10. If you want people to go straight to your "Home" page when they just put a url in their browser which doesn't state a filename, like www.mydomain.com then you need a file called index.php (or index.html or index.htm but I expect that you have a php page).


    So rename your page with the latest blog as index.php because when a browser only has the domain name it searches for a page beginning with index


    If the page is called home.php then viewers need to type or bookmark www.mydomain.com/home.php which probably won't happen, so get rid of this page and rename as index.php

  11. PHP files are either HTML or XHTML depending on the doctype.


    PHP adds some server-side functionality to HTML or XHTML pages where there is PHP code, the rest of a page may be just HTML or XHTML.


    Your website may have some pages with PHP code in them and .php filename extension and other pages just HTML or XHTML with .html filename extension.

  12. Another thing: make sure that the image filename is lower case; the case must be the same in the code as in the actual filename.


    and these lines


    meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />



    have /> as the closing tag which is correct for XHTML but you have a HTML doctype so the lines should be:-


    meta http-equiv="content-type" content="text/html; charset=iso-8859-1">


  13. There's nothing wrong with that code. The image file bg2_bady.jpg needs to be in the same folder/directory as your html file.


    We need to see all your code and styles because the problem may be somewhere else; for instance a background in another element covering up the body background.

  14. It's often done with javascript; here's one:-




    Ultimate Fade-In Slideshow (v1.51): copyright Dynamic Drive (http://www.dynamicdrive.com)


    This one pauses when you hold the mouse over an image, but none show if javascript is disabled.


    Search for "Lightbox" which has more complicated versions which show a static image if javascript is disabled.

  15. This is flexible in height:-




    Your main background-image cannot repeat for any height without repeating the header image and footer band, so I made a 50px high brown image which has been put as a body background behind the main image so that it shows below for any content height.


    You will have to remove the footer black band as well as the text and photo from your image.


    I added 20px white borders to the top and bottom of #wrapper; if you don't want the white space top and bottom, delete the borders. I found that the brown body background-image went over a body margin top and bottom so it was easier to make white borders.

  16. There is a site here:-


    that analyses your page, both showed mainly green colors, ie no problem, but I don't think it was dealing with 3MB of Flash, I think it must have ignored it.


    I suppose speed depends on your target viewers and what they might expect and whether it's the first page which they might expect to load quickly or a later page where they will be expecting some delay.

  17. This is one solution which uses your image mainly as it is for the whole of the wrapper div , but it could be done in other ways, I'm sure.




    Remake your image so that the text, links and photo are removed. I can't do that so the link above shows my text and image over the top of your's.


    I've tested in IE6, IE7, Firefox, Opera and Chrome.


    It assumes that the page height is fixed. If not, the content and footer divs would have to have different code.


    You will need to adjust the margins and padding and the footer div widths if you add more to the side divs.

  18. Here is a FAQ I often get asked by beginners. Please comment so that

    we can arrive at an improved answer.


    Question:- My containing div doesn't have a background-color or

    background-image and/or the lower divs have moved up out of position.


    Answer:- This happens when you have floated divs. You need to insert a

    clearer div with clear: both and no height below them so that it forms a

    full-width invisible barrier to stop lower divs moving up into any space

    above. If placed last inside a containing div it drags down the container

    background-color or background-image to the bottom of the lowest

    floated div.


    There are two main reasons for using a clearer div:-


    1. to follow rows of floated elements to prevent an element which should

    be on a lower row jumping up into a space in a higher row.


    2. to drag down the background color or image in a containing div where

    elements inside have a float.


    Item 1


    If you have several rows with floated elements like divs or images which

    are side by side but of unequal heights, one or more following elements

    may jump up into a space under an element with less height than the

    others (especially in IE but not always in Firefox, Opera or Safari). It can

    also occur where divs are floated left and right leaving a space in the

    middle and a following div without a float moves up into the space but

    you don't want it to do that.


    Items 19 and 21 on http://www.wickham43.net/threecolumns.php show

    the typical problem and its solution which is to put a clearer div with

    clear: both; width: 100%; between the rows so that it clears the floats for

    the full width, not just for the first element on a lower row. It forms an

    invisible full-width nil-height barrier to stop lower elements moving up.


    You can put the clear: both style in the first following div which will stop it

    from moving up, but if it doesn't have much width a following div can jump

    up instead, so it's often safer to use a full-width clearer div.


    Item 2


    Where you have a containing div with floated elements like divs or

    images inside near the bottom of it, the browser assumes that the

    floated elements have no height, so the containing div will either have no background image or color or only for part of the height like its padding.


    The floated elements will appear to "hang down" below the containing div

    even though they are inside for all other purposes.


    If the containing div has a mixture of text and divs and floated elements,

    the containing div will provide a background for as much height as is

    required by the non-floated elements and the floated elements will appear

    to hang down below the level of the non-floated elements if their height

    exceeds the non-floated elements.


    The solution is to put a non-floated element (a clearer div or another

    non-floated div with content) below all the floated elements, just before

    the closing tag of the containing div. The containing div then drags

    down its background image or color to cover the non-floated element and

    in so doing covers the floated elements above.


    See item 2b on http://www.wickham43.net/firefoxbackground.php'>http://www.wickham43.net/firefoxbackground.php


    Clearer div code


    The clearer div needs to be full-width and with no height, margins,

    padding or borders so that it is invisible. The div code is either:-




    or it can be coded in a stylesheet like this:-


    .clearer { clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;

    margin: 0; padding: 0; border: 0; }


    or inside style tags in the head section:-


    .clearer { clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;

    margin: 0; padding: 0; border: 0; }


    with html markup as:




    Some of the attributes like margin: 0; padding: 0; border: 0; can be

    omitted if your general div style has already made them 0 but it may be

    safer to leave them in the clearer div style.


    If you don't put   inside the div you won't need to state line-height:

    0; font-size: 0; in the style, but divs should not be empty so I include

      however,   is a character and creates its own line-height

    and font-size so these need to be 0 if you include   in the div.


    Some people use visibility: hidden; in the style:-


    .clearer { clear: both; width: 100%; height: 0; visibility: hidden; } which

    does save a little code.


    There is also a clearfix:after method which works by putting the clear in

    the containing div so that the divs "after" are affected and is shown in

    item 2c on http://www.wickham43.net/firefoxbackground.php but I think it

    is unnecessarily complicated and a simple clearer div seems to work


  19. Here is a FAQ I often get asked by beginners. Please comment so that we can arrive

    at an improved answer.


    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



    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.

  20. do i slice it up into too diffrent images or sperate images and intergrate them indivdualy for each one for menu buttons....


    Lots of image slices, especially if structured in a table, are absolute hell to edit later and use an old method of coding.


    If you have the time, learn HTML and CSS and use divs. You should then be able to use a single large image as a background, or a few large background-images in a few divs, and code content text or images on top. It makes much simpler code.


    Having created a background for the whole page, you then create your menu as a horizontal or vertical list and can use separate images for each button or text on a background-image for each button. Buttons that are only images need a title attribute so that screen readers for blind people indicate which button is which.


    After reading your post again, what you might have is:-

    a body background-image for the whole page

    a header image in a header div or a header div with background-image and text headings

    a menu ul tag with a general background-image for the menu if required

    li tags for each button with text or background-images for each button (preferably with text)

    a content div

    a footer div

  • Create New...