Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by Wickham

  1. It's called an image map (often used for maps with town names where there's a diiferent link when you hover over each town, or for group photos where hovering over each person leads to a profile of the person). See http://www.wickham43.net/imagemaps.php
  2. Well, I'm not a PHP expert so you may have to wait for Ben. However, we can't see the php code when we look at the source code of your page because it's been processed. You say "If I remove the php code that is before the <!DOCTYPE ..." there should be nothing in front of the doctype, not even spare lines.
  3. Edit this code in the head section style tag:- #content img { margin:0px; display: block; float: left; } The img element is normally an inline element and margin won't process on an inline element so make it a block element. It may only solve part of your problems, but it's a start. Your actual image size is 188*188px not 180*180px so edit all the markup sizes to delete the 180px sizes (you don't need sizes unless you want to resize the image) <img src="images/bed.jpg" /> <img src="images/bed.jpg" /> <img src="images/bed.jpg" /> <img src="images/bed.jpg" /> <img src="images/bed.jpg" /> <img src="images/bed.jpg" /> and edit the #content style width to 5 * 188px = 940px; and the margin: auto will center it. #content { width: 940px; /*916px;*/ padding:0px; background:#D9D9D9; margin-left:auto; margin-right:auto; margin-top: 50px; }
  4. The / in front of favicon will only work with an online page, not from a local file unless you have Apache server and are using it to view the page. If you have uploaded your page and the favicon.ico into the root directory online, clear your cache (while your browser is looking at another page because the cache may not clear the page showing on the screen) and then download the page again.
  5. Your css file business.css has h4 { font-size: 180%; color: #F01E1E; } which is red color. Have you forgotten to upload teh revised css file?
  6. id names, class names, meta tags, title tags CSS like these:- body { color: red; } #wrap { } .left { } HTML markup:- <!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 name="keywords" content="Memoirs" /> <title>My Memoirs</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style2.css" media="all" type="text/css" /> <style type="text/css">...........</style> </head> <body> .................content...... </body> </html> It isn't necessary for the doctype which can be lower case. It's advisable to code filenames and extensions in lower case like index.html or picture.jpg as mixing lower case and upper case can cause a problem if the case is different in the html markup from the actual filename as most hosting services are case sensitive (although IE locally isn't).
  7. You're using an XHTML doctype which requires lower case for element and attribute names, including meta tags. I've just tested one of my files with META which gave three errors inluding the one you describe, but when I reverted to meta that I had before, I got no errors.
  8. Wickham

    Dropbox

    As usual, the Dropbox website doesn't tell us everything. Wikipedia has some background info:- http://en.wikipedia.org/wiki/Dropbox_%28service%29 regarding lack of security and this site http://www.theregister.co.uk/2012/05/02/apple_dropbox_blocking/ regarding Apple blocking Dropbox The dropbox site says that it works even when offline https://www.dropbox.com/features I don't understand how it can sync with the cloud or other computers if you are offline. However, it looks very useful and I will probably give it a try but I will probably want to sync with an old XP computer and I'm not sure if it will do that.
  9. I've seen this stagger in IE before. It's usually because the li tag needs a float: left, not the "a" tag inside it. Try adding .navul li { float: left; }
  10. Ben's probably right, your files probably have .txt added on the end of the filename that shouldn't be there. When you have been coding in Notepad (or probably most other text editors) and you want to save the file for the first time, use Save As (instead of Save) and type your filename like index.html or contact.php and then make sure Save As Type is All Files (*.*) and not Text Documents (*.txt). Then check that Encoding is ANSI not UTF-8. After the first save, you should be able to click Save instead of Save As after future edits.
  11. If you want to see a .html or .htm file displayed in a browser, double click the filename in your file list like Windows Explorer and it should open your default browser, or right-click and "open with" another browser. You cannot see a .php file displayed properly in a browser from a local file unless you have WampServer2 or XAMPP installed as these have Apache server to process the PHP, so check these online or install one of the programs. CSS files when double-clicked should open in Notepad if css files are set to open in Notepad or you can right-click choose program. Don't use Word for coding as some characters like " and ' can carry unwanted hidden code which affects the display.
  12. It's not the "#FPMap0" or "FPMap0" which are correct: name="FPMap0" and usemap="#FPMap0". Firefox doesn't like the "a" tag inside the map element. You have:- <map name="FPMap0"> <a href="/Portals/0/ForbesMap/audio-Forbes-AV- International.htm#LiveContent[ForbesMap]" target="_blank" alt="Forbes-AV, Tony Janesin"> <area class="pointer" href="/Portals/0/ForbesMap/audio-Forbes-AV- International.htm" shape="POLY" alt="Forbes-AV, Tony Janesin" target="_blank" coords="211,148,196,120,202,112,196,94,186,100,182,75,1 90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19 9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4 71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12 2,577,136,586,136,577,110,573,104,584,95,589,76,581,59, 573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3, 572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3 1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3 4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675, 99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727 ,104,710,110,723,120,701,124,707,138,688,152,681,155,67 9,162,671,166,669,180,668,191,659,196,644,203,624,214,6 22,219,609,224,602,232,599,239,585,242,573,251,568,250, 576,239,582,230,579,223,582,218,579,212,561,204,548,197 ,544,186,532,182,524,173,513,174,503,185,485,186,477,18 1,468,182,458,176,400,174,379,174,320,166,278,158,228,1 46,226,155" /> </a> <!--and the others--> </map></p> <div align="center"> <img border="0" alt="" src="images/A-V-repmap-03.01.12 -for-website.jpg" width="740" height="468" usemap="#FPMap0" /></div> but I can get Firefox to operate links if the "a" tags are removed:- <map name="FPMap0"> <!--<a href="/Portals/0/ForbesMap/audio-Forbes-AV- International.htm#LiveContent[ForbesMap]" target="_blank" alt="Forbes-AV, Tony Janesin">--> <area class="pointer" href="/Portals/0/ForbesMap/audio-Forbes-AV- International.htm" shape="POLY" alt="Forbes-AV, Tony Janesin" target="_blank" coords="211,148,196,120,202,112,196,94,186,100,182,75,1 90,75,204,75,205,57,198,31,194,22,183,18,182,7,195,9,19 9,14,278,46,330,53,405,51,453,44,458,44,456,54,465,57,4 71,79,478,74,505,80,518,90,533,96,556,95,557,108,561,12 2,577,136,586,136,577,110,573,104,584,95,589,76,581,59, 573,56,568,48,571,38,568,28,563,23,566,16,560,12,563,3, 572,3,579,3,586,0,602,8,609,11,612,5,617,8,618,24,625,3 1,637,35,643,20,641,12,641,4,647,11,653,19,659,22,659,3 4,667,35,675,54,679,66,658,70,662,76,657,84,666,92,675, 99,687,99,682,84,689,80,693,92,733,69,737,73,738,82,727 ,104,710,110,723,120,701,124,707,138,688,152,681,155,67 9,162,671,166,669,180,668,191,659,196,644,203,624,214,6 22,219,609,224,602,232,599,239,585,242,573,251,568,250, 576,239,582,230,579,223,582,218,579,212,561,204,548,197 ,544,186,532,182,524,173,513,174,503,185,485,186,477,18 1,468,182,458,176,400,174,379,174,320,166,278,158,228,1 46,226,155" /> <!--</a>--> <!--and the others--> </map></p> <div align="center"> <img border="0" alt="" src="images/A-V-repmap-03.01.12 -for-website.jpg" width="740" height="468" usemap="#FPMap0" /></div> but I don't know what that will do to the way you want the map to work. It isn't usual to have an "a" tag there. It should be in the format:- <map name="my-map"> <area shape="rect" href="introduction.php" coords="10,1,75,30" alt="Introduction"> <area shape="rect" href="generaladvice.php" coords="95,20,170,50" alt="General Advice"> </map> <img usemap="#my-map" src="images/map-image.jpg" alt="Map">
  13. When you have coded a page, check it in these places:- HTML markup http://validator.w3.org/ CSS code http://jigsaw.w3.org/css-validator/ Outline http://gsnedders.html5.org/outliner/ Remember that books may be out of date, look for a revision date if you can find one. Online tutorials may also be out of date, so look at several and try to make up your mind which is most up to date. When you have a specific coding problem, or validation errors you con't cure, post a question on a forum like this. Start with a simple page and just practise making it more complicated. Good luck.
  14. You have lots of negative left sizes (and negative top sizes) which are dragging the content left beyond the scrollbar capability. Learn to code without large negative sizes.
  15. Look at this http://caniuse.com/ and click on any item. Always code and get it right in Firefox or Chrome or Safari first, then consider what you have to do in conditional comments for any or all IE versions. The conditional comment should be after your main stylesheet link to overide it. Conditional comments will not overide inline styles (those inside tags). If the image is behind the navigation in IE, consider a position (absolute, relative or fixed) for the parent div of the image and also add a z-index for that. You have done it for the navigation and sometimes that's enough, but doing it for both with different z-index values may work.
  16. Wickham

    php includes

    This page http://www.wickham43.net/highlighthome.php shows several methods. The first item is very basic and not suitable for inclusion in an "include" file. The second and third items are similar, for text links or image links, both using only CSS and a "matched pairs" coding. You put the li tags in the "include" file and put a different id or class to the ul tag or body tag on every page, so the id or class for the ul or body tag will only match one of the li tags on each page, changing its style. In the third item I deliberately coded it so that the About Us tab disappears on the About Us page, as it's not wanted for its own page, and only the other tabs show. The fourth item is using PHP.
  17. Note that you have lt IE9 when there should be a space between IE and 9:- <!--[if lt ie 9]> your different styles here <![endif]--> The above code should go in the head section AFTER the main stylesheet link or after the head section style tags so that it supersedes them. Styles written inline (inside html tags) will take priority over those in a conditional comment. It should work from a local file or online. The lt IE 9 conditional comment should work with all IE browsers less than IE 9 (assuming that your styles inside the conditional comment are appropriate and supported by the IE version).
  18. It's much better to test from an online page where the email PHP code will be processed by your host's server. If you want to test sending an email from localhost on your pc you will have to edit the php.ini file in WampServer or XAMPP as follows:- http://roshanbh.com.np/2007/12/sending-e-mail-from-localhost-in-php-in-windows-environment.html and also use Apache Server in one of those installations. Set the smtp server name of your ISP where the example has SMTP = smtp.wlink.com.np the smtp.wlink.com.np might be smtp.supanet.com or smtp.your-isp.com and edit smtp_port = 25 The php.ini file may take some finding in all the files WampServer or XAMPP give you and then the php.ini file has a lot of content and you have to find the correct places to edit. Make sure you add the $headers = ‘MIME-Version: 1.0′ . “\r\n”; $headers .= ‘Content-type: text/html; charset=iso-8859-1′ . “\r\n”; in your process file.
  19. If you are happy with the online version, why not download it and overwrite the copy in your Dreamweaver on your computer? I notice that the code in your first post has all the words correctly like CHEF DIPLOMA COURSE instead of just CHEF, so that also seems to be the correct version and can be used to overwrite the Dreamweaver version.
  20. Here's a tutorial:- http://sixrevisions.com/user-interface/website-wireframing/ You might also consider a 960px grid system:- http://www.designinfluences.com/fluid960gs/ or a 970px grid system which many people prefer as it creates equal gutters:- http://www.gridsystemgenerator.com/gs02.php?GridWidth=970&GridColumns=12&GridMarginLeft=10
  21. Your best bet is to look at the source code and also look at all the stylesheets and jQuery files. Note that the page says "Copyright 2011 Chris-Dave.com" so you shouldn't just copy it. Otherwise, Google Free website templates and look for a similar page.
  22. When I said "This site, if used with javascript/ActiveX, will show which browsers support which elements:" I meant that your browser should have javascript/ActiveX enabled, but the site does work if javascript is disabled. In general, I suppose it's better to use HTML5 and CSS3 for special features if the feature you choose is well supported, then use Photoshop if HTML5/CSS3 is not well supported. That's the future way. HTML5/CSS3 will probably be smaller KB and quicker processing.
  23. HTML5 and CSS3 go together and are an advance on HTML 4.01 (or XHTML 1.0) and CSS2. Some features in HTML5 and CSS3 are not supported yet by all browsers, so be careful. This site, if used with javascript/ActiveX, will show which browsers support which elements: http://caniuse.com/# (just click on an item on the index page). Photoshop is for designing images, essentially. You can use it to create a web page but many developers don't approve of that. Just use it for design effects and then code manually or with Dreamweaver in manual mode (Dreamweaver is expensive, many people start by using a simple text editor like Notepad or Notepad++).
  24. As few as you can. Some people get "divitis" using divs everywhere and lots nested inside others which are nested inside others. However, it is a good idea to have one page wrapper because you may want to center the whole page in wide windows and a page wrapper makes that easy. Most developers would have a div for the header and another for the footer if there are several items inside, like a logo, title and menu (although a new HTML5 structure would use the new <header>, <section> and <footer> tags instead of <div> tags). Generally try to use floats (which are part of a position: relative structure) with margins to keep a space between them and an adjacent floated div, instead of position; absolute with top, left, right or bottom positions. It should make a more fluid layout. Lists using ul and li tags are just one method of structuring a page, often used for menu tabs. Most content would normally be in divs; list tags are for lists or short bits of content in a line or vertically.
  25. E-commerce often uses PHP. It's best to download a package and install it and then edit it, as security issues are very important and you shouldn't try to code an e-commerce site manually from the beginning. If you want to use server-side processing for PHP, you can either test online after uploading to your host or download Apache server inside WampServer2 or XAMPP which will give you phpmyadmin to code PHP and also MySQL in case you need a database. Most people start using PHP for "include" files which mean you only have one file to edit and you can include the code like a menu on lots of pages with a .php extension <?php include ("header.inc"); ?> where header.inc is the "include" file
×
×
  • Create New...