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/
Related
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 */
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
My Problem
I am trying to add 3 big buttons ( Summary, Builder, History ) in the middle of my nav bar. Below is pictured my ideal results. I would like an active one to have no bottom border.
I have tried everything I can think of to get this to work. When I add a button in the spot you would think it should go, here is what I get:
Notice the yellow oval, that is where my button is ending up!! I can't figure out what I am doing wrong.
Here is a link to the page, as to post the code here would be too long:
http://johntesting.azurewebsites.net/workflow-blue/blank-backup.html
Can anyone help me out with these buttons? I have been going crazy trying to figure this out.
Thanks for looking.
John
Set display:flex; on your '.page_title' div to immediately see the button much closer to where you expect it. The first child element of that div is an h3 which is a block element that fills the entire div, leaving no room for your buttons, resulting in them being pushed to the next line.
Another approach is to set the display property of that h3 to inline-block.
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
I have two buttons in a div with position: fixed; but when you click, the list of options disappeared.
I wrote my code in the link below, you can help me?
http://jsfiddle.net/T9QHw/
Thanks.
The list of options disappear, because you're telling the div to hide everything that goes beyond the div itself using overflow:hidden. Clearly, the dropdown menu is outside of the div.
Remove overflow:hidden and it will work.