I have a text title on my site but it doesn't stand out due to the background. Does anyone know how to place a filled 'border' around the text like in the screenshot? Preferably with curved edges as per the screenshot also. I've googled around but I get the feeling i'm not hitting the right search query.
Thanks!
Related
Ran into a really weird problem and hopefully somebody can help...
I have a few rows of inline-block elements stacked on top of each other, so that they all merge into one guitar fretboard. On web/desktop, there is no visible line break (they are merged well). However on mobile, you can see a line break, until you zoom in all the way. Here are some pictures:
This first pictures shows the line breaks. I don't want these.
This second picture shows the line breaks disappearing when I zoom in further. This is what I would like.
Does anybody know why this happens? How can I fix it? I would prefer not to have to recode everything and step away from this inline-block element approach, but if I have to I will. I figured out a temporary work around which is to stick a background-color of brown behind the entire fretboard div, but the light line breaks will show up for anything that's not brown.
I'm trying to emulate the way this site does their shadow gradient inside divs ( http://zeroturnaround.com/software/jrebel/roi-calculator/#headline )
Check this picture
Not sure how to get the border shadow portion that the arrows point to
Thanks !
It's an image they are using to do it. This is their source sprite sheet
That specific border image in near the bottom.
I agree with you though, it looks good and I wish it was possible in pure code but I'm sure if that's possible yet, or else I'd be able to help you more.
By the way, I suggest you get the Firebug add on for Firefox. All I had to do was right click in that area and inspect with firebug and it told me right away what exactly that border was created from.
How do I fix this navigation bar?
I tried making it on my own but I just can't get everything to work.
This is the button in all three states:
The red background is #490000 and it should be a separate div.
The text on top of the buttons is a custom font but that doesn't matter in this case.
I've thrown together a working sample you could study. Can you elaborate on where you had issues so I can explain the solution?
I am looking to wrap text around an image that will lie in the bottom left hand corner of a CSS table. The amount of text changes when I use it because I will be using it numerous times with different amounts of text in it. I am wondering if this is possible and if so, how I can accomplish this?
Ok I got really confused with your question, maybe this answer has nothing to do with your question, please tell me if so, but this is the closest I could think of a css table that adjusts the height when the "amount of text changes" I not sure where the image came in.
http://www.jsfiddle.net/5m5Eh/
Good luck! hope it helps!
I'm having a weird problems with one of my Arabic sites.
See that gray rectangle with the red heading in the homepage? right underneath it shows up a horizontal gray border in IE8 that I just couldn't get rid of unless I remove the border under the black headings below, which I don't want to do.
There's even an extra space between those two elements that's not supposed to be there. You can view the page in Firefox vs. IE8 to see what I mean.
Any idea how can I fix this?
Your help is much appreciated :)
there's a duplicate h2 under the episode_summary producing in ie8.
u should try validating the site first. http://validator.w3.org/