I want to show the rounded image on the left and right menu. You can see the example here. The background image is:
<ul>
<li><a class="current" href="">Home</a></li>
<li>Faq</li>
<li>About</li>
</ul>
Let me know the trick on CSS to achieve my goal without cutting the current image.
The result should be like this
Here is the final result using sliding doors technique
You should use border-radius:5px and background: linear-gradient(startcolor, endcolor);
For IE support use the CSS3PIE
example at http://jsfiddle.net/gaby/9DENH/4/
Use sliding doors technique.
And your main problem is that <li>s are floated so <ul> has 0 height. You can either float ul also, or give it overflow:hidden
http://jsfiddle.net/9DENH/3/
================================
UPDATE:
sorry speed read will kill me one day :)
Here is my updated answer: http://jsfiddle.net/9DENH/5/
Add this to css:
li {
padding-left: 10px;/* to create gap that will not be overlapped with <a> background */
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat left top #000;
}
li a, li a.current {
background:url(http://i.stack.imgur.com/yLgZA.png) no-repeat right top #000;
text-indent: -10px; /* same as li padding, to realign centered text */
}
This is basic you should add hover states.
You can use the CSS rounded corners and it works just fine w/ the background image you have there (although you don't need the image's corners to be rounded and the image doesn't have to be so wide - 10px wide is just find since it repeats-x.
li a:link, li a:visited {
background-image: url('../images/navBg.jpg');
background-repeat: repeat-x;
background-position: top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
li a:hover, li a:active{
background-position: bottom left;
}
Do you try to use the images as a sprite?
If so you have to choose diffrent positions on the background,
and you also will have to define a height and width for each element.
Related
i'm trying to have vertical buttons (text from down to up) in a horizontal nav. Can anyone help me? I read something about "transform: rotate" but I don't know where to put it..
HTML
<div id="menu">
<nav>
<ul>
<li>mission</li>
<li>projects</li>
<li>present</li>
</ul>
</nav>
CSS
#menu
{
border: 1px solid red;
width: 1325px;
height: 146px;
margin: 0 auto;
}
#menu nav ul
{
background-color: #093;
list-style-type: none;
}
#menu nav ul li
{
background-color: #00F;
width: 146px;
height: 42px;
margin: 3px;
}
#menu nav a
{
text-decoration: none;
}
From : w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)
/** CSS3 2D Transforms **/
.div{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Never tried to use this, I usually use javascript to rotate my elements but it appears to be what you looking for (I think you want to do this only in css/html).
You can apply this directly on #menu nav ul li I think!
If it doesn't work, can you provide a JSFiddle (or sort of)?
Update 1
Ok sorry I didn't analyse your entire code, I thought you were only looking for "rotation"!
First of all, for
blue buttons from left to right
You have to use a propriety name float to do this job, then clean with clear. I recommend you to practice this with some tutorial, it's very important in CSS Positioning and it will help you a lot here (and for future i guess)! Actually I did it in the JSFiddle linked but I think you absolutely need to be friendly with float and clear (#petebolduc supposed you to use float/clear too!)
Secondly for
with the text from bottom to top
Here you can use CSS3 2D Transforms. You have to applied a 270° rotation on your text for it be bottom to top. As I supposed in the first answer, you have to applied it on #menu nav ul li.
Here is the JSFiddle updated. I did not change your width/height property because I am not sure what you want to do after, but consider adapt them! (With your actual values, <li> are out of <header> and this is not what you want, I suppose). If you need help to width and height, then ask for!
I think it can be a good tutorial for positioning : http://www.barelyfitz.com/screencast/html-training/css/positioning/ (I am french so I usually follow french tutorial..)
And the JSFidle : http://jsfiddle.net/B4SEx/1/
Hope it helped you
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
So I have
<ul>
<li>Hello</li>
</ul>
and
li {
list-style-image: url(../img/bullet.png); /* 13x13 px */
/* line-height: 13px; */
/* vertical-align: middle; */
padding-left: 5px;
}
which looks like
as you can see text and image element of <li> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?
The padding will affect only whatever is inside the element—the text, in your case.
The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:
list-style: none;
and then apply the desired image as the <li>'s background
li {
/** the image will be vertically aligned in the center **/
background: url(../img/bullet.png) left center no-repeat;
/** move the text to the right **/
padding-left: 20px;
}
you can have
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
May define a img-tag or a background: url(..) for the li-tag instead of the "list-style-image"
When you only have one line per list item you can add some padding-bottom to the li element
I also needed to add "no-repeat" to the background property
HTML
<p>You can have</p>
<ul>
<li> <span>Hello</span></li>
</ul>
CSS
li {
list-style-image: url('dot.png');
}
li > span {
top:-3px; position:relative;
}
Can I create button, use a background image that changes on hover and on active, and have the active state show an image that extends outside of the bounds of the anchor? Here's my sprite:
https://dl.dropbox.com/u/7737304/menu-sprite1.png
The top half of the sprite is 'hover', the bottom is 'active'. I don't anything below the solid bar to be a clickable link, and I don't want to set a width as the menu text will set on top and extend beyond the left and right edges of the image.
I've attempted to assign the background image to the parent li tag, which works for 'hover' but I can't make it work for 'active'.
Any ideas?
CSS
.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}
Do you mean something like this ?
The anchor 'expands' when active, but doesn't change the flow, since it uses a negative margin to make it actually the same size as before.
So: add the amount of padding you want to expand the anchor, then add the same amount as a negative margin. (You do need the anchor to be a block or inline-block element, since otherwise it can't use margin)
No need for JavaScript with this method.
This is what I came up with: DEMO
It just puts the background image on the <li>. Not sure if this is exactly what you are looking for or not though.
This is a tough one to explain! What I did was to make the a tag clickable, extended the li with ::after to which I could apply the styles necessary to make it change, but not be click able.
Like I said, tough to explain but here is a demo: http://jsfiddle.net/cchana/SgH5C/
And here's some CSS that may help you:
.navigation li::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
bottom: 0px;
content: '';
display: block;
height: 31px;
position: absolute;
width: 100%;
}
.navigation li:hover::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'