CSS Remove separation line in menu

one separation coming up - your welcome in advance

 

How would we know - you asked for a graphic file to be edited - so it was edited with a graphics program.

 

Your welcome -
Maybe if you rephrase your question with some information in it, someone might be able to help you.

 

Without see the code it's hard to tell but;
it could be a gif or a jpg file which is listed in the css file under the menu area.
the width problem is probably do to either a fixed with for the menu in the css file or you have reached the end of that line so it wraps around and drops down.
all of it looks like you have to look in the css file.

When I'm editing, I start by looking at the code in the index.html file for area of concern like
<div id="header"> or <ul id="nav"> or <ul id="menu"> and I look at the code around it. I'll look at the webpage and back at the code. Which by then I can usually tell where to look in the css file.
In the css file I look for #header { or #nav { or #menu {
Then I just snoop around the code. I will change one thing and see how it looks on the webpage. I always keep a backup or the original.

 

rough guess look at

Code:

#menu a {
	display: block;
	height: 18px;
	[COLOR="Blue"]background: url(images/img06.jpg) no-repeat right 10px;[/COLOR]
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
	padding-top: 12px;
	padding-right: 27px;
	padding-bottom: 12px;
	padding-left: 27px;
	margin: 3px;
}

your width problem

Code:

#header {
	width: 640px;


#menu {
	width: 640px;


#content {
	float: left;
	width: 600px;

 

If you want to remove the last separation line, image below, then you will have to re-write the css code and add a graphic for each menu item.
or
live with it or take it out completely.

 

An easier way to have solved this problem - in case anyone got confused or turned around.
Reference the graphic below -
Problem: "Remove separation line in menu" which was done, even though those files didn't exist in the template- but what was really wanted was the last separation line gone.

This is how one would try to figure out the problem ---
If you look at the page as viewed in your browser (menu shown below) and looked at the "Images" directory, you would see the two marked images below, img03 and img06 are the only images that maybe part of the menu system.

Next you need to look at the code in the index.html file and you find "menu" and a unordered list - which means you can change the menu selections on the fly, just by typing a new word. No graphics here, so you comment out the "Contact" line just to see what happens and view it in your browser. That didn't work.

Where are those 2 img files. Open the style.css file and you find then in, where else, the /* Menu */ section.
If you comment out the first line which contains, img03.jpg, save the file and view it in your browser you find there is no-longer a long red line, but the separation bars are still there.
Undo what you just did and now comment out the line with, img03.jpg - all the separation bars are gone.

Now you know partially how the css file works generating the menu and you would have to say to yourself, I need to work in the menu part to alter it, so there is no end separation. You might even have to add few extra graphics just to make it work.

Hope this helps, I know it helped me, even if it meant typing out this post.
You can find the origanial template here Bamboo

Code:

[COLOR="Red"]INDEX.HTML[/COLOR]
<div id="menu">
		<ul>
			<li class="current_page_item"><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<!-- end #menu -->

Code:

[COLOR="#ff0000"]STYLE.CSS[/COLOR]
/* Menu */

#menu {
	width: 960px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.jpg) repeat-x left top; 
}
#menu ul {
	margin: 0;
	padding: 0px 0px 0px 25px;
	list-style: none;
	line-height: normal;
}
#menu li {
	float: left;
}
#menu a {
	display: block;
	height: 18px;
	margin-right: 3px;
	padding: 12px 40px 0px 40px;
	background: url(images/img06.jpg) no-repeat right 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}
#menu a:hover, #menu .current_page_item a {
}
#menu .current_page_item a {
	padding-left: 0;
}
#menu a:hover {
	text-decoration: underline;
}

 

No you don't... You didn't give the proper information to hotscripts to solve the problem. All you did was post the same question there and here.

The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

Code:

div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}

Result:

Try to understand - you are working with a block (code below) which repeats itself for every menu selection you have.
Your options are; Re-write the entire menu section or live with it.

Code:

#menu a {
	display: block;
	height: 18px;
	margin-right: 3px;
	padding: 12px 40px 0px 40px;
	background: url(images/img06.jpg) no-repeat right 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}