Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
Check that all the pages are in the same folder.
Check that the lower case and upper case is the same in the filename as in the link. For instance ProductList.html is not the same as productList.html
-
Using ems the size is adjusted cumulatively, so if the parent is 1.2em and the child is 2em the size displayed will be 1.2*2.0 = 2.4em.
If you want the child to be look like 1 em visually you will have to code it as 0.833em so that 1.2*0.833 = 1em. I believe that decimal places do get calculated but more than one decimal place won't show any difference on the screen.
If you later use the same list without a parent font size in em then you will have to use another class with 1.0em.
So using ems can need more attention to which is a child of which parent.
-
Yes, you must use tables for ALL email clients.
Outlook 2007 is only worse in one respect - it doesn't process background images.
Tutorial here:- http://www.reachcustomersonline.com/2010/01/23/09.27.00/
-
How are you trying to process the PHP?
You can't process PHP on your computer from a local php file unless you have a server (WampServer 2 or XAMPP) on your PC which incorporates Apache. You then put all the files into a special folder which the local server operates (C:\wamp\www folder for WampServer).
If you have uploaded your php file to your host and it still doesn't work online, does your hosting service support PHP?
-
There are two videos here:-
http://www.killersites.com/university/
under Beginners PHP - Processing Forms with PHP
You don't have to edit the html form at all except to change the action to a php url to process the form, like
<form method="post" action="sendmail.php">
The form input tags should already have name="...".
All you need to add is the separate php processing file.
You may have to give the html file with the form a .php extension, but only if there is php processing to do on the page, which may not be the case. The form itself doesn't need php processing on the page unless the php in the action is to php code on the same page. If the processing is to a separate php file then the form page can still have a .html extension.
See also http://www.wickham43.net/formemail.php (which is just the basics. You probably need extra security code), or use a script from
-
It's a big debate, HTML or XHTML.
Here's a lot to read:-
http://www.wickham43.net/generaladvice.php#xhtml
A few years ago people thought that XHTML was going to supersede HTML so they converted to XHTML 1.0 but then the people that create these standards decided that XHTML should be "pure" and not used for normal websites, just for special SVG and MathML sites. Pure XHTML with content="application/xhtml+xml" (instead of content="text/html; charset=utf-8") will not display if there is the smallest error and not in IE6 even if correct.
Start using HTML 4.01 Strict but if it doesn't validate error-free you may need to use Transitional because certain deprecated tags will still validate with Transitional.
-
You will have to change th efilename extension from .shtml if you want the PHP "includes" to work. Either change the filename or change it by using .htaccess file as falkencreative suggested.
Then any shtml code won't work as you will be mixing shtml and php so you need to use one or the other.
-
You can ignore the noborder class, that was just because my default stylesheet had a border and padding and I wanted to get rid of it.
Put
<div> <img class="background" src="your-image.jpg" alt="Image description"> </div>
as the first code inside the <body> tag. You don't need to create a <div id="body">...</div>
The image should be quite large, say 1200px wide, as it may need to be expanded and would look pixellated if you try to enlarge a small image. The height needs to be about 650px high to cover the screen at most screen resolutions but some screen resolutions may show the body background under the image as its height will decrease in proportion as the width is decreased.
In my example, make the window smaller and drag the window width larger and smaller to see the effect on the image and its height. Note that the CSS code does not state a height, so the height will always be in proportion to the width.
-
Background-image will not stretch to fill a screen resolution. You can do it using a normal <img> in a div.
Give the div with the image position: fixed or position: absolute; width: 100%; left: 0; right: 0; and z-index: -1; to put it behind everything else. Position: fixed or position: absolute take the div out of the normal flow and it just sits there without affecting anything on top. (Or don't have the div tags and make the img display: block; instead with all the styles for the img instead of the container div).
See http://www.wickham43.net/backgroundfullwidthflexible.html
-
Remember that Outlook 2007 is worse for html emails than Outlook 2002. The 2002 version will process background images but 2007 does not.
There are some tricks to learn for background images. Here are some examples. It's set up as an email reply to a form submission, for instance if someone submits their email address to request a brochure or product details but the general principles for html emails are stated:-
-
I don't think you have selected a database.
When working locally with XAMPP (or WinAmp Server in Windows), first you have to connect to the database and then select a database. I have this for one of my databases;-
<?php mysql_connect("localhost","root","") or die(mysql_error()); mysql_select_db("db-name") or die(mysql_error());It uses " instead of ' but I don't think that's important.
When you upload to your host server you have to edit to
mysql_connect("localhost","your-username","your-password"); mysql_select_db("db-name") or die(mysql_error());Have you actually set up a database and a table inside the XAMPP folder?
-
I show three methods here. The last (item 2) does validate but computers need to be flash-ready (Abobe Flash already installed) so it won't play on older computers but most new computers do have flash installed and some older computer users will have installed Flash.
http://www.wickham43.net/flashvideo.php
The classid method does usually work on all computers by downloading a plugin but won't validate.
-
First, you've got the > in the wrong place, it should be:-
<div id="navigation"> <div class="nav"><a href="link1.html">Link 1</a></div> </div>
and I've put in an example link.
Second, your image as I downloaded it is nav.jpg but in your stylesheet you have
background-image: url(nav_top6.jpg); in the style for .nav but this is the wrong filename and only 200px wide (presumably just one button) so if you want the background for the whole navbar, put it in #navigation:-
.twoColFixLtHdr #navigation { height: 72px; width: auto; padding: 0px; background:#fff url(nav.jpg); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #660033; }Inside #navigation, if you have several links it's more usual to use a list than several divs for the links. So you would then have:-
HTML
<div id="navigation"> <ul> <li class="nav"><a href="link1.html">Link 1</a></li> <li class="nav"><a href="link2.html">Link 2</a></li> </ul> <!--<div class="nav"><a href="link1.html">Link 1</a></div>--> </div>
CSS
.twoColFixLtHdr #navigation { height: 70px; width: auto; padding: 0px; background:#fff url(nav.jpg) no-repeat left top; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #660033; } #navigation ul { margin: 0; padding: 0; } .nav { float: left; list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: normal; font-weight: bold; color: #FFF; /*background-image: url(nav_top6.jpg);*/ /*background-repeat: no-repeat;*/ /*background-position: left top;*/ text-align: center; padding: 0px; height: 70px; width: 200px; }I've edited slightly as I did it in too much of a hurry.
-
Lots of sites have a logo image that has the website name in it, so it's an alternative to a h1 tag.
So then the homepage might have the logo and also h1 with a full website name while other pages have the logo with the website name and h1 tag for the heading describing the content on that page.
-
Yes, I wasn't thinking because I often use h2 h3 etc for sub-headings many times on a page but only have one h1 heading (so Google doesn't get confused with more than one h1. The h1 seems to be more important to Google than h2, h3 etc.).
Re Ant's query, If your website is for Wiltshire Council that would probably be in the h1 tag on the home page but for other pages for Eduction, Health, etc. the h1 would be for Health on one page, Education on another, etc. If you want to show Wiltshire Council on other pages, use a p tag or a logo.
-
Yes, I think there is a problem with that. It's been debated often but the consensus is that the h1 heading should be for the page title, not the website title (except on the homepage) so if your website is for a town council and you have several pages for health, education, street maintenance, etc. each page would have h1 for health etc.
If you want to have larger type for a later heading, either code h2 or h3 with larger font-size or use a p tag with a larger font size.
h1 { font-size: 30px; } h2 { font-size: 25px; } h3 { font-size: 40px; } p.large { font-size: 45px; } HTML <h1>H1 heading</h1> <h2>H2 heading</h2> <h3>H3 heading in larger font-size</h3> <p class="large">Largest paragraph font</p>I have a website where I used a h1 tag with large font-size for the page title but I wanted the website title still to appear over the top of it so I used a p tag set above the h1. A search engine will still latch onto the h1 tag for SEO purposes.
There's no reason why you can't have class or id for h tags so that they can be styled differently on different pages. h1#type1 {...} h1#type2 {...} etc. but only use each h tag once on a page.
-
My code was for HTML where upper case is OK and tags are closed with > not /> so it's not surprising that you had to edit them.
-
I find that the font size in the code panels very small; it's smaller than the font size for the general text. I find it difficult to read the . and ; and '
Is it just me that finds it too small? I don't want to increase text size or zoom because that makes the general text larger which is alright as it is.
-
For what it's worth, I've also had javascript validation problems with a munged email address in HTML (but no error in XHTML) using code
<div> <span class="px-small"> Email: <script TYPE="text/javascript"> <!-- // protected email script emailE='my-name' emailE=(emailE + '@' + 'hotmail.com') document.write('<a href="mailto:' + emailE + ' ">' + ' me ' + '</a>') //--> </script> </span> <NOSCRIPT> <span class="px-small">Email address protected by JavaScript.<br> Please enable JavaScript to contact me.</span> </NOSCRIPT> </div>where the error for HTML page is "end tag for element "A" which is not open" when it clearly has been opened.
I've never found an answer and I've been tempted to use XHTML for those pages.
Make sure you are using a text editor that doesn't add special functions to " or ' (like Word does) and experiment with ' instead of "
-
You want to click on a button in a sidebar and have different content appear in the main panel on the same page.
There are four ways that I can think of.
1. Frameset. the sidebar menu is in a left frame and different content shows in the right frame after clicking links. This method is not recommended now. Framesets and frames are bad for SEO as search engines can't search the content in the frames.
2. iFrame. The sidebar menu is on the left and an iframe on the right has content that changes as links are clicked on the left. Same problem with SEO.
3. PHP. You can get PHP to show different content in a div from links in a sidebar. Here's an example of a News Box which is small but it could be all the rest of the page except for the sidebar:-
http://www.wickham43.net/showform.php#phpnewsbox
It's a bit complicated and again, search engines would probably only see and list the content of the first item in the box, not any others from clicked links.
4. PHP "includes". This is the method most people adopt which does not keep everything on the same page. It's the reverse, you have different pages for each of your main content items so each has its own url and can be searched. The left sidebar is coded in a separate "include" file (so you only have one file to edit if something changes) and then inserted into each page with PHP code
<?php include ("menu.inc"); ?> -
I've deleted my first post because I checked without ActiveX enabled and the page was very different (it just shows how important it ios to check how your page looks with javascript/ActiveX disabled).
-
If you mean this page http://rememberthetitans.vacau.com/druids.html then the link is working, but there's no content under the h1 heading:-
<div id="content"> <h1> Druid Guides </h1> </div> -
Several css files won't conflict with each other.
One possibility is a lower case/upper case conflict. Check that you used lower case in the link in the html file and that the link looks like this:-
<link rel="stylesheet" href="zoo.css" media="all" type="text/css">
media="screen" is an alternative. Put it in the head section. Close with /> instead of > if using a XHTML doctype.
Another posibility is that it's been saved as zoo.css.txt because the .txt extension sometimes gets added when you save from a text editor, so delete the .txt
Check that it's actually been uploaded.
-
I can see your problem. The sprite image is 990px wide; so if you make your ul tag 990px wide all you need is the -47px vertical background position and a suitable width for each item. The sprite works well in the vertical direction.
You seem to be trying to squeeze them up so that they are closer together, but when you do that for one item with a negative left position, all the others move along so you see bits twice or missed out, so you will just have to fiddle with the offsets until you get it right.
This uses the full 990px width and notice that the total widths add up to 990px and if you drag you mouse along the menu, the sprite changes at the half way point between each menu item:-
ul#nav { background-image: url(images/nav.png); position: relative; width: 1036px; list-style: none; margin: 0 auto; z-index: 100; } ul#nav li { display: inline; } ul#nav li a { display: block; float: left; height: 47px; background-image: url(images/nav.png); text-indent: -9999px; } ul#nav li a.home { width: 100px; background-position: 0 0; } ul#nav li a.menu { width: 120px; background-position: -100px 0;/*-110px 0;*/ } ul#nav li a.franchise-info { width: 210px; background-position: -220px 0;/*-204px 0;*/ } ul#nav li a.locations { width: 140px; background-position: -430px 0;/*-301px 0;*/ } ul#nav li a.company { width: 150px; background-position: -570px 0; } ul#nav li a.coupons { width: 130px; background-position: -720px 0; } ul#nav li a.contact-us { width: 140px; background-position: -850px 0; } /*the offset plus its own width of 140px = 990px*/ ul#nav li a.home:hover, ul#nav li a.home:focus { background-position: 0 -47px; } ul#nav li a.menu:hover, ul#nav li a.menu:focus { background-position: -100px -47px; } ul#nav li a.franchise-info:hover, ul#nav li a.franchise-info:focus { background-position: -220px -47px; } ul#nav li a.locations:hover, ul#nav li a.locations:focus { background-position: -430px -47px;/*-301px -47px; */ } ul#nav li a.company:hover, ul#nav li a.company:focus { background-position: -570px -47px; } ul#nav li a.coupons:hover, ul#nav li a.coupons:focus { background-position: -720px -47px; } ul#nav li a.contact-us:hover, ul#nav li a.contact-us:focus { background-position: -850px -47px; }Or split the sprite into individual sprites.
Please need help with buttons in javascript
in Javascript
Posted
If your buttons are links to other pages, it sounds as if you want the "current page" code where the current page button is different until you click another button to go to another page.
See http://www.wickham43.net/highlighthome.php the third item where button images have been used. I could have used sprites but didn't there. The main reason for using sprites is to avoid a flash in the display on hover while a new image is downloaded. A sprite just moves the position of an image so that another part of a combined image shows without a flash.
In my example I didn't need sprites because the display will flash anyway when moving to another page, but would have helped if I also wanted a different image on hover.