I have been trying to get this to work for about 2 days now, but i can get nothing. Here is my layout. I have a navbar with some elements, and the last one is floating right. This leaves a lot of space left between the last and the second to last li. How can i make that second to last li fill up the ul? I already tried to treat it as a table, but that did not work. Here is some of my css:
.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
display: table;
width:100%;
}
.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
}
.NavBar > ul > li > a:hover {
background:#111;
}
.NavBar > ul > li:nth-last-child(2) {
list-style:inside none;
display:table-cell;
}
If there is any more code you need, just tell me and i will post it. Thanks.
Here is what i need to happen.
The News li need to grow to fill up space in between it and the login li.
Is there a reason you are floating the last li right instead of left? If you keep the floats left you shouldn't have the spacing problem.
If this doesn't help, I think you're going to need to give more details as to what you want to accomplish.
Okay, I suspect there's more that you haven't yet told us, but take a look at this quick and dirty sample and let me know how close it comes to your goal:
<html>
<head>
<style>
.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
width:100%;
}
.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
width: 10%;
background-color: #FFDDDD;
}
.NavBar > ul > li > a:hover {
background:#111;
}
.NavBar > ul > li:last-child {
float: right;
background-color: #DDFFDD;
}
.NavBar > ul > li:nth-last-child(2) {
width: 60%;
background-color: #DDDDFF;
}
</style>
</head>
<body>
<nav class='NavBar'>
<ul>
<li>Widgets</>
<li>Boojuns</>
<li>Snarf</>
<li>Xyzzy</>
<li>Plugh</>
</ul>
</nav>
</body>
</html>
The background colors are just to help us see what's happening.
Related
In the following code, through which I am trying to understand drop down menu. If you see the output, you can notice that the li texts FIRST SECOND AND FOURTH are not equally horizontally aligned with equal spaces between each other.For instance there is more horizontal space on the right side of FOURTH. Whats the best possible way to align the text in the middle (horizontally) without manually giving values of margin, padding etc. Like there should be a way using text-align:center or margin:auto auto that can align the text in the center automatically irrespective of the length of the text or font size.
ul{
width:350px;
height:50px;
padding-left:0;
margin:0;
background:#CCCCCC;
}
ul > li{
list-style: none;
display: inline;
font-size: 24px;
float: left;
width: 106.66px;
margin-right: auto;
text-align: center;
margin-left: auto;
}
ul > li > ul{
margin:10px 0px;
padding-left:0;
width:80px;
height:40px;
visibility: hidden;
}
ul > li > ul > li{
display:block;
list-style-type:none;
padding-left:10px;
}
ul > li:hover ul{
visibility:visible;
}
<body>
<ul>
<li>First</li>
<li>
Second
<ul>
<li>Third</li>
</ul>
</li>
<li>Fourth</li>
</ul>
</body>
It because of your hidden ul. Don't use vissibility:hidden like that, it will make the ur hidden, right but it still take up space so it make your second li bigger than it normal should be - inspect element and you will see it - and it look like fourth li look in wrong place.
To prevent this, you can use display:none with position:absolute like my demo below; display:none make your third ul "disappear", make the ul look right, and with position:absolute, it prevent the fourth li run around (try delete the attribute position:absolute and you can see.
ul{
width:350px;
height:50px;
padding-left:0;
margin:0;
background:#CCCCCC;
}
ul > li{
list-style:none;
display:inline;
padding:10px 20px;
font-size:24px;
float:left;
position: relative;
}
ul > li > ul{
margin:10px 0px;
padding-left:0;
width:80px;
height:40px;
display:none;
position:absolute;
}
ul > li > ul > li{
display:block;
list-style-type:none;
padding-left:10px;
}
ul > li:hover ul{
display:block
}
Demo
I get the feeling that these are really simple problems, however I'm new to coding and can't work out how to fix them. Any help would be greatly appreciated.
Firstly, the hyperlink text is currently the only clickable part of the dropdown menu. I want to be able to click the whole section of the menu that the text sits in, i.e the individual parts separated by the 1px borders. I'd also like these sections to change color when the cursor hovers over them, but I'm not sure which part of the css to change if I want to achieve this.
Secondly, the padding creating the space between my main menu links is being included in the link hover function. Is there a way of spacing out the links that doesn't cause the subpages to drop down when I hover over the white space to the left of them? (This seems like the opposite of my first problem)
Finally, part of the css I've written makes any of the parent menu links that have been clicked stay highlighted purple while the viewer is on that page. This was intentional, however now that I have child pages in the dropdown menu, they all stay that color too when the parent page is clicked. Is there a way of fixing this? it would be ideal if both the parent link and the specific child link stayed highlighted purple whilst the viewer was on a that particular child page.
The website link is www.lucieaverill.co.uk
Here is the code :
HTML:
<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>
CSS:
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding-left:50px;
padding-bottom:20px;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
UPDATE! ------------------------------
I think I've made some progress based on what various people have been saying about a tags. I've managed to reach the point where the hover effect changes the a tag's color, however the padding is a little off, and I can't work out why. I've tried setting the padding-right value to "auto", as I don't think it can have a specific value as each link varies in length.
Obviously, I want the padding to extend to the very end of the menu at the right hand side, but I can't make this work.
There also seems to be some odd spacing between the color of each link, and at the very bottom of the menu.
I'm surprised to see that the transition between colors is smooth and gradual.. I don't think I have any css that tells it to act like this.. is there a way of making it more instant?
The web link again, is www.lucieaverill.co.uk
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
margin-left:0px;
float:none;
}
.header ul li ul li a {
background-color:#FF3F55;
padding-left:10px;
padding-right:auto;
padding-top: 12px;
padding-bottom: 12px;
font-size:11px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li:hover a {
background-color:#ededed; }
/* end dropdown menu */
See the fiddle:
Remove the padding of li and add the required padding to a tag.
the clickable problem will be fixed.
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding:0px;
}
.header nav ul li a{
padding:20px 25px;
}
.header nav ul li a:hover {
color:white;
background:black;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
<div class="header">
<nav class="site-nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>submenu
<ul>
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</nav>
</div>
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
code below not working
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li:hover
{
display:inline;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
i supposed they should have been arranged themselves horizontally on hovering.
link- http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list
I am not sure if you are going right direction.
Do you want to rearage position of menu items when user put mouse cursor on it?
It can not work. If user put mouse on "About" item, it disapears and apperas in first line with other elements, but it loses hover state and apears back, under the cursor, so it get back hover state and move to first line again in loop....
You need to apply it to all li on hover of the ul
DEMO http://jsfiddle.net/LstNS/26/
ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}
Though this effect is a little weird, try this way:
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li { /*<<<here's the magic!*/
display:inline-block;
font-size:30px;
}
The way you've tried, you're not changing the anchor to be inline, but the list item. The problem is that you're setting the display: inline to only one "li", this is not applied to the others items. You need to make all of your "li" inline on the hover of your whole list (ul).
I'm sorry, but I don't understand your question. Are you trying to inline your links? If so, try this for your css markup..
<style>
ul { list-style-type:none; margin:0; padding:0; }
ul li { display: inline !important; }
ul li a:link, ul li a:visited { text-decoration: none; color: #1122CC; }
ul li a:hover, ul li a:active { text-decoration: underline; }
</style>
hope all of you are doing fine..
first of all, really thank you for this great website.. it solved plenty of problems I faced by just searching for it..
now the problem I'm facing right now and I couldn't have the solution by my effort nor by searching here and google..
I'm basicly new to css, but I've learned the basic (hopefully).. I have tabular navigation aside with another side list of links..please check the image: http://www.tiikoni.com/tis/view/?id=90b0b93
what I want is, when the user enters the page, the left list shouldn't be visible.. when the user hits the red "A" (which is red because it's activated), the left list displayed..then, when he choose one of the list (let's say First), the blue area should show specific content (the last action I made right ).. I managed to keep it hidden, but it doesn't show when I his "A"..
the code I used is bellow:
getting in mind two things, the page is design as a table, so the left list is in a cell separated from the cell where blue tabular nav is.. second this, I'm trying to not use jQuery or any other script other than css..
tabs.css
.tabs
{
position:relative;
text-align:left;
...........
}
.tabs ul.menu
{
list-style-type:none;
display:inline;
.........
}
.tabs ul.menu > li
{
display:inline;
float:none;
........
}
.tabs > ul.menu > li > a
{
color: #580000; /* tabs titles */
text-decoration:none;
display:inline-block;
........
}
.tabs ul.menu > li > a:hover
{
color: white;
cursor:hand;
}
.tabs ul.menu li > div
{
display:none;
position:absolute;
.........
}
/*.tabs ul.menu > li > div > p
{
border:1px solid #f1f3f4;
background-color: #f5f9fc;
........
} */
.tabs ul.menu > li > a:focus
{
color: #f5f9fc;
}
.tabs ul.menu > li:target > a
{
cursor:default;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808));
.......
}
.tabs ul.menu li:target > div
{
display:block;
}
myTable.css
.myLeft
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom;
position:relative;
display: none;
..........
}
.myLeft:target
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom;
position:relative;
display: block;
visibility:visible;
........
}
.myLeft > ul.menuLeft
{
list-style-type:none;
display:inline; /* Change this to block or inline for non-center alignment */
.........
}
.myLeft > ul.menuLeft > li
{
display:inline;
float:none;
........
}
.myLeft > ul.menuLeft > li > a
{
color: #580000; /* #7a7883; /* tabs titles */
text-decoration:none;
display:block;
........
}
.myLeft > ul.menuLeft > li > a:hover
{
color: white;
cursor:hand;
}
.myLeft > ul.menuLeft > li > div
{
display:none;
position:absolute;
........
}
.myLeft > ul.menuLeft > li > a:focus
{
color: #f5f9fc;
}
.myLeft > ul.menuLeft > li:target > a
{
cursor:default;
.........
}
.myLeft > ul.menuLeft > li:target > div
{
display:block;
}
content of the tabular stuff:
<div class="tabs" style="height:300px;"> <!-- Tabs -->
<ul class="menu">
<li id="item-1"> <!-- item-1 -->
A
<div id="#item-1">
.............
content of the left list:
<div id = "#left-1" class="myLeft" <!-- Tabs -->
<ul class="menuLeft">
<li> <!-- item-1 -->
FIRST
</li>
<li> <!-- item-1 -->
Second
</li>
<li> <!-- item-1 -->
Thired
</li>
sorry for long thread and thank you in advanced ..
I got the answer of the above LONG question..
simply, name the whole iv of the left list without using hash-tag before it.. not only the link.. like below:
<div id = "left-1" class="myLeft" style="height:300px; "> <!-- Tabs -->
<ul class="menuLeft">
<li> <a class="alLink" href="#item-1">our meetings</a> </li>
.......
now I've got another three issues :"(
first, the page moves when this left list appear..
second, I want the upper links (the one when you click on them opens the left list) to be highlighted when the left links is displayed.. this could only be done by iding them same as the left links.. but in this case it won't work properly.. I think this could be solved by using jQuery..
third, when I hit the first links of the left list, the blue box in the middle should changed while this left list still there.. it just disappear!!
If anyone has any suggestions, please let me know..
thank you..