Can my menu be unequally spaced?

HTML & CSS
1

Hi all,

I am new around here, and new to building my own site. I have an issue that I am hoping has an easy solution - I would really appreciate it if someone could point me in the right direction. :slight_smile:

So, I am trying to put together a drop down menu, and I want the menu items to be spaced unequally. To make it easier to explain below is a graphical view of what I want - I just can’t seem to overcome the fact that anytime I space out the menu the gaps are equal - not what I want. Please be aware, I am a COMPLETE novice. :slight_smile:

Thanks in advance.

Here is the code (thanks to VentureLab):


<ul id="nav">
	<li>
		<a href="#">Home</a>
	</li>

	<li>
		<a href="#">About</a>
		<ul>
			<li><a href="#">The product</a></li>

			<li><a href="#">Meet the team</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Services</a>

		<ul>
			<li><a href="#">Sevice one</a></li>
			<li><a href="#">Sevice two</a></li>

			<li><a href="#">Sevice three</a></li>
			<li><a href="#">Sevice four</a></li>
		</ul>

	</li>
	<li>
		<a href="#">Product</a>
		<ul>
			<li><a href="#">Small product (one)</a></li>

			<li><a href="#">Small product (two)</a></li>
			<li><a href="#">Small product (three)</a></li>
			<li><a href="#">Small product (four)</a></li>

			<li><a href="#">Big product (five)</a></li>
			<li><a href="#">Big product (six)</a></li>
			<li><a href="#">Big product (seven)</a></li>

			<li><a href="#">Big product (eight)</a></li>
			<li><a href="#">Enourmous product (nine)</a></li>
			<li><a href="#">Enourmous product (ten)</a></li>

			<li><a href="#">Enourmous product (eleven)</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Contact</a>

		<ul>
			<li><a href="#">Out-of-hours</a></li>
			<li><a href="#">Directions</a></li>

		</ul>
	</li>
</ul>

And this is the CSS.


/*------------------------------------*\\
	NAV
\\*------------------------------------*/
#nav{
	float:left;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;

	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36; /* Solid colour fall-back */
	background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */

	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	opacity:0; /* Set initial state to transparent */
	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */

	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	display:block;
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
	opacity:1; /* Fade to opaque */
}
#nav li:hover a{ /* Set styles for top level when dropdown is hovered */

	background:#6b0c36; /* Solid colour fall-back */
	background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */
	text-decoration:underline;
}
#nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
	background:#333; /* Solid colour fall-back */

	background:rgba(51,51,51,0.75); /* It'll look nice semi-transparent */
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}
2

I just can’t seem to overcome the fact that anytime I space out the menu the gaps are equal - not what I want.

Hi,
You can set a class on the list items that need different margins on them.

You are talking about spacing out the main list items and not the dropdowns correct?

3

Hi,

Seems strange that you want the menu unequally spaced but as Ray said above just add a class to the element in question and move it to where you want.

e.g.


#nav li.about{margin-right:50px}



<ul id="nav">
    <li> <a href="#">Home</a> </li>
[B]    <li class="about"> [/B]<a href="#">About</a>
        <ul>

Given the complex css3 you are using in that section I would have thought you would have thought of that anyway so I may be missing the point a bit :slight_smile:

I also notice the dropdowns are offset from their parent and you need to address the default padding and margin.


#nav, #nav ul{margin:0;padding:0}

I like the fade effect in webkit though :slight_smile:

4

Yes, spacing out the menu headers and matching the drop downs below. :slight_smile:

Ah, alas the code is not mine - it was a free menu posted online (credit mentioned in my original post) It’s mostly Greek to me!

I have attached a mock up of my menu plan - the top line is just text (not clickable) and the second line is the menu headers. Because of the different word widths in line one, I need unequal spacing in the menus below.

The advice that you gentlemen have given is not crystal clear to me right now, but it tells me what I need to learn about to achieve what I want, and I do want to learn a lot more - I am very grateful to you both.

Thanks!!!

Hugh

Here is the mock up. You can see why I need to move the menu around.

5

Does that mean that you are ok for now and looking into it or do you still need more advice? :slight_smile:

6

The code to cancel out the margin and padding (below), I have dropped into the first line of the CSS on it’s own. Is that ok there, or should it be nested somewhere else?


#nav, #nav ul{margin:0;padding:0}

In the CSS I have added lines of code to move the menus around. This is how I have done it - same question really, should this be nested somewhere?

    #nav li.about{margin-left:-10px}
    #nav li.services{margin-left:-45px}

Again, thanks for the stellar assistance. Hope the weather in the UK is good, (I’m from Edinburgh) Michigan has been cold as hell recently, with tons of snow! :slight_smile:

7

Hi,

Apologies if your post above looks a little strange as I clicked the wrong button by mistake and made an edit :frowning:

The code to cancel out the margin and padding (below), I have dropped into the first line of the CSS on it’s own. Is that ok there, or should it be nested somewhere else?


#nav, #nav ul{margin:0;padding:0}

That’s fine as it is.

However, I would actually put it the stylesheet as the first rule of your navigation styles because it really is the starting point. I like to keep this logical so you start with the ul and then move onto the list element and inner elements etc.

In the CSS I have added lines of code to move the menus around. This is how I have done it - same question really, should this be nested somewhere?


 #nav li.about{margin-left:-10px}
  #nav li.services{margin-left:-45px}

As you are modifying existing styles then that code should follow after the existing list styles.

e.g. After this rule.



#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li.about{margin-left:-10px}
#nav li.services{margin-left:-45px}

That way you keep the relevant styles affecting top level list items together which makes things easier to manage later on.

Remember that with negative margins may cause things to overlap while with positive margins you just push things away. It may be that the negative margin just overlaps a positive margin on the element before but it’s a subtle difference.

Again, thanks for the stellar assistance. Hope the weather in the UK is good, (I’m from Edinburgh) Michigan has been cold as hell recently, with tons of snow!

You’re welcome :slight_smile:
The weather’s not too bad here - finally stopped raining for a couple of days

8

Great!!!

Thank you so much for the assistance - I will post my finished menu when I’m done if that’s ok.

Really, thank you so much!

Hugh

9

Oops! It all fell apart a little.

I have dropped in this code:

	<ul id="nav">
						
						<li>
							<li class="galleries"><a href="#">Galleries</a>
							<ul>
								<li><a href="#">Wedding One</a></li>

								<li><a href="#">Wedding Two</a></li>
								
								<li><a href="#">Wedding Three</a></li>
							</ul>
					
						</li>

What I am trying to do is have the top word (Galleries) trigger the menu with the three options below, without itself being a link. My problem is that only the first option (Wedding One) shows.

Sorry to be a pain, am I missing something really obvious???

Hugh

10

Hi,

I’d need to see a working example of what you have to diatgnoise the problem.

Trying to build up from what went before leaves me with this example which seems to be working fine.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style>
/*------------------------------------*\\
    NAV
\\*------------------------------------*/
#nav, #nav ul {
    margin:0;
    padding:0
}
#nav {
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li {
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li.about {
    margin-left:10px
}
#nav li.services {
    margin-left:45px
}
#nav li a {
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.75); /* Text shadow to lift it a little */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover {
    color:#fff;
    background:#6b0c36; /* Solid colour fall-back */
    background:rgba(107, 12, 54, 0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul {
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    opacity:0; /* Set initial state to transparent */
    -webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
}
#nav ul li {
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a {
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    display:block;
}
#nav li:hover ul { /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    opacity:1; /* Fade to opaque */
}
#nav li:hover a { /* Set styles for top level when dropdown is hovered */
    background:#6b0c36; /* Solid colour fall-back */
    background:rgba(107, 12, 54, 0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
}
#nav li:hover ul a { /* Override some top level styles when dropdown is hovered */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */
    background:#333; /* Solid colour fall-back */
    background:rgba(51, 51, 51, 0.75); /* It'll look nice semi-transparent */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}
</style>
</head>
<body>
<ul id="nav">
    <li>
    <li class="galleries"><a href="#">Galleries</a>
        <ul>
            <li><a href="#">Wedding One</a></li>
            <li><a href="#">Wedding Two</a></li>
            <li><a href="#">Wedding Three</a></li>
        </ul>
    </li>
    <li> <a href="#">Home</a> </li>
    <li class="about"> <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li class="services"> <a href="#">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>
    </li>
    <li> <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>
            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>
            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li> <a href="#">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Can you fill in the blanks and I’ll take a look :slight_smile:

11

Hi Paul,

ok, so in the header.php document in the wordpress theme I have the following: (the drop down menu items seem stacked on one another)

	<ul id="nav">
						
						<li>
						    <li class="galleries"><a href="#">Galleries</a>
						        <ul>
						            <li><a href="#">Wedding One</a></li>
						            <li><a href="#">Wedding Two</a></li>
						            <li><a href="#">Wedding Three</a></li>
						        </ul>
						    </li>

						<li>
							<li class="clientaccess"><a href="#">Client Access</a>
							<ul>
								<li><a href="#">Client Sites</a></li>

								<li><a href="#">Client Galleries</a></li>
							</ul>
						</li>
						
						
						<li>
							<li class="whoweare"><a href="#">Who We Are</a>

							<ul>
								<li><a href="#">About Us</a></li>
								<li><a href="#">What We Do</a></li>

							</ul>

						</li>
						
						
						<li>
							<li class="information"><a href="#">Information</a>
							<ul>
								<li><a href="#">Our Photography</a></li>
								<li><a href="#">Vendors</a></li>
			
							</ul>
						</li>
						
						
						<li>
							<li class="emailus"><a href="#">Email Us</a>

						</li>
						
						
							<li>
								<li class="latest"><a href="#">Latest!</a>

							</li>
					</ul>

In the style.css document I am close to getting the styling that I want. This part seems to be just fine.


	/*------------------------------------*\\
		NAV
	\\*------------------------------------*/


	#nav, #nav ul{margin:0;padding:0}

	#nav{
		position        :absolute;
		width			:100%;
		display			:block;
		font-size		: 10pt;
		text-align		:center; 
		font-family		:Tahoma, Georgia, Times, serif;
		margin    		:60px 0 10px 190px;
		z-index   		:99999;
	
	}
	#nav li{
		float  			:left;
		margin-right  	:0px;
		position  		:absolute;
		display  		:block;
	}
	
	
	/* Adjusts the distance between each menu item horizontally */
	
	#nav li.galleries		{margin-left	:0px}
	#nav li.clientaccess	{margin-left	:115px}
	#nav li.whoweare		{margin-left	:231px}
	#nav li.information		{margin-left	:367px}
	#nav li.emailus			{margin-left	:505px}
	#nav li.latest			{margin-left	:607px}
	
	
	#nav li a{
		display:block;
		padding:5px;
		color:#807e7e;
		text-decoration:none;
		text-shadow:1px 1px 1px #efe9e9; /* Text shadow to lift it a little */
		-moz-border-radius:2px;
		-webkit-border-radius:2px;
		border-radius:2px;
	}
	#nav li a:hover{
		color:#000;
		background:#6b0c36; /* Solid colour fall-back */
		background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */
		text-decoration:none;
	}
	
	

	/*--- DROPDOWN ---*/
	#nav ul{
		list-style:none;
		position:absolute;
		left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
		opacity:0; /* Set initial state to transparent */
		-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
	}
	#nav ul li{
		padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */

		float:none;
	}
	#nav ul a{
		white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
		display:block;
	}
	#nav li:hover ul{ /* Display the dropdown on hover */
		left:0; /* Bring back on-screen when needed */
		opacity:1; /* Fade to opaque */
	}
	#nav li:hover a{ /* Set styles for top level when dropdown is hovered */

		background:#6b0c36; /* Solid colour fall-back */
		background:#fff; /* It'll look nice semi-transparent */
		font-color:#333;
		text-decoration:none;
	}
	#nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
		text-decoration:none;
		-webkit-transition:-webkit-transform 0.075s linear;
	}
	#nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
	/*	background:#333;     Solid colour fall-back */

		background:rgba(51,51,51,0.75);  /* THIS IS HOVER BOX BG.  It'll look nice semi-transparent */
		text-decoration:none;
		-moz-transform:scale(1.03);
		-webkit-transform:scale(1.03);
	}

I so appreciate your help!!!

Hugh

12

Hi,

You changed the top level list to position:absolute which meant that it gets passed down to the nested list elements and messes up the sub list. Just reset the nested list.


#nav ul li {
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
  [B]  position:static;[/B]
}
13

Paul,

you are a lifesaver! Thank you for your advice, it is the fastest most accurate advice I believe I have ever had in a forum.

Wonderful stuff.

I’m back on track again! :):):slight_smile:

Hugh