I wanna implement this idea by css :
What is the best approach to do that in CSS ?
Thanks very much !!
UPDATE
I've did this trick before with Headings , More information here :
Putting Heading within 2 horizontal lines in CSS
But when i tried to edit the heading version also didn't work with buttons .
http://jsfiddle.net/pB9MY/
body { background: #fff; }
h3 {
width: 500px;
font: 30px Arial;
font-weight: normal;
text-align: right;
position: relative;
}
h3 span {
background: #fff;
margin-right: 15%;
padding: 0 20px;
}
h3:before {
content: "";
width: 100%;
left: 0;
top: 50%;
position: absolute;
z-index: -1;
height: 0;
border-top: 8px solid grey;
opacity:.2
}
button{
background-color:green;
border:1px solid green;
border-radius:5px;
vertical-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3><span><button>Hello</button></span></h3>
</body>
</html>
Is this what you're after?
Create a div for the text...
<div class="rightrounded">Some Text</div>
And apply the appropriate css...
.rightrounded {
width: 100px;
float: right;
border-radius: 5px;
background-color: #008000;
color: #fff;
text-align: center;
}
Fiddle here
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.
I'm experimenting with a simple example in order to better understand the basics of CSS float, position, height, and margin properties.
As you can see in the image, I'm trying to find a simple way (without using CSS Grid or Flexbox) to automatically align the bottom border of both the Sidebar and the Main content divs to the top border of the Footer.
Is there a simple way to use height and/or margin properties with 'auto' or '0' values to do this? I don't want to specify a number of pixels or a % height for either the Sidebar or Main divs. I'd rather just "glue" the bottom border of each to the top border of the Footer.
Here is my CSS code:
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
width: 100%;
height: 70px;
border: 10px solid green;
}
.sidebar {
width: 20%;
float: left;
border: 10px solid red;
/* Rather than specifying a specific height for .sidebar, I want to align
the bottom border of the sidebar to the top border of the footer automatically.
Is there a possible combination of height and/or margin-bottom
that can accomplish this? (Note: without using CSS Grid or Flexbox) */
height: 400px;
margin-bottom: ;
}
.main {
width: 80%;
float: right;
border: 10px solid blue;
/* Same comment here as sidebar above. */
height: 350px;
margin-bottom: ;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 140px;
border: 10px solid purple;
}
And here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="sidebar"><h2>Sidebar</h2></div>
<div class="main"><h2>Main</h2></div>
<div class="footer"><h2>Footer</h2></div>
</body>
</html>
Again, I know I can do this easily with CSS Grid, but I'd rather learn more about the capabilities and limitations of the "height" and "margin" properties first.
Thanks!
UPDATE:
See below, I was able to achieve the layout I want by using "position: fixed" and explicitly locating the bottom and left/right sides of the Sidebar and Main divs. I also created --navbar-height and --footer-height variables so I only need to type those values once.
However, rather than using "position: fixed", I would rather use "float" and some other way to automatically locate the bottom edge of the Sidebar and Main elements to the top of the Footer. With my current code structure, is there some way to use the --footer-height variable to locate that bottom edge of those elements?
:root {
--navbar-height: 70px;
--footer-height: 140px;
}
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
border: 10px solid green;
width: 100%;
height: var(--navbar-height);
}
.sidebar {
border: 10px solid red;
width: 20%;
/* float: left; */
position: fixed;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.main {
border: 10px solid blue;
width: 80%;
/* float: right; */
position: fixed;
right: 0;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.footer {
border: 10px solid purple;
width: 100%;
position: fixed;
bottom: 0;
height: var(--footer-height);
}
You can set position:fixed for sidebar and main divs as well.
Then set bottom: for the main and sidebar to the height of your footer or more to have them aligned above the the footer:
UPDATE: Yes you can achieve this with display:block; . Then use float property. So if any of them changes in term of height, the others will change related to the changed one which can be footer
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
h2 {
padding: 0;
margin-top: 0;
}
.navbar {
margin-bottom: 50px;
width: 100%;
height: 70px;
border: 10px solid green;
}
.parent{
width: 100%;
text-align: center;
}
.child{
display: block;
}
#sidebar {
float: left;
width: 30%;
border: 10px solid red;
height: 200px;
}
#main {
float: left;
width: 70%;
border: 10px solid blue;
height: 200px;
}
#footer {
float: left;
width: 100%;
height: 100px;
border: 10px solid purple;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="parent">
<div class="child" id="sidebar"><h2>Sidebar</h2></div>
<div class="child" id="main"><h2>Main</h2></div>
<div class="child" id="footer"><h2>Footer</h2></div>
</div>
</body>
</html>
JsFiddle: JsFiddle
I'm currently designing a website based on this bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/). I like what he's done with the hr styling (see code below), but I really want to use it against a background that isn't a plain colour, i.e. a background image.
The problem with this is that when changing the star icon background-color property to transparent (i.e. not the same colour as the background), the hr line still remains beneath.
Example image . If anyone can come up with a simple way of achieving the same effect against a non-plain background, I'd be really grateful!
hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: solid 5px;
border-color: #2C3E50;
}
hr.star-primary:after {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 0.25em;
content: '\f005';
color: #2C3E50;
background-color: white;
}
I don't think you can do what you're asking with a single element. I would suggest creating a div with a span inside for the icon, and then using the :before and :after pseudo elements to create two horizontal lines, either side of the star.
body {
background-color: #f00;
}
.hr {
overflow: hidden;
position: relative;
text-align: center;
}
.hr::before, .hr::after {
background-color: white;
content: '';
display: inline-block;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.hr::before {
left: calc(50% + 30px);
}
.hr::after {
right: calc(50% + 30px);
}
.hr .icon {
background-color: transparent;
color: white;
display: inline-block;
font-family: FontAwesome;
font-size: 2em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="hr">
<span class="icon fa fa-star"></span>
</div>
Change pseudo element :after to :before
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/bootstrap/css/bootstrap.min.css" type="text/css"/>
<link href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: #2C3E50 solid 5px;
color: #2C3E50
}
hr.star-primary:before {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 .25em;
content: '\f005';
color: #2C3E50
}
</style>
<hr class="star-primary" />
Sample Output
Hope this helps!
How to display an iframe code by mouse over (hover) a different link? I tried this but it's not working;
<style>
iframe#xyz {
border: 2px solid #9a9a9a;
margin-left: 60px;
display: none;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
a#abc:hover iframe#xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
</style>
<a class="linkclass" id="abc" href="link">link</a>
<iframe id="xyz" src="page.html"></iframe>
What am i doing wrong?
You're selecting it wrong, use:
a#abc:hover {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Select a link with an id of abc.
If you want to show the iframe however, you must use the sibling selector +
use this:
a#abc:hover + #xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Do it this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#xyz{
display: none;
}
.linkclass:hover + #xyz{
display: block;
}
</style>
</head>
<body>
Click Here To View Map
<iframe id="xyz" src="#" width="870" height="300"></iframe>
</body>
</html>
I want a centered header DIV and inside it the following absolutely positioned DIVs:
logo
menu
line
title
But my HTML/CSS has two problems:
for some reason the page is now wider (see bottom scroll bar)
If my title is longer, I want it to be right-aligned of course
What I really want is a centered DIV and inside that I want to position DIVs absolutely within their centered parent (but not absolute since they wouldn't be centered). Is this possible?
How would you accomplish this layout?
alt text http://tanguay.info/web/external/centeredLayoutProblem.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#headerArea {
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: relative;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: relative;
top: -52px;
right: -480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: relative;
top: -35px;
right: -620px;
font-style: italic;
font-size: 14pt;
}
#line {
position: relative;
top: -60px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
<div id="line"></div>
</div>
</body>
</html>
Make your #headerArea div position:relative. Then, for all your inner divs, you can position:absolute in relation to #headerArea.
Like so:
<style type="text/css">
#headerArea {
position:relative;
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: absolute;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: absolute;
top: 80px;
left: 20px;
width: 720px;
text-align: right;
font-style: italic;
font-size: 14pt;
}
#line {
position: absolute;
width: 720px;
height: 1px;
top: 70px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
You should use the 'left' property instead of 'right' since 'right' doesn't work in ie6.
The 'left' and 'top' values I've put in may be a little off, but you can tweak to get what you want.
EDIT:
I've corrected the pixel values, and added a width to your line div, and a height since IE defaults all divs to one text line high.
Also, your title div should be full width with text-align right so that the title will expand to the left instead of the right.
Yes. If you do #headerArea{position:relative;} you can have position:absolute on the children and their position will be relative to the parent.
Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.
You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...
By placing the title to the right, it will expand to the left as needed.
Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.
I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).
This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
#headerArea {
position: relative;
background: yellow;
margin: 0 auto;
width: 760px;
height: 150px;
}
#headerArea div {
position: absolute;
}
#logo {
top: 20px;
left: 20px;
background: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
}
#menu {
top: 20px;
right: 20px;
background: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#line {
top: 80px;
left: 20px;
width: 720px;
border-top: 1px solid blue;
}
#title {
top: 90px;
right: 20px;
font-style: italic;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="line"></div>
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
</div>
</body>
</html>
(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)