In the following image, I've outlined 3 things in red, the first is the the title of a box with the words 'Final Fantasy IV', the second box is 'Sonic Chronicles: The Dark Brotherhood, and the third is the css styling of the title as displayed by Chrome.
My issue is that in the first box, labeled 'Final Fantasy IV', you can see it looks ok, and there's no overlapping, in the second box however, you can see some font overlapping. What's some CSS magic I can do to fix this?
Thank you.
What's some CSS magic I can do to fix this?
CSS Magic:
position: relative;
CSS position documentation:
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
I would imagine that the image above the text, i.e. resultIMG is taking time to d/l, and that it is not downloaded when the browser is making it's calculations. You sometimes see this sort of thing when using JS to set equal height columns, where one of htem contains a large image. Worth looking into. Try setting a height on resultIMG, if you can
Related
I am trying to replicate a design element and remove the image and hopefully replace it with plain HTML/CSS. Essentially I have a header > h1 that has a title in it. For example we'll say this title is "Stack Overflow", like so..
<header>
<h1>
Stack Overflow
</h1>
</header>
In my current CSS, the text-indent is pushed off the screen and a background is applied to the h1.
To replace that I'm using the -webkit-text-stroke: rule which works fine, albeit not being fully supported across all browsers. The problem with it is one that many Photoshop users come across when applying stroke to text and that is the position of stroke.
Let me demonstrate with a badly put together image: https://i.imgur.com/eQC9B5v.jpg - the top text shows stroke that is "outside" of the text, the bottom one uses what Photoshop calls "center".
It seems that -webkit-text-stroke based it's stroke on that "center" variant in Photoshop. I'd very much like it to replicate the "outside" option.
I can't see anywhere I can set this, and I'm guessing I can't but I'd be interested to know if..
a) there is a method, and if so what is it?
b) if there isn't a method, has anyone found a different way of achieving this?
Now I should say, I found this: https://www.petercarrero.com/examples/stroke which in turn came from a post posted on here in 2013 (CSS- webkit-text-stroke but stroke covers font-color)
On caveat here is that I believe SVG can control the stroke type and I would be interested to see any solutions that use it, but ideally I am not targetting an SVG solution.
Thanks in advance.
So I've this problem with an addon for wordpress that don't seem to be supported but is something I'd like to use anyway.
Name of the addon is VS Restaurant Menu (Visual Composer).
The problem I'm facing is maybe something that has an easy solution but I don't have the skill to make it happen, and don't really know how to explain it best.
Thank you all in advance!
Problem
So the addon make it possible to easy place menu-items in Visual Composer, but when the dish title is to long it pushes down the price, and I don't want that.
The addon is made in Span1, Span2 and Span 3.
Span 1 : Number
Span 2 : Dish Title
Span 3 : Price
This is how the spans look on the site:
What I'm looking for
I want the spans to stay on the same line and grow downwards instead of pushing down the next span.
I've tried to look for a solution with all kinds of css, but nothing works.
Any ideas?
Thank you!
Your description doesn't contain any code, which really isn't the way you should ask a question here, but here is a general approach:
Apply width settings in percent to the spans (like 10% / 75% / 10%), make them display: inline-block and add vertical-align: top;
I've been looking around but there doesn't seem to much help on this.
Basically I've adjusted my text selection to a different colour, easy done. However, I was wondering how to code the selection to select to the edge of the page rather than just the text on it's own.
I've attached a screenshot of a working example to show you what I mean.
thanks
I would suggest css style:
display: block;
I'd like to display text over an image like Newser.com does.
Here is a sample:
At first glance this seems simple. But it's proven very challenging for me.
The solution likely lies in some combination of DIV and SPAN (possibly span's nested in block DIV's...?)
Ideas?
(Note 1: Notice how each span of text has a background of a unique length -- e.g. directly under the text)
(Note 2: Don't worry about the opacity value for now. I just basically want to make 4 black text blocks (as shown in the jpg.))
Newser.com seems to produce the images with the text already on them but you can do this using just html and css.
Here is an example of how:
http://codepen.io/anon/pen/jDdAb
I'm trying to get the black x mark to display on the same line as the second green rectangle. I tried using display: inline, but it still won't show up on the same line. Can someone help please?
http://jsfiddle.net/a4Cg4/1/
In the HTML code, moving the mark inside the element where it'll float is mandatory, if I understood what you want to achieve.
Then you use deprecated attribute align="center" and it complicates everything when trying to position the mark... Nonetheless here's a fiddle: http://jsfiddle.net/PhilippeVay/a4Cg4/5/
(modified CSS is at the top, first and second rule)
Unrelated to your problem but still: every HTML img needs an alt attribute, even if it's empty for decorative images (or when context like surrounding text already says what the image represent). I added it to the HTML code.