My navigation anchor tag is the last child element of the navigation I tried removing the padding-left but it wont remove however when I try to add padding it adds it. Any thoughts about this?
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>Aboutus</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
background-color:orange;
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:33px;
}
nav li{
display:inline;
padding-right:40px;
background-color:yellow;
}
nav li:last-child a{
padding-right:0px;
}
From your code you actual want this:
nav li{
display:inline;
padding-right:40px; /* padding applied */
background-color:yellow;
}
nav li:last-child { /* padding on last list item removed */
padding-right:0px;
}
You haven't applied padding to the anchor so it can't be removed with:
nav li:last-child a{
padding-right:0px;
}
You stated:
My navigation anchor tag is the last child element of the navigation.
Actually, it isn't (and it sort of is). In a list such as this every anchor link is the last child of the li as it's also the first and only child.
nth-of statements (which include first and last etc.) always refer the children of a parent element.
So the li:last-child will always be the last child of it's parent ul.
Related
I am trying to create a tabs for my page, but my links are not appearing horizontally. I have used float:left which is used to make links appear horizontally. Please let me know why?
<html>
<head>
<title>Test</title>
<style type="text/css">
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float: left;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
}
</style>
</head>
<body bgcolor="SteelBlue">
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>Product</li>
<li>Mixers</li>
<li>Others</li>
</ul>
</div>
</div>
</body>
</html>
The float left property needs to be applied to the Li element.
In your code it is being applied to the a element within the Li.
This can work, but if the parent element has any height (or if overflow:hidden is applied to it), they will stack up underneath each other and the starting position for the child elements will be on the left, so float:left won't change their position.
It might be easier to think of the list elements as being for layout and positioning, and the anchor element for visual appearance.
#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}
#navbar #holder ul li {
float:left;
}
#navbar #holder ul li a {
text-decoration:none;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
display:block;
}
The links are appearing horizontally for me:
JSFiddle
Are you viewing the links in a small viewport?
Also, what browser are you using?
It is also more common for the float: left property to be applied to the li element, not the enclosed a element.
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
This has been driving me nuts! I can get one group of list item's to stack horizontally (by floating) inside of a un-ordered list by limiting the height of the un-ordered list.
However, if I put a un-ordered list inside of one of the list items (that is inside the original list), then they cease to stack horizontally... I've tried everything.. what'd going on here? Why doesn't that work???
They should be like this:
█ █ █ █
Not like this:
█
█
█
█
Here is an example:
<style>
.container {
width:auto;
height:34px;
float:left;
}
.container ul {
list-style:none;
padding:0;
margin:0;
float:left;
height:34px;
}
.container li {
width:34px;
height:34px;
float:left;
}
.container ul li ul {
list-style:none;
float:left;
height:34px;
}
.container ul li ul li {
width:34px;
height:34px;
float:left;
}
</style>
<div class="container">
<ul>
<li>
<ul>
<li>test</li>
<li>test2</li>
<li>test3</li>
<li>test3</li>
</ul>
</li>
</ul>
</div>
It's probably something stupid I'm overlooking I'm sure...
A working example: http://jsfiddle.net/csdigitaldesign/cugF5/
This is exactly due to the cascading nature of CSS. The container for your floated list elements is not wide enough. Why?
Without a nested list, your elements float fine. This is because the ul containing the items and the div containing the items have the full width (since they are block elements).
However, when you have the nested list, your floated list elements are now contained by the div (which is fine), the two uls (which is fine), but also the outer li. Note that the outer li has also been set to have a width of 34px, which is not wide enough to contain the floated elements horizontally.
To fix this issue, you will have to make sure the outer li element does not get the 34px of width. One possible solution is to place the 34px of width only in the inner li:
<style>
.container {
width:auto;
height:34px;
}
.container ul {
list-style:none;
padding:0;
margin:0;
height:34px;
float: left;
}
.container li {
height:34px;
float:left;
}
.container ul li ul li {
width:34px;
}
</style>
<div class="container">
<ul>
<li>
<ul>
<li>test</li>
<li>test2</li>
<li>test3</li>
<li>test3</li>
</ul>
</li>
</ul>
</div>
Note that unless you are trying to float the container too, you shouldn't need the float: left on the div.
jsfiddle demo:
http://jsfiddle.net/AvwRw/2/
try list-style:none;
.container li {
width:34px;
height:34px;
float:left;
list-style:none;
}
You have to watch the width, the items are all floating left, but the width of the inner <ul> is not enough to hold them in a row horizontally.
Try adding this:
width:400px;
to
.container ul
Then you'll see the items stack horizontally.
-Ken
restart and make nothing float, exept your <li> second level.
http://jsfiddle.net/cugF5/1/
.container {
width:auto;
height:34px;
background:red;
}
.container ul {
list-style:none;
padding:0;
margin:0;
background:green;
height:34px;
}
.container li li {
width:34px;
height:34px;
background:purple;
float:left;
list-style:none;
}
.container ul li ul {
list-style:none;
height:34px;
}
.container ul li ul li {
width:34px;
height:34px;
background:purple;
list-style:none;
}
Just like this , the example might not help you so much if you think of building a menu with 2 or more levels :)
I found the solution.. yes you can add a forced width to the unordered list inside the list item that will work but its a fixed width.
The real problem that I wasn't wrapping my head around that fact the unordered list was inside the container of the parent list item... and that list item was set to 34px. Setting the first parent list item to auto fixed the issue... (just keep in mind that list item will be just as wide as its contents).
I was in the middle of typing this when Compid mentioned the same thing... but he/she pointed it out just before I did.. so I will give them the credit.
Format your lists specifically for that list. A container is a separate thing. This is good coding practice. Float the li not the ul. You have no formatting for the nested list. You can create a separate style eg"ul2" for that and see what looks good to you.
.ul1{
list-style-type: none;
margin: 0;
padding: 0;
height:34px;
}
.ul1 li {
width:34px;
height:34px;
float:left;
}
</style>
<ul class = "ul1">
<li>
<ul class ="ul2">
<li>test</li>
<li>test2</li>
<li>test3</li>
<li>test3</li>
</ul>
</li>
</ul>
I am trying to make a CSS based nav bar that converts a UL/LI list (including sub UL/LI lists that display on hover) into a horizontal nav bar and a sub horizontal nav bar. My current implementation (see picture) works except the sub list is using position:absolute to get its position below the hovered element. I believe that is the source of my problem, as the absolute positioned sub menu doesnt respect the edges of the container, so if the browser gets too small it bleeds off the edge of the container while the top level menu wraps. The other problem i'm having is that it doesnt expand the page vertically when the top level menu wraps, so even though its taking up more space the paragraph following doesnt move down and gets overlapped.
Does anybody have any CSS tips or know of any good examples of a menu like the one I'm trying to make?
Link to image:
http://i47.tinypic.com/288tbn7.png
To this day, the article "Son of Suckerfish Dropdowns" by HTML Dog is still a classic on clean CSS menus with hover.
http://www.htmldog.com/articles/suckerfish/dropdowns/
Hey now create this menu easily used to ul li simply as like this
HTML
<ul class="menu">
<li>Home</li>
<li>Home2</li>
<li>Home3
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Home4</li>
<li>Home5</li>
</ul>
Css
.menu{
display:block;
list-style:none;
border-bottom:solid 1px red;
float:left;
}
.menu > li{
float:left;
position:relative;
}
.menu > li + li{
border-left:solid 1px red;
margin-left:10px;
}
.menu > li > a{
display:block;
margin-left:10px;
}
.submenu{
display:none;
list-style:none;
position:absolute;
top:20px;
left:-39px;
white-space:nowrap;
}
.menu > li:hover .submenu{
display:block;
}
.submenu li{
display:inline;
}
.submenu li + li {
border-left:1px solid green;
margin-left:10px;
}
.submenu a{
display:inline-block;
vertical-align:top;
margin-left:10px;
}
Live demo
and now change css according to your layout this is basic step
<div id="wrapper" class="hfeed">
<div id="access">
<div id="menu">
<ul>
<li class="page_item page-item-2"><a title="About" href="/?page_id=2">About</a></li>
<li class="page_item page-item-20"><a title="Support" href="/?page_id=20">Support</a></li>
<li class="page_item page-item-22"><a title="Links" href="/?page_id=22">Links</a></li>
<li class="page_item page-item-47"><a title="About" href="/?page_id=47">About</a></li>
</ul>
</div>
</div><!-- #access -->
</div>
My current CSS:
div#menu {
background:#000;
height:1.5em;
margin:1em 0;
}
div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0;
padding:0;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
text-decoration:none;
}
div#menu ul ul ul a {
font-style:italic;
}
div#menu ul li ul {
left:-999em;
position:absolute;
}
div#menu ul li:hover ul {
left:auto;
}
Is my menu however I'm not sure how to centre it in the middle of the page.
Like what hitautodestruct said there are two ways, but you need to describe what you want.
Do you want the whole navigation block center aligned?
If so you could do this in the css (change the width to what ever you neeed it to be):
div#menu {
width:500px;
margin: 0px auto;
}
Do you want the content within the naviagtion to be centered?
If so then add this to your css:
ul {
text-align:center;
}
If these aren't what you are looking for then can you describe in more detail please! Cheers
try to use this css attribute: text-align and vertical-align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
http://www.w3schools.com/CSS/pr_text_text-align.asp
I dont sure is your html is entry page or not so I can not edit the css for you, try to do that by yourself if possible.
If you want to center it on the x grid you would use the simple technique of auto margins:
Set your body so that it aligns text to the center:
body{text-align:center;}
Set your container with auto margin left and right and also so it aligns all text back to the left:
#wrapper{margin:0 auto;text-align:left;}
On the vertical side it's a bit trickier follow this article:
http://phrogz.net/css/vertical-align/index.html