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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop Down menus...

    Hi All,

    So I'm quite new to CSS and I'm trying to position a drop down menu on my homepage. I can do a dropfown menu in Dreamweaver but when I position it, it looses the drop down effect. I realize it has to 'float' and there is a long winded way of getting it to work but I couldn't.

    Anyway, I'm aware of all the dropdown menus out there for free download but I'm having the same problem. The menus seem to be written so that they stay at the top of the page. Without drastically changing the code there is no way of positioning it, it seems. Unfortunately my css skills are not that honed yet that I can sort that problem out.

    Are there any drop down menu's out there that are can be positioned anywhere on the page without too much editing of the code?

    Any help appreciated
    BC

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Bass Cadet,
    If your dropdown works, it should be no problem to place it wherever you want on your page. How are you trying to place it?

    Give us a link to the test site so we can see where you want to put the menu and give us a link or the code to the 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

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is the test site http://sps1.philipmcconn.com/ - It shows where I want to position the drop down menu.

    This is the drop down menu I'm trying to position it. I've tried messing around with the css classes and using different px values for the 'top', etc fields. It moves but it seems like all the elements do not move together

    This is where I got the drop down menu http://www.red-team-design.com/css3-dropdown-menu

    Code:
    HTML:
    Code:
    <ul id="menu">
    	<li><a href="#">Home</a></li>
    	<li>
    		<a href="#">Categories</a>
    		<ul>
    			<li><a href="#">CSS</a></li>
    			<li><a href="#">Graphic design</a></li>
    			<li><a href="#">Development tools</a></li>
    			<li><a href="#">Web design</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Work</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>
    CSS:
    Code:
    /* Main */
    #menu{
    	width: 100%;
    	margin: 0;
    	padding: 10px 0 0 0;
    	list-style: none;  
    	background: #111;
    	background: -moz-linear-gradient(#444, #111); 
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
    	background: -webkit-linear-gradient(#444, #111);	
    	background: -o-linear-gradient(#444, #111);
    	background: -ms-linear-gradient(#444, #111);
    	background: linear-gradient(#444, #111);
    	-moz-border-radius: 50px;
    	border-radius: 50px;
    	-moz-box-shadow: 0 2px 1px #9c9c9c;
    	-webkit-box-shadow: 0 2px 1px #9c9c9c;
    	box-shadow: 0 2px 1px #9c9c9c;
    }
    
    #menu li{
    	float: left;
    	padding: 0 0 10px 0;
    	position: relative;
    }
    
    #menu a{
    	float: left;
    	height: 25px;
    	padding: 0 25px;
    	color: #999;
    	text-transform: uppercase;
    	font: bold 12px/25px Arial, Helvetica;
    	text-decoration: none;
    	text-shadow: 0 1px 0 #000;
    }
    
    #menu li:hover > a{
    	color: #fafafa;
    }
    
    *html #menu li a:hover{ /* IE6 */
    	color: #fafafa;
    }
    
    #menu li:hover > ul{
    	display: block;
    }
    
    /* Sub-menu */
    
    #menu ul{
        list-style: none;
        margin: 0;
        padding: 0;    
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 99999;    
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);    
        background: -o-linear-gradient(#444, #111);	
        background: -ms-linear-gradient(#444, #111);	
        background: linear-gradient(#444, #111);	
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
    #menu ul li{
        float: none;
        margin: 0;
        padding: 0;
        display: block;  
        -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    
    #menu ul li:last-child{   
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;    
    }
    
    #menu ul a{    
        padding: 10px;
        height: auto;
        line-height: 1;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
    
    *html #menu ul a{ /* IE6 */   
    	height: 10px;
    	width: 150px;
    }
    
    *:first-child+html #menu ul a{ /* IE7 */    
    	height: 10px;
    	width: 150px;
    }
    
    #menu ul a:hover{
            background: #0186ba;
    	background: -moz-linear-gradient(#04acec,  #0186ba);	
    	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    	background: -webkit-linear-gradient(#04acec,  #0186ba);
    	background: -o-linear-gradient(#04acec,  #0186ba);
    	background: -ms-linear-gradient(#04acec,  #0186ba);
    	background: linear-gradient(#04acec,  #0186ba);
    }
    
    #menu ul li:first-child a{
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
    
    #menu ul li:first-child a:after{
        content: '';
        position: absolute;
        left: 30px;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid #444;
    }
    
    #menu ul li:first-child a:hover:after{
        border-bottom-color: #04acec; 
    }
    
    #menu ul li:last-child a{
        -moz-border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    
    /* Clear floated elements */
    #menu:after{
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    }
    
    * html #menu             { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    Last edited by VIPStephan; 04-08-2013 at 09:14 PM. Reason: added code BB tags

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
    oh ok, sorry bout that!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I changed quite a bit

    You had a lot of anchors set as small squares and the put huge images in them and that breaks the box model rule. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    You also had a bunch of containing elements that weren't doing anything. See divitis here.

    Another thing, just a pet peeve of mine, I don't like downloading a 1930x1070 image when the site is only going to show me a 1000x510 image. It's a waste of my bandwidth. Serve the image the size it needs to be.

    Maybe don't try to integrate this into your site right away. Instead, copy/paste this snippet into a brand new .html document and test in your browsers till you decide you really want to make that many changes -
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Small Power Systems - Home</title>
    <base href="http://sps1.philipmcconn.com/" /> <!--demo only-->
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	background: #fff;
    	color: #575757;
    	font: 13px/1.7 Arial, Helvetica, sans-serif;
    }
    body {
    	background: url(../images/bg.png);
    	border-top: 20px solid black;
    }
    h3 {
    	line-height: 0.9;
    	margin: 60px 0 35px;
    	font-size: 22px;
    	color: #575757;
    	text-align: center;
    }
    ol, ul { 
    	margin: 0;
    	padding: 0;
    	list-style: none; 
    }
    a img { border: none }
    aside, details, figcaption, figure, footer, 
    header, hgroup, menu, header, section { display: block }
    /***************************************************
    			    Main containers
    ***************************************************/
    #container {
    	min-height: 100%;
    	width: 980px;
    	margin: 0 auto;
    }
    header { 
    	padding: 0 0 10px;
    	border-bottom: 1px solid #a3a3a3;
    }
    /***************************************************
    				       MENU
    ***************************************************/
    
    header ul {
    	height: 45px;
    	margin: 0 0 0 454px;
    	clear: right;
    	border-top: 1px solid #A3A3A3;
    	border-bottom: 1px solid #A3A3A3;
    }
    	header ul li {
    		float: left;
    		margin: 0 0 0 36px;
    		position: relative;
    		line-height: normal;
    }
    		header ul li:hover {color: #cc3333;}
    			header ul ul {
    				height: auto;
    				margin: 0;
    				padding: 0 36px 0;
    				position: absolute;
    				left: -9999px;
    				top: 45px;
    				border: none;
    				background:  url(../images/bg.png);
    			}
    				header ul li:hover ul {left: 0;}
    
    header a:link,
    header a:visited {
    	padding: 10px 0 10px;
    	font-size: 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-weight: normal;
    	display: block;	/* IE6, IE7 line height fix */
    	text-decoration: none;
    }
    header a:hover,
    header a:active { color: #CC3333; }
    /***************************************************
    				   SPECIFIC
    ***************************************************/
    
    #logo {
    	margin: 70px 0 0;
    	float: left;
    }
    #spslogo { float: right; }
    </style>
    </head>
    <body>
    	<div id="container">
    		<header>
    				<a href="#" id="logo"><img src="images/tracstar.png" width="454" height="95" alt="logo" /></a>
    				<a href="#" id="spslogo"><img src="images/sps.png" width="184" height="127" alt="spslogo" /></a>
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Categories</a>
    					<ul>
    						<li><a href="#">CSS</a></li>
    						<li><a href="#">Graphic design</a></li>
    						<li><a href="#">Development tools</a></li>
    						<li><a href="#">Web design</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Work</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Contact</a></li>
    			</ul>
    		</header>
    			<h3>Innovators in solar tracker technology for over thirty years</h3>
    			<a href="#" id="mainpic"><img src="images/mainpic1.png" width="1000" height="510" alt="main picture" /></a>
    	<!--end container--></div>
      </body>
    </html>
    Last edited by Excavator; 04-09-2013 at 01:00 AM.
    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

  • #7
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great, I'll give it a go and get back to you...thanks for your help!


  •  

    Posting Permissions

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