I'm sure this shouldn't be difficult to solve but I can't get my styling for a ul to work (trying different things, it either works for one, or none at all) and I'm about to tear my hair out. What have I missed?
https://jsfiddle.net/5cuuq8rq/
HTML:
<ul class="nav">
<li>Home</li>
<li>Couriers</li>
<li>Reviews</li>
<li>Retailers</li>
<li>About</li>
</ul>
CSS:
.nav{
font-size:18px;
font-weight: bold;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
width: 144px;
background: -webkit-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background: -moz-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background: linear-gradient(rgb(256,256,256), rgb(175,175,175));
text-decoration:none;
display:inline-block;
padding:10px;
}
.nav li > a:first-child {
border-radius: 20px 0px 0px 0px;
}
instead of this
.nav li > a:first-child {
border-radius: 20px 0px 0px 0px;
}
use it
.nav li:first-child > a {
border-radius: 20px 0px 0px 0px;
}
The problem is that you are selecting the first a element which is always going to be true since there is only one a element in each of your li elements. Instead, you should select the first li element and then target the a element nested in that li. For example, your CSS should look like this:
.nav li:first-child > a {
border-radius: 20px 0px 0px 0px;
}
Check out this updated fiddle: https://jsfiddle.net/5cuuq8rq/1/
if you use nth-child(some number)
you can specify what li you will style by giving it a number, 1 for first and so on:) good luck.
.nav li:nth-child(1) > a {
border-radius: 20px 0 0 0;
}
Related
My first-child of the A:hover tag is removing all the padding instead of only the first child. What is causing this? Thanks guys for any help. Stackoverflow wants more text but I can't say anything more other than I may be having issues with my element selections.
<nav>
<h2>Navigation</h2>
<ul>
<li>Home</li>
<li>Foo</li>
<li>Roo</li>
<li>Gamen</li>
<li>puta</li>
</ul>
</nav>
___________________________________________________________________________
nav li{
list-style-type:none;
padding:10px 0px;
font-size:20px;
float:left;
}
nav h2{
text-indent: -10000px;
}
.Latest_Content{
clear:both;
}
nav a{
text-decoration:none;
padding:10px 20px 10px 20px;
color:#000000;
font-family:'Droid Sans', sans-serif;
}
nav a:hover{
color:#ffffff;
background-color:#42b84f;
padding:10px 20px 10px 20px;
-webkit-transition: 0.4s;
}
nav a:first-child:hover {
padding-left:0px;
}
a:first-child will select all first child elements from all lists.
It should be:
nav li:first-child a:hover{
padding-left: 0;
}
Now, you are selecting only first list's a tag.
nav a:hover{
color:#ffffff;
background-color:#42b84f;
padding:10px 20px 0px 20px;
-webkit-transition: 0.4s;
}
nav a:first-child:hover {
padding-left:10px;
}
The solution could be:
nav li:first-child a{
padding-left:0px;
}
It's because you start list all the li and go to the element that want to change.
In your code nav a:first-child:hover you try to list the a and as you can see on each li are just one a, that is because all the a changes with the first-child.
I'm having a weird problem with my CSS menu. There is a huge space above the links.
I tried everything from removing all the margin and padding settings from the css and still nothing. The only way I can remove the extra spacing is to delete all the li.
Can anyone see what I'm doing wrong?
http://jsfiddle.net/3dB7v/
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div
#test_nav
{
text-align: left;
padding: 5px;
border: 1px dashed blue;
}
#pnlUpdateDate
{
width: 200px;
border: 1px dashed blue;
}
#test_subnav
{
float: right;
position: relative;
z-index: 1000;
padding: 0;
border: 1px solid red;
}
#test_ul li
{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1001;
b1order: 1px dashed orange;
}
#test_ul li ul
{
margin-left: 0;
padding: 0;
}
#test_ul > li
{
float: left;
padding: 3px; /* padding-top: 3px; padding-bottom: 3px; */
margin: 0 2px 0 0;
}
#test_ul > li > a, #test_ul > li > span
{
display: block;
padding: 4px 4px 4px 4px;
margin: 0 3px 0 3px;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
#test_ul > li > span
{
cursor: default;
}
#test_ul > li:hover > a, #test_ul > li.active > a
{
color: Red;
}
#test_ul > li:hover > a:active
{
color: #3B96B6;
}
#test_ul > li:hover > span
{
color: #3B96B6;
}
That space belongs to the default margins of the ul#test_ul element applied by the useragent.
You should reset the default stylesheet applied by user agent on the list element, as follows:
ul#test_ul {
padding: 0;
margin: 0;
}
You can refer to this answer for further details:
User agents apply some default styles to the HTML elements. For
instance they apply a top and bottom margin on the <p>, <ul>, ... elements.
As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.
Working Demo
It's better to reset user agent stylesheet before any author stylesheet to prevent unexpected issues.
Try removing the margin and padding from the ul element.
A quick and dirty way would be * { padding:0; margin:0; }
What you are seeing is the browser default styles. Consider locating a "reset" stylesheet and always applying it first before any other styles. I like this one: http://meyerweb.com/eric/tools/css/reset/
Address the problem, not the symptoms. You'll run into this all the time if you don't. Each browsers default styles are different. Zeroing them all out is the only way to get consistency throughout.
It looks like you need to add this to your CSS:
#test_ul {
padding: 0;
margin: 0;
}
Here is the html list:
<aside id="polylang-3" class="widget widget_polylang cf">
<ul>
<li class="lang-item lang-item-5 lang-item-da"> danish </li>
</ul>
<aside>
Now there is css applied to list items as following:
.widget > ul > li
{
margin: 0;
padding: 7px 0 8px 0;
border-bottom: solid 1px #eeeeee;
}
I would only like to access the above list, but cannot get to its items neither by id, nor by class.
Must be something simple, but I just cannot figure it out.
Many thanks in advance.
Finally, have got it to work.
I could access it like the following:
#polylang-3.widget ul li
{
margin: 0;
padding: 0px 0 0px 0;
border-bottom: none;
}
The porblem was that I wanted to erase the border-bottom, but previously I did not set it to "none"
You can try this:
.widget ul li
{
margin: 0;
padding: 7px 0 8px 0;
border-bottom: solid 1px #eeeeee;
}
I am able to access it just by this
#polylang-3 li{
/*your css code*/
}
I have created a menu but cannot solve this issue so I am hoping that someone can help me:(
Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster... I have tried: adding overflow:hidden; to my menuwrapper,tried adding a "clear both" div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:( I didn't set explicit width to my anchor tags (I really don't want to do that!). In Firefox looks like perfect: http://robertpeic.com/kyani/template/menu.png
in other browsers look like this: (notice that there is no blue button because it came bellow my menu) http://robertpeic.com/kyani/template/menu2.png
I dont want this:http://robertpeic.com/kyani/template/menu3.png
Question: How can I prevent my li's from going below my menu even if there is no room? Thanks for your help!!
Link to my menu
Relevant CSS looks like this:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
Html looks like:
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
I added overflow:hidden to .mainmenu and changed the padding for .mainmenu ul li a and it worked for me.
.mainmenu
overflow:hidden;
.mainmenu ul li a
padding:0 22px 0 23px;
I have found that the best way to get a consistent full width menu bar with cross browser compatibility is to force the widths of the LIs. Although it isn't a very forward compatible. it is the best way I have found for maintaining the integrity of the visual design.
Set the width of the mainmenu div to 910px. It will solve your problem and also not show any white spacing
Your entire html will be, as given below. While testing your code,I found, if I omit the first line DocType... the menu gets mangled in IE . In Chrome it works fine. So AFAIK, Your issue was with Doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.mainmenu
{
display: block;
width: 906px;
margin: 0px auto;
height: 42px;
background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -15px;
z-index: 160;
}
.mainmenu ul
{
list-style-type: none;
}
.mainmenu ul li
{
float: left;
}
.mainmenu ul li a
{
text-decoration: none;
display: block;
font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
font-size: 20px;
padding: 0 20px ;
color: #383838;
border-left: 1px solid #dedede;
height: 42px;
line-height: 42px;
z-index: 100;
}
.mainmenu ul li a:hover
{
color: #ffffff;
}
.mainHover
{
background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
display: block;
position: relative;
background-repeat: repeat-x;
z-index: -50;
}
</style>
</head>
<body>
<div class="mainmenu">
<ul>
<li>Pocetna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div>
</body>
</html>
I feel so dumb right now :) To prevent my li from going below I've only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!
CSS now looks like:
.mainmenu{
display:block;
width:903px;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}
HTML looks like this:
<div class="menwrap">
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
</div><!--/menuwrap-->
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.