I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}
Related
As you can see on the screenshot below, in my sidebar the right border of "KULTUR" is cutting off. Its always at the last element of the row.
I have tried to change margins and paddings but it's not working unfortunately.
Here is the URL to my website: http://holmsbuopplevelser.dahlsdata-test.com
It's in the right sidebar if you scroll down a bit.
Thanks in advance!
Try this:
.widget_categories li{
display: inline-block; //rather display:inline
}
I had checked your code and it is the only way you can manage tags with dynamic width and fix it!
find class ".widget_categories li" in your css and change display from "inline" to "inline-block".
.widget_categories li{
display: inline-block;
}
some of your li and buttons have this problem , add display:block to the buttons , and add display:inline-block to li , this will fix your issue, i checked your site
span.vc_gitem-post-category-name {
display:block;
}
.widget_categories li{
display: inline-block;
}
I found an issue with .sub_menu code left:-; and transform:translateX(-%);,So I changed position to relative and re-positioned with the two codes above, It seemed to work but now the two sub menus i have are no longer Side-By-Side. What they do is separate by a few centimeters top:, Not sure what made this happen, Any help would be appreciated,Thanks
JSFiddle sub menu pops up when you hover over Gallery
.sub_menu {
display: none;
position:relative;
top:-60%;
left:-350%;
transform:translateX(-40%);
width: auto;
}
.sub_menu > li {
display:inline-block;
}
.sub_menu li a {
background:-webkit-linear-gradient(#77047e,#FF00FF);
background:-o-linear-gradient(#77047e,#FF00FF);
background:-moz-linear-gradient(#77047e,#FF00FF);
background:linear-gradient(#77047e,#FF00FF);
}
.sub_menu li a:hover {
background:#FF00FF;
top:1em;
}
From what I understand at taking a quick look is the sub.menus are odd. They currently have the style position: absolute, and that would make them all align in the same exact place. As you can see you are doing that here:
.sub_menu {
display:none;
position:absolute;
top:-37%;
left:-47%;
transform:translateX(-20%);
width:auto;
white-space:nowrap;
}
So instead a fix would most likely be using position: relative, and then aligning them from there. Also when working with a sub menu, it would help to have an ID on each element to align it correctly (Especially when aligning them vertically and horizontally).
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/
I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/
I have a horizontal <ul> menu. How can I fix the width of the <li> elements at, say, 250px each?
Styling the A tag can help maintain consistency and give you a little more flexibility than styling the LI tag, espeically if you end up making multi-line menu items.
ul li {
float:left;
}
ul li a {
display:block;
width:250px;
}
You should also use a CSS reset to maintain consistency between browsers.
You can do this via CSS:
ul > li { width: 250px; }
Depending on your you're doing the horizontal menu, you may need a display:block; style as well.
What Nick and Diodeus both say is right, but unless you want all of your list items to have that width, you better throw an id on that ul and then target it in your CSS.