I got a problem with my wordpress theme:
I generated a toplevelmenu using "wp_list_pages('title_li=')" on my website and styled it with css:
.menucontainer li {
float:left;
font-family:arial;
font-size:16px;
text-align:center;
font-weight:bold;
list-style:none;
margin:0px;
margin-top:-3px;
padding:12px;
background: #ffffff;
border-top: 3px solid #0a0a46;
border-bottom: 3px solid #0a0a46;
}
.menucontainer li:hover {
border-bottom: 5px solid #6464A0;
height:18px;
}
.menucontainer li a {
color:#2d2d2d;
text-decoration:none;
}
.menucontainer li a:hover {
color: #50508C;
}
Output: A thicker bottom-border of the hovered menuitem.
<div id="menuwrapper">
<div class='menucontainer'>
<li class="page_item page-item-1 current_page_item">
<a href="http://xxx.de/?page_id=6">
menuitem one
</a>
</li>
</div>
</div>
Question: The 'a' is located within the 'li' and the hovering only triggers if I hover the link-text. So how do I do switch the location of the 'a' with the location of the 'li'?:
<div id="menuwrapper">
<div class='menucontainer'>
<a href="http://xxx.de/?page_id=6">
<li class="page_item page-item-1 current_page_item">
menuitem one
</li>
</a>
</div>
</div>
I want to make sure, that the link and the hover work within the complete 'li'-container.
At the moment you have 2 :hover's. Keep your a tag inside your li and remove the a:hover because that is only going to effect when your hover on the a.
change your css to look like this:
[with this change, the a hover effect will take place when you hover over the li
.menucontainer li:hover {
border-bottom: 5px solid #6464A0;
height:18px;
}
.menucontainer li:hover a {
/* what you want to do with the a */
}
Related
In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.
HTML Code:
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:3px;
float:left;
list-style:none;
}
.tab-links a {
background:none repeat scroll 0 0 #dfdfdf;
border:1px solid #c3c3c3;
color:#484e2a;
display:inline-block;
font-family:open_sansbold;
font-size:11px;
min-width:166px;
padding:8px 4px;
text-decoration:none;
transition:all .15s linear 0s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background: #fff;
border:1px solid #dddfb0;
border-bottom:1px solid #fff;
color:#484e2a;
}
.tab-content {
padding:15px;
background:#fff;
border:1px solid #dddfb0;
margin-top:-20px;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab #1</li>
<li>Tab #2</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Test Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Test Content 2</p>
</div>
</div>
JS Fiddler link:
https://jsfiddle.net/ktncf454/
#padamapriya :
I did few modifications for you..:
.tab-links li {
margin: 3px;
float: left;
list-style: none;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
.tab-content {
padding: 15px;
background: #fff;
border: 1px solid #dddfb0;
margin-top: -20px;
position: relative;
z-index: 0;
}
Hope this helps!!!!
You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.
It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.
I have a <ul> with a handful of <li>s. I'm adding classes to the <li>s with a very basic bit of js. (This is an example for illustrating the possible bug, not my actual use case).
In FF, IE, Safari, the class .good or .bad is added, and the <li> and <a> colors are updated.
However, in Chrome the class is added, the <a> color is updated, but the <li> color stays the same. Browser Inspector shows the li character color is the color specified in the class, however the actual window shows the old color. Toggling any class attribute with the browser inspector causes the window to re-render, with the correct colors. Likewise with resizing the codepen results window.
View a CodePen here: http://codepen.io/fontophilic/pen/EVmbWd
setTimeout(function(){
document.getElementById("bar").classList.add("bad");
document.getElementById("test").classList.add("good");
document.getElementById("foo").classList.add("good");
document.getElementById("whatevs").classList.add("good");
}, 3000);
ul li {
color: black;
}
ul li a {
color: black;
}
ul li.good {
color: green;
}
ul li.good a {
color: green;
}
ul li.bad {
color: red;
}
ul li.bad a {
color: red;
}
<ul>
<li> First</li>
<li id="test"> Two</li>
<li id="foo"> The Third</li>
<li> Quatro</li>
<li id="bar"> Fiver</li>
<li> Six</li>
<li id="whatevs"> Seven</li>
</ul>
Important to note, if the <li>s have the classes applied on page load, display is as expected: http://codepen.io/fontophilic/pen/XmRqqJ
Any ideas on how to get Chrome to re-render the li color? Is this a known bug?
I still believe this to be a chromium/webkit bug, but for now I've found an acceptable solution. I force Chrome to re-render the element by modifying the box by adding and removing a 1px transparent border.
setTimeout(function(){
document.getElementById("bar").classList.add("bad");
document.getElementById("test").classList.add("good");
document.getElementById("foo").classList.add("good");
document.getElementById("whatevs").classList.add("good");
}, 3000);
ul {
width: 150px;
}
ul li {
list-style: disc;
color: transparent;
}
ul li a {
color: black;
display: block;
border-top: 1px solid transparent;
}
ul li.good {
background-image: none;
color: green;
border-top: 1px solid transparent;
}
ul li.good a {
color: green;
border-top: 0px solid transparent;
}
ul li.bad {
color: red;
border-top: 1px solid transparent;
}
ul li.bad a {
color: red;
border-top: 0px solid transparent;
}
<ul>
<li> First</li>
<li id="test"> Two</li>
<li id="foo"> The Third</li>
<li> Quatro</li>
<li id="bar"> Fiver</li>
<li> Six</li>
<li id="whatevs"> Seven</li>
</ul>
Update
Based on this stackoverflow question, I've improved my solution and eliminated the crufty css. hiding and showing the parent element will force a redraw of its children. For whatever reason, using jQuery's show/hide worked, and vanilla js show/hide did not. This is confusing, but seemingly true.
setTimeout(function(){
document.getElementById("bar").classList.add("bad");
document.getElementById("test").classList.add("good");
document.getElementById("foo").classList.add("good");
document.getElementById("whatevs").classList.add("good");
$("#woot").hide().show(0);
}, 3000);
ul li {
color: black;
}
ul li a {
color: black;
}
ul li.good {
color: green;
}
ul li.good a {
color: green;
}
ul li.bad {
color: red;
}
ul li.bad a {
color: red;
}
<ul id="woot">
<li> First</li>
<li id="test"> Two</li>
<li id="foo"> The Third</li>
<li> Quatro</li>
<li id="bar"> Fiver</li>
<li> Six</li>
<li id="whatevs"> Seven</li>
</ul>
I've some troubles with the navigation bar from my website. The position of the navigation bar changes when the dropdown menu becomes visible.
Also when resizing the browser the navigation bar change.
This is ofcource not really my intention. So please can someone help me?
I would appreciated very much.
This is my css code I'm using.
/*main menu*/
.nav-top {list-style:none;
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
position: relative; display:none; }
ul.nav-top li { display:inline-block;
padding:40px;
margin-right:19px;
position:relative;
}
ul.nav-top li:hover> ul { display:block; }
ul.nav-top li a { display:block;
text-decoration:none;
border-bottom: 2px solid transparent;
}
ul.nav-top a:hover{ color:#686A6A;
border-bottom:2px solid #E4E4E4;
}
/*sub menu*/
ul.nav-top ul ul { clear:both;
border: solid 1px ffffff; }
ul.nav-top li li {
display:block;
/* Introducing a padding between the li and the a give the illusion spaced items */
padding:2px; padding-top:10px;
}
ul.nav-top ul ul li {
}
ul.nav-top ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
ul.nav-top ul ul li:hover a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none; background:#FFF;
}
ul.nav-top ul ul li:hover a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
color:#686A6A; border-bottom:2px solid #E4E4E4;
}
thanks for your answer.
This is my HTML:
</head>
<body>
<div id="header">
<img src="images/logo-marco-kaller.png">
<ul class="nav-top">
<li>home</li>
<li>about</li>
<li>work
<ul>
<li>design</li>
<li>paintings</li>
<li>sculptures</li>
</ul>
<li>shop</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
<div id="background"></div>
<div class="wrapper">
<div id="content-background"><br>
<h1>Marco Kaller</h1>
<p>Welkom op de site van Marco Kaller!</p>
<div id="content">
</div>
</div>
</div>
<div id="footer">
<img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" />
<ul class="talen">
<li>language:</li>
<li>en</li>
<li>nl</li>
<li>de</li>
</ul>
<hr class="faded" />
</div>
i was able to make the dropdown menu already but when i tried to view it on other pc the secondlevel ul was misplaced and not below on it's li. So i tried to recode but i got lost. Please help.
Here is my html markup:
<div id="main-nav" class="menufont">
<ul id="nav">
<li>ONE</li>
<li class="sec">TWO
<ul id="twosecond" class="leveltwo">
<li>TWO A</li>
<li>TWO B</li>
</ul>
</li>
<li class="sec1">THREE
<ul id="threesecond" class="leveltwo">
<li>THREE A</li>
<li>THREE B</li>
<li>THREE C</li>
<li>THREE D</li>
</ul>
</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</div>
And here is my messed up css:
ul.leveltwo {
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
}
ul.leveltwo li {
color: #fff;
}
#twosecond li, #threesecond li {
font: 16px Arial;
display:block;
padding: 3px;
border-bottom: 1px dashed #fff;
}
#twosecond, #threesecond {
display: none;
position: absolute;
}
#nav li.sec:hover ul, #nav li.sec1:hover ul {
display: block;
}
The ul with class .leveltwo shows when i hover on it's main li but the ul of "TWO" is not aligned with it. Thanks alot in advance.
Just add display:none to your .leveltwo class and take out the #twosecond #threesecond tags. The `position:absolute is making the sub menus look like they're showing up under THREE.
Example: http://jsfiddle.net/r4gAQ/3/
Though I will say, I'd look into a jQuery solution, maybe a premade one like MLDDM. They have nice solutions that allow for vertical and horizontal menus. Also, hovering using pure CSS breaks in IE6... not that anyone should use that anymore.
Rechecked my post. This might be the CSS that would help you out. Try it out!
#nav li{
width:200px;
position:relative;
border: 1px solid black;
}
#nav li ul.leveltwo li{
border:none;
}
#nav li ul{
background: #c7000d;
border: 1px solid black;
padding: 7px;
font: 16px Helvetica, Arial;
color:white;
position:absolute;
left:200px;
top:0;
display:none;
}
#nav .sec:hover ul, #nav .sec1:hover ul{
display:block;
}
I have the following:
<div class="sbr_bdy" style="background-color: Red;">
<ul style="list-style-type:none; xmargin: 0 0 0 17px; padding: 0px;">
<li>
<a title="abc" href="www.cnn.com" class="btn">XXX</a>
</li>
</ul>
</div>
Fiddle example
I would like the XXX address link to appear centered horizontally inside the red background of the outer DIV. Now it appears to the right. Any ideas how I could do this? Advice would be much appreciated.
Just give the li the following style:
<li style="display:block;text-align:center;">
<li style="text-align: center;">
<a title="abc" href="www.cnn.com" class="btn">XXX</a>
</li>
Surround link with center tags.
See the fiddle: http://jsfiddle.net/xavi3r/QeNKJ/
What you should do is add a text-align:center; into your css.
Also when you are nesting elements it is a good idea to call the nested elements before the element you want to style, if you added a style for a { ... } that would apply it globally to your whole website.
And try to avoid inline styles; its easier to have them in a stylesheet :)
#sbr_bdy ul
{
list-style-type:none;
margin: 0 0 0 17px;
padding: 0px;
text-align:center;
background:red;
padding:6px 0;
}
#sbr_bdy ul li a{
background:#eee;
text-decoration:none;
color:#333;
font-family:Arial, sans-serif;
font-size:11px;
font-weight:bold;
padding:3px 5px;
border:1px solid #aaa;
border-radius:3px;
cursor:pointer;
}
#sbr_bdy ul li a:hover {
background-color:#f2f2f2;
border-color:#888;
box-shadow:0 0 2px #ccc;
}
#sbr_bdy ul li a:active {
background: #ddf;
}