well i am not good with CSS menus.... i need TO MAKE THIS but was unable to align text to the bottom of listli
so it tried to do this with tables.. i was thinking Display Block is gonna solve my problems but turned out it didn't... you see in the jsFiddle example that i posted, when mouse is on the top areas of cell the link doesnot work which is true because there is no link there... can somebody please tell me how to convert it to CSS Menu
I would suggest making the menu with an unordered list instead of tables. Something like this:
HTML:
<ul id="my_menu">
<li>Name of Page 1</li>
<li>Name of Page 2</li>
<li>Name of Page 3</li>
<li>Name of Page 4</li>
</ul>
CSS:
ul#my_menu, ul#my_menu li {list-style: none;}
ul#my_menu li {display: block; float: left; width: 100px; height: 100px;}
ul#my_menu li a {display: block; text-decoration: none; color: #ccc; background: url('url_of_gradient') repeat-x; padding: 70px 10px 10px 10px; width: 80px; height: 20px;}
ul#my_menu li a:hover {background: url('url_of_hover_gradient') repeat-x;}
Try something like this, setting a gradient image (you'll have to make this) as the background on the links. Then create another image for the hover state. You'll also have to tweak the heights and widths to your liking.
This shouldn't require any javascript.
Here's a CSS menu generator that can get you started, I used it a while ago and it did fine for my project :)
Suckerfish dropwdown generator.
More:
My CSS Menu
Wonder Webware
Pure CSS Menu
The list goes on...
Hope it helps :)
Related
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
Preface: Experienced coder, VERY new to CSS.
I've designed a website that uses a wrapper and has a horizontal banner that I want to fill with links on the top (Like retail sites that have their categories listed along the top).
I've placed all the links in a toplink class, and I have set position:relative;. My goal was to position them using top: and left:, and then space them out by setting all of their padding-left's to a certain degree. It seems when I do that, however, the last 2 links always jumps off the wrapper and moves to the left of the whole wrapper.
Any better ideas on how to implement this? I don't need solutions necessarily, just some ideas on how to move in a better path.
Assuming some simple markup like this:
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
1) To space out links use text-align:justify with a pseudo element after it with 100% width
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
2) If you're looking for the links to expand/contract - you should use css tables for this
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
display:table;
table-layout: fixed;
width: 100%;
}
#nav li {
display: table-cell;
height: 25px;
background: beige;
border: 1px solid brown;
text-align: center;
}
Try getting rid of the position:relative and the top:0; left:0; stuff and use float:left on the anchors instead.
You don't position: relative or float: left to align them horizontally.
Anchors are inline elements so they'll align horizontally anyway. However, you could add some padding to visually separate them.
This is my code for a drop down menu. I pulled the code from a tutorial that produced this: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
But instead of text navigation I have images as you can see in the CSS attached to the span id's. With this code, I'm given the dropdown menus for each span correctly, I just can't get rid of the white space between them.
I know a new line in HTML between divs/spans create whitespaces, but I want to know a way to rid of them in CSS.
<div id="menu">
<ul class="tabs">
<li class="hasmore"><span id="bird"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul></li><li class="hasmore"><span id="wild"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul>
</li>
</ul>
</div>
This is some CSS that applies:
#menu ul
{
margin: 0 auto;
}
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}
ul.tabs a
{
position: relative;
display: block;
}
#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}
#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}
What do I need to do to this code in CSS to get rid of the white space that appears between my span images?
This is a common problem. More common with inline-block than inline, as inline usually means it's in the flow of text, where white space is relevant. With inline-block, people are using it for layout, and the white space becomes a problem.
There is a new CSS property specifically trying to deal with this issue - white-space:collapse; and white-space-collapse: discard;, but sadly it isn't supported by any of the major browsers yet. So that's not an option.
In the absence of that, the solutions to this tend to be a bit hacky.
One common solution is to set the container element to font-size:0;. This effectively renders the white space irrelevant; it's still there, but doesn't take up any space. The downside here is that you then need to set the font-size back again for the internal elements. If you're using a dynamic layout, with em based font-sizes, this can be tricky to handle.
Switching the layout to a float:left layout will remove this issue, but introduces other problems. Personally I've never liked working with float, but it might be the answer for some cases.
You could also use Javascript to remove the spaces, but that really is a hack.
Other than that, re-arranging the HTML code to remove the spaces is the most likely best solution. I know it's not the one you wanted though.
Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don't change the html...
See how there's no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/
From this style:
#menu ul li a:hover span {
background: url("images/topselectionright.png") repeat scroll right top transparent;
}
remove
right top
If I understand you correctly, maybe ul { font-size:0 } would help?
I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html