I'm having an issue with radio boxes on a dev website.
In a contact form I have 4 radio buttons which can be selected. Issue is that the boxes and text are not aligned properly.
falsly aligned radio buttons
The radio boxes should not have that much space below. Right now it looks like the are aligned to the top, but should rather be aligned to the middle so they are on one height with the text. Hope you know what I mean.
I tried adding minus margin to the bottom or adding margin to the top but this adds also space to the radio box text.
after adding margin-top: 35px;
It should be aligned just like in the following screenshot. The small blue line should be in the middle of the radio box.How I want it to be
This strongly depends on your implementation, one can only guess for an answer without the code used.
A guess: you could set the height of the radio button to 1em.
Another guess that likely works but would not be nice code:
transform: translateY(50%); /* on the radio buttons */
Related
I have some problem trying to center vertically a input inside a div. I tried so many hours with different positions, margins, align, etc...
Some details about the code :
Website : http://goo.gl/bDjv8C
Section : contact (the last one, on the bottom)
I try to center the input "your email" but when you zoom in/out on the page (or use different devices aka smartphones) the position isn't exactly the same >_<
First I had just an input and a "OK" button on the right, but both where never vertically centred (some times the "OK" was up, sometimes down...). So I tried to make a div with a black background and them inside in order to hide the gap between the two inputs, but it went worse :s
Someone have an idea ?
PS: thats not a horizontal-align issue, but a vertical one.
the answer is line-height in css check this fiddle http://jsfiddle.net/elviz/qvzk1eoj/1/
.sample{
height: 50px;
background-color: red;
line-height: 50px;
}
I found a neat CSS Slider by AMKohn:
http://codepen.io/AMKohn/pen/EKJHf
The slider works by using radio buttons and labels to move between 'slides'.
Slides are hidden by default and are displayed when their respective radio buttons are checked.
I've modified the slider so that each photo is accompanied by a caption below it that extends the width of the browser.
http://codepen.io/anon/pen/AlsJx/
As a result, my mark-up and CSS are a little different from the original, but the principals are still the same (still uses labels and radio buttons to move between slides).
I think this is affecting the labels (which act as nav buttons). These do not display on hover when using
position:absolute;
However, when the position is set to relative the buttons work fine except they are not in the right place (on either side of the photos).
Can someone explain how to fix this?
Solved the issue.
Essentially, the problem was due to using position:absolute on the parent element .slides.
I made it display:hidden by default and display:block when input:checked.
This prevented the divs from "stacking", which I concluded (in a very non-technical way) was the reason why the nav buttons didn't work.
The working slider is here:
http://codepen.io/anon/pen/hAnre/
I have a problem similar to this: CSS: fluid text input with floated-right button, and I particularly like this solution: http://jsfiddle.net/t7tgJ/3/
However, in my case, different buttons have different text, so I can't use fixed width. Also, the text in the button changes as well (on submit).
Specs:
A text field and a button on one line. The button should float: right and the text field should always be container - button.width - paddings - margins. How can I accomplish this without Javascript?
I've had a play around in JSfiddle. I've gone with a positioning-only version. This might help. It's close but not finished. I hope this helps.
http://jsfiddle.net/t7tgJ/105/
I'm having trouble aligning menu buttons properly.
How do I move up a button into the white space above it?
Use a negative margin-top value on the span holding it,
I have these buttons inside a div, next to each other.
When I click one of them the margin is adjusted to resemble the button getting pressed.
But this moves the button next to it aswell, and I can't figure out why.
Doesn't matter how big the wrapping div is.
Here's a fiddle. Can anyone help me get this fixed?
Add vertical-align: top; to both button.demo and button.source: http://jsfiddle.net/jtnTJ/14/