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
Related
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
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 :)
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 :)
The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:
Here is my result: http://fiddle.jshell.net/WZ3nM/1/
Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.
You need to clear the float, before you close your <ol>
Check it out here.
http://fiddle.jshell.net/WZ3nM/5/
Whenever you float things you must clear them at the end so that it can calculate the height properly
I modified your code and added a third <li> with the following style:
clear:both;
Your float was taking elements out of the document flow and this the background color didn't know where to end.
Hope that helps.
As others have suggested you can clear the floated content - although this will add another element. You can also add
li{overflow:auto;}
which will prevent the list from collapsing. In IE6 you will also need the rule
li{height:1px;}
http://fiddle.jshell.net/WZ3nM/9/. This method does not require a clearing element.
If you check this:
http://jsfiddle.net/QbMmX/1/
Then you can see that the box(div element) is moving more at the left than the text. It doesnt get center like the text does. Why is this occuring and how can i fix this?
#recentStatus is centering as you're expecting as a result of its display: inline style.
So if you add display: inline-block to .userStatusComment, it'll center similarly to the other elements.
Take a look at this modified version of jsfiddle:
http://jsfiddle.net/QbMmX/4/
I have added a background-color to both the right and left elements to help you visualize the result and reason why the centering was not happening the way you wanted. This seems to work in chrome.
Hope this helps.
Bob