I have worked on a new menu for my site, but I cannot seem to arrange for space between the links vertically (I want more white space between links) Any advice?
html
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
<li>SERVICES</li>
</ul>
css
ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}
.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;
}
.menu li a:hover, menu li a:active {
background-color:#666;
}
As you can see I have attempted the gaps with a piece of css: {padding:12px 0 0 0px;} but no luck.... everything else works fine - see fiddle # http://jsfiddle.net/DCxvy/
Anchors are by default inline elements. To add certain padding values, you need to render them as inline block-level elements. Add display: block to your anchor styles:
.menu li a { display: inline-block }
Also, you should note that your .menu li a style has two entries for padding. The latter one (setting padding to 3px on all sides) is overriding your earlier definition.
Here's a jsFiddle demo.
If I'm not wrong, you want to insert space vertically between links.
For that, all you have to do is:
.menu li {
margin-bottom: 10px;
}
fiddle with the margin solution.
On the other hand, if you want the background of your menu to remain the shade of blue it is and have the colour change on hover then here is the fiddle for that.
I have also refactored your css to arrange rules in a more intuitive manner.
fiddle with the menu background as a solid colour without white line breaks.
Related
if I set #nav li a to float:leftthen it displays the list horizontally
but then if i do #nav{ float:right;} the list floats to the right but displays vertically
if I use just #nav li { float:left}it works fine but why does the floating change when using the aselected?
<div id="header">
<ul id="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
css
#header{
width:600px;
height:160px;
background-color:#DDD;
border-top: solid 1px #DDD;
}
#nav {
list-style: none;
float: right;
}
#nav li{
float:left; /* if I have the "float:left" here it will always display horizontally
}
#nav li a{
/*if I float:left here instead of in "#nav li" it only works if "#nav" isn't floated
padding: 10px;
background-color: #888;
color:222;
text-decoration: none;
}
When you say #nav li a { float:left; } only, the a element will float inside li and stay vertically above each other.
JSFiddle
But if you also add #nav li { list-style-type: none; } the list elements will collapse, because there's no content anymore and then the a tags will appear horizontally.
JSFiddle
Now, if you do #nav { float:right; }, the as will appear vertically stacked, because nav occupies just the width necessary.
JSFiddle
If you use #nav li { float:left; } instead from the beginning, the links will appear horizontally no matter what. Because now, it's not the a inside li, but the li inside ul floating to the left.
JSFiddle
if I set #nav li a to float:leftthen it displays the list horizontally
Not if that’s the only thing you are doing in a ul > li > a structure.
if I use just #nav li { float:left}it works fine but why does the floating change when using the aselected?
If you just float the a elements, then the list items still behave as block, and therefor take a line each. If you float the li instead, then they align next to each other.
I have border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.
I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?
html
<ul class="menuoptions">
<li>Home</li>
<li>Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
</ul>
CSS
.menuoptions {
position:relative;
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
top:10px;
list-style:none;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
}
Fiddle
You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):
.menuoptions {
...
padding: 0;
}
Then give the padding-left to your li elements:
.menuoptions li {
...
padding-left: 10px;
}
Working JSFiddle demo.
It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)
For some reason, this works in firefox and iexplore but not chrome.
It is supposed to hide the submenu until the mouse rolls over it - in chrome the mouseover clearly works as the colour changes etc, but the menu does not pop out!
any help you can offer would be amazing!
thanks!!
#menu, #menu ul
{
margin:0px;
padding:0px;
list-style:none;
list-style-position:outside;
position:relative;
line-height:2em; /* this would mean the element is double the height of the font */
}
/* set up colours, borders and element padding */
#menu a:link, #menu a:active, #menu a:visited
{
display:block;
padding:0px 5px; /* shorthand padding - this means top and bottom padding is 0, left and right are 5px */
color: #000000; /* link text colour */
text-decoration:none;
background-color:#F90; /* specifies background colour of links */
font-weight:bold;
color:#FFC;
/* border stuff */
border:1px solid #F90; /* shorthand, border is 1px wide, solid and coloured */
}
/* set up hover colour for links */
#menu a:hover
{
background-color:#FC6;
color:#900;
border:1px solid #F60;
}
/* position menu elements horizontally */
#menu li
{
width:7em;
position:relative;
}
/* position and hide nested lists (width required to make menu display vertically) and "top" value needs same measurement as defined for #menu */
#menu ul
{
position:absolute;
width:7em;
left:7em; /* same value as width - no bigger otherwise gap will appear and menu will not work */
top:0em; /* line up with parent list item */
display:none;
}
/* set width of links to 12em */
#menu li ul a
{
width:7em;
float:left;
}
/* display information for sub-menus */
#menu ul ul
{
top:auto;
}
#menu li ul ul
{
left:7em;
margin: 0px 0px 0px 10px; /*shorthand margin command */
}
/* display when rolled over - also number of sub-menus to display - if wanted to use more submenus, would need more UL's (ie ul ul ul instead of ul) */
#menu li:hover ul ul
{
display:none;
}
#menu li:hover ul, #menu li li:hover ul
{
display:block;
}
I came across this searching for a solution to a similar problem. OP's site seems to work in Chrome now, but I found that the problem was in the way Chrome handles certain elements. There was a 1px gap between the main menu item and the submenu item, and hitting that gap with the cursor would hide the submenu. The solution was to set margin-top on the submenu to -1px to remove that gap. In OP's case, it appears that gap would have been to the left of the submenu rather than the top.
Note: Mine differs from OP in that I have used <div> rather than <ul> and <li>, but the principle's the same.
site: WeirdCalculator.com
From CSS stylesheet:
.menuitem {
display: inline;
}
.menuitem:hover .show {
margin-top: -1px;
}
#lipelip is almost right.
You have to remove position: relative from just the inner <li> tags - not the outer ones.
If that's difficult to understand, you could just add this to your CSS instead:
#menu li ul li
{
position:static;
}
It fixes the problem by setting the correct position property on the inner <li> tags only.
Remove the position:relative; you have on the #menu li {}
Not sure why it's not working in Chrome but I don't think you need it anyway.
Also please check float property for this issue. There is a float:none in my CSS, I removed the float and it resolved my issue of text whch was not appearing on popup menus in Chrome.