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;
Related
I'm using box-shadow to create internal "border" on left and right. It works great in Chrome or Edge but in Firefox it creates "bottom border" as well. I tried prefixing with -moz- and -webkit- but unsuccessfully.
I don't know how to simulate it in chrome so please run the code in Firefox to see what I am talking about.
Also, it sometimes glitches when zooming in or out in the browser (But zooming in or out in Firefox didn't fix it)
div{
width: 150px;
height: 200px;
box-sizing: border-box;
margin: 0 auto;
background: #001f49;
display: grid;
grid-template-rows: 77% 23%;
align-items: center
}
h1{
color: white;
text-align: center;
text-transform: uppercase;
font-size:18px;
}
span{
background: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
-moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
-webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
}
span::before{
background: inherit;
top: -22px;
content: '';
display: block;
height: 22px;
left: 0;
position: absolute;
right: 0;
transform: skewY(352deg);
transform-origin: 100%;
box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
-moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
-webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
}
a{
color: #ed174a;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
<div>
<h1>
Change
</h1>
<span>Pricelist</span>
</div>
I would do the whole thing differently using background and less of code:
div {
width: 150px;
height: 200px;
margin: 0 auto;
border:1px solid #001f49;
background: linear-gradient(-13deg,#0000 33%,#001f49 34%);
display: grid;
grid-template-rows: 77% 1fr;
align-items: center;
text-align: center;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 18px;
}
a {
color: #ed174a;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
<div>
<h1>
Change
</h1>
<span>Pricelist</span>
</div>
I want to add shadow to my clip-path, but if I wrap it it will disappear.
Here is the result I want (must the shadow to the clip-path):
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: inherit;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset"></span>
</div>
Here is the result when I try to add the shadow why it disappears?:
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: inherit;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset-wrap">
<span class="inset"></span>
</span>
</div>
.question-card {
background-color: silver;
border-radius: 0.25em;
height: 100px;
width: 200px;
-webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}
.inset {
height: 40px;
width: 20px;
background-color: silver;
position: absolute;
top: 40px;
left: 208px;
clip-path: inset(0 0 0 0);
border-radius: 0 0.25em 0.25em 0;
}
.inset-wrap {
filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}
<div class="question-card">
<span class="inset-wrap">
<span class="inset"></span>
</span>
</div>
I need to make this clock responsive when i change screen resolution meaning put the clockwise in the middle of the clock and not moving during rotation
.clock{ width: 500px;
height: 500px;
border-radius:100%;
margin: auto;
background:#333 ;
border:22px solid rgb(41, 25, 25) ;
position:relative;
box-shadow:0 5px 0 0 rgba(0, 0, 0, .3),inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour{
position: absolute;
top: 87px;
left: 822.5px;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes{
position: absolute;
top: 115px;
left: 822.5px;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
<div class="clock"></div>
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>
Try this code
.clock {
width: 500px;
height: 500px;
border-radius: 100%;
margin: auto;
background: #333;
border: 22px solid rgb(41, 25, 25);
position: relative;
box-shadow: 0 5px 0 0 rgba(0, 0, 0, .3), inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour {
position: absolute;
top: 87px;
left: 50%;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes {
position: absolute;
top: 41px;
left: 46%;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(00deg);
transform-origin: bottom;
}
<div class="clock">
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>
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)
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