I have a series of background images that need to fade in and out and appear in the background. This background image appears behind my content, is centered, and is wider than my content. I do not want this image to affect the width of my page so there is no width set on the container div, ul, or li elements. I need to determine why there is a white left margin showing up over my background image. This margin shows up no matter how wide the browser window is as shown by my "test" li. The problem appears across browsers (tested: FF, Safari, Chrome, IE8) and has nothing to do with the javascript used for the rotation and fade.
I'm sure this is something dead simple that I'm overlooking. Many MANY thanks to anyone who can point me in the right direction here.
Link to an screenshot showing the problem.
Live example of the problem.
The HTML for this is:
<div id="hdrHomeWrap">
<ul id="hdrHome">
<li class="hdrHome1"></li>
<li class="hdrHome2"></li>
<li class="test"></li>
</ul>
CSS:
#hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
display: block;
height: 400px;
display:none; /* hide the items at first only */
list-style:none;
}
#hdrHome li.hdrHome1 {
background: url('images/hdr-home1.jpg') no-repeat top center;
}
#hdrHome li.hdrHome2 {
background: url('images/hdr-home2.jpg') no-repeat top center;
}
#hdrHome li.hdrHome3 {
background: url('images/hdr-home3.jpg') no-repeat top center;
}
#hdrHome li.test {
background: #F00;
}
Have you tried giving the ul (#hdrHome) a margin & padding of 0?
In your CSS, you have
#hdrHome #hdrHome li
I'm guessing that's a mistake. You are either missing a "Comma" in between.
So it should be like #hdrHome, #hdrHome li instead of the other
Related
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
Is there a way to stop a background image from repeating after a specific(though dynamic) point?
Currently I have the following html
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
and css:
ul {
background-image: url('./imgs/gridlines.png');
background-repeat: y-repeat;
}
Now, the above repeats the image for the entire length of the ul element. My issue is I need the repeating to stop 8px from the bottom of the ul.
I've tried using background-position but this just shifts the background, while still repeating it to the end of the ul element.
I've also tried using background-size: 1 calc(100% - 8px); but this fails for chrome.
fiddle
You can do this in CSS...sort of. You cannot tell background-repeat to repeat a specified number of times; it doesn't work that way. So my idea is to stick an 8px white block at the bottom of the list, which should accomplish something very close to the desired effect:
ul {
background-image: url('http://i.imgur.com/B5k8FTP.png');
background-repeat: y-repeat;
padding-left:0;
color:black;
width:200px;
position:relative;
}
li:last-child{
position:relative;
z-index:10;
}
ul::after{
display:block;
background-color:white;
position:absolute;
bottom:0px;
height:8px;
width:100%;
content:"";
z-index:1;
}
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
The ul style sets a width for the sake of the demo. padding-left:0 removes the margin from the left side of the <ul>, also optional. The position is set to be relative, because after content will be positioned absolutely, relative to the <ul>/
The ul::after style inserts the white block after the list. position:absolute and bottom:0px place it at the bottom of the list, relative to the <ul>. The z-index is set to ensure it sits behind the bottom <li>
The li:last-child makes sure that it sits on top of the ul::after content.
You can wrap the content you want inside a frame that is set to inherit the size from parent - the 8 px you want.
If I am misunderstanding something a jsfiddle would be nice.
EDIT:
Like this?
.wrapper{
position: relative;
left: 20px;
height: 46px;
background-image: url('http://i.imgur.com/qIaw9Lc.png');
background-repeat: repeat-y;
}
my site Deliver .I have set the current menu color and hover colors respectively.the issue is when we scroll down the header is getting fixed at the bottom with a slight height change.so the menu colors are overlapping which i feel not good . so i tried in css
.adjustsub nav ul li {
height:40px !important;
padding 0 0 0 0 ;
}
nothing seems to be working.Please help!!!
EDIT
i need that in full height that of the header and when we scrolls down it should fit the fixed header size.reducing height doesn look good actualy
Apply this:
.adjustsub nav ul li {
height: 38px; /* decreased height */
}
The height of .menu li was the problem. Use this CSS:
nav .menu li {
height: 38px;
}
Edit
.fixed_slider header#header {
border-bottom: none;
height: 58px;
}
I have this item in a horizontal navigation menu:
<li class="menu">
Our Users
</li>
I want it to appear like this:
I will figure out the text color, etc. What I want to know is, how to have the image appear above the text, and the text centered below it.
Any advice?
Try this.
Assuming your image is not clickable...
apply width and padding to you li tag.
li { background: url(urimage.png) no-repeat;
padding: 72px 0 0 0;
text-align: center;
width: 100px;
list-style: none;
}
If you want your image to be clickable just wrap your text "our users" into a div and apply same style as above.
Try this jsfiddle demo
hope it'll help you. thank you
Its easy set the background of the li to be that 2 man icon and give a padding-top for li.
li { background: url(image.png) no-repeat;
padding: 40px 0 0 0;
text-align: center;
}
This is something I've seen done by Grooveshark, which removes the need to use multiple images for expandable buttons and such.
Basically, an image like this
is used to produce buttons of any width smaller than the image itself. I assume this is done by somehow trimming out the middle, but I'm not sure how. I've looked over the CSS properties for it's usage here but can't seem to find out what's done aside from a 15px padding on either side.
Does anyone know how to replicate the same effect?
Edit: Just for clarity, I'm talking about cutting out the middle of a single button (I do realize I've given a picture of a sprite for 4 button styles, so it might be confusing when I say "cutting out the middle portion of an image").
What you're talking about is known as the sliding doors technique. By applying the background image to a container element to show the left edge, you can then apply the same image to another element that only shows the right edge.
For example:
.menu li {
background: url(button-sprite.png) 0 0 no-repeat;
padding-left: 10px;
}
.menu li a {
background: url(button-sprite.png) 100% 0 no-repeat;
display: block;
}
The list item shows the left edge of the image. The padding allows the left edge to show when another element is laid on top.
The anchor element shows the right edge of the image, and it is cropped to the required width of the text content.
CSS allows to move background image to any position.
In order to display part of the background you need to define CSS like the following:
.button {
background: transparent url(sprite.png) left top no-repeat;
display: block;
height: 40px;
width: 160px;
}
.button:hover {
background-position: left bottom;
}
.button:focus {
background-position: left center;
/* or
background-position: left -50%;
background-position: left -40px;
*/
}
#Pixelatron; i know you accept the answer but check this example may be that's help you & easy solution as well http://jsfiddle.net/sandeep/CQmJz/
css:
a{
text-decoration:none;
display:inline-block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
position:relative;
padding:8px 0 8px 10px;
height:17px;
}
a:after{
content:"";
display:block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
position:absolute;
height:33px;
width:10px;
top:0;
right:-10px;
}
a:hover{
background-position:0 -34px;
}
a:hover:after{
background-position:-490px -34px;
}
I know of no way to manipulate images like that in CSS,
I think you'll find what they do is have the top image and bottom image always top and bottom, and just fill the rest with a middle image.
This can also be applied to each side, i'll add the CSS3 code, the CSS2 code should be easy to determine.
This would look like (CSS3):
.button_horizontal {
background: url(topimage) top left no-repeat,
url(bottomimage) bottom left no-repeat,
url(middleimage) top left repeat-y;
}
.button_vertical {
background: url(left.png) top left no-repeat,
url(right.png) top right no-repeat,
url(middle.png) top left repeat-x;
}
This would look like (CSS2):
.top {
background: url(top.png) top left no-repeat;
width:100%;
height:10px;
}
.middle {
background: url(bottom.png) bottom left no-repeat;
width:100%;
height:180px;
}
.button{
background: url(middle.png) top left repeat-y;
width:500px;
height:200px;
}
<div class="button">
<div class="top"> </div>
<div class="middle"><p>stuff goes in here :D</p></div>
</div>
That is called border-image.