Results 1 to 2 of 2

Thread: Justified layout for blocks

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Question Justified layout for blocks

    For my navigation bar I am trying to get it so the links are equal distance apart like a justified layout. Each time I try this it mucks up the drop downs.

    My website: http://familyfostering.ismywebsite.co.uk/

    CSS

    Code:
    #menu {
    	height:30px;
    	width:810px;
    	background-color:#0576BF;
    	margin-left:auto;
    	margin-right:auto;	
    }
    
    
    /*---------------Menu---------------*/
    
    #menu ul {
    	height:30px;
    	width:810px;
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	text-align:justified;
    }
    
    #menu ul li {
    	height:30px;
    	width:auto;
    	line-height:30px;
    	margin-left:20px;
    	margin-right:20px;
    	display:inline-block;
    }
    
    #menu ul:after {
    	content:' ';
    	width:100%;
    	display:inline-block;
    }
    
    #menu ul ul {
    	display:none;
    }
    
    #menu ul li:hover > ul {
    	display:block;
    }
    
    #menu ul li ul {
    	width:135px;
    	text-align:center;
    	background-color:#87E1FC;
    }
    
    #menu ul li ul li ul {
    	margin-top:-30px;
    	list-style-type:none;
    	margin-left:135px;
    	width:135px;
    	text-align:center;
    }
    
    #menu ul li ul li, #menu ul li ul li a  {
    	height:auto;
    	padding-bottom:3px;
    	padding-top:3px;
    	line-height:25px;
    	width:135px;
    	background-image:none;
    	background-color:#87E1FC;
    	color:#000;
    	border:#000;
    	font-size:14px; 
    }
    
    #menu ul li ul li a:hover  {
    	background-image:none;
    	background-color:#0576BF;
    	color:#000;
    	border:#000 thin;
    	font-size:14px
    }
    
    #menu ul li a {
    	height:30px;
    	cursor:pointer;
    	font-size:18px;
    	text-decoration:none;
    	color:#FFFFFF;
    }
    
    #menu ul li a:hover {
    	color:#27C8F9;
    }
    
    /*---------------Menu---------------*/
    HTML

    Code:
    <div id="menu">
    
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a>
          <ul>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
          </ul>
        </li>
        <li><a href="carers.php">Foster Carers</a></li>
        <li><a href="young.php">Young People</a></li>
        <li><a href="authorities.php">Local Athorities</a></li>
        <li><a href="Join.php">Join Us</a></li>
    </ul>
    
    </div>

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    css:
    Code:
    .spacer {clear:both}
    /*
    #menu { width: 96%; padding: 0; margin: 0 auto; background-color:#0576BF; height:30px; line-height: 30px; position:relative; z-index:5;}
    #menu li, #menu ul { list-style:none;}
    #menu>li { display:inline-block; width:16%; text-align:center;}
    #menu>li>ul {
    	float: left;
    	position:absolute;
    	margin-top:-1px;
    	z-index:6;
    	border:1px solid black;
    	left:0;
    }
    #menu>li>ul>li {
    	border-bottom: 1px solid black;
    }
    
    #menu>li>a { color:white; text-decoration:none; font-weight:bold;}
    #menu>li>a:hover { color:#87E1FC;}
    
    #menu>li:hover>ul { display:block;}
    */
    
    /* Main Nav Menu */
    #menu{
        list-style:none;
        font-weight:bold;
    	height:30;
    	line-height:30px;
        float:left; /* Clear floats */
        width:96%;
        /* Bring the nav above everything else--uncomment if needed.*/
        position:relative;
        z-index:5;
    }
    #menu>li{
        float:left;
        width:16%;
        position:relative;
    	text-align:center;
    }
    #menu>li>a{
        display:block;
        padding:0px;
        color:#fff;
        background-color:#0576BF;
        text-decoration:none;
    }
    #menu>li>a:hover{
        color:#87E1FC;
        text-decoration:underline;
    }
    
    /*  DROP DOWN MENU  */
    #menu>li:hover>ul{
    	display:block;
    }
    
    #menu>li>ul {
    	font-weight:500; /* Normal Font Weight */
    	list-style: none;
    	text-align:center;
    	padding:0px;
    	margin:0px;
    	background-color:#87E1FC;
    	display:none;
    	position:absolute;
    	width:100%;
    }
    
    #menu>li>ul>li>a:hover{
    	color:black;
    	text-decoration:underline;
    }
    
    #menu>li>ul>li>a {
    	color:black;
    	text-decoration:none;
    }
    HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <link rel="stylesheet" href="main.css" />
    
    <body>
    
    <div>
    
    <ul id="menu">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a>
          <ul>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
              <li><a href="#">sublink</a></li>
          </ul>
        </li>
        <li><a href="carers.php">Foster Carers</a></li>
        <li><a href="young.php">Young People</a></li>
        <li><a href="authorities.php">Local Athorities</a></li>
        <li><a href="Join.php">Join Us</a></li>
    </ul>
    <div class="spacer"></div>
    </div>
    Something
    </body>
    </html>
    Last edited by Deadweight; 07-31-2014 at 04:46 AM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. The Following User Says Thank You to Deadweight For This Useful Post:

    gemzilla (07-31-2014)

Similar Threads

  1. Menu Blocks Thumbnailviewer
    By air21 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-24-2010, 12:28 PM
  2. Resolved DD Tab Menu Right Justified for Hebrew
    By egurevich in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 11-01-2009, 09:09 PM
  3. tooltip and div blocks
    By littleus in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-03-2009, 01:16 PM
  4. DD Blue Blocks Menu?
    By ohsamisami in forum CSS
    Replies: 0
    Last Post: 07-19-2007, 06:29 PM
  5. Active X blocks content
    By francinehds in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-09-2007, 03:45 AM

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
  •