Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle
Related
I am using Node and Puppeteer to generate a PDF that uses a handlebars template. All is working as expected.
My only question is: how does one add border padding to the document, so that, if the document runs over multiple pages, the content doesn't go right up to the very edge of the page? Is there a style element I can use?
See my handlebars template below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Result Template</title>
<style>
.container {
margin: auto;
padding: 30px;
font-size: 13px;
line-height: 13px;
font-family: 'Helvetica Neue', 'Helvetica';
color: #555;
}
.top-heading {
margin-bottom: -20px;
color: red;
}
.box {
width: 100%;
}
.table-box {
width: 100%;
table-layout: fixed;
}
.left-box {
float: left;
min-width: 25%;
max-width: 25%;
margin-top: -20px;
}
.right-box {
float: right;
min-width: 75%;
max-width: 75%;
}
.one-quarter {
border: #ccc thin solid;
max-width: 25%;
}
.half {
border: #ccc thin solid;
max-width: 50%;
}
.three-quarter {
border: #ccc thin solid;
min-width: 75%;
max-width: 75%;
}
.full {
border: #ccc thin solid;
max-width: 100%;
}
.highlighted {
font-weight: bold;
}
.flat-line {
border: none;
height: 1px;
background-color: #ccc;
}
.header {
clear: both;
margin-top: 120px;
text-align: center;
}
.centered {
text-align: center;
}
.details-cell {
padding: 0 8px;
}
.notes-table {
margin-top: 20px;
min-width: 100%;
}
.goal-heading {
font-weight: bold;
text-align: center;
}
.signature {
margin-top: 10px;
min-width: 100px;
max-width: 100px;
height: auto;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class="container">
<table>
// Other code
</table>
</div>
</body>
</html>
You can access styling for the page like so:
#page {
margin: 10px 0;
}
So by adding the above to the handlebars template you're able to add the desired 10px of margin to the top and bottom of the document.
This question already has answers here:
What are the various ways to hide a <div>?
(5 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 2 years ago.
I have an a element that acts like a toggle button :
var container = document.getElementsByClassName("favorite");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('selected');
}
}
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
.container .favorite {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
cursor: pointer;
}
.container .favorite:hover {
background: #D9DEEA;
}
.container .favorite::after {
z-index: 2;
position: relative;
margin: auto;
height: 20px;
content: url("https://img.icons8.com/ios/16/000000/star.png");
}
.container .favorite.selected::after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<a class="favorite"></a>
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I want to transform it to a checkbox, but the solutions I find are for a checkbox with a label, I only want to use the checkbox in my html without the label or some additional div, this is what I tried :
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 20px;
width: 20px;
position: absolute;
opacity: 1;
margin: auto;
height: 20px;
cursor: pointer;
top: 10px;
right: 10px;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 20px;
width: 20px;
pointer-events: none;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
Which doesn't look good.
How can I fix this ? and thanks in advance.
You can add appearance:none to remove to checkbox appearance and set fixed height/width to checkbox and :after, changing :after to flex allows you to center the background.
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 40px;
width: 40px;
position: absolute;
opacity: 1;
margin: auto;
cursor: pointer;
top: 10px;
right: 10px;
appearance: none;
outline: none;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 40px;
width: 40px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I have a page that is 1600px wide. The main area though is only 900px wide. I have a navigation that is suppose to be fixed in the center of the page ( which it is ). My problem is when I open the page, the page is fixed left instead of being centered when opened. What do I need to do to center everything within the 900px when a user visits the site?
The code isn't exact because it's detailed but it basically goes like this: http://jsfiddle.net/wznQk/
<body>
<div class="container">
<div class="header">
<div class="subheader">
<div class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="logo"><img src="images/ogsystemslogo.png" /></li>
<li>CAREERS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="undernav">
<div class="short">
<img src="images/bluemark.png" />
<div class="top">TOP OGS NEWS:</div>
</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS
.body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 1600px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
margin: 0 10% 0 10%;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 1600px;
height: 100px;
margin: 0 auto;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 1600px;
height: 100px;
padding: 0px;
margin-left: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
display: table-cell;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: 590px;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
margin: 0 auto;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Please try to add this CSS instead of yours. In your CSS I found lot of unwanted CSS tags but I keep them as it is.
body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 900px;
height: 100px;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 590px;
height: 100px;
padding: 0px;
margin: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: auto;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Css:
.header {
width: 1600px;
height: 150px;
left: 50%;
margin-left: -800px;/*half of your total width*/
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
Added left: 50%; margin-left: -800px;/*half of your total width*/ to your .header class
Fiddle : http://jsfiddle.net/avinvarghese/wznQk/3/show/
This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.
I'm trying to vertically align text in a box that has a height that changes to match the width (so that it's a perfect square). I just cannot get it to work. I have 2 issues:
I'm trying to vertically align the text within the "smallbox" class.
Besides this, I also cannot get the "text" class to vertically align either.
Here's my fiddle
Here's my CSS:
* {
margin: 0;
padding: 0;
}
html, body {
background: yellow;
font-size: 2.5vmin;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
}
.box {
/*width: 200vmin;*/
width: 90%;
margin: 0 auto;
display: inline-block;
/*padding-bottom: 5vmin;*/
padding-bottom: 2.5%;
}
.smallbox {
position: relative;
float: left;
vertical-align: middle;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
word-wrap: break-word;
display: table;
table-layout: fixed;
color: red;
background-color: blue;
}
.smallbox b {
margin-top: 100%;
display: block;
zoom: 1.0;
}
.smallbox p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-decoration: none;
display: table-cell;
vertical-align: middle;
}
.content {
width: 80%;
min-height: 28vmin;
background-color: white;
float: right;
border-radius: 2vmin;
font-size: 3.5vmin;
position: relative;
padding-bottom: 5vmin;
}
.content:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -4.75vmin;
top: 13.5vmin;
border-top: 3vmin solid transparent;
border-bottom: 3vmin solid transparent;
border-right: 5vmin solid white;
}
.title {
height: 5vmin;
padding: .75vmin 1.5vmin;
border-radius: 2vmin 2vmin 1vmin 1vmin;
margin: .5vmin;
font-weight: bold;
text-align: left;
color: red;
background-color: blue;
}
.text {
padding: .5vmin 2vmin;
text-align: center;
}
.left {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
font-weight: bold;
}
.right {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
right: 0;
font-weight: bold;
border-radius: 2vmin 2vmin 2vmin 2vmin;
margin: .5vmin;
color: red;
background-color: blue;
}
.right a {
text-decoration: none;
}
.arrowleft {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Here's my HTML:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="box.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
<div class="content">
<div class="title">Some Title</div>
<div class="text"><p>This is just some example text here</p>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</div>
</div>
</body></html>
Add this CSS:
.smallbox p:before{
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;
}
.smallbox p span{
display:inline-block;
vertical-align:middle;
width:99%;
}
Credit goes to Paul.
You're using position: absolute; on the paragraph within the .smallbox class which is forcing it to display block, so vertical-align will have no effect. In the fiddle below I used the line-height property to align the .smallbox text though I don't think that'll work with a dynamic height.
I also centered the .text class paragraph by adding display: inline-block; and using the px value for vertical-align. Just adjust it to your needs.