www.webdeveloper.com
Results 1 to 6 of 6

Thread: Margin on drop down menu?

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    7

    Question Margin on drop down menu?

    Hi there everyone
    Sorry if this is a frequently asked question (tried looking for it but couldn't find it!) I'm having trouble adding a margin onto the top and left of my drop down menu, I want it to be parallel with the section article (20px to the left and maybe about 10px down from the top), but it doesn't seem to want to get out of the top left corner! Any ideas?

    CSS
    Code:
    * {
    	margin: 0 0;
    	padding: 0 0;
    	font-family: "Helvetica Neue";
    	text-decoration: none;
    	color: #FFF;
    }
    body
    {
    	background: #000;
    }
    article, setion
    {
    	display: block;
    }
    section
    {
    	background: #000;
    	border: 1px solid #FFF;
    	border-width: 1.5px 1.5px 1.5px 1.5px;
    	padding: 10px;
    	width: 505px;
    	position: absolute;
    	z-index: 100;
    	top: 137px;
    	opacity: 0.7;
    	left: 20px;
    }
    	section article p
    	{
    		font-size: 12px;
    		line-height: 20px;
    		margin-bottom: 10px;
    	}
    video
    {
    	position: absolute;
    	width: 105%;
    	height: 105%;
    	margin: 0 0;
    	z-index: -10;
    	left: 0px;
    	top: 0px;
    }
    nav
    {
    	position: relative;
    	width: 505px;
    	margin: 10px;
    	margin-left: 20px;
    	margin-top: 10px;
    	z-index: 100;
    	display: block;
    	background: #000;
    	height: 34px;
    	border: 1px solid #777;
    	border-width: 1.5px 1.5px 1.5px 1.5px;
    	left: 20px;
    	top: 0px;
    }
    	nav ul
    	{
    		list-style: none;
    	}
    		nav ul li
    		{
    			float: left;
    			margin: 10px 24px;
    			margin-left: 20px;
    		}
    			nav ul li a
    			{
    				display: block;
    				margin-top: 6px;
    				font-size: 9px;
    				padding: 3px 10px 4px 10px;
    				color: #000;
    				text-direction: none;
    				margin: 10px;
    				margin-left: 20px;
    			}
    			nav ul li a:hover
    			{
    				background: #000
    				color: #000;
    			}
    HTML5
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    
    	<video preload loop autoplay="true"; z-index: -1;>
            <source src="stom train_2.mp4" type="video/mp4" >
            <source src="stom train_2.ogv" type="video/ogg" >
        The video doesn't appear to work on your browser!
        </video>
        
    <head>
        <title>STOM VIDEO</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    <meta http-equiv="Content-Type" content="text/css; charset=utf-8" />
    <style type="text/css">
    .nav ul {list-style:none; margin:0; padding:0; background-color:#000; opacity: 0.7;}
    .nav li {float:left; width:100px; background-color:#000; text-align: center;
    		border-right:1px solid white; position: relative;
    		height:30px; line-height:30px;}
    .nav li ul li {float:none; width:150px; text-align: left; padding-left:6px;
    		border-top:1px; }
    .nav a {text-decoration:none; color:white; font-size:12px;}
    .nav li ul {position:absolute; top:30px; left:0; visibility:hidden;}
    .nav li:hover ul {visibility: visible; z-index: 100;}
    
    .nav li:hover {background-color:#000;}
    
    .content {clear:both;}
    </style>
    </head>
    
    <body>
    <div class="nav">
     <ul>
     
      <li>
        <div align="center"><a href="index.html">HOME</a>
        </div>
      </li>
    
      <li>
        <div align="center"><a href="portfolio.html">PORTFOLIO</a>
          <ul>
            <li><a href="art.html">ART/MUSIC</a></li>
            <li><a href="nightlife.html">NIGHTLIFE/CLUBS</a></li>
            <li><a href="products.html">PRODUCTS/EVENTS</a></li>
          </ul>
          
        </div>
      <li>
        <div align="center"><a href="contact.html">CONTACT</a>
        </div>
      </li>
     </ul>
    </div>
    <section>
      <article>
       	<h2><img src="stom logo2.png" width="404" height="75"></h2>
          <p>Video is a compelling and innovative method of telling people what you do or about your business in visually stimulating way. Whether it be creative and experimental or informative and educational, we pride ourselves in producing something that says what you need it to say using a range of pioneering techniques.      </p>
          <p>To find out more about what we do take a look through our portfolio <em>(contains flashing images)</em> and feel free to contact us for a quote, if you are interested in our services.</p>
      </article>
        </section>
        
    
    
    </body>
    </html>

  2. #2
    Join Date
    Jan 2013
    Posts
    7
    Sorry, figured it out. Derp! IGNORE THIS THREAD!

  3. #3
    Join Date
    Jan 2013
    Posts
    7
    Is there a way to edit or delete posts? I can't see...
    Well I realized I just had to change that first bit of "margin: 0 0;" but it seems to have a limit to how much it can go to. I want it to be parallel in the left to the article section but it only goes out to what looks like about 10px on the top and left. Any ideas on how to make the margin bigger? Cheers.

  4. #4
    Join Date
    Jan 2013
    Posts
    7
    And also, I'm trying to add social media icons I made (youtube, twitter etc) on the top, to the right of the navigation menu. I can't seem to figure out how to make a gab between the menu and the icons so that the right of the icons are parallel with the right of the section article. Any help will be much appreciated!

  5. #5
    Join Date
    Feb 2013
    Posts
    16
    Just noticed this
    nav ul
    {list-style: none;}
    nav ul li { float: left; margin: 10px 24px; margin-left: 20px; }
    nav ul li a { display: block;
    margin-top: 6px; font-size: 9px;
    padding: 3px 10px 4px 10px; color: #000; text-direction: none;
    margin: 10px; margin-left: 20px; }
    . . .
    You seem to be overriding or duplicating your margin specifications. One value = all four sides; two values = left/right top/bottom; three values = top bottom right/left. See for examples, http://www.w3schools.com/cssref/pr_margin.asp

  6. #6
    Join Date
    Feb 2013
    Posts
    16
    Need to CORRECT that:

    Two values = top/bottom right/left (as in margin: 0 auto.
    Four values, clockwise = -top -right -bottom -left (as in margin: 2px 4px 6px 4px.

    Such values can be used for box-model CSS margin, padding

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles