I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
Related
Weebly help center can't help me on this simple one and they recommended the forums, google and w3schools. I wan't to style my <ul></ul> in weebly by adding a class to it. How do I do this?
So, Weebly's support documentation says your backend will have a tab to manage your CSS and HTML.
Option one
1 - Go to the HTML tab and add a class to your ul.
<ul class="myClass"></ul>
2 - Go to the CSS tab and at the bottom of the main css file write in your new class style
.myClass { /* whatever */}
By placing the class at the bottom of your CSS, these class styles will override the current styles if they are different. You may need to cancel out certain things like margin or padding. For instance:
ul { margin: 100px; }
.myClass { margin: 0; }
.myClass will have a margin of 0 as the uls defined style has been overridden.
Option two
Wrap your editable content in a div with a class or id and target the ul within that div. The div itself can remain unstyled.
Example
HTML
<div id="editableContent">
<ul>
<li>List Item</li>
</ul>
</div>
CSS
#editableContent ul {
color: #F00;
}
Every list item within div#editableContent will have red text. The editor doesn't need any HTML knowledge and styles will be consistent.
I solved it, I override the standard theme design rather than create my own.
These are the CSS parts I modified: #main-wrap .paragraph ul and #main-wrap .paragraph ol
#main-wrap .paragraph ul {
padding-left:5px !important;
}
#main-wrap .paragraph ul li {
list-style: none !important;
background: url(red-arrow.png) no-repeat 0px 0px;
color: #000000;
padding-left:30px !important;
}
#main-wrap .paragraph ol li {
list-style: none !important;
background: url(red-bullet.png) no-repeat 0px 6px;
color: #000000;
padding-left:20px !important;
}
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/#
and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.
This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.
Please help and I will love you forever.
The code you are looking for:
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #EEE;
}
Super simple, fix:
<link bootstrap />
<link custom /> <-- Overwrite CSS by placing external file after in HTML
Or:
<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS
CSS to change is simple:
.nav > li > a:hover, .nav > li > a:focus {
background-color: none;
}
Why does Bootstrap make it so if you hover, it turns grey?
It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.
There are an CSS applied when you hovered these elements -
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
Please see highlighted in red -
Demo
html
<ul class="nav">
<li> About
</li>
</ul>
css
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 4px;
text-decoration:none;
width:50px;
text-align:center;
}
.nav {
list-style: none;
}
The buttons background turns grey because of the following css in the bootstrap.min.css file:
nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}
You can run a find on the code mentioned before to find it in the bootstrap.min.css file.
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'