Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie needs help with Navigation Menu

    Hi All,
    I'm new to CSS and have been pulling my hair out trying to get a horizonal drop down menu to work. I'd be very grateful for any help you can give me.
    I've attached the html code for a test page I'm working on together with the CSS:

    HTML
    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    width:146px;
    height:115px;
    z-index:1;
    left: 931px;
    top: 58px;
    }
    #Layer2 {
    position:absolute;
    width:183px;
    height:171px;
    z-index:2;
    left: 576px;
    top: 307px;
    }
    #Layer3 {
    position:absolute;
    width:151px;
    height:112px;
    z-index:2;
    left: 583px;
    top: 295px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <h1>UKGAC</h1>
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>
    <h2>United Kingdom global accreditation corporation </h2>
    </div>
    <div id="menu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Forms </a>
    <li><a href="accreditation.html">Accreditation Info </a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="news.html">News & Events</a>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div>

    CSS
    /** Common Styles */

    body {
    margin: 30px 0 20px 0;
    padding: 0;
    background: #D7D7BD url(images/img01.png) repeat;
    text-align: left;
    line-height: 20px;
    font-family: Tahoma, Arial, Helvetica, sans-serif, calibri;
    font-size: 12px;
    color: #4C4C4C;
    float: right;
    }

    h1, h2, h3 {
    padding: 0;
    margin: 0;
    color: #FF3232;
    }

    strong {
    color: #000000;
    }

    p, ul, ol {
    margin-bottom: 1.5em;
    float: none;
    padding-left: 23px;
    }

    ul {
    margin: 0px;
    padding: 0;
    }

    a {
    color: #308AC0;
    border-bottom: 1px #97C8E5 dotted;
    }

    a:hover {
    text-decoration: none;
    color: #005880;
    }

    /** Style for header starts here */

    #header {
    width: 800px;
    height: 150px;
    margin: 0px auto;
    background: #FFAC16 url(images/img03.jpg) no-repeat left top;
    }

    #header h1, #header h2 {
    padding: 0;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    }

    #header h1 {
    float: left;
    padding: 43px 10px 10px 20px;
    font-size: 4em;
    }

    #header h2 {
    float: none;

    margin:: 1.5em;
    padding-left: 23px;
    font-size: 20px;

    }

    /** Style for menu starts here */

    #menu {
    width: 800px;
    height: 50px;
    margin: 0px auto;
    background: #000000;
    }

    #menu ul {
    margin: 0px;
    padding: 0 0 0 20px;
    list-style: none;
    }

    #menu li {
    display: inline;
    }

    #menu a {
    display: block;
    float: left;
    border: none;
    background: url(images/img05.jpg) no-repeat left 55%;
    padding: 14px 30px 10px 12px;
    text-decoration: none;
    color: #FFFFFF;
    }

    #menu a:hover {
    color: #FFFFFF;
    font-weight: bold;
    }

    /** Style for wrapper starts here */

    #wrapper {
    width: 840px;
    margin: 0px auto;
    padding: 20px 0;
    background: #FFFFFF url(images/img02.jpg) repeat-y left top;
    }

    The effect I'm trying to achieve is to have sub menus appear below the "services" and "news" top level menus. The sub-menus should just drop down immediately below the top level menus and should be the same (i.e. with the blue bullets against each sub menu).

    I'd be eternally grateful for any help you can give me.
    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    We need to see your complete code including DOCTYPE. Or a link to your page would be better. btw, http://htmldog.com/articles/suckerfish/dropdowns/ is a good resource to learn the making of drop down menus.

    PS: Please use [CODE][/CODE] tags to wrap your code while posting here. You may edit your above post.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi sorry here's the code in it's entirety:

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- Template Design by TheWebhub.com | http://www.thewebhub.com | Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>UKGAC - United Kingdom Global Accreditaion Corporation</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
    <!--
    #Layer1 {
    	position:absolute;
    	width:146px;
    	height:115px;
    	z-index:1;
    	left: 931px;
    	top: 58px;
    }
    #Layer2 {
    	position:absolute;
    	width:183px;
    	height:171px;
    	z-index:2;
    	left: 576px;
    	top: 307px;
    }
    #Layer3 {
    	position:absolute;
    	width:151px;
    	height:112px;
    	z-index:2;
    	left: 583px;
    	top: 295px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
    		<h1>UKGAC</h1>
    	  <h2>&nbsp;</h2>
    		<h2>&nbsp;</h2>
    		<h2>&nbsp;</h2>
    		<h2>&nbsp;</h2>
    		<h2>United Kingdom global accreditation corporation </h2>
      </div>
    	<div id="menu">
    		<ul>
    			<li><a href="index.html">Home</a></li>	
    			<li><a href="#">Forms </a>
    			<li><a href="accreditation.html">Accreditation Info </a></li>
    			<li><a href="services.html">Services</a></li>
    			<li><a href="news.html">News & Events</a>
    			<li><a href="contact.html">Contact Us</a></li>
    		</ul>
    	</div>
    	<div id="content">
    		<div id="right">
    			<div class="post">
    				<h2>news &amp; events </h2>
    				<div align="left"><img style="position:"absolute; WIDTH:145; HEIGHT:212" SRC="images/news.jpg"/>
    			  </div>
    				<p><strong>News</strong> </p>
    				<ul>
    				  <li>The Route to Accreditation</li>
    			      <li>Terms &amp; Conditions</li>
    		      </ul>
    				<p><strong>Forthcoming Events </strong></p>
    				<ul>
    				  <li>Event 1 </li>
    				  <li>Event 2 </li>
    				  <li>Event 3*  </li>
    			  </ul>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    		  </div>
    			<div class="post">
    				<h2>Other information </h2>
    				<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque. </p>
    			</div>
    		</div>
    		<div id="left">
    			<h2>news &amp; events </h2>
    			<p>&nbsp;</p>
    			<p><br /> 
              <a href="#"></a></p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    	  </div>
    	</div>
    	<div id="footer">
    		<p class="copyright">Copyright &copy; 2009 UKGAC.com. Site Designed by 58Design </p>
    		<p class="links"> </p>
    	</div>
    </div>
    </body>
    </html>

    CSS
    Code:
    /** Common Styles */
    
    body {
    	margin: 30px 0 20px 0;
    	padding: 0;
    	background: #D7D7BD url(images/img01.png) repeat;
    	text-align: left;
    	line-height: 20px;
    	font-family: Tahoma, Arial, Helvetica, sans-serif, calibri;
    	font-size: 12px;
    	color: #4C4C4C;
    	float: right;
    }
    
    h1, h2, h3 {
    	padding: 0;
    	margin: 0;
    	color: #FF3232;
    }
    
    strong {
    	color: #000000;
    }
    
    p, ul, ol {
    	margin-bottom: 1.5em;
    	float: none;
    	padding-left: 23px;
    }
    
    ul {
    	margin: 0px;
    	padding: 0;
    }
    
    a {
    	color: #308AC0;
    	border-bottom: 1px #97C8E5 dotted;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #005880;
    }
    
    /** Style for header starts here */
    
    #header {
    	width: 800px;
    	height: 150px;
    	margin: 0px auto;
    	background: #FFAC16 url(images/img03.jpg) no-repeat left top;
    }
    
    #header h1, #header h2 {
    	padding: 0;
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	color: #FFFFFF;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    
    #header h1 {
    	float: left;
    	padding: 43px 10px 10px 20px;
    	font-size: 4em;
    }
    
    
    #header h2 {
    	float: none;
    
    	margin:: 1.5em;
    	padding-left: 23px;
    	font-size: 20px;
    	
    }
    
    /** Style for menu starts here */
    
    #menu {
    	width: 800px;
    	height: 50px;
    	margin: 0px auto;
    	background: #000000;
    }
    
    #menu ul {
    	margin: 0px;
    	padding: 0 0 0 20px;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	border: none;
    	background: url(images/img05.jpg) no-repeat left 55%;
    	padding: 14px 30px 10px 12px;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #menu a:hover {
    	color: #FFFFFF;
    	font-weight: bold;
    }
    
    /** Style for wrapper starts here */
    
    #wrapper {
    	width: 840px;
    	margin: 0px auto;
    	padding: 20px 0;
    	background: #FFFFFF url(images/img02.jpg) repeat-y left top;
    }
    
    /** Style for content starts here */
    
    #content {
    	width: 800px;
    	margin: 0px auto;
    }
    
    #content h2 {
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	border-bottom: 1px #CCCCCC dashed;
    }
    
    #content p {
    	top: auto;
    }
    
    #content a {
    	text-decoration: none;
    }
    
    #right {
    	float: right;
    	width: 480px;
    	padding: 20px 20px;
    }
    
    #right_other {
    	float: right;
    	width: 680px;
    	padding: 20px 20px;
    }
    
    #right ul {
    	margin: 0 3em;
    	padding: 0;
    	list-style: none;
    }
    
    #right li {
    	margin-bottom: 8px;
    	padding-left: 10px;
    	background: url(images/red_dot.gif) no-repeat 0 7px;
    	line-height: 17px;
    }
    
    #right .post {
    }
    
    #left {
    	float: left;
    	width: 220px;
    	padding: 20px 20px;
    	background-color: #E1EFFF;
    }
    
    #left_other {
    	float: left;
    	width: 120px;
    	padding: 20px 20px;
    	background-color: #E1EFFF;
    }	
    
    
    #left ul {
    	margin: 15px 0 0 0;
    	padding: 0;
    	list-style: none;
    }
    
    #left li {
    	padding-left: 10px;
    	background: url(images/img04.gif) no-repeat left 50%;
    }
    
    
    /** Style for footer starts here */
    
    #footer {
    	clear: both;
    	width: 800px;
    	height: 38px;
    	margin: 0px auto;
    	padding-top: 18px;
    	border-top: 1px solid #444444;
    	background: #000000;
    	text-transform: uppercase;
    	font-size: 10px;
    	color: #E5E5CC;
    }
    
    #footer .copyright {
    	float: left;
    	margin: 0px;
    	padding-left: 20px;
    	text-align: center;
    }
    
    #footer .links {
    	float: right;
    	margin: 0px;
    	padding-right: 20px;
    	text-align: center;
    }
    
    #footer .css {
    	padding-left: 20px;
    	background: url(images/image01.png) no-repeat left 50%;
    }
    
    #footer .xhtml {
    	padding-left: 20px;
    	background: url(images/image02.png) no-repeat left 50%;
    }
    
    #footer a {
    	border-bottom: 1px #E5E5CC dashed;
    	text-decoration: none;
    	color: #E5E5CC;
    }
    Hope someone can help

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The effect I'm trying to achieve is to have sub menus appear below the "services" and "news" top level menus. The sub-menus should just drop down immediately below the top level menus and should be the same (i.e. with the blue bullets against each sub menu).
    Have you checked the link in my above post?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    Yes I did. Although I'm still a bit uncertain as to which bits of my code I should be editing.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <ul>
    	<li><a href="index.html">Home</a></li>	
    	<li><a href="#">Forms </a>
    	<li><a href="accreditation.html">Accreditation Info </a></li>
    	<li><a href="services.html">Services</a>
    		<ul>
    			<li><a href="#">Sub 1</a></li>
    			<li><a href="#">Sub 2</a></li>
    		</ul>
    	</li>
    	<li><a href="news.html">News & Events</a>
    		<ul>
    			<li><a href="#">Sub 3</a></li>
    			<li><a href="#">Sub 4</a></li>
    		</ul>
    	</li>
    	<li><a href="contact.html">Contact Us</a></li>
    </ul>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi
    Doesn't work. What I get now is all the menus on the top with no menus below. The effect I'm looking for can be found here -

    http://sperling.com/examples/menuh/

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Paddit View Post
    The effect I'm looking for can be found here -

    http://sperling.com/examples/menuh/
    The method is also described there.. isn't it? Take some time to read and follow.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. I looked at that and tried to apply those changes to my code but still couldnt get it to work. Could the problem be my CSS?

  • #10
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can compare code of this menu with yours: pure css horizontal menu.


  •  

    Posting Permissions

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