I have a collapsing tab with Css Icon fonts, i want to keep the same distance between the Title and the Icon font arrow.
Here the example
http://jsfiddle.net/2D3V5/2/
If the Text on the left has the same length, the Icon font arrow keep the same distance and it's ok, but this is not going to happen in my tabs because obviously the texts are gonna be different, so i need to find out how to keep the Arrow Icon at the same distance from the text independently from the length of the text.
Hope the explanation is clear.
Thanks
You can float the images to right. That's a simple way to manage the equal distance.
Plus, the images of the rest of division are inverted. Do change their classes.
Here is the edited fiddle : Fiddle
See http://jsfiddle.net/2D3V5/3/
If you want to keep the Arrow Icon at the same distance from the text, but you want the arrows aligned too, you have to place the arrows at the left of your titles.
Related
I'm currently coding a design mockup into HTMl and I'm trying to figure out the best way to achieve this look responsively. As you see, there's a purple line that stems from the hero CTA button in the bottom right corner. How would I go about changing the line color when it enters the new section; purple to white?
I thought about making two separate lines, but It's difficult to always have them line up right. I wonder if there's some sort of masking trick?
I added a red circle to show the interlacing I'm having issues with.
Screenshot
I have a question about icon property including anchor, anchor Origin, offset, offset Origin. because the open layers web didn't give more explanation and it confuses me, when i change anchor or offset, they both can change icon position, and offset and size both can cut the icon, and what does Origin mean, those properties confuse me for a long time.
Thanks for any help in advance.
anchor: specifies where the "tip" point of the icon is. To use mouse pointers as an analogy, standard arrow has its anchor on the top-left corner, a cross has the active part exactly in the middle, etc. OpenLayers allows you to specify that via a vector between [0,0] and [1,1] (e.g. [0.5, 0.5] is in the middle, etc.).
anchorOrigin: which part of the icon should the anchor be applied from. Default is top-left, meaning that the top-left corner would be used as a point of reference if anchor is to be applied. I'd say that it's probably least confusing to ignore it and go with the default, only modifying anchor.
offset: if you only want to use a part of your input image as the icon (because, for instance, there's some unnecessary margin), you can shift the active area by [x, y] pixels
offsetOrigin: which point of the icon should be used as the point of reference for the offset property.
Note that if you use offset then it makes sense to have a look at size.
I am trying to understand what's going on with my Google Custom Search Engine in the sidebar on the left here: http://bit.ly/1bmsJsi
I want the icon with the magnifying glass on the right of the text box instead of on the left. As far as I can tell looking at the code and my CSS, that's what ought to happen.
If someone can help me figure out why it goes on the left I would greatly appreciate it!
Put the item floating left BEFORE the item it's floating left beside (currently it's after it).
i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.
I have a few labels in a horizontal layout, and I want to enable/disable a border around the labels at certain times. I can do this using stylesheets, but the problem is that every time I enable/disable a border this way, the label shifts left or right in the layout by a few pixels.
This is an annoying artifact that takes away from the look of the UI. Does anyone know how to prevent this from happening?
Thanks!
Marlon
If your labels are on a plain background, then don't enable/disable the borders, just change the border colour to match the background.