How would I add a small arrow beside the links that have a drop down in css?
background: url('arrow.png') no-repeat 0 0;
When I use this it adds an arrow on the left side of EVERY link but i want it only on the ones that have a sub menu.
Any help?
Use this:
background: url('arrow.png') no-repeat right top / 70% 70%;
The 70% percentages are for example, they are the width and height of the background size, change them as they suit you. (Since you wanted it smaller in your original question).
Apply this rule to the class of the links that will have a drop down.
Based on the other answers you've had it looks like your question has changed considerably... but to answer it as it stands, if you just want it on SOME of the links, you could add an additional class to those links, and add your background image just to that class.
http://www.w3schools.com/cssref/css3_pr_background.asp is a good reference for any sort of CSS syntax questions.
The way that you defined the CSS rule puts the arrow at the top left. To have it centered on the right, for example, use:
background: url('arrow.png') no-repeat right center;
I would also suggest adding a padding if you do that, so that the background image is not behind the text:
padding-right: 15px;
And to make padding work, you'll need to override the display of the links from inline to inline-block:
display: inline-block;
To resize the arrow, you could either just use a smaller image, or you could use the background-size attribute, although using the latter would lose support for IE8 and below.
Related
I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.
In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).
Basically each of the divs should look like so:
So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?
Hi i have a solution for you chek this link http://jsfiddle.net/8mQc4/15/.
It's based use some properties like:
float and vertical-align.
This code allows flexible height and width of img, and also his container center vertically de text.Just try with more large texts or images.
Oh man I got a fun solution for you that may work but none the less is a solid idea!
If you set the image as the background you can avoid floating or positioning.
.section {
background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
background-position: center right;
background-size: contain;
width: 100%;
}
The only thing that I may find to be a problem is the image size is based on the content inside of the div.
JSFIDDLE
This will allow the image to have a fixed size but! it does run into the problem of relying on the text for size over the image. :/
background-size: 80px 60px;
Fixed size
With the use of min-height: whatever; You can still achieve the desired result but not 100% the best.
min-height
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.
The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.