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
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'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.
Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>
I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.
I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
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...
My HTML is as follows:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
And my css:
#nav {
display: inline;
}
However the whitespace between the li's shows up. I can remove the whitespace by collapsing them like so:
<ul id="nav">
<li>Home</li><li>About</li><li>Contact</li>
</ul>
But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.
Several options here, first I'll give you my normal practice when creating inline lists:
<ul id="navigation">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Then the CSS to make it function as you intend:
#navigation li
{
display: inline;
list-style: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited
{
display: block;
padding: 2px 5px 2px 5px;
float: left;
margin: 0 5px 0 0;
}
Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */
If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:
margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */
Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.
Another useful way to eliminate the whitespace is to set the list's font-size property to 0 and the list elements' one back to the required size.
What you really want is the CSS3 white-space-collapse: discard. But I'm not sure if any browsers actually support that property.
A couple alternative solutions is to let the tailing end of a tag consume the whitespace. For example:
<ul id="nav"
><li>Home</li
><li>About</li
><li>Contact</li
></ul>
Another thing I've seen done is to use HTML comments to consume whitespace
<ul id="nav"><!--
--><li>Home</li><!--
--><li>About</li><!--
--><li>Contact</li><!--
--></ul>
See thismat's solution if you are okay using floats, and depending on the requirements you might need to add a trailing <li> that is set to clear: both;.
But the CSS3 property is probably the best theoretical way.
A better solution for list items is to use:
#nav li{float:left; width:auto;}
Has exactly the same visual effect without the headache.
Adopt non-XML-based HTML and omit </li>.
<ul id="nav">
<li>Home
<li>About
<li>Contact
</ul>
Then set the display property of the items to inline-block instead of inline.
#nav li {
display: inline-block;
/display: inline; /* for IE 6 and IE 7 */
/zoom: 1; /* for IE 6 and IE 7 */
}
The problem is the font size in the UL. Set it to 0 and it will disappear, but you don't want you actual text to be set so small, so then set your LI font size to whatever you want it to be.
<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>
I had the same Problem and none of the above solutions could fix it. But I found out this works for me:
Instead of this:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
build your html code like this (whitespace before and after the link text):
<ul id="nav">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline; content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>