i try to make a kind of banner with css. the div contain two images and a bit text splittet into two lines.
it looks good on my display but if i load the side on an other display with a smaller resolution and/or 4:3 the whole container is "falling appart" :(
i have tried different methodes but nothing seems to work. may be some of you can point me in the right direction :)
here is the css and html:
CSS:
#head_box_banner {
position: absolute;
height: 150px;
width: auto;
right: 13px;
left: 13px;
top: 4px;
background-color: #DBDBDB;
border-radius:3px;
}
.logo1 {
margin-top: 19px;
margin-left: 139px;
}
.logo2 {
margin-top: -112px;
margin-left: 1380px;
}
.text_banner_1 {
margin-top: -125px;
margin-left: 426px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.text_banner_2 {
margin-top: 12px;
margin-left: 668px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
HTML:
<div id="head_box_banner">
<div class="logo1"><img src="png/logol.png" width="110" height="112" /></div>
<div class="text_banner_1">Förderverein Grundschule</div>
<div class="text_banner_2">Hindeburgstrasse e.V.</div>
<div class="logo2"><img src="png/logor.png" width="110" height="112" /></div>
If you want to use a banner for all browsers and resolutions, you should use percentages instead pixels... for example :
#head_box_banner {
position: absolute;
height: yourheight%;
width: auto;
Note that you are using percentages for height and width only for the banner, not for the pictures.
PS: Try to play with height percentages to see how many percents are the best option for you.
I had a quick go here's what I think you were going for
<!DOCTYPE html>
<html>
<head>
<style>
#head_box_banner {
position: absolute;
height: 150px;
width: auto;
right: 13px;
left: 13px;
top: 4px;
background-color: #DBDBDB;
border-radius:3px;
min-width: 900px;
}
.logo1 {
float: left;
margin-top: 19px;
margin-left: 19px;
}
.logo2 {
margin-top:19px;
float:right;
margin-right: 19px;
}
.text_banner_1 {
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.title_container{
text-align:center;
margin-top:10px;
}
.text_banner_2 {
margin-top: 12px;
margin-left: 250px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<body>
<div id="head_box_banner">
<div class="logo1"><img src="png/logol.png" width="110" height="112" /></div>
<div class="logo2"><img src="png/logor.png" width="110" height="112" /></div>
<div class="title_container">
<div class="text_banner_1">Förderverein Grundschule</div>
<div class="text_banner_2">Hindeburgstrasse e.V.</div>
</div>
</body>
</html>
Here's what I did. First, I used floats for the pictures instead of specifying exactly where they're meant to be in pixels. This means they will 'float' to the right or left of the browser no matter the resolution or browser size and the margin is only used to specify the distance between them and the div containing them.
Next I moved the writing into its own div and text-aligned it center. This keeps the text in the center of the browser so you don't need to specify where the center is in pixels (as a rule you only want to specify a location in pixels if you know 100% how big the div containing it will be. In this case the browser window can be shrunk or the resolution can be changed which causes all the glitches you're seeing)
Finally I gave head_box_banner a min width of 900px. Even my fabulous changes will muck up when the window gets too small so to avoid that happening I've made sure the header will never be smaller than 900px. If it is, the user will have to scroll right to see the whole header. FYI there are better solutions to this (look up responsive design)
Related
Having a few issues with a CSS Button effects not working across browsers.
It displays as I would like it in Chrome, but not Firefox.
Can't seem to find the root of the problem. Here is what I have.
Fiddle
a.soft {
display: inline-block;
font-family: 'Varela Round', sans-serif;
padding: 2rem 3rem;
font-size: 1.25vw;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
border-radius: 50px;
transform: box-shadow 1s ease-in-out;
background-color: #666666;
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(245, 245, 245, 1.0) 2px 2px 5px;
font-weight: bolder;
}
a.soft:hover {
background-color: #ddd;
box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB;
color: #888;
}
a.soft:active {
box-shadow: 0 0 20px 0 #E6E6E6, 0 0 20px 0 #ABABAB, inset 0 0 20px 0 #E6E6E6, inset 0 0 20px 0 #ABABAB;
color: #D8D8D8;
text-shadow: 1px 1px 2px white;
-webkit-background-clip: text;
font-weight: bolder;
}
<a class="soft">Button</a>
I managed to find a firefox specific rule which corrected everything.
#-moz-document url-prefix() {
a.soft {
background-color: #ddd;
box-shadow: -10px -10px 20px 0 #E6E6E6,
10px 10px 20px 0 #ABABAB,
inset 10px 10px 20px 0 #E6E6E6,
inset -10px -10px 20px 0 #ABABAB;
color: #888;
}
}
This is working fine with chrome,but box shadow not taking in Mozilla even after adding the browser prefix
h1 {
color: #fff;
font-size: 50px;
background: #101010;
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
-ms-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
padding: 0;
line-height: 1.4!important;
display: inline!important;
text-align: justify;
letter-spacing: 4px;
}
<h1>THE <br> SILK <br> ROAD</h1>
Try with box-decoration-break and padding CSS properties. It would be almost helpful to make this effect in a single sentence break.
h1 {
color: #fff;
font-size: 50px;
background: #101010;
line-height: 1.4 !important;
display: inline !important;
text-align: justify;
letter-spacing: 4px;
padding: 0 15px 0 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1>THE <br> SILK <br> ROAD</h1>
try this -
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
instead of -
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 pink;
box-shadow: 15px 0 #0e0303, -15px 0 pink;
You don't need to use box-shadow to have the background color on the text only.
Instead, you can try this:
.background-on-text{
background-color: #1b0f0f;
color: #fff;
line-height: 1.4;
padding: 0 15px;
letter-spacing: 4px;
font-size: 50px;
}
<h1><span class="background-on-text">THE <br> SILK <br> ROAD</span></h1>
I hope it helps.
You are using black color everywhere so you cannot see the effect of the box-shadow. Try this code, it will run in mozilla as well as in the chrome browser.
h1 {
color: #fff;
font-size: 50px;
background: red;
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-ms-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 pink;
box-shadow: 15px 0 #0e0303, -15px 0 pink;
padding: 0;
line-height: 1.4!important;
display: inline!important;
text-align: justify;
letter-spacing: 4px;
}
<h1>THE <br> SILK <br> ROAD</h1>
i'm not even sure why this is happening, Its a Css error but im not sure where
I'm doing this in rails so im relatively new to this but it should be standard css!
As you can see the element "ticket" is hidden behind the cards (not sure why), I'm wanting the ticket above the images so it can be editable!
Here is the code
Css
// Place all the styles related to the view controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.box{
position: absolute;
top: calc(50% - 125px);
top: -webkit-calc(50% - 125px);
left: calc(50% - 300px);
left: -webkit-calc(50% - 300px);
}
.ticket{
width: 600px;
height: 250px;
background: #FFB300;
border-radius: 3px;
box-shadow: 0 0 100px #aaa;
border-top: 1px solid #E89F3D;
border-bottom: 1px solid #E89F3D;
}
.left{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0px;
left: -5px;
}
.left li{
width: 0px;
height: 0px;
}
.left li:nth-child(-n+2){
margin-top: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #FFB300;
}
.left li:nth-child(3),
.left li:nth-child(6){
margin-top: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #EEEEEE;
}
.left li:nth-child(4){
margin-top: 8px;
margin-left: 2px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #EEEEEE;
}
.left li:nth-child(5){
margin-top: 8px;
margin-left: -1px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #EEEEEE;
}
.left li:nth-child(7),
.left li:nth-child(9),
.left li:nth-child(11),
.left li:nth-child(12){
margin-top: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #E5E5E5;
}
.left li:nth-child(8){
margin-top: 7px;
margin-left: 2px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #E5E5E5;
}
.left li:nth-child(10){
margin-top: 7px;
margin-left: 1px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #E5E5E5;
}
.left li:nth-child(13){
margin-top: 7px;
margin-left: 2px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #FFB300;
}
.left li:nth-child(14){
margin-top: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #FFB300;
}
.right{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0px;
right: -5px;
}
.right li:nth-child(-n+2){
margin-top: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #FFB300;
}
.right li:nth-child(3),
.right li:nth-child(4),
.right li:nth-child(6){
margin-top: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #EEEEEE;
}
.right li:nth-child(5){
margin-top: 8px;
margin-left: -2px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #EEEEEE;
}
.right li:nth-child(8),
.right li:nth-child(9),
.right li:nth-child(11){
margin-top: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #E5E5E5;
}
.right li:nth-child(7){
margin-top: 7px;
margin-left: -3px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #E5E5E5;
}
.right li:nth-child(10){
margin-top: 7px;
margin-left: -2px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #E5E5E5;
}
.right li:nth-child(12){
margin-top: 7px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #E5E5E5;
}
.right li:nth-child(13),
.right li:nth-child(14){
margin-top: 7px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #FFB300;
}
.ticket:after{
content: '';
position: absolute;
right: 200px;
top: 0px;
width: 2px;
height: 250px;
box-shadow: inset 0 0 0 #FFB300,
inset 0 -10px 0 #B56E0A,
inset 0 -20px 0 #FFB300,
inset 0 -30px 0 #B56E0A,
inset 0 -40px 0 #FFB300,
inset 0 -50px 0 #999999,
inset 0 -60px 0 #E5E5E5,
inset 0 -70px 0 #999999,
inset 0 -80px 0 #E5E5E5,
inset 0 -90px 0 #999999,
inset 0 -100px 0 #E5E5E5,
inset 0 -110px 0 #999999,
inset 0 -120px 0 #E5E5E5,
inset 0 -130px 0 #999999,
inset 0 -140px 0 #E5E5E5,
inset 0 -150px 0 #B0B0B0,
inset 0 -160px 0 #EEEEEE,
inset 0 -170px 0 #B0B0B0,
inset 0 -180px 0 #EEEEEE,
inset 0 -190px 0 #B0B0B0,
inset 0 -200px 0 #EEEEEE,
inset 0 -210px 0 #B0B0B0,
inset 0 -220px 0 #FFB300,
inset 0 -230px 0 #B56E0A,
inset 0 -240px 0 #FFB300,
inset 0 -250px 0 #B56E0A;
}
.ticket:before{
content: '';
position: absolute;
z-index: 5;
right: 199px;
top: 0px;
width: 1px;
height: 250px;
box-shadow: inset 0 0 0 #FFB300,
inset 0 -10px 0 #F4D483,
inset 0 -20px 0 #FFB300,
inset 0 -30px 0 #F4D483,
inset 0 -40px 0 #FFB300,
inset 0 -50px 0 #FFFFFF,
inset 0 -60px 0 #E5E5E5,
inset 0 -70px 0 #FFFFFF,
inset 0 -80px 0 #E5E5E5,
inset 0 -90px 0 #FFFFFF,
inset 0 -100px 0 #E5E5E5,
inset 0 -110px 0 #FFFFFF,
inset 0 -120px 0 #E5E5E5,
inset 0 -130px 0 #FFFFFF,
inset 0 -140px 0 #E5E5E5,
inset 0 -150px 0 #FFFFFF,
inset 0 -160px 0 #EEEEEE,
inset 0 -170px 0 #FFFFFF,
inset 0 -180px 0 #EEEEEE,
inset 0 -190px 0 #FFFFFF,
inset 0 -200px 0 #EEEEEE,
inset 0 -210px 0 #FFFFFF,
inset 0 -220px 0 #FFB300,
inset 0 -230px 0 #F4D483,
inset 0 -240px 0 #FFB300,
inset 0 -250px 0 #F4D483;
}
.content{
position: absolute;
top: 40px;
width: 100%;
height: 170px;
background: #eee;
}
.airline{
position: absolute;
top: 10px;
left: 10px;
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: rgba(0,0,102,1);
}
.boarding{
position: absolute;
top: 10px;
right: 220px;
font-family: Arial;
font-size: 18px;
color: rgba(255,255,255,0.6);
}
.jfk{
position: absolute;
top: 10px;
left: 20px;
font-family: Arial;
font-size: 38px;
color: #222;
}
.sfo{
position: absolute;
top: 10px;
left: 180px;
font-family: Arial;
font-size: 38px;
color: #222;
}
.plane{
position: absolute;
left: 105px;
top: 0px;
}
.sub-content{
background: #e5e5e5;
width: 100%;
height: 100px;
position: absolute;
top: 70px;
}
.watermark{
position: absolute;
left: 5px;
top: -10px;
font-family: Arial;
font-size: 110px;
font-weight: bold;
color: rgba(255,255,255,0.2);
}
.name{
position: absolute;
top: 10px;
left: 10px;
font-family: Arial Narrow, Arial;
font-weight: bold;
font-size: 14px;
color: #999;
}
.name span{
color: #555;
font-size: 17px;
}
.flight{
position: absolute;
top: 10px;
left: 180px;
font-family: Arial Narrow, Arial;
font-weight: bold;
font-size: 14px;
color: #999;
}
.flight span{
color: #555;
font-size: 17px;
}
.gate{
position: absolute;
top: 10px;
left: 280px;
font-family: Arial Narrow, Arial;
font-weight: bold;
font-size: 14px;
color: #999;
}
.gate span{
color: #555;
font-size: 17px;
}
.seat{
position: absolute;
top: 10px;
left: 350px;
font-family: Arial Narrow, Arial;
font-weight: bold;
font-size: 14px;
color: #999;
}
.seat span{
color: #555;
font-size: 17px;
}
.boardingtime{
position: absolute;
top: 60px;
left: 10px;
font-family: Arial Narrow, Arial;
font-weight: bold;
font-size: 14px;
color: #999;
}
.boardingtime span{
color: #555;
font-size: 17px;
}
.barcode{
position: absolute;
left: 8px;
bottom: 6px;
height: 30px;
width: 90px;
background: #222;
box-shadow: inset 0 1px 0 #FFB300, inset -2px 0 0 #FFB300,
inset -4px 0 0 #222,
inset -5px 0 0 #FFB300,
inset -6px 0 0 #222,
inset -9px 0 0 #FFB300,
inset -12px 0 0 #222,
inset -13px 0 0 #FFB300,
inset -14px 0 0 #222,
inset -15px 0 0 #FFB300,
inset -16px 0 0 #222,
inset -17px 0 0 #FFB300,
inset -19px 0 0 #222,
inset -20px 0 0 #FFB300,
inset -23px 0 0 #222,
inset -25px 0 0 #FFB300,
inset -26px 0 0 #222,
inset -26px 0 0 #FFB300,
inset -27px 0 0 #222,
inset -30px 0 0 #FFB300,
inset -31px 0 0 #222,
inset -33px 0 0 #FFB300,
inset -35px 0 0 #222,
inset -37px 0 0 #FFB300,
inset -40px 0 0 #222,
inset -43px 0 0 #FFB300,
inset -44px 0 0 #222,
inset -45px 0 0 #FFB300,
inset -46px 0 0 #222,
inset -48px 0 0 #FFB300,
inset -49px 0 0 #222,
inset -50px 0 0 #FFB300,
inset -52px 0 0 #222,
inset -54px 0 0 #FFB300,
inset -55px 0 0 #222,
inset -57px 0 0 #FFB300,
inset -59px 0 0 #222,
inset -61px 0 0 #FFB300,
inset -64px 0 0 #222,
inset -66px 0 0 #FFB300,
inset -67px 0 0 #222,
inset -68px 0 0 #FFB300,
inset -69px 0 0 #222,
inset -71px 0 0 #FFB300,
inset -72px 0 0 #222,
inset -73px 0 0 #FFB300,
inset -75px 0 0 #222,
inset -77px 0 0 #FFB300,
inset -80px 0 0 #222,
inset -82px 0 0 #FFB300,
inset -83px 0 0 #222,
inset -84px 0 0 #FFB300,
inset -86px 0 0 #222,
inset -88px 0 0 #FFB300,
inset -89px 0 0 #222,
inset -90px 0 0 #FFB300;
}
.slip{
left: 455px;
}
.nameslip{
top: 60px;
left: 410px;
}
.flightslip{
left: 410px;
}
.seatslip{
left: 540px;
}
.jfkslip{
font-size: 30px;
top: 20px;
left: 410px;
}
.sfoslip{
font-size: 30px;
top: 20px;
left: 530px;
}
.planeslip{
top: 10px;
left: 475px;
}
.airlineslip{
left: 455px;
}
Html
<% title("Home Page") %>
<h1><i class="fa fa-home"></i> Home Page <small>views/pages/home.html.erb</small></h1>
<div class="section" style="background-image: url('https://c2.staticflickr.com/2/1334/1484360775_8391c2ce1a_b.jpg')">
<div class="container" style="color: white">
<div class="box">
<ul class="left">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="ticket">
<span class="airline">Lufthansa</span>
<span class="airline airlineslip">Lufthansa</span>
<span class="boarding">Boarding pass</span>
<div class="content">
<span class="jfk">JFK</span>
<span class="plane"><?xml version="1.0" ?><svg clip-rule="evenodd" fill-rule="evenodd" height="60" width="60" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><g stroke="#222"><line fill="none" stroke-linecap="round" stroke-width="30" x1="300" x2="55" y1="390" y2="390"/><path d="M98 325c-9 10 10 16 25 6l311-156c24-17 35-25 42-50 2-15-46-11-78-7-15 1-34 10-42 16l-56 35 1-1-169-31c-14-3-24-5-37-1-10 5-18 10-27 18l122 72c4 3 5 7 1 9l-44 27-75-15c-10-2-18-4-28 0-8 4-14 9-20 15l74 63z" fill="#222" stroke-linejoin="round" stroke-width="10"/></g></svg></span>
<span class="sfo">SFO</span>
<span class="jfk jfkslip">JFK</span>
<span class="plane planeslip"><?xml version="1.0" ?><svg clip-rule="evenodd" fill-rule="evenodd" height="50" width="50" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><g stroke="#222"><line fill="none" stroke-linecap="round" stroke-width="30" x1="300" x2="55" y1="390" y2="390"/><path d="M98 325c-9 10 10 16 25 6l311-156c24-17 35-25 42-50 2-15-46-11-78-7-15 1-34 10-42 16l-56 35 1-1-169-31c-14-3-24-5-37-1-10 5-18 10-27 18l122 72c4 3 5 7 1 9l-44 27-75-15c-10-2-18-4-28 0-8 4-14 9-20 15l74 63z" fill="#222" stroke-linejoin="round" stroke-width="10"/></g></svg></span>
<span class="sfo sfoslip">SFO</span>
<div class="sub-content">
<span class="watermark">Lufthansa</span>
<span class="name">PASSENGER NAME<br><span>Rex, Anonasaurus</span></span>
<span class="flight">FLIGHT N°<br><span>X3-65C3</span></span>
<span class="gate">GATE<br><span>11B</span></span>
<span class="seat">SEAT<br><span>45A</span></span>
<span class="boardingtime">BOARDING TIME<br><span>8:25PM ON AUGUST 2013</span></span>
<span class="flight flightslip">FLIGHT N°<br><span>X3-65C3</span></span>
<span class="seat seatslip">SEAT<br><span>45A</span></span>
<span class="name nameslip">PASSENGER NAME<br><span>Rex, Anonasaurus</span></span>
</div>
</div>
<div class="barcode"></div>
<div class="barcode slip"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="http://admitme.co.uk/img/Artisit%20Images/CalvinHarris.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="http://admitme.co.uk/img/Artisit%20Images/CalvinHarris.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="http://admitme.co.uk/img/Artisit%20Images/CalvinHarris.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
Fiddle
Your cards are in a .row div following the ticket. Elements further down in the DOM have a higher z position than the elements above them in the DOM and appear "in front" of them. To alter the normal hierarchy use the z-index property.
.row {
z-index: 1;
}
You could also reverse the hierarchy of your HTML so that the ticket is after the .row. This would work because your natural hierarchy now places the ticket above .row.
To force the ticket element to go to bottom of the previous element (new line) , try adding to .ticket css:
display: list-item;
I am trying to put animated button on my Page but when i open it through IE 8 its not working.Its working in Crome.Below is the piece of code:
JSP Page:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="mystyle.css" rel="stylesheet">
<title>JSP Page</title>
</head>
<body>
<button class="depth" type="button">✔</button>
<button class="stat" type="button">✔</button>
</body>
</html>
Css File(mystyle.css) :
html {
-webkit-tap-highlight-color: hsla(0,0,0,0);
tap-highlight-color: hsla(0,0,0,0);
}
body {
background-color: #363636;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)),
linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
background-position:0 0, 2px 2px;
background-size:4px 4px;
padding: 100px;
}
button.depth {
left: 20%;
margin: -40px;
position: absolute;
top: 20%;
}
button.stat {
left: 40%;
margin: -40px;
position: absolute;
top: 40%;
}
button:hover,
button:active {
outline: 0;
}
/* 3D Button */
button {
background: #444;
border: none;
border-radius: 80px;
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 8px hsla(0,0%,0%,.5),
inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
inset 0 1px 1px 8px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 10px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
color: #303030;
cursor: pointer;
font: bold 40px/85px sans-serif;
height: 80px;
padding: 0;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
width: 80px;
}
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
}
button:active {
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 7px hsla(0,0%,0%,.5),
inset 0 5px 15px 7px hsla(0,0%,0%,.15),
inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
inset 0 1px 1px 7px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.1),
inset 0 30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 5px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
line-height: 86px;
}
Please suggest me some method to overcome this issue
In this case CSS3 PIE maybe helpful. as most of CSS3 properties are not supported below IE9
Please find useful link
http://css3pie.com/documentation/getting-started/
in CSS wherever there is CSS3 incompatible property in IE8 you need to add style as
behavior: url(PIE.htc /*path to htc file*/);
example
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
behavior: url(PIE.htc);
}
sidenote: its recommended that .htc file should be use only for degraded browsers and not for modern browsers you may use conditional comment in this case
Hope this helps!
I have the following button HTML code:
<button class="button" style="width: 95%;">PHYSICIANS</button>
It is customized by CSS3 here:
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
Which displays the following button:
How can I modify the above code, so I can add a thumbnail image to it. Something like this:
The default image size is 260X190 but I want to size it up so it fits inside the button.
You can use the pseudo-element :before to do this.
See this working demo I made: http://jsfiddle.net/A7UsX/1/
button:before {
content: " ";
display: inline-block;
background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
height: 30px;
width: 50px;
}
I have made a red background to show you what I did. Change the background to the image you would like and change the height and width to your likings.
you could use :before pseudo element.
button:before{content: ' '; display:inline-block; position:absolute; content:url(http://lorempixel.com/25/25); }
I'll suggest you to use a SVG image rather than using jpg or png format. so in this case you can call the image using background-image and give a positioning too.
button:before { content:''; display:inline-block; height:1em; width:1em;
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat; }
here you can check the working Demo. http://jsbin.com/damujidi/1/edit
You can add a <i> as commonly used in bootstrap [ref1] [ref2].
<button class="button">
<i class="btnbg"></i>PHYSICIANS
</button>
CSS:
.btnbg {
background-image: url('http://i.stack.imgur.com/QgIOj.png');
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 35px;
line-height: 35px;
vertical-align: middle;
width: 70px;
}
.button {
line-height: 35px;
vertical-align: middle;
}
see jsFiddle