Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by Wickham

  1. 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. 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.

  3. I want my nav links & boxes to fill my 990px div and be centered. Almost like on this sites home page, BUT equal blank space both left and right of the first and last nav button.

     

    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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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;

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. A better option, however, would be to add an extra slash to the image links, like this:

     

    /img3/home_f2.gif

     

    That slash at the beginning tells the browser to go all the way back to your document root, and then to the img3 folder, and then finally to look for the image file. This way, the links to the images will be correct no matter whether the viewer is looking at the home page or a sub page.

     

    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.

  14. 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







  15. 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.

  16. I can't see anything wrong with the php code and you are getting the email with the other fields, so it's probably not getting the field from the form.

     

    Remember that with radio buttons the name has to be the same for all radio buttons, only the value is different, like:-

    >
    </pre>
    <li>Male
    Female
    Child</li>

  17. I suppose it depends on what sort of site you are designing.

     

    I don't design many websites and those that I do build are very individual, like a village community website, so if someone searches Google for the village name it's almost bound to be near the top of the list.

     

    There's only one other website dedicated specifically to the village, for the village hall bookings, so my website and that one are normally 1 and 2. There are other websites that include the village, like a local authority website or a site for holiday accommodation, but they usually rate lower in Google. I'm sure it helps to have the site's subject in the domain name.

     

    If you are building a site for retailing shoes, it must be much more difficult to get near the top of the ratings because there are so many other shoe retailers.

     

    So get a domain name that reflects exactly what you sell or where you are, like chicagopizzadelivery.com

×
×
  • Create New...