Here's what I'm trying to achieve:
Here's a fiddle showing the styling I have, (making use of display: table as I don't want to fix the width of each item and it should be responsive).
I'm close, here's the styling (SASS for brevity) and how it looks:
.nav--main {
ul {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
li {
display: table-cell;
border: 1px solid #333;
text-align: center;
line-height: 1.2;
vertical-align: top;
overflow: hidden;
}
}
a {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 200%;
padding: .5em;
background-color: rgba(105,158,197,1);
color: #fff;
text-decoration: none;
}
}
But I cannot get the a to take up the full height and remain vertically-centered in the middle. This fiddle shows one kinda hacky attempt, but only by setting vertical-align to top.
I don't want to:
set a fixed height
place the background-color on the li rather than the a: I hate when the clickable area doesn't take advantage of all available space
I don't know, in which case this might break, but a somewhat dirty trick could be this:
Updated CSS parts only
ul {
overflow: hidden;
}
a {
margin: -5em 0;
padding: 5.5em 0;
}
Demo
Try before buy
add this:
background: rgba(105,158,197,1);
into ul
That set the background color into the same as your link.
Related
I want to create a side navigation, which should be full height of the browser window. Each menu item (DT) has additional element (DD) where I will put some filters later on. When I click a menu item, its additional element opens, and pushes all other closed items to bottom of the menu. The problem is that once it's opened the size of the parent DL exceeds the screen instead of staying full height.
Could you please suggest a solution to resolve the issue.
HTML
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
CSS
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: block;
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: block;
height: 100%;
}
JSFIDDLE
Please do remove dd.active { height: 100% } and check it...
Think this will help you.
The !important declaration is unnecessary. If you know the number of menu items (e.g. 2) and their height (e.g. 40px), maybe this could help:
dd.active {
height: calc(100% - 80px);
}
An alternative (and equally inelegant) solution would be to use tables. Setting the table height to 100% will automatically stretch the rows with unspecified height to fill the remaining space (so only the rows that correspond to the menu items should have their height specified).
My solution:
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: table; /*changed*/
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: table-row; /*changed*/
height: 100%;
}
UPDATED JSFIDDLE
I have an <li> which is constrained in width and the height is set to an aspect ratio of 1:1.
I then have an element inside which is positioned absolutely with a 100% width and height. I then add an icon font to the :before pseudo element. How can I vertically center that pseudo element?
My code is:
li
+span-columns(1, 6)
a
+border-radius(50%)
display: block
position: relative
width: 100%
border: 5px solid $bright-blue
border: remCalc(5px) solid $bright-blue
&:before
padding-top: 100%
content: ''
display: block
span
display: block
position: absolute
top: 0
left: 0
width: 100%
height: 100%
&:before
// Content is added via the style for data-icon
display: inline-block
min-height: 100%
vertical-align: middle
width: 100%
color: $white
font-size: 32px
text-align: center
outline: 1px solid red
A pic of the problem. The red outline is on the span:before
COMPILED OUTPUT:
li {
width: 150px;
}
li a {
border-radius: 50%;
display: block;
position: relative;
width: 100%;
border: 5px solid blue;
}
li a:before {
padding-top: 100%;
content: '';
display: block;
}
li a span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a span:before {
content: attr(data-icon);
font-family: 'IconFont';
display: inline-block;
min-height: 100%;
vertical-align: middle;
width: 100%;
color: white;
font-size: 32px;
text-align: center;
outline: 1px solid red;
}
I'v created a fiddle with a solution for you.
Here: http://jsfiddle.net/avrahamcool/h3e2G/
your span is called Content in my fiddle, and I've add a new span called Centerer.
also, I centered some text in the layout, but you can change it back to your logo without noticing any differnce.
the main ideads are:
fix the height of the li (you already fixed the width, and if it should be a circle, I dont see a problem with also fixing the height).
lossing the relative and ablsolute way
instead of centering the text inside the span (while the span was height:100%), we center the span inside his holder.
Had to solve this with top padding like so:
$half-width: space(1, 6) / 2
$half-font: remCalc(33px) / 2
$border-widths: remCalc(5px)
+rem(padding-top, $half-width - $half-font - $border-widths)
That gives me custom top padding in rems depending on the width of the circle at the time and it scales perfectly when the body font size is increased or decreased.
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
I have a set of 28 links in a wrapper div element. Each one is a letter of the alphabet plus a # for numeric and one saying "all". Each are floated left. I want the text to be centered horizontally and vertically. With the code below I have it horizontally centered but the vertical-align: middle doesn't seem to be having any effect when I expected it to do so as you can use that on elements that have display: table-cell. Anyone have any ideas?
a {
float: left;
position: relative;
display: table-cell;
width: 30px;
height: 30px;
margin: 0 4px 4px 0;
#include border-radius(4px);
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #fff;
#include blue-gradient;
&:nth-of-type(14n) {
margin-right: 0;
}
&:hover {
top: -1px;
}
}
Kind regards,
Neil
You could use:
line-height: 30px;
I would use the line-height property to center vertically. I have found vertical-align rarely works, because it conflicts with other properties and browsers ignore it.