Justified layout for blocks [Archive]

gemzilla

07-29-2014, 01:04 PM

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/ (http://familyfostering.ismywebsite.co.uk/)

CSS

#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

<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>

Deadweight

07-31-2014, 03:02 AM

css:

.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:

<!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>