I have created some "buttons" out of three divs and I have set a hover to each div so that the text drops by 5px when the user hovers over the div.
I'm using display:inline-block as I don't want to use float:left
The only problem is that when I use display:inline-block on the divs, it lowers the other divs instead.
Here is how it should work (using float:left)
WORKING
And this is what happens when I used display:inline-block
NOT WORKING
Is there a fix for this or am I going to have to use a different solution?
Sorted the problem!
Although KingKing's answer was correct, using .wkd > * {vertical-align:middle;} didn't seem to work well with the rest of my code so I had to alter it slightly so it worked like so:
.won, .keep, .discard {
vertical-align:middle;
}
Still, KingKing's answer helped me figure this out so thank you :)
Related
I have a problem that i don't know how to fix.
This is my JSFiddle code.
I don't know how to get all of the items inside the top bar properly.
There also happens a strange thing: when i put some text inside the ID=toplogo, all the elements shift a bit. What causes this problem and how can i fix it?
please help
Edited your fiddle.
Basically I added:
overflow:hidden
..to your inline-blocks and set
line-height = height of block
..to align the text instead of using padding.
Check out the edits here
why you use padding-top for those login and signup ?
It is suggested to use <ul> instead of div's for menu
You want to achieve like this ?
check this fiddle
I have a container div that contains an unordered list, that contains multiple li's (simplified to one in the fiddle for simple demonstration). Basically the text in the li's is spilling out over the containing div, which is odd because I added
white-space:normal
which is supposed to mitigate the issue, but clearly doesn't, see http://jsfiddle.net/hQA6u/.
I then tried to give the li a set width, but that doesn't work either.
Basically, I just want the li's text to not extend past the maroon/brown color, and have it break into multiple lines.
Thanks for all help!
jsFiddle
word-wrap:break-word;
this will do the trick
Just add "overflow:hidden;" to your css, or you can use "overflow:scroll;" to make div scrollable.
Hope this helps.
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)
In the following jsfiddle I have put some html and some css. I'm trying to not have each element wrap when the screen gets smaller. Actually I'm trying to implement the jqueryUI slider inside of my container. I've tried to implement several css fixes to get each element to line up side by side. However they initially wrap. If you play with the size of the results box for the fiddle below you will see that it does in fact wrap.
http://jsfiddle.net/webdad3/UaQQt/
What am I doing incorrectly
Not sure if I understand your question... You want all those seven-line tables arranged on one row, not wrapping under each other? If so, how about something like
.post-content { min-width: 85em; }
If you want them to stay arranged in a 3x3, maybe display:table is what you need...