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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Drop-Down Menu Alignment Problem

    Hi,

    Sorry this is probably something really obvious and I'm stupid. Any help appreciated.

    I am trying to do a drop-down menu with CSS and mainly based on the suckerfish example (not yet included the JS though as just testing).

    However though the menu shows and the drop-down lists appear I cannot for the life of me get it to line up - it appears below and to the right of the DIV container I want to use.

    If it's not clear I want the menu to be inside the title_div DIV which is within the page_title DIV (i.e. the black section at the top).

    Thanks in advance for any help; full HTML/CSS code below.

    Regards,

    Dave.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>TITLE_HERE</TITLE>
    
    <STYLE TYPE="text/css">
    body
    {
    	font-family: Verdana, Arial, Sans-serif;
    	font-size: 12pt;
    	background-color: white;
    }
    
    div.main_container
    {
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0px;
    	border: solid 1px black;
    }
    
    div.page_title
    {
    	color: white;
    	font-size: 14pt;
    	background-color: black;
    	padding: 5px;
    	margin-top: 0px;
    }
    
    div.page_content
    {
    	padding: 5px;
    	clear: left;
    }
    
    div.page_footer
    {
    	margin-top: 20px;
    	padding: 5px;
    	background-color: black;
    	color: white;
    	margin-bottom: 0px;
    	font-size: 10pt;
    	font-weight: bold;
    }
    
    div.page_footer a
    {
    	color: #e0e0ff;
    	text-decoration: none;
    }
    
    div.page_footer a:hover
    {
    	color: white;
    }
    
    div.login_box
    {
    	margin-top: 20px;
    	width: 50%;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 20px;
    }
    
    div.error
    {
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	font-size: 14pt;
    	color: red;
    	width: 100%;
    	text-align: center;
    }
    
    
    #nav ul
    {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav a
    {
    	display: block;
    	width: 10em;
    	color: white;
    	text-decoration: none;
    	font-size: 10pt;
    }
    
    #nav a:hover
    {
    	color: red;
    }
    
    #nav li
    {
    	float: left;
    	width: 10em;
    	background-color: black;
    	list-style: none;
    	padding: 4px;
    }
    
    #nav li ul
    {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	height: auto;
    }
    
    #nav li ul li
    {
    	border-top: solid 1px white;
    }
    
    #nav li:hover ul
    {
    	left: auto;
    }
    
    div.page_menu
    {
    	position: absolute:
    }</STYLE>
    
    </HEAD>
    <BODY>
    
    <DIV ID="container_div" CLASS="main_container">
    <DIV ID="page_title" CLASS="page_title">
    <DIV ID="title_div" CLASS="main_title">
    Page_Title</DIV>
    
    <DIV ID="page_menu" CLASS="page_menu">
    <UL ID="nav">
    <LI><A HREF="#">Option One</A>
     <UL>
     <LI><A HREF="#">Option One A</A></LI>
     <LI><A HREF="#">Option One B</A></LI>
     </UL>
    </LI>
    <LI><A HREF="#">Option Two</A>
    
     <UL>
     <LI><A HREF="#">Option Two The First</A></LI>
     <LI><A HREF="#">Option Two The Second One</A></LI>
     </UL>
    </LI>
    </UL>
    </DIV>
    </DIV>
    <DIV ID="content" CLASS="page_content">
    
    Content Goes Here...
    
    </DIV>
    
    <DIV ID="footer_div" CLASS="page_footer">
    Footer_Text
    
    </DIV>
    
    </DIV>
    Last edited by davex; 12-18-2010 at 05:52 PM. Reason: Remove commented-out code for clarity

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello davex,
    The first step would be to check your code with the validators and correct the errors found.
    Have a look at the links about validation in my signature line below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok two small tweaks (one CSS parse and the DOCTYPE) but no effect.

    Revised code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
       
    <HTML>
    <HEAD>
    <TITLE>TITLE_HERE</TITLE>
    
    <STYLE TYPE="text/css">
    body
    {
    	font-family: Verdana, Arial, Sans-serif;
    	font-size: 12pt;
    	background-color: white;
    }
    
    div.main_container
    {
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0px;
    	border: solid 1px black;
    }
    
    div.page_title
    {
    	color: white;
    	font-size: 14pt;
    	background-color: black;
    	padding: 5px;
    	margin-top: 0px;
    }
    
    div.page_content
    {
    	padding: 5px;
    	clear: left;
    }
    
    div.page_footer
    {
    	margin-top: 20px;
    	padding: 5px;
    	background-color: black;
    	color: white;
    	margin-bottom: 0px;
    	font-size: 10pt;
    	font-weight: bold;
    }
    
    div.page_footer a
    {
    	color: #e0e0ff;
    	text-decoration: none;
    }
    
    div.page_footer a:hover
    {
    	color: white;
    }
    
    div.login_box
    {
    	margin-top: 20px;
    	width: 50%;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 20px;
    }
    
    div.error
    {
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	font-size: 14pt;
    	color: red;
    	width: 100%;
    	text-align: center;
    }
    
    
    #nav ul
    {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav a
    {
    	display: block;
    	width: 10em;
    	color: white;
    	text-decoration: none;
    	font-size: 10pt;
    }
    
    #nav a:hover
    {
    	color: red;
    }
    
    #nav li
    {
    	float: left;
    	width: 10em;
    	background-color: black;
    	list-style: none;
    	padding: 4px;
    }
    
    #nav li ul
    {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	height: auto;
    }
    
    #nav li ul li
    {
    	border-top: solid 1px white;
    }
    
    #nav li:hover ul
    {
    	left: auto;
    }
    
    div.page_menu
    {
    
    }
    </STYLE>
    
    </HEAD>
    <BODY>
    
    <DIV ID="container_div" CLASS="main_container">
    <DIV ID="page_title" CLASS="page_title">
    <DIV ID="title_div" CLASS="main_title">
    Page_Title</DIV>
    
    <DIV ID="page_menu" CLASS="page_menu">
    <UL ID="nav">
    <LI><A HREF="#">Option One</A>
     <UL>
     <LI><A HREF="#">Option One A</A></LI>
     <LI><A HREF="#">Option One B</A></LI>
     </UL>
    </LI>
    <LI><A HREF="#">Option Two</A>
     <UL>
     <LI><A HREF="#">Option Two The First</A></LI>
     <LI><A HREF="#">Option Two The Second One</A></LI>
     </UL>
    </LI>
    </UL>
    </DIV>
    </DIV>
    <DIV ID="content" CLASS="page_content">
    
    Content Goes Here...
    </DIV>
    
    <DIV ID="footer_div" CLASS="page_footer">
    Footer_Text
    
    </DIV>
    
    </DIV>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    left: auto; is pretty vague. Make the parent li relative so the child has something to measure off of, then specify where you really want the child li to be.

    Try these changes highlighted in red -
    Code:
    #nav a:hover
    {
    	color: red;
    }
    
    #nav li
    {
    	float: left;
    	width: 10em;
    	background-color: black;
    	list-style: none;
    	padding: 4px;
    position: relative;
    }
    
    #nav li ul
    {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	height: auto;
    }
    
    #nav li ul li
    {
    	border-top: solid 1px white;
    }
    
    #nav li:hover ul {
    top: 25px;
    left: 0;
    }
    
    div.page_menu
    {
    
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    davex (12-18-2010)

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for your suggestions. I made the changes but the main (parent) ul element is still below and to the right of the black container DIV.

    The menus do line up much nicer now though!

    Regards,

    Dave.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    To make .page_title enclose the ul add this bit in red -
    Code:
    div.page_title
    {
    	color: white;
    	font-size: 14pt;
    	background-color: black;
    	padding: 5px;
    	margin-top: 0px;
    overflow: auto;
    }

    Also, in your CSS you style #nav ul.
    That only applies to the child ul of ul#nav. It works better if you apply that to both uls like this ul#nav, ul#nav ul {
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    davex (12-18-2010)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    And, just because I've always hated the suckerfish code, a demo I have of a very simple CSS only dropdown menu.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok again many thanks for your help. It is now perfectly lined up inside that DIV!

    But sadly I have a new problem - the popup menus are now basically hidden - they appear but only inside the DIV and so are cut off at the bottom e.g. they don't display "on top" of everything else including the page content below.

    Revised code from your input:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
       
    <HTML>
    <HEAD>
    <TITLE>TITLE_HERE</TITLE>
    
    <STYLE TYPE="text/css">
    body
    {
    	font-family: Verdana, Arial, Sans-serif;
    	font-size: 12pt;
    	background-color: white;
    }
    
    div.main_container
    {
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0px;
    	border: solid 1px black;
    }
    
    div.page_title
    {
    	color: white;
    	font-size: 14pt;
    	background-color: black;
    	padding: 5px;
    	margin-top: 0px;
    	overflow: auto;
    	clear: left;
    }
    
    div.page_content
    {
    	padding: 5px;
    }
    
    div.page_footer
    {
    	margin-top: 20px;
    	padding: 5px;
    	background-color: black;
    	color: white;
    	margin-bottom: 0px;
    	font-size: 10pt;
    	font-weight: bold;
    }
    
    div.page_footer a
    {
    	color: #e0e0ff;
    	text-decoration: none;
    }
    
    div.page_footer a:hover
    {
    	color: white;
    }
    
    div.login_box
    {
    	margin-top: 20px;
    	width: 50%;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 20px;
    }
    
    div.error
    {
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	font-size: 14pt;
    	color: red;
    	width: 100%;
    	text-align: center;
    }
    
    
    ul#nav, ul#nav ul
    {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    	z-index: 10;
    }
    
    #nav a
    {
    	display: block;
    	width: 10em;
    	color: white;
    	text-decoration: none;
    	font-size: 10pt;
    }
    
    #nav a:hover
    {
    	color: red;
    }
    
    #nav li
    {
    	float: left;
    	width: 10em;
    	background-color: black;
    	list-style: none;
    	padding: 4px;
    	position: relative;
    }
    
    #nav li ul
    {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	height: auto;
    }
    
    #nav li ul li
    {
    	border-top: solid 1px white;
    }
    
    #nav li:hover ul
    {
    	top: 20px;
    	left: 0;
    }
    
    div.page_menu
    {
    
    }
    </STYLE>
    
    </HEAD>
    <BODY>
    
    <DIV ID="container_div" CLASS="main_container">
    <DIV ID="page_title" CLASS="page_title">
    <DIV ID="title_div" CLASS="main_title">
    Page_Title</DIV>
    
    <DIV ID="page_menu" CLASS="page_menu">
    <UL ID="nav">
    <LI><A HREF="#">Option One</A>
     <UL>
     <LI><A HREF="#">Option One A</A></LI>
     <LI><A HREF="#">Option One B</A></LI>
     </UL>
    </LI>
    <LI><A HREF="#">Option Two</A>
     <UL>
     <LI><A HREF="#">Option Two The First</A></LI>
     <LI><A HREF="#">Option Two The Second One</A></LI>
     </UL>
    </LI>
    </UL>
    </DIV>
    </DIV>
    <DIV ID="content" CLASS="page_content">
    
    Content Goes Here...
    </DIV>
    
    <DIV ID="footer_div" CLASS="page_footer">
    Footer_Text
    
    </DIV>
    
    </DIV>

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    I've added an overflow: visible; instead of auto and it now works!

    Thank you ever so much for all your help.

    I had a look at your example in CSS which is great but very sadly I need to support IE6 (yuck) and so I think some sort of JS magic needs to be done.

    Once again thank you so much.

    Kind regards,

    Dave.


  •  

    Tags for this Thread

    Posting Permissions

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