Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
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.
-
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.
http://weblogs.mozillazine.org/asa/archives/2009/01/ie6_on_the_way.html
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.
-
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.
-
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.
-
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.
-
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.
-
...and if you're very impatient, you can get simplified code here:-
http://w ww.wickham43.net/formphptomysql.php (get rid of space in www)
You may need security codes as well later and Stefan's videos deal with it in more detail.
-
Happy New Year.
Cold and frosty here; colder than last year; hot drink or bourbon required.
You can pop balloons here with your mouse (ActiveX needed in IE):-
w ww.wickham43.net/flashvideo.php
-
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:-
..............Account
...................There still seems to be a problem lower down which I haven't got time to sort out.
-
Yes you can use Notepad, I always use it for PHP.
Save the file as default.php and when you want to open it, right click and "open with" Notepad.
After editing, just "Save" and make sure it hasn't been saved as default.php.txt.
-
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:-
Text
Heading
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.
-
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
-
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.
-
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" />
biPolar 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">
biPolar -
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.
-
It's often done with javascript; here's one:-
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm'>http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
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.
-
This is flexible in height:-
http://www.wickham43.com/forumposts/mest22081227.html
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.
-
Create an image for them and reduce to a small size, assuming you haven't got too many.
-
There is a site here:-
http://www.websiteoptimization.com/services/analyze/
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.
-
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.
http://www.wickham43.com/forumposts/mest22081226.html
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.
-
Good point; my post is simplified for beginners; Stefan's videos take it a stage further.
-
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
well.
-
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
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.
-
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
i want to really!! learn CSS...
in CSS
Posted
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"