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.
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 a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
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 am facing a problem with the position of bullets
It looks fine in Firefox but in Chrome and IE it gets messed up
Firefox:
Chrome/IE:
This is a css for the shown div
background: url("/images/divider_right_top.jpg") no-repeat scroll left top transparent;
font-size: 12px;
margin-bottom: 20px;
overflow: auto;
padding: 20px;
You have to set directly the UL in the css like this:
#yourdiv ul{ list-position:outside; /*(or inside as you need)*/
padding:20px;}
This should work
Don't set the padding. Use margins.
ul { margin: 1em 0; }
li { margin: 0 0 0 1.4em }
Give CSS for the list element like this'
li
{
background: url(/images/divider_right_top.jpg) no-repeat left;
padding-left: 10px;
list-style-type: none;
}
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.