I have built this menu:
JSBIN EDIT ; JSBIN DEMO
As you see, the menu isn't centered at the middle of the bar, he's centered up. However, I want to make it go lower, exactly at the middle.
So, I had an idea to do margin-top: 26px because the bar's height is 53 pixels, but it doesn't change anything. I also did margin: 0 auto and text-align:center.
I read this STACKOVERFLOW and realized that it is related in float, but I don't want to float it - I want to make it go down.
Thank you!
You need to give the line height by using line-height. Okay, updated, the line-height trick doesn't work!!! And also, giving this to the <a> tag does the trick:
width: auto;
display: inline-block;
Fiddle: http://jsbin.com/cayob/2
Try setting the line-height of the links to the height of the bar, in this example 53 pixels.
Related
Sorry, my english is not good :)
When resize the width of the window. How width of dm2 is dependent on the to-n sorted column?
dm1,dm2 is no fixed width in css.
I tried to use text-align for dm1. display: inline for dm2. It works fine, but I found it at fault. I do not know no other way handle it?
Demo Here: https://jsfiddle.net/bindo1995/m4vajbqw/2/
Default
Use text-align for dm1, display:inline; for dm2
How ?
Thanks for helping me !
The problem is that using float or display: inline-block; to-n blocks will always try to fit horizontally on one row when there is enough space for each block and when there is no space for a block it will be on the second row and there will be gap in dm2. If you want them to be 3 on first row and 2 on the second and to fit 100% in dm2 you have to make 2 rows of to-n blocks.
So I've got a bit of a weird issue which is happening in Chrome (latest version on Mac). Here is the fiddle which replicates it: http://jsfiddle.net/mwznjnoc/1/
You'll see that the search bar has a set height of 40px. However, as soon as the right side red cell has content which makes it scroll, it squishes the search bar. Moving the search bar outside of the div it is in and under the header div fixes the issue, but I cannot fix it that way (the search bar is part of the view content, which gets rendered in the div it is in). Removing height: 100%; from html and body stops it from happening, but is not the fix as I need the viewport height to be 100%. This layout works fine in other browsers I've tested it with, anyone have an idea why this is happening or a way to adjust the layout to prevent it? Thanks for your time in advance!
You forgot the flex rule on your .search box.
Because it being a part of flex, you should remove the style height:40px from the .search box.
Then provide flex-grow and flex-shrink as 0, and flex-basis as 40px.
You may combine all three into one as flex: 0 0 40px. This will force the layout to contain the .search box within 40px and let other blocks grow or shrink in the available space.
Changes in HTML Markup:
<div class="search">search bar</div> <!-- Remove inline style for height -->
Changes in CSS:
.search {
flex: 0 0 40px; /* add the flex rule here */
background: #ccc;
}
Your Fiddle: http://jsfiddle.net/abhitalks/mwznjnoc/3/
To go into more detail, consider this:
I have a row of three divs R(right), C(center), and L(left).
They are encapsulated within a parent div Container
Container has the css style display:inline-block
I have L floated left
I have R floated right.
I have C centered by setting margin: auto.
My problem: I want the middle div to be centered until R and L collide with it. In the event that this happens (window resize). I want C to clear both, and center itself underneath R.
What is the best way to achieve such a result? I understand I may have approached the set up wrong, please advise if that is the case!
Thanks in advance!
Like #atdrago mentioned, media queries is really the way to go here.
If your widths are fixed, you can also try floating the center div to the left and putting a (fixed) max-width on the .container element.
http://jsfiddle.net/mrhps/2/ is a working example.
Would have commented, but not enough reputation. Anyway, you will need a listener for resize - it will be nasty. Media Query is the way to go as mentioned.
is a working example
.C {
margin: 0 auto;
background-color: blue;
#media (max-width: 20em) {
clear: left;
float: right;
}
}
Sorry new here, it appears I need add code from the jfiddle to post a link...oO
This is my jsfiddle:
http://jsfiddle.net/BTYA7/4/
At the bottom of the white input box we can see that there is about 5px of padding / margin between the border and the white box. I have tried to use chrome developer tools but I cant see where it is coming from, can anyone help me pinpoint it?
It seems to be on this:
<div class="uEditor" style="">
But in the metric window there is no padding
That is because of the line-height property .. Set it to 0
.uEditor
{
line-height: 0;
}
Check FIDDLE
You can change the line-height to 0 as Sushanth suggested. But line-height is inheritable so you would have to change it back to normal value for the child elements.
Therefore I suggest you change the background colour on the .uEditor to white and leave the line-height unchanged.
See this jsfiddle.
I have been to the end of the internet and back trying to solve this. Here is the page withe the spry menu. You will notice some inline styling to get it to fit the design of 980px wide.
The HTML
Here is the spry CSS.
[CSS][2]
I set this in firebug:
ul.MenuBarHorizontal {
width: 1200px;
}
Which shows the navigation menu is wider than 980, which is why it is wrapping around. You need to strip off five or ten pixels from the padding or margins of your menu items.
ul.MenuBarHorizontal a {
padding: 9px 20px;
}
Seems to work well. And actually, you can take that second padding value up to 26px without it wrapping around.