On this website, the menu has the following structure:
<ul>
<li class="page_item page-item-2 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Features
</li>
<li class="page_item page-item-18">
News & Reviews
</li>
<li class="page_item page-item-20">
Contact
</li>
</ul>
The current_page_item class changes the background of the currently selected menu item to black via the following rule:
.mainnav li.current_page_item a {
background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}
This works for the Home menu item, but for all others a small gap is left on the left-hand side of the selected menu item, highlighted by the yellow circle in the image below
I can't seem to figure out why this problem occurs for all menu items except Home.
Your <li> tags are display: inline-block; and there are spaces between the tags.
Because your <li> tags are inline-block, they respect whitespace in the HTML, just like inline elements and text.
In the end, the background image is covering the background of the element correctly. Your best option to get rid of the spacing is to remove all whitespace between </li> and the next <li> tags.
As mentioned by #ajp15243 below, you can omit the closing tag, or use some wacky tricks to get the HTML to swallow up the whitespace.
You should use display:table-cell for .mainnav_wrapper .mainnav ul li class.
then add a padding to center the menu items to your ul element:
.mainnav_wrapper ul {
padding-left:192px;//this is especially for this project
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 960px;
}
and you are ready to go...
Related
I'm trying to make a sidebar navigation list containing another list whose contents show/hide when clicked. For the li containing the collapsible list, I put in a custom list-style-image (actually, two that are toggled between with JS when clicked.) The problem is that the custom image is rendering on the edge of the page instead of in line where a regular bullet point would be. The image has a transparent background, so that's not the problem. Maybe it's something with how I floated the div to the left?
Here's my HTML and CSS and a screenshot of how it's displaying.
Code snippets (css/html):
#sidebar{
position: fixed;
float: left;
width: 20%;
background-color: green;
}
#main{
float: right;
width: 75%;
background-color: blue;
}
#songs{
margin-bottom: 0;
}
.song{
list-style: decimal;
}
.songclosed{
display: none;
}
.closed{
list-style-image: url("../images/closed.png");
}
.open{
list-style-image: url("../images/open.png");
}
<div id="sidebar">
<ul>
<li>
<p>Home</p>
</li>
<li>
Info
</li>
<li id="openclose" class="closed" onclick="openclose()">
<p id="songs">Songs</p>
<ol>
<li class="song songclosed">
Song 1
</li>
<li class="song songclosed">
Song 2
</li>
<li class="song songclosed">
Song 3
</li>
</ol>
</li>
</ul>
</div>
Image--See the little black triangle on the left?
I've tried list-style-position: inside and overflow: hidden. Both made a difference, but neither worked properly.
Final note: The images are bigger (100x100) than a regular bullet point so that may be a slight problem, but I can edit them down and see what changes if someone can tell me how big a regular bullet is.
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
I have a problem resizing or spacing a navigation menu as seen on the pic below. If any body knows how, please inform me. I just wanna resize nav menu box so the first one become like the second one (to resize it smaller).
HTML
<!--MENU-->
<nav id = "main-nav-menu">
<ul class="sf-menu">
<li class="active">Home
<li>ABOUT US
</li>
<li> SERVICES
</li>
<li>OUR PRODUCTS
</li>
<li>OUR EQUIPMENTS
</li>
<li>MACHINE LIST
</li>
<li>CONTACT
</li>
</ul>
</nav>
<!-- end menu -->
CSS
#header .menu select {
border: 1px solid #CCCCCC;
display: block;
left: 4px;
position: relative;
top: 205px;
width: 250px;
}
#header .menu select {
display: block;
width: 200px;
}
this can be achieved with some simple css rules. in your stylesheet, or style block if you're not using a style sheet, you need to set max or min widths, as well as padding for your list items.
add something like:
li{max-width:60px;padding:4px;}
or
.sf-menu li{max-width:60px;padding:4px;}
or
main-nav-menu ul li{max-width:60px;padding:4px;}
each of these will set the maximum width of your menu items to 60px. Change this value to suit your needs. This means there will be a standard width for all items. You could also set a fixed width or min-width.
li{min-width:60px;width:100px;max-width:150px;}
you can also add padding to keep a consistant look.
li{padding:4px 8px;} /* top & bottom padding of 4px, left & right padding of 8px */
an example of this code - http://jsfiddle.net/kcdP4/
hope this helps
I've stumbled upon a problem here. I created a menubar which consists several clickable parallelogram menu-items with list and link tags.
Unfortunately, the menubar is showing a problem now. Whenever I try to hover the overlapping part of menu-item, it will automatically choose the next-right menu-item. For example, when I tried to click the pointy part of HOME (which is overlapping with menu-item ABOUT), the menu-item ABOUT would be chosen instead.
I want all of area of each menu-item clickable respectively without any interference from neighboring menu-items. Any helps and suggestions please?
http://i.stack.imgur.com/NDKNF.png
http://i.stack.imgur.com/gnhzt.png
Here's the HTML code:
<ul class="header" id="navlist">
<li id="home"></li>
<li id="about"></li>
<li id="benchmark"></li>
<li id="service"></li>
<li id="work"></li>
<li id="client"></li>
<li id="contact"></li>
</ul>
Here's the CSS:
#navlist {
position:relative;
}
#navlist li {
margin:0;padding:0;list-style:none;position:absolute;top:0;
}
#navlist li,
#navlist a {
height:31px;display:block;
}
#home {
left:0px;
width:112px;
background:URL('../headbar/navmap.png') 0px 0px;
}
#home a:hover {
background:URL('../headbar/navmap.png') 0px -31px;
}
and for another menu-item such as about, client, and others follow the same rule as home.
http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html
Right last item's dropdown goes outside the menu
alt text http://shup.com/Shup/374936/110621146-My-Desktop.png
I need only last last item's submenu inside.
like this
alt text http://shup.com/Shup/374939/1106211810-My-Desktop.png
Firstly, you might want to consider positioning your main menu li's relatively. Then the drop down ul's which are positioned absolutely will appear underneath their corresponding li by default. Like this for example:
ul.dropdown li {
position: relative;
}
Then you can simply add a new class to the last <li class="dir"> which gets its own styling to change the position of the last dropdown menu. Something like this for example:
HTML:
<li class="dir last">
CSS:
li.last ul {
left: -50px; /* or however much you need for it to appear where you want it to */
}
You'll need to set the right position for that particular list i.e.
<li class="dir">Contact Us
<ul style="last-menu">
<li>Enquiry Form</li>
<li>Map & Driving Directions</li>
<li>Your Feedback</li>
</ul>
</li>
<style>
.last-menu{
right: 0px;
}
</style>