Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by Wickham

  1. You need to buy a domain name from a company like http://www.ukreg.com/ where it will tell you if the domain name you want is still available (ie no one owns it at present). It will also tell you how many years you will buy. The prices haven't changed for many years. You give your credit card details and email address and get a reminder before they take the renewal when the first period is due to run out.

     

    You need a ftp service to upload your page code to a hosting service.

     

    You then need a hosting service to take your page code and show it online. You will also be able to create a large number of email addresses from your domain name using the hosting service.

     

    There are some general notes about the above here:-

    http://www.wickham43.net/generaladvice.php#hosting

     

    It's better to have the domain name provider, hosting service and ISP with different companies. It saves a lot of trouble if you have a problem with one and need to move your account. You won't want to lose your domain name if you want to move your hosting service or change your ISP.

     

    You can use WYSIWYG "What you see is what you get" programs to make a page development easy for a beginner, like Coffeecup

    http://www.coffeecup.com/freestuff/

    but it's better to learn HTML and CSS to code your own page. You can use Worpress.com for some blog templates to edit or use Wordpress.org which is more complicated but you can then make your own page or blog without using a template. There are others if you Google "Free website templates".

  2. Start off with a HTML5 and CSS website.

     

    HTML5 tutorial:- http://www.w3schools.com/html5/default.asp

     

    Then edit for media-queries

    http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

    I adapted one on my sites for media queries in an hour or so, it basically meant editing the CSS and then testing (I used Opera "Fit to Width" as a quick check to see what some (not all) small screen devices would do.

     

    Then add a jquery slideshow with a few of your own images (Google jquery slideshow) There are plenty to choose from. jQuery is javascript so you kill two birds with one stone.

     

    Ajax tutorial http://www.w3schools.com/ajax/default.asp

     

    XML tutorial http://www.w3schools.com/xml/

  3. If you keep your 1400px width for #header and #wrap, the make the footer divs 1400px too and then they will match what is above. Leave the 1400px widths and try this:-

    #foot{
    background: #c1b78e url(images/footer-bg.jpg) repeat-
    x;
    overflow: auto;          width: 1400px;
    position: relative;
    margin-top: -150px;
    height: 150px;
    clear: both;
    }
    .foot{
    width: 1400px;             /*960px;*/
    margin: 0 auto;
    padding-top: 10px;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    }
    

     

    There is a horizontal scrollbar in my 1366px resolution, but I don't get the footer stopping when you scroll right, it continues. Hope that helps.

  4. The #header is also 1400px wide, which is inside #wrap also 1400px; wide with margin: auto; so in my resolution there is space on the left, then 1400px of header and wrap causing the scrollbar.

     

    I edited both #header and #wrap to 960px and it solved everything.

  5. Floated divs don't give their height to a parent container div, so a following unfloated div like a footer will move up over floated divs until it hits something that isn't floated. So a clear div (which is unfloated) after the floated divs keeps lower content down below the floated divs.

     

    In fact there are two uses for a clear div, positioned after the floated divs but just before the </div> of the container will drag down the background of the container to the bottom of the floated divs. Items 2a and 2b explain this effect on backgrounds:-

    http://www.wickham43.net/firefoxbackground.php

     

    A clear div positioned after the floated divs and just after the </div> of the container above will keep lower divs in their place without affecting the background of the container above.

  6. This adds the texashr.gif to the top of every li tag in the .nav-left menu. I've just tested in Firefox and I got the double image as I didn't delete all your images in separate li tags. I didn't edit your markup but you need to delete all the li tags with the Texas flag image.

     

    .nav-left li { 
       background: url(images/texashr.gif) top center 
    no-repeat; display: block;
    }
    

     

    You will also have to lower the link text to avoid the image. Padding to the top of the li tag doesn't work, but adding padding-top to the "a" does work, but some of your left menu items aren't links, so I had to combine the text with the link above.

    CSS

    .nav-left li { 
       background: url(images/texashr.gif) top center 
    no-repeat; display: block;
    }
    .nav-left li a { 
       padding-top: 10px; display: block; 
    }
    

    Typical section of markup:-

    <li><a 
    href="http://www.renttexashillcountry.com/austin/index
    .html">Austin</a><!--</li>							
    
        <li>--><font size="0"><em>Oak Hill, 
    Rollingwood,<br>Sunset Valley, West Lake 
    Hills</em></font></li>
    
    <!--	<li><img 
    src="http://www.renttexashillcountry.com/siteimages/te
    xashr.gif" alt="Texas Flag"></li>
    -->							
    <li><a 
    href="http://www.renttexashillcountry.com/bandera/inde
    x.html">Bandera</a><br><!--</li>							
    
        <li>--><font size="0"><em>Bandera Falls, 
    Lakehills, Medina, Mico, Pipe Creek, 
    Tarpley</em></font></li>
    
    <!--	<li><img 
    src="http://www.renttexashillcountry.com/siteimages/te
    xashr.gif" alt="Texas Flag"></li>
    -->				
    

    Note that the Texas flag li is deleted and I've deleted the </li> and <li> between the ink and the text that wasn't a link and inserted a <br> tag in one place but it doesn't seem to be needed, for instance, between Austin and Oak Hill there's no <br> and I don't know why the Oak Hill doesn't go next to Austin, but it doesn't so that's OK.

  7. The reason for the warning "Byte-Order Mark found in UTF-8 File" is definitely because the second website www. sites4eyes .co .uk/portfolio.php has been saved with encoding utf-8 while the first www. sites4eyes .co .uk has been saved with encoding ANSI, I've checked both. It's nothing to do with the .php extension.

     

    When you save the file (using Notepad in my case), use Save As and you should see boxes for File name, Save as Type and also encoding, before the Save and Cancel buttons. Change to ANSI.

  8. It is usual to use encoding ANSI when saving any html or php file.

     

    The byte order mark can sometimes be seen at the very top left corner of the screen, it's a funny symbol that doesn't do any harm, but may lower everything by one row.

     

    Coding utf-8 should be done in the meta tag for charset, like:-

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    

  9. The warning "Byte-Order Mark found in UTF-8 File" in www. sites4eyes .co .uk/portfolio.php is because it has been saved with the encoding utf-8 instead of encoding ANSI.

     

    I've just checked that it was saved like that by saving your php file and opening it in Notepad and then using Save As and looking at the encoding box in teh save window.

  10. Here's one solution:-

    http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

     

    Opera has a feature in "View, Fit to Width" which simulates display on a small screen device like a mobile phone when you reduce the browser window width.

     

    What happens is that drop down menus or flyout menus, tables and the like are converted to a vertical list so that a user only has to scroll up and down rather than sideways as well, although he may hve to use the zoom (Opera provides it at the bottom of the simulation window) to get the best display. Tables are shown with each cell in a row below the previous cell instead of across the row.

  11. I understand the display table method to be used for layout purposes, IMO, for your example, the 'old-fashioned' <table> would be the proper way (displaying data) - or not?

     

    Old tables and display: table work the same way, except that display: table has a problem with IE6 and IE7 so I don't use it.

     

    Floated divs would also be read across each div horizontally by a screen reader, and then across the next row of floated divs, but what I was trying to say is that if you have a lot of names vertically in one floated div, and then a lot of addresses vertically in the next floated div beside it, then a screen reader will read out all the names before all the addresses, so you can't relate one name to one address. The solution with floated divs would be to have only one name in a floated div, then one address, then one tel. no., then start another row of floated divs. but it's generally reckoned to be better to put tabular data in a table (or display: table).

  12. A good reason to use tables (or display: table) instead of columns of divs for data is for screen readers or small screen devices.

     

    If you have data shown in rows like Name, address, tel. no. then a screen reader will read across each row in turn reading out each name, address and tel. no. but if you use divs as columns the screen reader will read down all the names first, then down all the addresses, etc. which makes it impossible to link an address and tel. no. with a name.

     

    Small screen devices can usually break up each table row showing each cell below the previous one, so a name is followed by address and tel. no. then the next name, address and tel. no. whereas columns of divs would be shown down each column before the next column like a screen reader. Opera has "View - Fit to width" to simulate small screen devices if you make the window narrower.

  13. When I have tabular data to code I always use a conventional table (with CSS styling) as display: table isn't supported by IE6 and IE7, see this:-

    http://www.quirksmode.org/css/display.html

     

    Otherwise, I use floats for text, images, etc. which aren't tabular data.

     

    Display: table was quite a good idea, but lack of support in IE6 and IE7 means that it can't be used yet unless you know your users will all have IE8 or above. I think there is a .htc file that can enable IE7 to use display: table, but there are stil a few people using IE6 and the old type of table will not have problems in any browser.

  14. The way you have it, the code checks if a field is NOT empty, try reversing it so it checks if any field IS empty:-

    // Code to check for empty input boxes (edit to suit your form)
    if (empty($email) || empty($name) || empty($subject) || empty($component) || empty($size)) {
    echo "Please complete all boxes";
    }
    else .........
    

     

    Separate the email check into a separate if statement.

     

    It's often best to download a form script that has many security features.

  15. I'm not sure why IE isn't processing the body background. You have a style tag with

    <style type="text/css">
    body { background-color: #702C53; }
    </style>
    

    and it works in Firefox but not in IE, even though it's after the IE conditional comment. I found that if I moved it to the last item before the </head> tag it worked in IE9, perhaps something in the scripts was affecting IE.

    <style type="text/css">
    /*body { background-color: #702C53; } ......moved down below*/
    </style>
    
    <style type="text/css">.recentcomments a{display:inline !
    important;padding:0 !important;margin:0 !important;}
    </style>
    
    <style type="text/css">.broken_link, a.broken_link {
    text-decoration: line-through;
    }
    </style>
    <script type="text/javascript">var analyticsFileTypes = [''];
    var analyticsEventTracking = 'enabled';</script> 
    
    <script type="text/javascript">var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-470187-29']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);
    (function() {
    	var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; ga.async = true;
    	ga.src = ('https:' == 
    document.location.protocol ? 'https://ssl' : 'http://www') + 
    '.google-analytics.com/ga.js';
    	var s = document.getElementsByTagName
    ('script')[0]; s.parentNode.insertBefore(ga, s);
    })();</script> 
    <style type="text/css">
    body { background-color: #702C53; } /* ..........moved here */
    </style>
    </head>
    

    I found that even if I added background-color: #702C53; to the ie stylesheet it still didn't work in IE.

    You have a real jumble of style tags in the head section, but the style tag with the background should have worked as it was one of the last ones.

  16. Add this style after the .outform li style:-

    .outform li.multiline { height: 85px; }
    

    and delete the height from .outform label which isn't needed as it will be contained by whatever height is given to the li tag. I would also suggest removing the line-height a sthis makes the two lines in the label text far apart:-

    <style type="text/css">
    .outform {
    list-style:none;
    padding:10px;
    padding-top:0px;
    padding-bottom:0px;
    width:80%;
    margin:0;
    background-color:black;
    }
    .outform li{
    height:40px;
    /*line-height:40px;   edited*/
    background-color:green;
    padding:5px;
    clear:both;
    list-style:none;
    border-bottom:2px solid black;
    }
    .outform li.multiline { height: 85px; } /* added */
    
    .outform input {
    float:left;
    height:100%;
    }
    .outform label {
    width:140px;
    float:left;
    /*height:30px;     edited */
    }
    
    </style>
    

     

    and edit the markup for the last two li tags with the textarea to add the class:-

    <body>
    <form method="post" action="quote.php">
    <ul class="outform">
    <li>
    <label> Name </label>
    <input type="text" value="" />
    </li>
    <li>
    <label>Last Name</label>
    <input type="text" value="" />
    </li>
    
    <li>
    <label>Email * </label>
    <input type="text" value="" />
    </li>
    <li class="multiline">
    <label>Multi Line Label is here</label>
    <textarea rows="4" cols="30"></textarea>
    </li>
    <li class="multiline">
    <label>yet another Multi Line Label is here</label>
    <textarea rows="4" cols="30"></textarea>
    </li>
    </ul>
    </form>
    </body>
    

     

    The claas with an increased height allows the label text to be on two lines but I found that the class needed to be 85px height to allow the four rows of textarea to be within the li height in Firefox (IE uses slightly less height for the four rows).

  17. Add

    .container { padding-top: 10px; }
    

    to the css file. I have a suspicion that margin-collapse is having an effect from the h1 and causing the problem but I haven't tested any further as the .container class makes the space in Firefox.

     

    IE 9 doesn't show any header backgrounds so the page looks terrible. IE9 doesn't process the header background gradient and IE6 to IE8 don't process the border-radius. See http://www.findmebyip.com/litmus/

     

    For IE9 to show a background add a plain background-color and border-radius after the styles for linear-gradient and gradient with the browser prefixes.

     

    .container { padding-top: 10px; } /*added style*/
    
    header
    {
    padding-top: 20px;  margin-top: 20px; 
    color: #fff;
    text-align:center;
    font-size: 24px;
    height: 80px;
    width: 900px;
    background: -moz-linear-gradient(
    				center top,
    				rgb(12,12,50) 0%,
    				rgb(120,120,160) 100%
    			);
    			background:
    				-webkit-gradient(
    					linear,
    					right top,
    					right bottom,
    					color-stop
    
    (0,rgb(12,12,50)),
    					color-stop
    
    (1,rgb(120,120,160))
    				);
    
    -moz-border-radius: 12px 12px 12px 12px;
    -webkit-border-radius: 12px 12px 12px 12px;
    background-color: #ccc; border-radius:  12px 12px 12px 12px; /*added styles for IE9*/
    }
    

    which shows color with border-radius in IE9 but no radius in IE6 to IE8, or use javascript for IE rounded corners.

  18. The body is normally the whole screen area, so the background is for the whole window and margins appear around the window sides. The border and padding appear inside the margins, so with your code the border appears 300px from the left and right sides and padding inside the borders.

     

    It's more normal to have only a background and margins to the body style, then use a page wrapper div for all your content which can have width, height, padding and borders.

     

    It would be a good idea to add a doctype from here:-

    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    We generally recommend the HTML 4.01 Strict doctype on this forum.

  19. Welcome. I suggest you work through the w3schools tutorial starting with the basics from this page:-

    http://www.w3schools.com/html/

     

    If you have a specific problem, post your code here inside code tags, or better still, post a link to your online version because that helps us to see what the errors cause and also allows us to download any images you have used for testing.

×
×
  • Create New...