I have a navigation bar with 4 links floated.
While width of each one is 25% of total width of NAV, height is not fixed because text of a link could be longer than others and span across 2 rows, like in this example.
#first-level-navigation .mega-link {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #eaeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #cccccc;
padding: 0;
text-transform: uppercase;
width: 25%;
}
#first-level-navigation .mega-link a {
color: #00643c;
display: inline-block;
padding: 10px;
text-align: center;
text-decoration: none;
width: 100%;
}
I would like that height of smaller links will extend to height of taller one in case like mine, in which last link span on 2 rows if window is smaller enough. How to obtain it, withous forcing height in px? I tried with height:100% but it was unuseful
You can use display:table/table-cell:
#first-level-navigation{
display:table;
}
.mega-link{
display:table-cell;
vertical-align:middle;
}
JSFiddle
Aslo, you have to add browser prefixes for box-sizing: border-box - here's a good article about it by Paul Irish.
With jQuery(in Coffeescript):
if $('html').length > 0
link = $('.mega-link')
# Determine heights
link_height = link.height()
# Applys heights
link.css "height", link_height
# when window resizes, calculate and apply again
$(window).on 'resize', ->
# re-determine height
link_height = link.height()
# Apply heights
link.css "height", link_height
After few years, new modern CSS techniques could be used to solve this issue, using Flexbox Layout.
Starting from #Vucko's jsFiddle (proposed in its answer), I slightly modified it to use Flexbox in the following way:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
}
This code solve "equal heights" issue but to mantain also centered vertical alignment, is necessary to make flex also each .mega-link, so the complete code becomes the following:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
display:flex;
align-items:center;
}
Please, note also that Flexbox allows to avoid specific declaration of fixed width (so width:25%; can be removed, replaced in its function by flex:1;), so becomes easier change number of .mega-link elements with auto adaptation of each one.
Related
I have a list of inline-block elements, and I want to add a border to the element you hover over. However, notice how the border offsets the element, even when I use box-sizing: border-box and explicitly define the widths and heights of the elements. I illustrated the behavior below:
* { box-sizing: border-box }
ul { font-size: 0 }
li {
display: inline-block;
width: 100px; height: 40px; margin: 10px;
font-size: 20px; text-align: center;
background-color: #FFF176;
}
li:hover { border: 5px dashed grey }
<ul>
<li>hover</li>
<li>over</li>
<li>me!</li>
</ul>
The best solution I found is to use outline and outline-offset instead of border, but I'd really like to know why my original method doesn't work :/
UPDATE: While BoltClock gave a really great explanation and suggestion (which was all I was asking for), I just wanted to mention that I totally forgot about flexbox, which solved pretty much all the problems I was having with inline elements. I combined it with BoltClock's transparent border trick for my final JSFiddle solution
I see the problem now. What's happening is that box-sizing: border-box causes the content box of each element to shrink both horizontally and vertically once you add a border. Because your elements are inline-blocks, the vertical shrinking affects the baseline of the element being hovered, and therefore the baseline of the line it's on, resulting in the other elements on the same line being offset. If you look closely, you'll notice that the text actually stays aligned, which is the goal of offsetting the elements.
Changing the border to an outline works because outlines are designed to have no effect on layout (and also because you then take borders completely out of the picture).
However, it is for this reason that using an outline this way produces a significantly different effect from your original effect with a border. Setting an initial transparent border instead of an outline will ensure that your content stays offset the right amount whether the border is visible against the background (this was shown in a previous answer but it was deleted presumably because it was downvoted):
* { box-sizing: border-box }
ul { font-size: 0 }
li {
display: inline-block;
width: 100px; height: 40px; margin: 10px;
font-size: 20px; text-align: center;
background-color: #FFF176;
border: 5px dashed transparent;
}
li:hover { border-color: grey }
<ul>
<li>hover</li>
<li>over</li>
<li>me!</li>
</ul>
I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.
Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/
The important section is the:
<div id="inner" class="span10">
...
</div>
Please have a look at the attached screenshot, especially the yellow marked area:
I have the following question / problem:
How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?
I would give the parent container a padding and also apply box-sizing: border-box to it.
Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/
#main {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
background: #FFF;
border-radius: 4px;
}
.span10 {
padding-right: 10px;
box-sizing: border-box;
}
You could try using
#main {padding-right:5px}
But maybe that makes #main wider than you'd like.
In that case, you could use
#main > div { width:98%; }
#main > .navbar {width:100%; }
to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.
I made a template with 2 columns with CSS like this picture.
The main div is main. It has 2 dives inside itself. DIV sider has a background-image. And I want to show it always. Now, I have 2 problems. First, it does not cover height of screen by default unldess I set a min-height=... for it. Second, if I do it, after scrolling the page, the background images won't repeat to cover whole of screen height.
html {
margin:0 0 0 0;
height: 100%
}
body {
font-family:Arial;
font-size:9pt;
color:#333333;
line-height:200%;
margin:0 0 0 0;
background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
width:100% !important;
height: 100%
}
#main {
width:100%;
min-height: 100%
}
#sidebar {
width:231px !important;
float:left;
background-image:url('../images/sidebar_bg.PNG');
min-height: 100%;
}
#container {
float:left;
padding:25px 25px 25px 25px;
width:70%;
min-height: 100%
}
What's the problem?
Edit: This is my backgroun image
Try this - DEMO 1 : Unwanted white space
The additional space in the bottom is because of your padding:25px; ( Same as padding:25px 25px 25px 25px;).There's an extra top padding + bottom padding which is givin your div additional 50px.
If you do not want that additional space - Try this => DEMO 2 : without the white space
You can replicate the same effects of top and border 25px with this:
padding:0 25px;
margin:25px 0;
To avoid that extra unwanted space.
Edit:
The additional space is caused by the margin:25px 0;, if you remove it - you wont have that extra space.check this
DEMO 3 Removing unwanted space caused by Margin
Edit 2 :
Your problem is a well documented problem - Matching Columns Problem. There are loads of solutions you can try, here are a few :
1) javascript
2) Alter the Image (Hacky)
3) Pure CSS
My fav => Option 2
I havnt personally explored the last one,but try it out.. :)
Hope it helps..
I have two links: shopper and store. Both of these links are in there own separate left and right floats. The Store link is supposed to be in a right float, but it snaps out of its div when adding a border style to the left float. How do I get it back into place? Please have a look at http://jsfiddle.net/JuCKU/ for an example.
I completely forgot to update jfiddle with the new code. http://jsfiddle.net/JuCKU/3/
firefox is having the alignment issue while google chrome seems to render the layout correctly.
Drop the width from 50% to 49%. Since you have a border, it takes up space and by giving each div a width of 50%, the total is a bit too wide and the second div pop down a bit. Or get rid of the border.
jsFiddle Example
Change
#shopper, #store
{
width: 50%;
text-align: center;
}
To:
#shopper, #store
{
width: 49%;
text-align: center;
}
It's a rounding issue. It's not a rounding issue, 50% + 50% + 1px border is more than 100%. Making the width slightly less than 50% is a quick fix.
Change this:
#shopper, #store
{
width: 50%;
text-align: center;
}
for this:
#shopper, #store
{
width: 49.9999%;
text-align: center;
}
http://jsfiddle.net/JuCKU/4/
simple give margin-right:-1px in your shopper div
#shopper
{
float: left;
border-right: 1px solid #ccc;
margin-right:-1px;
}
Check this http://jsfiddle.net/JuCKU/6/
OR
you can use css3 box-sizing property for this but it's work till IE8 & above.
Check this http://jsfiddle.net/JuCKU/7/
Adding the border increases the overall size of the boxes to 50%+1px, so together their combined width is greater than 100% and something's gotta give.
You can use the CSS3 property box-sizing:border-box to incorporate the border into the total 50% width, or more specifically -moz-box-sizing in Firefox, -webkit-box-sizing in Chrome/Safari and simply box-sizing in Opera. Unfortunately IE doesn't yet support this.
So add this to your code.
#shopper, #store {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
More info - http://www.css3.info/preview/box-sizing/
As mentioned by others the bulletproof solution across all browsers is to reduce the width of your boxes to fractionally less than 50%.
Give the divs some widths
see http://jsfiddle.net/JuCKU/1/
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow