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.
Related
I want the sort icon to be visible (when column is sorted) after the ellipsis whenever the header is resized
Something like this,
I have tried to target the span element under
.ui-cell-contents
and tried various combinations, but all in vain. I am sure this is not something complex, but just could not figure it out.
Can someone kindly throw let me know how to achieve the same ?
Here is the Plunk
Because the icon element is inline, it will behave like text and be ellipsised off. You simply need to take it out of the normal flow. You can add position:absolute to the icon and play with it from there.
.ui-grid-cell-contents i.ui-grid-icon-up-dir,
.ui-grid-cell-contents i.ui-grid-icon-down-dir{
position:absolute;
right: 0;
}
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 hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?
I am building a photo gallery viewer using javascript and css, but i cant center the elements. I have a back arrow photo, the photo itself, and the next arrow. these 3 photos are one next to each other, and I need to center all three of them.
Any help is appreciated, and also, I am kind of new to css/javascript/html, so dont be so hard on me.
Thank you,
Guy Z.
(you can go to guyzyl.org, enter any gallery and click on a photo to see what I mean, and what I am trying to center)
This style should help:
#viewer {
text-align: center;
white-space: nowrap;
}
Also, use a DOCTYPE.
Just looked at your site. Try adding the CSS below to the styles for your Viewer div
margin: auto;
That 'should' center the div on screen. Assuming there is enough space in the browser window.
You need to give
<div id="viewer"></div>
a fixed width and set it's left and right margins to auto.
The CSS looks like this:
#viewer{
width:500px;
margin-left:auto;
margin-right:auto;
}
To prevent the arrows from wrapping around you need to resize your photos to fit within the width of the viewer minus the width of the arrows and any padding, margins, or borders on them.
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.