I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;
Related
I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too:
http://jsfiddle.net/NWmpL/1/
I was trying to use additional wrapper which closely surrounds <li>, but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/
but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)
Is there any other way to "closely surround" content? Or is there any other solution ?
Thanks in advance.
More clearly: http://jsfiddle.net/NWmpL/6/
I want change this
to this
You should be using display:inline-block for layout, not display:inline.
display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.
So I went to your fiddle and changed the inline to inline-block.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.
Add
float:left;
to
.center li { }
FIDDLE
ul.center {
display: table;
margin: 0 auto;
width:250px; }
ul.center li {
display: block;
float: left;
width:75px; height:75px;
margin: 2px;
list-style: none;
background-color: #CCC; }
check the updated fiddle:
http://jsfiddle.net/4t6ha/2/
Try this different approach:
CSS:
.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}
ul
{
list-style:none;
}
li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}
I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}
ive got a list set up with a background image set to the left of each of the lines of text
although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
heres the code im using..
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
http://i.stack.imgur.com/rV1LM.png
Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.
.price-features li span{
display: block;
padding-top:5px;
}
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/
I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/