Okay guys so I have created multiple div classes, and they seem to work. But when I want to add another div class underneath them, it just doesn't show up.
Here's my html code;
<!DOCTYPE html>
<html>
<head>
<!--LINKING THE STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--DO NOT EDIT THIS STYLE SHEET-->
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
html, body {min-width: 600px; background-image: url(bg.jpg);}
/*Navigation Bar*/
ul
{
list-style-type:none;
margin:0;
padding:0;
background-image: url(nav_bg.png); background-repeat: repeat;
border-style: solid;
border-color: #fff;
width: 50em;
height: 50px;
margin-left: auto;
margin-right: auto;
}
ul.nav {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
width: 80%;
text-align: center;
border-style: solid;
border-color: #fff;
border-width: 2px;
}
li
{
display:inline;
text-align: center;
margin: 30px;
}
.nav a {
line-height:50px;
}
#font-face {
font-family: corbel;
src: url('fonts/corbel.ttf');
}
#font-face {
font-family: orator;
src: url('fonts/OratorStd.otf');
}
/*CUSTOMIZING THE LINKS*/
a {
color: #fff;
text-decoration: none;
font-family: corbel;
font-size: 18px;
}
a:visited {
color: #fff;
}
a:active {
color: #fff;
}
a:hover {
color: #111;
}
/*THE CONTAINERS*/
.box-long {
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
.box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
/*Keeping images in containers even when browser resizes. */
img {
width: 100%;
height: 100%;
}
/*styling headers*/
h1.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
h2.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
</style>
</head>
<body>
<ul class="nav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="box-long">
<h1 class="center">SERVER BANNER HERE</h1>
<!--YOU COULD AD AN IMAGE HERE. REMOVE THIS COMMENT AND DELETE THE <H1> TAGS TO SEE
IT WORKING WITH AN IMAGE. IMAGE SIZE IS -->
<!-- REMOVE ME FOR IMAGE // <img src="server_banner.jpg"> // -->
</div>
<div class="box-half-long">
<h2 class="center">SUB-CAT 1</h2>
</div>
<div class="box-half-long-r">
<h2 class="center">SUB-CAT 2</h2>
</div>
</body>
</html>
Here's the site this code is on: here
So, when I go ahead and add a new div class at the end, for example, this; (p.s, yes I know the div hasn't been set up in css, this is just a demonstation..)
.box-newdiv{
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
It just doesn't show up?
EDIT: Link is now working to view.
The reason you can't see the new div's is because you have provided fixed height for the div having the classes named as "box-half-long" and "box-half-long-r".
.box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
Since they have a fixed height, they don't show the elements contained in them which lie below the height of 100px.
Let the height 'adapt' to the height of the containing elements. You can do this by:
height :auto;
Just change these classes to:
.box-half-long-r {
width: 39.4%;
height: auto;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: auto;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
I have added new div's to show that they can be displayed once you change the hieght to auto.
Just see here : http://jsfiddle.net/Bj3vr/
Hope this helps you to understand the concept of using "height as auto" and solves your issue.
I can't see the example but first thing I noticed is
.box-long {
height: 100px;
This could be why
EDIT:
Works for me: http://jsfiddle.net/4rhAz/
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 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!
I'm making some coding, where I'd like to hover over anywhere on an image to access a hover. but I don't want an entire block of coloured semi-transparent padding to cover the picture, only a thin solid-coloured strip.
To make this happen, I created a container for the div and put the smaller, solid-coloured div inside it. However, the background to the container (the image) isn't showing up. I assume this is because the div hasn't got any content other than the smaller div.
How can I fix this?
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div style="background-image: url('http://placehold.it/80x350'); width: 80px; height: 350px;">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
<style type="text/CSS">
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
</style>
Please help :)
Took out the extra div you created and added the background to the dewisidebar.
In the CSS I made the background-size 100% 100% meaning that the width and height will be full length of its div.
http://jsfiddle.net/davygxyz/5hxdznz0/
HTML
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
CSS
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
background-image: url('http://placehold.it/80x350');
background-repeat:no-repeat;
background-size:100% 100%;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?
edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .largebutton:hover
{
background-color: #9999FF;
}
edit - Full files
HTML
<html>
<head>
<link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
</head>
<body>
<div class="top">
<div class="content">
</div>
<div class="leftbuttonbox">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
</div>
<div class="bottombar">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
<div class="label">
This is a label, it grows as large as it needs to
</div>
</div>
<div class="cap">
<div class="capinner">
</div>
</div>
</div>
</body>
</html>
CSS
#font-face {
font-family: "LCARS";
src: url('../FONT/lcars.ttf');
}
body
{
font-family: "LCARS";
position: relative;
background-color: black;
padding: 0px;
margin: 0px;
}
.top
{
position: relative;
height: 220px;
min-width: 100px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #6666FF;
-moz-border-radius-bottomleft: 50px;
}
.top .content
{
position: absolute;
top: 0px;
right: 0px;
left: 100px;
bottom: 25px;
background-color: black;
-moz-border-radius-bottomleft: 25px;
}
.top .leftbuttonbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
bottom: 60px;
background-color: black;
overflow: hidden;
}
/*
* the button is 1/2 the size of the large button
* the button box can hold 4 buttons or 2 large
* buttons or any combination of equal size
*/
.top .leftbuttonbox .button
{
position: relative;
height: 35px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 53px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .button:hover
{
background-color: #9999FF;
}
.top .leftbuttonbox .largebutton
{
position: relative;
height: 75px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 133px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.top .bottombar .button
{
position: relative;
float: left;
height: 100%;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .button:hover
{
background-color: #9999FF;
}
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top:hover .bottombar:hover .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar .label
{
position: relative;
float: left;
height: 100%;
min-width: 50px;
font-size: 22px;
letter-spacing: 1px;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
background-color: #CC99CC;
margin-left: 5px;
cursor: default;
}
.top .cap
{
position: absolute;
height: 25px;
width: 20px;
right: 0px;
bottom: 0px;
padding-left: 5px;
padding-right: 5px;
background-color: black;
cursor: default;
}
.top .cap .capinner
{
position: relative;
height: 100%;
width: 100%;
background-color: #6666FF;
cursor: default;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
}
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)
I suggest this solution:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
This worked for me when I tried it with your full code.
Hope it works for you :)
Amit
The key concept of styling a link stands toward following steps:
You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
Eventhough you don't need styling one or more of conditions, nevertheless, style them all.
If you pay attention to these, you may have perfectly styled links.
I hope it helps.
I am trying to hide one DOM element with CSS (by hovering on its sibling) but it is not working correctly.
In the .cta_call class I have hover effect to change the background-colorbut it is needed to hide the element .cta_telf when the user does that interaction.
Here one example:
.cta {
width: auto;
padding: 0px;
margin: -30px 0px 0px 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf{
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color:red;
position: sticky;
text-align: center;
}
.cta_call{
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf{
visibility: hidden
}
<p class="cta_telf">xxxxxx</p>
<p class="cta_call">¿HABLAMOS?</p>
Any clue what am I doing wrong?
Thank you.
The ~ selector targets subsequent siblings in the markup. You cannot target an element's previous sibling with CSS, see this answer.
However, you could change the order of the markup and then use position, float, display:grid, or similar to move them visually.
An example using position:absolute:
.cta {
position:relative;
padding-top:1em; /* Space for absolute .cta_telf */
}
.cta_telf {
position:absolute;
top:0;
left:0;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
font-size: 12px;
color:red;
text-align: center;
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
}
.cta_call:hover {
background-color: red;
color:white
}
.cta_call:hover ~ .cta_telf {
visibility: hidden;
}
<div class="cta">
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
As you know now, ~ will only target sibling elements after the current one in the HTML flow.
There is no CSS selector to target an element's previous sibling.
Anyway, I suggest you to reorder your elements in the HTML, and use display: flex.
That way, you can use the order property to achieve what you want.
(The order property make it crystal clear to understand!)
Working snippet:
.cta {
display: flex; /* Added */
flex-direction: column; /* Added */
width: auto;
padding: 0px;
top: 0px;
text-align: center;
height: 70px;
}
.cta_telf {
margin: 0px 0px 0px 22px;
padding: 0px;
width: 75px;
background-color: white;
z-index: 1984;
margin-bottom: -5px;
font-size: 12px;
color: red;
position: sticky;
text-align: center;
order: 1; /* Added */
}
.cta_call {
border: solid 2px red;
border-radius: 50px;
padding: 8px 15px 8px 15px;
height: 35px;
z-index: 1985;
order: 2; /* Added */
}
.cta_call:hover {
background-color: red;
color: white
}
.cta_call:hover~.cta_telf {
visibility: hidden
}
<div class="cta"><!-- Added -->
<!-- Changed order below -->
<p class="cta_call">¿HABLAMOS?</p>
<p class="cta_telf">xxxxxx</p>
</div>
Hope it helps.