SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help using JS with CSS and HTML - Drop down Menu for website

    I'm trying to build a drop down menu. Do I need to incorporate JS to get it to work. My brain is scrambled trying to work it out and looking at different sites. ! Can someone please help me with my code for my website menu? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Puzzle1. Welcome to the forums.

    No, you can do a drop down menu with CSS alone, as demonstrated here:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    (View the source code of that page to see how it works. There isn't much. )

    You can use JS to enhance the menu, but it's not needed.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help. It's nice to know there is a helpful human being out there.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ha ha, there are quite a few around here.

    Let us know how you go with this. If you need any help, just ask.

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! I had a good look at the code and there were some lines that I hadn't seen before (such as the hack for the mac!). Is it the use of the margins that force the menu to be horizontal? I though if a ul was used that automatically made the list vertical? I current have a vertical menu on the website I created (first ever site!) and I'm still struggling to apply the what you kindly demonstrated yesterday. www.scottishgreatdaneclub.co.uk I know the code is very amateurish but I got to the point where I just thought it works! Leave it alone!

    I'd like to be able to have the sub menu on my vertical list? Am I best just starting from scratch, rather than try to edit existing code? As you can tell I'm not very good at this! I also noticed that you used em, % and px? is there a reason for this? I've just stuck to px and %.

    Many thanks again for your help

    Puzzle1 (Shona)

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Puzzle1 View Post
    Is it the use of the margins that force the menu to be horizontal? I though if a ul was used that automatically made the list vertical?
    A UL by default does sit vertically, but there are various ways to change that, such as setting LIs to float: left; (as in the linked example—which is not my site, by the way, but that of our resident guru here, @Paul O'B ; )

    An example of a vertical flyout menu is here:

    http://www.pmob.co.uk/temp/dropdown-vertical3.htm

    However, at the moment you don't have any nested sublists to fly out. E.g. You need something like this:

    Code:
    <ul>
      <li><a href="http://scottishgreatdaneclub.co.uk/index.html">Home</a></li>
      <li><a href="http://scottishgreatdaneclub.co.uk/history.html">History</a>
            <ul>
                <li><a href="">Ach aye, sublink 1</a></li>
                <li><a href="">Aye laddeh, sublink 2</a></li>
            </ul>
      </li>
    </ul>

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, this is the html code in my new menu along with the CSS:

    <!DOCTYPE>
    <html>
    <head>
    <title>Drop Down Menu</title>
    <link rel="stylesheet" href="menu.css">
    </head>

    <body>
    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">The Club</a><li>
    <ul class="dropdown">
    <li><a href="#">History</a></li>
    <li><a href="#">Rules & Regs</a></li>
    <li><a href="#">Committee</a></li>
    <li><a href="#">Membership</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    <li><a href="#">Show Info</a></li>
    <ul class="dropdown">
    <li><a href="#">CH Show</a></li>
    <li><a href="#">Open Show</a></li>
    <li><a href="#">Show Dates</a></li>
    <li><a href="#">Schedules</a></li>
    <li><a href="#">Show Archives</a></li>
    </ul>
    <li><a href="#">Judging</a><li>
    <ul class="dropdown">
    <li><a href="#">Criteria</a></li>
    <li><a href="#">SGDC Form</a></li>
    <li><a href="#">BC Form</a></li>
    </ul>
    <li><a href="#">Club Awards</a><li>
    <ul class="dropdown">
    <li><a href="#">2012</a></li>
    <li><a href="#">2011</a></li>
    <li><a href="#">2010</a></li>
    </ul>
    <li><a href="#">Rescue</a></li>
    <li><a href="#">Health</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </body>
    </html>

    CSS:

    .nav ul {
    display;block
    list-style:none;
    text-decoration:none;
    margin:0;
    padding:0;
    }

    .nav li {
    display:block;
    width:150px;
    background-color:#00008B;
    list-style:none;
    text-align:center;
    font-weight:bold;
    border-top:1px solid white;
    border-bottom:1px solid white;
    position:relative;
    height:35px;
    line-height:35px;
    }


    .nav a {
    text-decoration:none;
    color:white;

    }

    .nav li a:hover {
    background-color:#D8BFD8;
    font-style:italic;
    color:#000000;
    }

    .dropdown ul {
    position:relative;
    list-style:none;
    text-decoration:none;
    margin:0;
    padding:0;
    }

    .dropdown ul li {
    width:50px;
    background-color:#00008B;
    list-style:none;
    text-align:center;
    font-weight:bold;
    border-top:1px solid white;
    border-bottom:1px solid white;
    position:absolute;
    height:35px;
    line-height:35px;
    }


    .dropdown ul li a {
    text-decoration:none;color:white;

    }

    .dropdown ul li a:hover {
    background-color:#D8BFD8;
    font-style:italic;
    color:#000000;
    }

    Then confused myself about where I go from here.

    Puzzle1 :-)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yeah, some major errors in your HTML and CSS there. Try this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Vertical Menu</title>
    <style media="all">
    body {background: #c6deff;}
    
    ul.nav, .nav ul {
    	list-style:none; 
    	margin:0; 
    	padding:0;
    }
    
    .nav li {
    	width:150px; 
    	background-color:#00008B;
    	text-align:center;
    	font-weight:bold;
    	border-top:1px solid white; 
    	border-bottom:1px solid white;
    	position:relative;
    }
    
    .nav a {
    	text-decoration:none;
    	color:white;
    	display: block;
    	background: darkBlue;
    	line-height: 35px;
    }
    
    .nav li a:hover {
    	background:#D8BFD8;
    	font-style:italic;
    	color:#000000;
    }
    
    .nav ul {
    	position: absolute;
    	top: 0;
    	margin-left:-999em;
    	min-height:0;
    }
    
    .nav li:hover ul { margin-left:149px;} 
    </style>
    </head>
    <body>
    <ul class="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">The Club</a>
    		<ul>
    			<li><a href="#">History</a></li>
    			<li><a href="#">Rules & Regs</a></li>
    			<li><a href="#">Committee</a></li>
    			<li><a href="#">Membership</a></li>
    			<li><a href="#">Contacts</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Show Info</a>
    		<ul>
    			<li><a href="#">CH Show</a></li>
    			<li><a href="#">Open Show</a></li>
    			<li><a href="#">Show Dates</a></li>
    			<li><a href="#">Schedules</a></li>
    			<li><a href="#">Show Archives</a></li>	
    		</ul>
    	</li>
    	<li><a href="#">Judging</a>
    		<ul>
    			<li><a href="#">Criteria</a></li>
    			<li><a href="#">SGDC Form</a></li>
    			<li><a href="#">BC Form</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Club Awards</a>
    		<ul>
    			<li><a href="#">2012</a></li>
    			<li><a href="#">2011</a></li>
    			<li><a href="#">2010</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Rescue</a></li>
    	<li><a href="#">Health</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Blog</a></li>
    </ul>
    </body>
    </html>
    A few of the errors included:

    - not nesting the sub UL inside its parent LI. E.g.

    You need this:

    Code:
    <li><a href="#">Club Awards</a>
    		<ul>
    			<li><a href="#">2012</a></li>
    			<li><a href="#">2011</a></li>
    			<li><a href="#">2010</a></li>
    		</ul>
    	</li>
    not this:

    Code:
    <li><a href="#">Club Awards</a></li>
    		<ul>
    			<li><a href="#">2012</a></li>
    			<li><a href="#">2011</a></li>
    			<li><a href="#">2010</a></li>
    		</ul>
    - citing .dropdown ul when the class is on the UL, meaning it should be ul.dropdown (although I remeoved that class anyway, as it was unnecessary).

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, huge thanks to you and major respect. I've spent a long time trying to figure this out and I was on the point of nearly giving up. I take my hat off to you. Thank you so much

    Puzzle1

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You're most welcome. Glad I could help. There are lots of helpful folk around here, so I hope we'll see you back. The menu may need some refining, so don't hesitate to ask for more help with it.

  11. #11
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, back again! I am unable to get the menu to work properly within my website. As you will see I have removed the scroll box, resized the table cells, deleted the nav.css file (my orignal menu file). I'm not sure what else to try? If I construct a completely new table with no other data in it except the menu, it works perfectly. I'd appreciate your input. Below is my code! I've taken a copy of the index.html file and style.css files. Please advise? Thanks.

    Puzzle1 (Shona)

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Welcome to the Scottish Great Dane Club</title>
    <meta name="msvalidate.01" content="9CCBC9C152D72D7379A682909A4D0784" />
    <meta http-equiv="content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Scottish Great Dane Club Aims">
    <meta name="keywords" content="Scottish; Great; Dane; Club; Scotland; Danes;">
    
    <style media="all">
    
    ul.nav, .nav ul {
    	list-style:none; 
    	margin:0; 
    	padding:0;
    }
    
    .nav li {
    	width:150px; 
    	background-color:#00008B;
    	text-align:center;
    	font-weight:bold;
    	border-top:1px solid white; 
    	border-bottom:1px solid white;
    	position:relative;
    }
    
    .nav a {
    	text-decoration:none;
    	color:white;
    	display: block;
    	background: darkBlue;
    	line-height: 35px;
    }
    
    .nav li a:hover {
    	background:#D8BFD8;
    	font-style:italic;
    	color:#000000;
    }
    
    .nav ul {
    	position: absolute;
    	top: 0;
    	margin-left:-999em;
    	min-height:0;
    }
    
    .nav li:hover ul { margin-left:149px;} 
    </style>
    
    
    </head>
    
    <body>
    <!--Begin table Header and logo-->
    <table border="0" width=100% height=20% cellspacing="0">
    <tr>
    <td class="header"></td>
    </tr>
    </table>
    <!--End Header and logo-->
    <!--End table-->
    
    <!--Begin table. Middle border-->
    <table border="0" width=100% height=5% cellspacing="0">
    <tr>
    <td width=70% class="midborder"></td>
    </tr>
    </table>
    <!--End table.-->
    
    <!--Begin table. Navigation Bar-->
    <table border="0" width=100% height=70% cellspacing="0">
    <tr><td width=25% class="background">
     <ul class="nav">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">The Club</a>
    		<ul>
    			<li><a href="#">History</a></li>
    			<li><a href="#">Rules & Regs</a></li>
    			<li><a href="#">Committee</a></li>
    			<li><a href="#">Membership</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Show Info</a>
    		<ul>
    			<li><a href="#">CH Show</a></li>
    			<li><a href="#">Open Show</a></li>
    			<li><a href="#">Show Dates</a></li>
    			<li><a href="#">Schedules</a></li>
    			<li><a href="#">Show Archives</a></li>	
    		</ul>
    	</li>
    	<li><a href="#">Judging</a>
    		<ul>
    			<li><a href="#">Criteria</a></li>
    			<li><a href="#">SGDC Form</a></li>
    			<li><a href="#">BC Form</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Club Awards</a>
    		<ul>
    			<li><a href="#">2012</a></li>
    			<li><a href="#">2011</a></li>
    			<li><a href="#">2010</a></li>
    			<li><a href="#">Award Archives</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Rescue</a></li>
    	<li><a href="#">Health</a></li>
    	<li><a href="#">Contacts</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Blog</a></li>
    </ul>
    </td>
    
    <!--Begin contents-->
    
    <td width=70%  class="content" valign="top">
    
    <h3><center>Welcome to the Scottish Great Dane Club Website</center></h3>
    <p>The Scottish Great Dane Club Aims:</p>
    <!--Begin Aims-->
    <p>To enhance the profile of Great Danes in Scotland and the UK</p>
    <p>To advocate and encourage responsible dog ownership and promote excellence in breeding and exhibiting.</p>
    <p>To maintain the breed standard and uphold the values of the Scottish Great Dane Club and the Kennel Club.</p>
    <hr>
    <p span style="color:#6666FF;font-size=14px;font-family=Verdana";>For regular updates and additions to our website, visit our news page:<a href="http://scottishgreatdaneclub.co.uk/news.html">Club News</a></p><br><hr>
    <p>Visitor #<br><img src="http://homepages.plus.net/cgi-bin/count_dyno? bridgethyme_ss";></p>
    </div><br>
    </td>
    <!--End Contents-->
    
    <!Begin Links Box-->
    <td width=5% valign="bottom">
     <ul class="linksbox">
        <h4>Quick Links & Forms</h4>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/rulesregs2012.pdf" target="_blank">Rules & Regs</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/showdates2013.pdf" target="_blank">Show Dates</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/schedules.html">Schedules</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/membership.pdf" target="_blank">Membership</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/somandate.pdf" target="_blank">SO Mandate</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdccriteria.pdf" target="_blank">Judging Criteria</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdcjudging.pdf" target="_blank">SGDC Judging</a></li>
        <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/bcjudging.pdf" target="_blank">BC Judging</a></li>
     </ul>
    </td>
    </tr>
    </table>
    <!End links Box-->
    <!End table-->
    
    <Begin table. Footer-->
    <table border="0" width=100% height=5% div class="footer" cellspacing="0">
    <tr><td>Scottish Great Dane Club &#xA9; 2012 Design by Shona Owens</td>
    </tr>
    </table>
    <!--End footer-->
    <!End Table-->
    
    </body>
    </html>
    Code CSS:
    .header {
    	background-image:url("images/Final2.jpg");
    	background-repeat:no-repeat;
    	background-position:center;
    	background-color:#FFFFFF;
    	margin:auto;
    	padding:10px;
     
    }
     
    .midborder {
    	background-image:url("images/SGDC Tartan Dark.jpg");
    	Background-repeat:repeat x;
    	padding:0;
    }
     
     
     
     
    h3 {
    	font-family:Verdana Arial;
    	font-size:14px;
    	color:#6666FF;
    	text-align:left;
    	padding:0px;
     
    }
     
    .content {
       	font-family:Verdana;
    	font-size:14px;
    	color:#000;
    	text-align:left;
    	padding:15px;
    }
     
    .clublinks {
    	font-family:Verdana Arial;
    	font-size:14px;
    	line-height:20px;
    	text-align:left;
    	list-style:none;
    	padding:10px;
    }
     
    .clublinks a {
    	color:#00008B;
    }
     
     
    .clublinks a:visited {
    	color:#00008B;
     
    }
     
     
    h4 {
    	font-family:Verdana;
    	font-size:12px;
    	color:6666FF;
    	text-align:center;
    	padding:0;
    }
     
     
     
    .linksbox {
    	font-family:Verdana Arial;
    	width:150px;
    	border:1px solid #C6DEFF;
    	font-size:14px;
    	line-height:20px;
    	text-align:left;
    	list-style:none;
    	padding:10px;
    }
     
    .linksbox a {
    	text-decoration:none;
    	color:#00008B;
    	font-size:14px;
     
     
    }
     
    .linksbox a:visited {  
    	color:#00008B;
     
    }
     
    .footer {
    	background-color:#C6DEFF;
    	font-family:Verdana Arial;
    	font-size:13px;
    	font-weight:bold;
    	text-align:center;
    	color:#000;
    	padding:0;
    }
    Last edited by Stevie D; Jan 30, 2013 at 06:21. Reason: Code tags added

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Could you provide an updated link? On this page:

    http://www.scottishgreatdaneclub.co.uk/

    you don't have the code you show above. You just have an unordered list (<ul>) with not sub uls.

  13. #13
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, that's the home page (index.html) updated only. I've also removed the css file that calls my previous menu from this page only. I really appreciate this. Many thanks.

    Puzzle1 (Shona)

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, the menu seems to be working now. Is all well now, or do you still see issues?

    Glad it's back again.

  15. #15
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I only uploaded the menu after you said as I didn't want to work on the website live. The drop down part isn't working! Please help!! Thanks.

    Shona

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's working perfectly for me now. Make sure to refresh your browser / clear your cache etc. If that doesn't help, what browser are you using?

  17. #17
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm using IE 9 The menu works fine, till I put it into the website, that's why I am thinking there is something wrong with my code? Thanks.

    Shona

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The menu works OK in IE9 for me. Did you try those steps I suggested?

  19. #19
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Yes I did try them. It works fine in chrome, but not in IE. Had a couple of friends try in IE (incase I'm having a 'thick' day) and the sub menu definitely doesn't appear.

    Thanks.

    Shona

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, it seems your page is going into Quirks mode in IE some of the time. That means that it is not recognizing your doctype at the top of the page, so something is going wrong with that. What do you see in your HTML? Is it this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <html>
    <head>
    If so, try changing it to this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>

  21. #21
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I changed it and lost half the information on the page and the menu still didn't work :-( I've changed it back and removed the additional <html> tag. Anything else I can try? I so appreciate all your input. Thanks.

    Shona

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yeah, the code I gave above is what you should be using, so there is still work to do here. At the moment you have this:

    <!DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    which is throwing IE into the pits of hell. At least get rid of the duplication at the front.

    Ideally, re-instate that code I gave above and let us see what happens on the page, so we can sort out what's wrong with it. No point sweeping problems under the carpet.

  23. #23
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi the menu works but the page has gone bananas again. Please check it out and I'll hover here! Thanks.

    Shona :-)

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I know it looks terrible now, but this is progress. You are now seeing what your code is really like, which is a good opportunity to fix it up. The first thing to do is remove the height settings on your tables, such as here:

    Code:
    <table border="0" width="100%" height="20%" cellspacing="0">
    That won't necessarily make anything loo better at this stage, but it's a step in the right direction. A handy service that helps to iron out coding errors is the HTML Validator. Have a look at the results here:

    http://validator.w3.org/check?uri=ht...Inline&group=0

    See if you can fix the errors there. If you don't understand what's being said, just ask.

    There is also an equivalent CSS Validator, but let's concentrate on the HTML first.

  25. #25
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I can say is "aw gawd" I'd no idea it was so bad. Anyway I've narrowed it down to 6 errors but not sure on how to fix them ?(index.html page only - once I get that correct I'll go through the entire site). The good news is the menu works LOL. I might have to lie down in a dark room after today! Can you have a wee look please? Thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •