I have group of image and I want to display it as list (li), but I don't want the bullet show up, plus I want to create it horizontally. Does anyone know what CSS should I make? I'm trying to create it with my CSS, but it displayed only 1 image.. It looks like my image got stacking.
There are multiple ways you can achieve this with CSS.
ul{
list-style-type:none; /* hide default list-item bullets */
}
ul li{
display:inline-block;
/* OR */
float:left;
}
Related
I can't figure out why my site is displaying my menu icon all the way to the right, with all this extra blank scroll space, when viewed on a mobile device. Does anyone have any idea how I can remove all the extra space and move my menu bar so that it's centered?
http://mobiletest.me/iphone_5_emulator/#u=http://beeandcompany.com
In order to make it center, First thing you need to do is remove display:block from .main-navigation.So your .main-navigation will look like this :
.main-navigation{
text-align:center !important;
line-height:1.5;
}
Second thing you need to do is, there is float:left given to .main-navigation li so please remove it and add display:inline-block.So your .main-navigation li look like this :
.main-navigation li{
position:relative;
display:inline-block;
}
So your menu will look like this :
Rohil is correct with the div that has been added above the nav tag so you need to remove that, also you have another issue with the menu not actually doing anything when you click it. You need to add a css rule for the toggled state of the mobile nav like the following:
.main-navigation.toggled ul {
display: block!important;
}
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
I've found solutions for this problem the old fashioned way but I've got a responsive theme Im tweaking for a personal blog and wanted to figure out if its possible to have a nav menu with a centered image and the menu items float to the right and left of it without the need for using two seperate nav menus.
This is what I have now, all li items are in one menu. Im still trying to figure out how I would center the UL in this responsive design and have it scale accordingly. Ive seen examples of how to do it with 2 nav menus but was wondering if this is possible with a responsive design on one menu as I cant find a good example or tutorial.
I do have a temp version of the site here View It Here
What if you just put the centered image IN the middle of the ul? Give it its own li class and just style it accordingly.
Kinda like this http://jsfiddle.net/qWYGR/
the CSS isnt showing up in my jsfiddle. add this
ul {
display:inline;
list-style-type:none;
}
li{
float:left;
}
li a {
float:left;
padding:5px;
height:35px;
width:50px;
background:red;
}
.logo img {
height:100%;
}
By taking into consideration the following image, representing the 3 states of this menu interaction:
And knowing that:
1) We cannot have one image for all the horizontal menu, each item, (so, each ul li a) should have their own image;
2)
background image positioning will be favored since it will be better regarding cross-browser issues;
3)
The text on those buttons (should be) text and not an image;
What would be the best way for achieving this ?
I just need a kick off here.
Thanks.
Update:
Here's a test with no swapping images:
http://jsfiddle.net/Cq5JY/
Quite simply you've kind of spelt out your solution yourself I think.
Each item in the navigation needs 1 image with three states for the rollover and active states. Then you would move the background image using CSS as you mentioned depending on the way you layout the images.
The thing that makes the css a bit tricky (well you'll be writing a fair amount) is the text positioning on buttons, if the text starts at lots of different y coordinates then obviously you will be writing each one of these in to the CSS.
I would setup the nav using the code similar to the below (untested) based on a separate image for each button, which has in it the regular state of the button, underneath the rollover and underneath that, the active state of the button.
/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{
display:block;
width:150px;
height:100px;
text-align:center;
background-position:0 0;
}
ul li{
float:left;
}
/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }
/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }
/* define each button (background image and text position) */
ul li a.dashboard
{
background-image:url(images/dashboard.png); /* define image url */
padding-top:40px; /* position the text using a combination of padding / height) */
height: 60px;
}
ul li a.products
{
background-image:url(images/products.png); /* define image url */
padding-top:30px; /* position the text using a combination of padding / height) */
height: 70px;
}
...
And then I would have the html quite simply:
<ul>
<li>Dashboard</li>
<li>Products & Services</li>
...
</ul>
Let me know if you have any questions, I haven't actually tested the code but that is my general approach to most html/css based navigation whether it is vertical or horizontal (although I would use 1 large image for all rollover states for all buttons).