Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by Wickham

  1. Wickham

    CSS font-size

    It works in my IE6 to show 25px colored text for the p tag, but your page needs some extra code. You should have a doctype as the first code and also a title and charset:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> p { color:#9900FF; text-align:center; font-size:25px; font-weight:bold; font-style:italic; line-height:22px; background-color:#e0ffff; } h1 {color:#FF0099;} hr {color:sienna;} </style> </head> <body bgcolor=#FFFF99 text="blue"> <h1><Center> Remedi Polyclinic</center></h1> <h3><Center> 1929 Sadashiv peth, Bajirao road, Opp. Telephone exchange, Pune 411030 </center></h3> <hr> <p> In 1991, Dr. D. N. Bhalerao pioneered the concept of polyclinic in Pune. It is a multi-speciality clinic, located in the heart of Pune city i.e. in Sadashiv peth. For the convinience of patients, the polyclinic is housed on the ground floor. Kindly refer to the Google maps for directions - http://maps.google.co.in/maps/place?cid=16677893969031170043</p> <Img src="C:\Documents and Settings\Intel\My Documents\My Pictures\Mangalmurti.gif"> <br><br> <Input type="button" name="contact" value="Contact Us" onClick="f1.asp"> </body> </html> You should check for errors here:- http://validator.w3.org/ there are some errors which I have not corrected.
  2. This page http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35291 has a link near the top to a pdf file Search Engine Optimization Starter Guide! with Google's SEO advice. It has advice for urls and what to avoid, but I can't see a mention of avoiding the word "the".
  3. Like Google Chrome's self-contained tabs? When you erase everything in one virtual machine, do you lose all data like emails or files?
  4. From the album: Wickham's photos

    Snowman in allotments
  5. Wickham

    Wickham's photos

    Wickham's photos
  6. Accessibility is vital for web forms and here is a useful tutorial/checklist:- http://www.accessify.com/features/tutorials/accessible-forms/
  7. The ul tag is the container for all the menu button li tags and it can have its own margin to separate it from outside elements or padding to stop inner li tags from going right to the edges. Li tags are the containers inside the ul tag and can have there own margin to separate each other from the next li tag and padding to stop the text inside from going to the edges of the li container. The "a" tag contains the actual text link and can also have padding and margin to sides but not top and bottom unless the "a" tag has been converted to a block element (it's an inline element by default). This is quite a useful tutorial:- http://www.maxdesign.com.au/articles/inline/ see Inline elements and padding and Inline elements and margins. So you can edit the margin or padding on any of them. It's best to start with no margin or padding for all of them with a general reset:- h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; } at the top of your stylesheet and then add margin or padding to just a few places after the general reset. I distrust % widths because I often think that browsers apply the % differently, so I either don't state a width at all and see what it looks like with just padding and/or margin, then add widths in px if necessary. If you don't state any width the text can expand the container if someone increases text size. You shouldn't have to use a div tag inside ul or li tags, although you might need a div as a container for the whole ul tag menu.
  8. I want my nav links & boxes to fill my 990px div and be centered. That's a contradiction. If the boxes fill the container, they don't have to be centered (unless you mean the text inside). Ben's method of making each nav li width: 12.5% means that they should fit exactly, but you won't get a blank space at far left and right, you will only get standard padding or margin on all of them. Another method is to use a method of centering the li tags inside a container (which can be a fluid width if you want). See item 4 here:- http://www.wickham43.net/dropdownmenus.php where the li tags have no stated width, so some are wider than others, and the container has no width, but the whole menu centers inside. Drag the window of my example wider and narrower and see that the menu stays centered. Edit: one problem with Ben's 12.5% is that all menu li tags are the same width, so if one has link text for a short word like Home and another has a long link text like Televisions and Computers, the longer one might not fit 12.5% and the Home one would have a large space both sides of the text. My example avoids this.
  9. Wickham

    CSS & IE6

    If you encourage people to upgrade IE6 to IE8, how do you know if their old computer has the performance to run IE8? For instance, I still have an old computer with Windows 98SE and IE6 for testing and I don't think IE8 will run on WIN 98SE. They might try IE8 and find it doesn't work properly, or crashes the computer. Just advise viewers in a div that only IE6 viewers can see that IE6 is out of date and leave it to them to decide what to do.
  10. Left menus in a sidebar are the traditional position. A menu there can be edited fairly easily to add more links - you just extend further down. The menu on the left is always visible when someone reduces the window width. A top menu, if it's a drop down menu, takes up only one line so it's neat and tidy, but has the disadvantages that you cannot easily add another button if it's already using up the page or screen width and part of it may be unseen (you have to scroll) when the window is reduced in width. People complain that a left sidebar uses up too much valuable screen "real estate" which could be put to better use, because when someone has reached the page they want, they don't want the menu on the left any more.
  11. Pretty good. Could the left sidebar be a little narrower (only a few px less)? I generally use 1024*768 resolution and it takes up quite a lot of the width.
  12. We need to see your PHP processing code. Somewhere near the end of the code, after the database entry, you would need something like:- mail( $email, "$subject", $replymsg , "From: $admin" ); where the $replymsg variable would contain the registration detail variables from the form like $email, $name, $address, $phone, or whatever is required. $email is the viewer's email to send mail to him/her, $admin would be your email address.
  13. This is the sticky footer code which I think you are trying to use:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; } Sticky Footer Technique #2</title> <style type="text/css"> * { margin:0; /* zero out margin */ padding:0; /* zero out padding */ } html, body { height:100%; /* gives layout 100% height */ overflow:inherit; /* triggers 100% height in Opera 9.5 */ background:#333; } #wrapper { min-height:100%; /* gives layout 100% height */ width:990px; /* centers #wrapper */ position:relative; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { /*position: absolute;*/ width: 990px; /*left: 0px;*/ /*top: 0px;*/ height: 100px; background-color: #00FFCC; } #left_main { background-color: #FFFFFF; width: 960px; /*left: 0px;*/ /*top: 100px;*/ padding-bottom: 10px; padding-top: 10px;/*110px;*/ padding-right: 15px; padding-left: 15px; } * html #wrapper { height:100%; /* IE6 treats height as min-height */ } p { font-size:11pt; text-align:left; /* bottom padding clears the #footer */ font-family: Arial, Helvetica, sans-serif; color: #666666; line-height: 18px; } #clearfooter { height: 80px; border: 0; margin: 0; padding: 0; } #footer { /*position:absolute;*/ /* positions #footer at bottom of window */ /*bottom:0;*/ left:0; margin-top: -80px; height:80px; width:990px; background:#999; } .style1 { font-size: 36px; color: #66FF00; border: 1.5px dashed #666666; padding-top: 8px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px; background-color: #999999; } #right_main { background-color: #009900; width: 440px; padding-top: 10px;/*110px;*/ /*padding-bottom: 80px;*/ float: right; padding-left: 5px; margin-left: 22px; } .clear { clear: both; width: 100%; height: 0; visibility: hidden; } </style> </head> <body> <div id="wrapper"> <div id="header">Content for id "header" Goes Here</div> <div id="left_main"> <div id="right_main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p>mako reels</p> <div class="clear"> </div> </div> <!--end of #left_main--> <div id="clearfooter"> </div> </div><!-- end #wrapper --> <div class="style1" id="footer">copyright</div> <!-- #footer sits outside the #wrapper --> <!--</div>--><!-- end #wrapper --> </body> </html> I have made lots of edits, some are not related to the sticky footer. There is so much content in the right_main div that you don't see the effect of the sticky footer because it sits under the lowest content. If you delete nearly all the content in #left_main and #right_main you will see how it sticks to the bottom. If you want a sticky footer to be visible all the time, you need the other sort as item 1a here:- http://www.wickham43.supanet.com/tutorial/headerfooterfix.html which uses position: fixed for the footer and doesn't use any height: 100%. It needs a margin-bottom on the #container equal to the height of the footer so that no content is hidden by the footer.
  14. The code should be list-style-type: none; not line-style-type: none; as stated in your first post. Edit: I notice that your stylesheet is correct. I checked here:- http://validator.w3.org/ and it showed 13 errors and one was for this section of code:- Calendar where the ul tag appears to be missing and it's the ul tag that has the list-style-type: none;
  15. Wickham

    Full browser page

    That's an interesting link, but what it doesn't say is that the sides, yop and bottom get cut off if you reduce the window size. It centers the image in the center of the window so you need an image big enough for the largest window resolutions, then when you reduce the window size it's still fixed to the center point and cuts off around the sides. Another method which fixes to the window sides and expands or contracts with different window sizes is here:- http://www.wickham43.net/backgroundfullwidthflexible.html but the height is adjusted in proportion so the bottom of the image may not reach the bottom of the window at certain window sizes.
  16. You could put the second language on separate html page(s) which have the correct meta tag charset and include it/them in iframe(s).
  17. I prefer the most minimal page http://www.csstutorial.net/introductionCSS.php Too much green on the others. If you are really trying to concentrate on some complicated code tutorial, you don't want to be distracted by too many images or colors.
  18. You should be able to use Ben's method fairly easily. Use a graphics program like Irfanview to make an image with the five colors and the white spaces, like item 18 here http://www.wickham43.net/firefoxbackground.php The background image needs to be in a container for center parts of the five columns because you have broken the columns into three parts; create a new containing div for the center parts of the five columns and put the background-image with repeat-y in the style for that div. It will mean reorganising the body markup so that you have the five top level parts each with a different background-color, then the containing div with the five middle parts and the background image, then the five bottom parts each with a different background-color.
  19. Yes, except that it's not an image map, you use a different principle. See item 2a here:- http://www.wickham43.net/imagemaps.php The container dl tag #imap has a background image. The areas over the two swans that need to be links have ordinary dd anchor tags with display: block so that the whole area of the dd anchor tag is clickable. You don't have to use dl and dd list tags, you can use divs instead.
  20. Should you have a ; in here:- if (isset ($_POST['submit'])); { I looked at similar code in my forms and there is no ; but it isn't line 13 of your code, so I'm not sure.
  21. It looks good to me. The fact that you've used h2 and h3 more than once is no problem. The main thing is to use h1 as the first code for text in the page for SEO purposes, ie ahead of any p tags, but images for logo or a banner are OK in front of the h1 tag.
  22. Remember that the root method won't work on your local computer which can be very inconvenient when testing your page. It only works from the hosting service server or from a server on your computer.
  23. I looked at your files and saw that there were a lot of repeats in the stylesheet inside the if lt IE 7 comments, so I started looking for differences, but soon gave up. If you have a different stylesheet or styles inside conditional comments, just show the few that are different. Then I noticed that it was the same stylesheet!! I copied it all over to IE6 and saved the stylesheet with a different name styleie6.css inside the conditional comment and started editing, but nothing worked. I then checked for errors here:- http://validator.w3.org/ and it showed 31 errors, mostly unimportant except for is missing, which caused IE6 to use the main stylesheet. I deleted the href="http://www.victorsfood.com.au/food-experiences.shtml">Food Experiences [/code] where it should be:- > </pre> <li> href="http://www.flickr.com/photos/victorsfood/collections/721576219467 91260/" target="_blank">Event Photos</li> <br><br><br><br><br><br><br><br><li> href="http://www.victorsfood.com.au/food-experiences.shtml">Food Experiences without the extra I hope that cures the problem in IE6.
  24. You have a style for div#contentarea a#link which is for the a tag with id="link" but don't have any styles for the other states so add div#contentarea a#link:visited { } div#contentarea a#link:hover {...} div#contentarea a#link:active {...} div#contentarea a#link:focus {...}
  25. Try deleting @ before mail $ok = mail($to, $subject, $message, $headers);
×
×
  • Create New...