is it possible to repeat only right side of picture. If I have a menu button picture, there are border or stripe on left side and I only want to repeat right side(without border).
When I'm just putting repeat-x scroll right or just repeat-x, the whole picture will repeat, but I only want right side to repeat, not left or whole picture.
I hope you understand what I mean.
This is button example. When my button title is too long and it will need to repeat button picture.
Can I only repeat that yellow part of picture? not together with red.
PS! Cant repeat color, because button is made with cradient.
Short answer, no, it's not possible.
A picture has fixed-width and you can't stretch just a part of it.
Solution: use two pictures, one for the left side, with fixed size and other to the right side which you can use repeat-x to fill the remaining space.
EDIT:
If your button have a horizontal gradient, the best you can do is to make a picture wide enough to encompass "almost" all cases. The key word here is almost because you can always find someone with a screen wider than the image itself.
Not sure why you can't use a solid color, but why not simply use a wider image?
just put "no-repeat top right" is that what your meaning
Smashing Magazine has an excellent tutorial on designing buttons with CSS:
http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
Scroll down to the section "Sliding Doors: Flexible Buttons", it explains exactly what you're looking for.
Related
I'm hoping someone can suggest a UI that I've actually never seen used.
I've got a lot of data that needs to be displayed in a fixed height scrolling div and to make it more palatable, the client wants sub-data to be displayed in an accordian div that can be expanded and closed.
The problem is that the sub-data is also potentially lengthy and requires a fixed header so that the user understands what's in each column. Please see the fiddle: http://jsfiddle.net/J5qFA/34/
You'll have to use your imagination a little, but consider the grey bars as headers on expandable divs and the one labled as "Expanded" is a header that's been clicked, showing its contents. (Note that expanding one header toggles closed any open div.)
The black bar is the data header and the yellow content is the data.
Is there a way to make the black bar "stick" to the top of the scrolling window so it's always visible when the user navigates down the yellow content? Note that it shouldn't appear over the top of any grey headers, so only needs to stick to the top of the scrolling window if the user scrolls down to see more yellow data.
And if not, is there a better way to ensure that the black header is always visible above the yellow data?
Oh, and I don't want to nest scrollbars, obviously!
Hope this makes sense!
Give the yellow data div a fixed height and overflow-y:auto.
http://jsfiddle.net/J5qFA/35/
ive also remove overflow:scroll on the outer
Well, Don't know if there is a better way, but one way (I would think of) to do it is using jQuery scroll, than attaching the black bar classes according to the position of the screen using window.pageYOffset and window.scrollTo(0, y).
I guess you might have 3 cases:
The black bar is under the top of the screen - show it as usual.
The black bar is above the top of the screen, and it's div is is the screen - use position: fixed;
The black bar is above as well as it's div - same as 1.
sorry, but I don't have the time now to write the code up but if you'll choose to do it this way i'll be happy to help.
Good luck anyhow!
I have a page having a background image for <body>. The image may only stay bottom of the page and visible across x and I don't want it repeat whole body across x and y.
The image looks something like below;
I want this image to tile over x, but want to repeat from both sides left and right. The image may start from both left and right sides;
In between them is the content <div> By doing this, the image may be look as if it has width of whole page. I can simply do this using repeat-x, but it will create some incomplete tile portion at the end portion.
The completed page may look something like image below;
Is this possible with CSS? I think you get what I am talking about. If you want extra information, just comment.
You can write like this:
div{
background:url(image1.jpg) repeat-x bottom left,url(image1.jpg) repeat-x bottom right;
}
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I have a fixed height div and want to align an image to the bottom right corner with the text (of an unknown/variable length) to wrap around it. I'd ideally like to avoid using Javascript and the best solution so far appears to be to use a vertical spacer div above the image (which is the container height - image height) to push it down. This works perfectly on IE / FF but the text overlaps the top of the image on safari (mobile and standard). I'm not sure why this is happening, I appreciate the fonts are displaying differently but surely the text should flow around the div/image either way? You can see an example of what i'm talking about at http://jsfiddle.net/deshg/XScmK/, i've just used a coloured div with some text instead of an image in this example.
Any thoughts would be massively appreciated as I'm not sure why this isn't working?
Thanks very much as ever,
Dave
in your 3rd div margin-top:20px; for a quick fix, but this will push up your 1px wide div.
also try changing these heights: 141px to 140px, and change 159px to 160px.
I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.