CSS sprite position problem - css-sprites

I trying to create a fixed border to the site that dynamically change size with the browser window from this sprite (it isn't perfect I know.): http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png
DEMO on jSFiddle
My problem as you can see is the vertical wall part. As the #falJ and #falB are height:100% they include the bottom wall's end too with the space between the two wall sprites. Is there a way to force backround-position to only use vertical wall part without bottom wall's end?
Thanks in advance.

Solution: http://jsfiddle.net/vonkly/Ld43B/
It's not the prettiest thing in the world, but it achieves what you want. Check out the source code & direct link for the background images to see what you'll need to do. It's currently set at 299px wide; I imagine you'll be using something wider.
I'd also suggest adding some padding around your content (either with a p tag, span, another div, etc.) - the way it is currently set up isn't what I'd recommend for readability.
EDIT
The only way I can imagine achieving a fluid width + height box with the borders that you have in the way that you want is to use a second image for the west and east containing divs. This should work with your current method.

Related

How to align correctly this SVG inside the Victory Scatter Graph

I have a problem with aligning the SVG component DataPointCircle inside the Victory Scatter Graph.
My main problem is not how it looks but how it acts.
the tooltip and the VictoryVoronoiContainer is acting weird when hovered over the data circles.
When the data circle is hovered it sometimes shows the tooltip sometimes not!, this is more clear on the last data point.
Since I had to do this x={x - 10} y={y - 10} to properly align the data points, I thought that maybe it is causing a distortion.
I need the tooltip and VictoryVoronoiContainer to act normal. I'm 100% if it is an aligning problem or if I need to do something else, suggestions would be lovely!.
Thanks in advance.
Here is a SandBox
https://codesandbox.io/s/YED2ql2mK
The answer was posted in github:
Yes, that [manually add offset props x={x - 10} y={y - 10}] would definitely be causing the issue. VictoryVoronoiContainer calculates the positions of all of your data points. If you move the points around manually, the triggers will no longer match up. I don't think this is something I can fix at the library level. It might be better to add the tooltips directly to VictoryScatter so that they will be attached to your custom point components regardless of how you you manually position them
https://github.com/FormidableLabs/victory/issues/695

howto draw a text with alignment centered in simpliest way. (ios , swift)

I would like to draw a text in my custom view at point X,Y with center allignment. In case the text would be "SUGUS", I expect to have the Character G at Point X,Y.
I tried several things with NSString.drawinRect(), where I have to provide the width of the text, which has to be measured first depending on the Fonttype. It worked, but for me thats not a straightforward solution.
I purposely did not add code here, because a first try with code was misleading and I hope someone can help me with a clean simple solution ?

WP7.5 Mango Tile BackContent alignment

Is it possible to center-align the BackContent of a tile?
For example:
54"
2-2
I want the above two lines aligned centered on the back side of a tile. Is this possible?
Sample: http://www.silverlightshow.net/Storage/Users/AndreaBoschin/__Capture.png
You have to draw the text manually onto your BackBackgroundImage as you cannot adjust the placement of the BackContent.
It is not possible to update your Tile with animations or sound. The
placement of the Tile properties is not customizable.
MSDN Source
Edit: Have a look at this question, there is example code showing how to do it.
Draw a image, where it's aligned, and use that as a back property. I've written a guide about it.
(For the front tile, but the backtile is no different).

jquery gradient image height

I am new to jQuery I am facing a some problem with jQuery gradient image please give me some solution for this
I have one div divided vertically in three part left, middle,right.The div has a background images (that is gradient) .and there is some data in the div. I want that the image height should be increase when the user input more data in the div
Can we increase the height of the gradient image using jQuery. Please give me some reference site or some solution
I don't know that you need JQuery to do this for you; it will be fun to do it on you own.
As you know, you can style the div such that its height will increase as you add more content to it. So your question really is how to make the gradient background appear the way you want it: you might want the gradient to grow lighter and lighter at the bottom, say, as the div increases in height. It just so happens (lucky you!) that background-image CSS is rich and capable. That's why it's fun: it actually works!
Read about CSS background-position for some ideas. You might find that the effect you want is automatic.
-- pete

dealing with large figures in Latex

I have a large figure that appears at the end of my document rather than in the section that I want to be in. Even \begin{figure}[h] doesn't help. Without scaling it down, how can I put it at the end of the section I want it in?
Using the afterpage package can be a good solution. However, using the option here you are trying to tell LaTeX where you want to put the image. Instead, you need to tell LaTeX where the image is good to be put:
use \begin{figure}[tb] for figures that fit well in a page with text (say, half of the text height for the figure and the other half for the text)
use \begin{figure}[p] for floats large enough to require a dedicated page.
Setting a proper option increase your chances to have the image almost where you want, having at the same time a good page layout.
If the figure is still too far from the page where it should be placed, you can set some "barriers" for floats positioning with the packages placeins or afterpage (already mentioned).
Here is a small tutorial for float placement. The thing you want to do is put an \afterpage{\clearpage} command at the end of the section. This will create an additional page after the current one and place the floats that are left in the queque there. If the float still doesn't get placed, you have to resize it. If you really don't want to resize it and it should fit on the page, then you could try changing the margins and text area temporarily (i.e. just for that one page) and see if that lets the float get placed.
i forget if it's the float or array package that provides this, but,
\begin{figure}[H]
...
\end{figure}
The upper case H will put the figure exactly where it is in your code.

Resources