http://jsfiddle.net/sWceL/
I am trying to horizontally center a loader gif next to a button. The only way I can figure out how to do it, is by floating the gif and moving it all over. Is there a better way?
In my example, the loader on the left is what I want, without float if possible.
You will want to use vertical-align: middle; without float: left.
Note that you will need to change the order of the elements in the HTML if you want to put the gif on the left side of the button.
Here's a working fiddle.
Check this:
http://jsfiddle.net/sWceL/3/
note: leave the one loader you need
Related
I'm always stuck when it comes to float. In my grid project, I want to have my buttons in the left and my table in the middle, like in the shown example. And my footer should be bottom but i don't know for what reason is not https://codepen.io/coderBoyNaN/pen/wprOMX. Can anyone help? Exemple of how it should look like, i wanna make it more responsive: https://codepen.io/Soheevich/pen/VybrOo.
Just erase float: left from div#menu
https://codepen.io/anon/pen/zpEXdP
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
I am porting my application from WPF to HTML/Javascript and am having trouble with the layout that I need for my application.
This layout should take up the entire available screen. It will actually be put into a jquery ui tab so with the menu, logo, and tabs it technically it won't be the entire screen. I have gotten parts of this to work but not all together.
The left side is going to have a custom slippy map and I would like it to take up as much space as available both horizontally and vertically.
The right side is going to have some filters at the top and bottom with the middle showing them results from the filters. The results could be pretty long so it needs to scroll vertically if to much content is pulled from the web server.
All I need help with is the basic layout to support this. Any help would be appreciated. You can see my layout drawing below. Thanks in advance!
In that div, add style="max-width: 350px; overflow-y: scroll;"
First, you need something like this (It's called Fluid - Fixed layout), here's an example you can take from Dynamic Drive http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/. With the exception that you need to "invert" the margins and widths (replacing left to right) because of the example is the opposite of your layout.
Secondly, you need to put your 2nd div (350x50) at the bottom of the page. Some thing you can do, is setting that div so it has the following:
#small_box
{
position: absolute;
right: 0;
bottom: 0;
...
}
The link above does work even on IE6+
Hope It helps.
I have just decided to use relative positioning and a little javascript. Spent hours looking for an elegant solution with no results and it only took me a few minutes once I decided to use javascript. Something like this is so easy to do in WPF so it was surprising. I basically just attach to the window.onresize event and manually set the height of the right vertically expanding scrollbar. Thanks for your suggestions anyways.
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
I'm having a little difficulty getting the icon image to align properly in my button. If you go to http://jsfiddle.net/Vw9Z6/7/ , you will notice the icon floats higher than the word "Continue". I want the icon and the word "Continue" to be on the same line. I can futz around with margin-top to get it working, but in my opinion, it may not be reliable depending on the user screen resolution.
Any idea on how I might go about solving this?
Thanks much.
Replace your .my-button-icon with the following:
.my-button-icon {
margin-left:10px;
display: inline-block;
}
The float: right; was messing the alignment up: http://jsfiddle.net/Vw9Z6/11/
Update:
You may want to play around with vertical-align: middle; as well. I think at the current text size the alignment looks better without the vertical-align style, but this could change with increasing/decreasing font.
Can you set the button's position to relative and then absolute position the icon within the button? If you do that, it shouldn't matter what resolution is being viewed on.