I'm using a Raspberry Pi and Screenly-OSE as a Digital Signage solution for our pharmacy. I display various ads along with the overnights. I'm using a very simple Sinatra application to to serve overnights. Works great except from a small detail which bugs me a lot, there's a white space available there: see picture .
I'm using the following very simple css file:
body {
/* background-color: #246013; */
background-image:url('moon.jpg');
color: white;
text-align: center;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#wrapper{
width:1200px;
margin:0 auto;
text-align: center;
}
#content{
text-align: center;
margin:auto;
}
#footer{
text-align: center;
padding-top: 30px;
color: #D6D6D6;
font: 14px "Courier New", Courier, mono;
}
h1 {
font-size: 80px;
padding-top: 10px;
font-weight: bold;
text-align: center;
}
h2 {
text-align: center;
font-size: 60px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 32px;
padding-top: 10px;
padding-bottom: 3px;
font-weight: bold;
}
h4 {
text-align: left;
font-size: 25px;
padding-top: 5px;
padding-bottom: 3px;
text-decoration: underline;
}
h5 {
text-align: left;
font-size: 23px;
padding-top: 5px;
padding-bottom: 3px;
font-weight: bold;
}
I wonder if there's a way to get full-screen background cover. The background picture cover goes along with the text, some days overdays are displayed and if the overdays are 5 or 6 the entire screen is covered.
I know I can simulate this behavior by adding br/ and/or counting the text lines displayed. But I wonder if there's any other other, more natural way of achieving this.
Thanks
Make sure setting both html and body to 100% height to make them cover it all.
html, body {
height: 100%;
}
Related
I'm trying to add a badge after the h1 on this page: http://69.175.87.138/~plnew/portfolio-item/verde-rosa/ Unfortunately it is not lining up with the h1. I have tried a number of things to get it to display correctly: negative margins, different display: values, different line-heights, etc. Nothing seems to be working so I thought I would ask here.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display",sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family:"freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content:"Marble";
}
<h1 class="entry-title">Verde Rosa</h1>
JSFiddle
Try adding vertical-align: middle to the :after pseudo-element.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display", sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
<h1 class="entry-title">Verde Rosa</h1>
Not sure if this is what you were looking for based on the short description, but have you tried vertical-align?
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
Text within a button is breaking up in two lines in Safari - but not in Chrome and Firefox, see the screenshots. Using the CSS property break-word: keep-all; doesn't seem to work.
Any suggestions how to solve this?
not good:
good:
CSS code:
.button {
font-size: 1.5em;
padding: 0em 0.6em 0.1em 0.6em;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 24px;
width: auto;
text-decoration:none;
display: inline-block;
border: none;
border-radius: 1em;
background-color: #4ca8da;
background-repeat: no-repeat;
font-family: 'Populaire';
font-weight: normal;
font-style: normal;
color: white;
text-align: left; }
white-space: nowrap; should fix it.
Further information.
My website will not center no matter what I do to it. I have tried
margin: auto 0;
I have tried
margin-left: 50%;
margin-right: 50%;
and the most success I have had is getting the entire website aligned to the right, which is not quite what I was shooting for.
Here's the CSS that controls the alignment of the site, as well as other details. If you could hep me I'd greatly appreciate it.
#Content {
width: 1200px;
height: 850px;
padding: 5px;
margin-left: 50%;
margin-right: 50%;
background-color: #006600;
font-size: 12px;
font-color: #000;
text-align: center;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
Andrew is right, it should be:
margin:0 auto;
This is expressing margins in shorthand format. When only 2 values are given, it is interpreted as:
margin: (top and bottom value), (left and right value);
So
margin: 1px 2px;
means
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
margin-right: 2px;
More info here
margin:auto; works fine. here check the demo.
Fiddle
Full Screen Demo
just replace
margin-left: 50%;
margin-right: 50%;
with
margin:auto;
Full CSS
#Content {
background-color: #006600;
margin:auto;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-color: #000;
width: 1200px;
height: 850px;
}
This is my first post here (I'm very new to all this), but I hope I'm asking it correctly.
I'm creating a webpage for my Master's thesis, and I need to have three parallel columns of text that will scroll independently of each other, much like this template
I cannot seem to get the CSS from this template to work on my website, and I'm wondering what I'm doing wrong, or if there is a better way to achieve this effect.
Thanks so much for you help!
Here's my CSS for my website
body {
padding:0;
width:100%;
height: 100%;
max-height: 100%;
overflow; hidden;
margin: 0;
border: 0;
background:#FFFFFF;
}
#title {
margin-bottom: 5px;
background: #fff;
width:100%
z-index: 20;
width: 100%;
padding-top: 30px;
}
#title h1 {
font-family: Sorts Mill Goudy, Garamound, serif;
font-size: 50px;
text-align: center;
font-weight: 100;
color: 696969;
line-height: 1px;
letter-spacing: 10px;
margin-top: 20px;
}
#title h2 {
font-size: 16px;
font-family: Sorts Mill Goudy, serif;
text-align: center;
font-weight: 100;
color: #999;
line-height: 20px;
letter-spacing: 0px;
}
#title ul {text-align:center;
padding-left, padding-right: 10px;
padding-top: 30px;
}
#title ul li {
display:inline;
font-family: "gill sans mt", "sans-serif";
text-align: center;
list-style:none;
margin-left:0px;
padding-left: 30px;
padding-right: 30px;
}
#title p{
font-family: Sorts Mill Goudy Italic, Garamound, serif;
size: 14px;
font-weight: 300;
background: #eee;
padding: 10px;
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
margin-bottom: 15px;
text-decoration: none;
color: #000;
}
#title a {
color:#000;
text-decoration: none;
text-decoration: underline;
}
#title a:hover {
color: #A9A9A9;
text-decoration: underline;
}
/* column settings */
#allcol {
position: relative;
}
#allcol h4{
text-align: center;
}
#col1 {
font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
margin-left: 0px;
width:30%;
overflow: scroll;
}
#col2 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
background: #fff;
float:left;
padding-bottom:10px;
padding-top: 10px;
padding-left:1.5%;
padding-right:1.5%;
width:30%;
overflow: scroll;
}
#col3 { font-family: Sorts Mill Goudy, Garamound, serif;
text-align: left;
float:left;
background:#DCDCDC;
padding-left:1.5%;
padding-right:1.5%;
padding-bottom:10px;
padding-top: 10px;
width:30%;
overflow: scroll;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
http://jsfiddle.net/78PrJ/
Here is a working example. As mentioned, you'll have to set the div height.
Add this CSS: #col1, #col2, #col3{ height: 500px; } You're already using overflow: scroll, so the scrollbars will appear,
overflow:scroll only works if the height is specified in px. If you specify the height in %age it won't work.
I want to duplicate the style of buttons on this page http://oakespavers.com/ (left-hand side) with the same hover effect. Every time I try, only the text in the boxes are affected. I want the entire div to change colors on mouseover and keep the code really simple.
This might do it:
HTML:
Home
Our Blog
Contact US
CSS:
a {
border-radius: 5px;
font-weight: 600;
text-align: left;
font-family: "Verdana", "Geneva", "sans-serif";
text-transform: none;
letter-spacing: 0px;
font-weight: bold;
font-size: 12px;
display: block;
padding: 10px 20px;
color: #666;
background-color: #E1E1E1;
text-decoration: none;
width: 225px;
margin: 5px;
}
a:hover {
color: white;
background-color: #75D039;
}
Here's a fiddle with an example