I have menu items listed. i have a custom seperator I would like. Currently I have styled the menu items with a background image of the divider positioned to the left. I want to remove the first one.
i.e. my menu looks like this:
/ work / about / resume / contact / store
i want it to look like:
/ work / about / resume / contact / store
menu styled:
.main-nav ul li a {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
font-size: 22pt;
color:#999999;
vertical-align:middle;
text-decoration:none;
display: block;
padding:0;
text-align:center;
width:190px;
float:left;
background-image:url(data/img/navdivider.png);
background-position: top left;
background-repeat:no-repeat;
height:65px;
padding-top:8px;
}
trying to get rid of first one with:
.main-nav ul li a:first-child {
background-image:none;
}
but its not working. what am i doing wrong?
I edited whole answer, because it was wrong.
Problem is that you are targeting a as a :first-child, which always is (its parent is that li element). So, try target with this:
.main-nav ul li:first-child a {
background-image:none;
}
Related
I have Joomla 3.4.5 + Virtuemart 3 + Template Purity III.
I have a problem with the "pages navigation" links. You can see the problem here:
http://alturl.com/ofbav [link broken]
The problem is the list <ul> is displayed vertically instead of horizontally.
I would like to know which css code I have to add to get horizontally and "normal" looking my pagination buttons.
Can some expert help me please?
Not sure. Try like this.
.vm-pagination > ul > li
{
display:inline-block;
padding:0px 10px;
}
EDIT:
According to comment below if you want one code should solve both the problem then use it like below. In the above code i tried to apply only for the direct children list items. In your bottom page case it is not direct children. So change your code like below.
.vm-pagination ul > li
{
display:inline-block;
padding:0px 10px;
}
You should put list-style: none; on "ul" to get rid of the bullet points and display: inline; or display: inline-block; on the contained "li"s to display them in a row.
.vm-pagination ul li
{
list-style: none;
}
.vm-pagination ul li
{
display: inline;
}
Then you can play with marging+paddings+borders to make them look more like tabs.
Just add text-align: left; to your pagination ul. Also you can disable list styling with list-style: none;. And as a final step, you can remove unnecessary paddings and margins of your ul element
.vm-pagination > ul {
text-align: none;
list-style: none;
padding: 0;
}
use in your style may help you
ul
{
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul li
{
float:left;
padding:4px 4px;
}
I have a folder that drops down when you hover over it, however I've placed a 20px margin-top to the drop down so it's not pushed up against the main navigation. I like the spacing however when you move your mouse to go select a sub-item the menu disappears.
How would you adjust the margin of the drop down so that it stays so the user can select an item in it?
> ul {
display: none;
}
&:hover > ul {
display: block;
position:absolute;
text-align: left;
z-index:1000;
background-color:#nav-folder-bg-color;
width:150px;
padding: 10px;
list-style: none;
border-radius:#nav-border-radius;
margin-top:20px;
> li a {
color:black;
font-size: .8em;
text-decoration: none;
}
}
EDIT: Here is the menu I am working on - http://menudemo.squarespace.com/home
Put the margin on the first LI in the sub-menu:
&:hover > ul li:first-child {
margin-top:20px;
}
Needed to add
height:50px;
to .main-navigation ul li
The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
Good evening guys,
This is my first time on this website, so I apologize if I do this REALLY badly.
First and foremost I have a website designed for use with wordpress, and the issue I'm having is that I want my horizontal navigation at the top to look a certain way, but if I leave it the way it is right now it seems to DROP down to a second row...which makes me sad.
So I have decided that I will just make the individual buttons smaller, and then CENTER them so that even if the viewer doesn't have the fon't I'm using (which is IMPACT), then it will just adjust how they are centered, as opposed to dropping down.
I have tried to find a way to do this for DAYS and I have failed repeatedly. I use "firebug" with firefox to test the code changes, and I just can't find a way to make this work.
The webpage is http://www.crapcast.com and the code is just the top of the page, below the logo. I will include current CSS, which is formatted the way it is to fulfill the current usage of the page (but again, tends to show a double row on some older browsers and on phone browsers).
#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;
I think your problem is related to your fonts:
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
...
}
...
...
#navigation li a {
...
letter-spacing:2.45px;
...
}
You are using the width of the fonts to set the width of your items in your menu.
So when there is no Impact font in the system, the items increase their width a lot more.
The width of each character of the Impact font is way to narrow compared to the other ones you put there.
If you try with equivalent width fonts I'm sure you will fix your problem.
In the iPhone, and I guess Android, you cannot find the Impact font there.
Try Helvetica, Arial instead of Impact and change your letter-spacing to 2.0px or something like that.
I don't see the 'two row' problem in any browser, even IE6.
And if want to make sure your visitors gets to view the exact font you're using.. may it be Impact or any sort of fancy fonts. Try using http://www.fontsquirrel.com/fontface/generator.
Just upload your desired font, download the kit & follow the uberly simple instructions (^_^)
I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.
Here is my CSS Code
.fg-block1 ul, .fg-block3 ul
{
list-style:none;
}
.fg-block1 ul li, .fg-block3 ul li
{
padding-left:28px;
background:url(images/bullet-2.png) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border-bottom:1px dotted #fff;
text-align:left;
background-position:1px 0;
line-height:16px;
padding-bottom:5px;
margin-bottom:5px;
}
.fg-block3 ul li
{
border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
color:#fff;
text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
color:#fff;
text-decoration:underline;
}
Try reading this :
http://www.twinhelix.com/css/iepngfix/demo/
AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.
If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.
i recommend jQuery png fix. see links below
jQuery plugin
another source
I never tried the jQuery plugin, but after dealing with a lot of PNG problems in IE6 the best fix I found is by far DD Belated PNG fix. The TwinHelix fix mentioned before presented some problems for me in certain scenarios.