I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}
Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}
Related
i've problem when convert html to pdf with pdf-creator-node. when i uses ul li with column=2, in preview html is look good. but when i generated to pdf always preview in one column. may i help me ? this is my css
.itenerary ul{
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
line-height:1.6 ;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
i want to get tips and trick to solve my problems
I am using the Sphinx "cloud" theme. The main body of text has "justified" text alignment, and I want to turn that feature off. All options for alignment that I see refer to table elements, which is not what I want.
I tried adding an element to the _static/style.css file:
body {
text-align:left;
}
but this did not un-justify the text.
TIP: Don't guess at the CSS selector, inspect the source code or through the web.
In your custom override, you will need to override every instance of text-align: justify; in the theme. I found three.
div.body p {
text-align: justify;
margin: 1.5em 0 1.5em 0;
}
div.body li, div.body dd {
text-align: justify;
}
table.docutils .justify-align {
text-align: justify;
}
This ought to do it:
div.body p,
div.body li,
div.body dd,
table.docutils .justify-align {
text-align:left;
}
I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?
Fiddle: https://jsfiddle.net/Walter69/nwczmdah/5/
.container {
display: inline-block;
cursor: pointer;
}
.container:hover {
color: #fff!important;
background: #FF0000;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #000;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
You need to add the color when hover the container:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
background: #FFF;
}
https://jsfiddle.net/nwczmdah/6/
I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}
You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.
So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}
I'm trying to position a child element behind it's parent:
<div><p>test</p></div>
My CSS is:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?
The div and the p in the example exist on different stacking contexts, and the div's z-index tells it to appear two levels higher than its siblings, not its children.
However, an element's z-index that is below zero puts it behind its parent.
Giving the p a z-index of -1 puts the p behind the div, regardless of the div's z-index.
If that's possible in your situation, you need to prevent stacking context on the parent. To do so, remove the z-index from your <div/> and set the <p/>'s z-index to -1:
div {
width: 100px;
height: 100px;
background: red;
/* z-index: 2; */
}
div p {
position: relative;
z-index: -1;
}