This is my navigation:
<ul>
<li class="home">Home</li>
<li class="projects">Projects</li>
<li class="about">About</li>
</ul>
I use a sprite image that has simple and hover shapes for each link.
ul li a {
background-repeat: no-repeat;
background-image: url(../images/sprite.png);
display: inline-block;
outline: none;
text-decoration: none;
width: 51px;
height: 51px;
color: #a5a4a4;
}
ul li.home a {
background-position: 0px 0px;
}
ul li.home a:hover {
background-position: 0px -51px;
}
I want to break links text to bottom of each 51x51 pixel squares. Maybe it requires to increase the height of a tags, But the another part of sprite image should not be show.
Thanks
set padding-top: 51px; and place the background there. If other parts of the sprite is showing then you should make the images more separated.
Related
I have a nav bar that consists of an UL with several LI items. The active nav button has a different background color, but I also need a small bottom border on the button.
When applying a border, this appears outside of the LI. When working with divs, you can use box-sizing:border-box to get the borders inside the div. But how can you offset the border on a LI item ??? (list-style-position seems to have no effect)
My scss code:
nav {
ul {
li {
float: left;
padding: 0;
box-sizing: border-box;
list-style-position: inside;
&.active {
background-color: white;
border-bottom: solid 6px blue;
box-sizing: border-box;
list-style-position: inside;
}
}
}
}
When working with divs, you can use box-sizing:border-box to get the
borders inside the div.
To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.
But how can you offset the border on a LI item
You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)
body {
background: lightgray;
}
nav ul li {
position: relative;
float: left;
padding: 0 5px;
list-style-type: none;
}
nav ul li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: -6px;
background-color: white;
border-bottom: solid 6px blue;
z-index: -1;
}
/* or one can use linear-gradient */
nav ul li:hover {
background: linear-gradient(
to bottom, white calc(100% - 5px), blue 5px
) no-repeat left bottom;
}
<nav>
<ul>
<li>
Some text
</li>
<li>
Some text
</li>
<li class="active">
Some text
</li>
<li>
Some text
</li>
</ul>
</nav>
Updated
There is actually a way to offset the border, using border-image-outset, shown in this answer:
border-image-outset in CSS
Another fast and clean way to create an inside border is to create an inset shadow without a blur. You don't even need box-sizing or list-style.
nav {
ul {
li {
float: left;
padding: 0;
&.active {
background-color: white;
box-shadow: 0px -6px 0px red inset;
}
}
}
}
So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?
This is what I am currently viewing:
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
main ul {
list-style-image: url(../img/bullet.png);
margin-top: 25px;
}
main ul li {
line-height: 35px;
}
The line-height doesn't seem to do anything.
you can use pseudo-element before \ after instead, take a look at this example below:
main ul {
margin-top: 25px;
}
main ul li {
list-style: none;
}
main ul li:before {
content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
position: relative;
top: 10px;
left: -10px
}
<main>
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
</main>
It's really hard to actually provide you with finalized code without access to your image, but try merging the following code with your own. The first Padding value (currently 3px) should be the item you need to update.
li {
background: url(images/bullet.gif) no-repeat left top;
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
src: Adjust list style image position?
I would like to use some icons as links as well as have text links beneath each one but I cannot seem to figure out how to do it. So each icon and text links work.
Link to jsfiddle: http://jsfiddle.net/huwrowlands/jvMfY/
Could some one show my the error of my ways.
Thanks in advance
<ul class="i-icons">
<li class="i-icon-va tablet-grid-33 mobile-grid-50">Vehicle Accidents</li>
<li class="i-icon-pi tablet-grid-33 mobile-grid-50">Personal Injury</li>
</ul>
#homepage-header ul.i-icons {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
#homepage-header ul.i-icons li {
/*text-indent: -9999em;*/
display: inline-block;
width: 140px;
height: 140px;
background-image: url('http://inspiredworx-labs.com/sites/injury-icons.png');
background-repeat: no-repeat;
position: relative;
margin: 10px 10px 20px 10px;
}
#homepage-header ul.i-icons li.i-icon-va {
background-position: 0 -1px;
}
#homepage-header ul.i-icons li.i-icon-pi {
background-position: -155px -1px;
}
#homepage-header ul.i-icons li a {
display: block;
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
}
Something like this?
I simply added a top property to #homepage-header ul.i-icons li a and changed the font color so you can read it
Update: I changed the fiddle so that the text is underneath and the icons are clickable, however the text underneath is not clickable. Because you have styling for the list anchor tag, it was affecting the text, so the only option was to keep the text inside the li but outside the a. You can see it here. If you want the text to be clickable, you might have to make a separate div to position underneath the list icons, there might be a better way but this was the best I could think of.
I have two background images, but I cannot display both of them (one of them is invisible).
Another problem is the padding-top for li a element is not working.
HTML:
<ul class="menu">
<li class="item-101 current active">Home</li>
<li class="item-102">Merchants / Shops</li>
<li class="item-103">Contact us</li>
</ul>
CSS:
* {
margin: 0;
}
#left #menu ul.menu {
list-style: none;
padding: 0;
}
#left #menu ul.menu li {
background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no- repeat, url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat;
background-position: left 0px, 200px 0px;
width: 294px;
height: 44px;
padding: 0 0 5px 0;
}
#left #menu ul.menu li a {
text-transform: uppercase;
text-decoration: none;
font-style: italic;
padding: 15px 0 0 17px;
color: #336699;
}
See full example here: http://jsfiddle.net/BWagZ/
The questions are:
1) How to make two background images to appear on button. You can think that the first image is background image for button. But the second image is a small arrow that should be displayed on the right side of the button. Currently this image doesn't appear at all (but it is somwhere there).
2) Why padding-top for li elements are not working? I want text in li element to have top padding in the button.
You must add a div inside anchor tag for double background and cover full button area
Check out fiddle
HTML
<div id="left">
<div id="menu">
<ul class="menu">
<li class="item-101 current active"><div>Home</div></li><li class="item-102"><div>Merchants / Shops</div></li><li class="item-103"><div>Contact us</div></li></ul>
</div>
</div>
CSS
* {
margin: 0;
}
#left #menu ul.menu {
list-style: none;
padding: 0;
}
#left #menu ul.menu li {
background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;
background-position: left 0px, 200px 0px;
width: 294px;
height: 30px;
padding: 14px 0 5px 0;
}
#left #menu ul.menu li a {
text-transform: uppercase;
text-decoration: none;
font-style: italic;
color: #336699;
}
#left #menu ul.menu li a div {
color: #336699;
background:url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat center right;
width: 235px;
}
Working fiddle
I think you want the links to have a top-offset in the li element. Then you'd have to set a padding-top in the li element, not the a element, which works for me (Chromium). I don't understand your image-problem.
Try setting some z-index for each background, also when u put the arrow image first you will see both.. now you just have to adjust them.
Is this good enough? http://jsfiddle.net/goodfriend/BWagZ/10/
You should change the order of your backgrounds around.
background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat 200px 0px,
url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat left 0px;
And the a elements you can adjust by giving them a line-height property.
Here you go: http://jsfiddle.net/MrLister/yFMZf/1
Your method is good. You just have to swapp images between them.
Meaning:
background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat, url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;
background-position: 200px 0px, left 0px;
Do you want to achive something like this?
Demo
Answer 1:
Change the orders of the images and positioning accordingly.
Replace your CSS with the following:
#left #menu ul.menu li {
background-image: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png), url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png);
background-position: 200px 7px, left 0px;
background-repeat: no-repeat;
width: 294px;
height: 44px;
padding: 0 0 5px 0;
}
Answer 2:
Add display: block; css rule in the following line:
#left #menu ul.menu li a
It will make the whole list clickable and your padding will work also.
I have designed a navigation menu which uses trapeziums instead of rectangles. I have got something working but it doesn't behave properly. I have tried using a negative left margin of -15px to offset the link but this doesn't appear to work.
The following illustration demonstrates what I have working along with that desired. Given the same cursor position "Brokerage" should be highlighted instead of "Services" (with hover or click).
How can I fix this? Is there a better way to achieve this (baring in mind that I want compatibility with IE7+)
Here is the HTML structure of the navigation menu:
<nav>
<ul>
<li>Contact</li>
<li>Brokerage</li>
<li>Services</li>
<li class="first current">Home</li>
</ul>
</nav>
Here is the CSS:
nav ul li {
display: block;
float: right;
margin-left: -30px;
line-height: 69px;
text-align: center;
font-size: 16pt;
background: url(img/nav.png) no-repeat right -69px;
}
nav ul li:hover {
background: url(img/nav.png) no-repeat right -207px;
}
nav ul li.current {
background: url(img/nav.png) no-repeat right 0px;
}
nav ul li.current:hover {
background: url(img/nav.png) no-repeat right -138px;
}
nav ul li.first a {
background: url(img/nav.png) no-repeat left bottom;
}
nav ul li a {
display: block;
float: left;
padding: 0 26pt;
text-decoration: none !important;
color: #4e649f;
}
nav ul li:hover a {
color: #9e4e4e !important;
}
nav ul li.current a {
color: #fff !important;
}
Here is the img/nav.png image, please note that bottom strip of image contains a white triangle that is used to cover start of first navigation item.
^-----^ White triangle here - remainder is transparent (PNG-24)
I think that there are at least three solutions of which two use javascript:
Imagemap + hover event
You could use a transparent imagemap that lies over the navigation and use the href attribute on the area tags. The areas could be trapezoids like your navigation items.
RaphaelJS
You could use RaphaelJS to draw shapes over the navigation and bind to mouseover/click events.
Plain Javascript
You could just calculate the position of the cursor and trigger the appropriate link with plain javascript.