Aligning images - horizontally - css

If you go to my site: www.ryancoughlin.com - and if you see the Google, Yahoo, etc. RSS buttons on the right side of the page. I am trying to get them to align evenly, they are all the same image height and I have been trying to get them to evenly line up. But I have had no success.

Seems you are missing class="feed-image" on the Yahoo image.

Try to specify them as "inline" instead of block, this should allow you to treat them as words.
Another chance is to make a list (this seems appropriate since the nature of that "list" of images) and let the "li" elements float left (then adjust margins).
Also I think you should change your title in "Aligning images - vertically" to ease future users' search.

Related

slider revolution - text elements overlapping

Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.

css z index/overflow results are coming in background

I have this page where in search box results are not being shown properly.
http://www.way2enjoy.com/touch/default-1.php
I changed the overflow to visible/hidden/overflow and all other option for search results which is being shown in display div. I tried to change the div css of below box as well to show the results but it is being shown in background.
If I change the below div x to hidden then the bottom menu will shift to left/right whatever we set so I dont want that to shifted. Just I'm looking for results to be dispalyed properly.
I think z index should work so I have set z index to 1000 and even set it as important then also search results are being displayed in background. Any advise will be useful to me.
Apply position:absolute to #display
This will bring it forward and also prevent it from pushing the content beneath to the right.

How to vertically align multiple tables or graphics in Lyx

What I wanted to do is that I had multiple tables and/or images of different heights and wanted them positioned on the page side by side, so that the tops of the objects were aligned.
I couldn't figure this out, it didn't matter whether I put these 'in-line' or in separate Boxes (Minipages) (that seemed to be aligned the way I wanted in the editor), in output Lyx always seemed to align these objects somehow around the center of their height and not the top.
Finally, (after several hours of googling and trying to figure this out) I have the answer, so I'm posting it below, because I hope someone like me will find it useful in the future.
The way I solved this is relatively easy.
For each image/table I created a Box (Minipage). In each Box I put, on the first line, Vertical Space (Insert -> Formatting -> Vertical Space) and set the size to 0 in. After the Vertical Space I inserted the graphic/table. This way, if you put several boxes next to each other (for example by setting their width to 25% page width, or whatever you desire), they will be aligned by the top in the output.
You can also do Ctrl+Space (to insert a 'protected space') and then Enter, which seems to work the exact same way.
Hope this helps.

menu bar where the width of the text is variable

I need to know how do I get the menu where the background depends upon the text entered. As in the image, the background gets expended irrespective of the text in the menu item. Also the sides of the background image should not get distorted.The image is here.
I still tend to use the sliding doors technique for this kind of thing.
http://www.alistapart.com/articles/slidingdoors/
Although there is probably a newer and more elegant solution these days.

How to layout out a component differently depending on the amount of space available?

I am trying to build a sort of button bar in Flex - something like the horizontally laid-out bookmark bar you'd see in most modern web browsers, where when you run out of horizontal space, you can click on the arrows button(>>) to get a drop-down to see the rest of the items which did not fit into the horizontal space. Problem is, how can I know how much horizontal space is available for me to tell how many buttons to render into the button bar? This need doesn't appear to be support by the general layout manager framework.
You can check the width of the parent container, and if that is less than the combined widths of your objects that you've attached with AddChild or AddElement, then you don't have enough space and need use your arrow functionality.

Resources