I have my progresbar written in css and line between first and second circle hovers a little the number "2". The lines beetwen circles are pseudelements.
This is the styles i used:
/* progressbar */
.progressbar {
width: 100%;
counter-reset: step;
margin-top: 7px;
padding: 0;
}
.progressbar li {
list-style-type: none;
float: left;
width: 100px;
position: relative;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: normal;
color: #546A79;
/* Steps*/
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 44px;
height: 44px;
line-height: 44px;
/* border: 4px solid #fff; */
display: block;
text-align: center;
margin: 0 auto 13px auto;
border-radius: 50%;
background-color: #E3E3E3;
/* Circles*/
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #E3E3E3;
/*lines */
top: 20px;
left: -50%;
z-index: 0;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: #546A79;
}
.progressbar li.active:before {
width: 48px;
height: 48px;
line-height: 48px;
border-radius: 50%;
border-color: #0073CF;
color: black;
background-color: #ffda47;
margin: 0 auto 9px auto;
}
.progressbar li.active + li.active:after {
background-color: #ffda47;
}
Here's jsfiddle of the problem:
http://jsfiddle.net/1aeur58f/523/
.progressbar li {
list-style-type: none;
float: left;
width: 100px;
position: relative;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: normal;
color: #546A79;
z-index:1;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #E3E3E3;
/*lines */
top: 20px;
left: -50%;
/*z-index: 0;*/
z-index: -1;
}
for ".progressbar li:after" now its z-index:-1; make this z-index:-1;
and z-index:1; for ".progressbar li" your ul item.
Related
I'm using some code found at codepen with a Stepper Control. I'm not vey skilled with CSS and I'm having an issue not presented in codepen, so I assume is another CSS class defined in a very long stylesheet that is shared with other team mates. The problem I tried to fix is that the line defined in the class .progressbar li:after remains above the class .progressbar li:before, that defines the circles.
li:after initially came with a z-index: -1 and li:before didn't have the z-index property, but the lines didn't appear, they were hidden behind a div, so I had to modify it and that's what is shown in the snippet. Although this z-index: -1 works in the snippet, is not working where I want to be implemented.
This first image shows the result of the CSS Stepper, taken directly from codepen to my page with z-index:-1
This other image shows the result after trying to adjust the z-index property:
This is the desired output:
Here's the snippet:
.container {
width: 600px;
margin: 100px auto;
z-index: -1;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: 1;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 999999;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li >aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
¿Could I get some help to solve this problem, or where could I start looking?
I think it's all said, but please, if I left something, I'll try to complete the post.
Thanks in advance,
You just need to reduce the z-index of .progressbar li:after like this (no other changes required):
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: -999999;
}
You can see it working below:
.container {
width: 600px;
margin: 100px auto;
z-index: -1;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: -999999;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 999999;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li>aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
You must give the element a position-value in order to use z-index. Just apply position: relative; to the .progressbar li:before-element:
.container {
width: 600px;
margin: 100px auto;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
position: relative;
z-index: 1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li>aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
I want to make like this but my top bar is to different i dont know how to make like this
.top-bar {
width: 100%;
height: 40px;
border: solid 1px white;
}
Please try following example. I think you can use or customize some value.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-size: 14px;
padding: 70px;
background: #f69ec4;
}
.tabs {
margin-bottom: 30px;
}
nav,
.content {
min-width: 600px;
}
.content {
max-width: 600px;
display: block;
margin-bottom: 1em;
background: #32557f;
padding: 2em 3em;
border-radius: .15em;
border: .2em solid #fff;
color: #fff;
}
nav {
position: relative;
z-index: 1;
}
nav > a {
position: relative;
width: 10em;
display: inline-block;
padding: .7em 2em .5em;
color: #fff;
text-decoration: none;
margin: 0 -.3em;
}
nav > a::before {
border: .2em solid #fff;
}
nav a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 1em 1em 0 0;
background: #7eb4e2;
transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg);
}
nav a.active {
z-index: 2;
}
nav a.active::before {
background-color: #32557f;
margin-bottom: -.08em;
}
.tab-left-right nav {
padding-left: 1.3em;
}
.tab-left-right nav a::before {
transform-origin: bottom;
}
<div class="tabs tab-left-right">
<nav>
Tab1
Tab2
Tab3
</nav>
<div class="content" id="content1">Content</div>
</div>
I use ul list
.open-file-list {
position: absolute;
top: 45px;
top: var(--header-height);
height: 30px;
width: 100%;
background-color: var(--primary-color);
overflow-x: auto !important;
overflow-y: hidden !important;
display: flex;
flex-direction: row !important;
color: white;
color: var(--text-main-color)
}
.open-file-list li.tile {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
height: 30px;
position: relative;
overflow: hidden;
font-size: 0.8em;
align-items: center;
margin: 0;
padding: 0;
color: inherit
}
.open-file-list li.tile::before{
position: absolute;
content: '';
background-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 1em 1em 0 0;
background: #7eb4e2;
transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg);
height: 30px;
}
.open-file-list li.tile.text{
display: inline-block;
white-space: nowrap;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding-right: 10px;
color: inherit
}
.open-file-list li.tile.select {
position: absolute;
left: 0;
top: 0
}
.open-file-list li.tile.notice::before {
content: '♥';
color: #00ff00;
font-size: 1em;
margin-left: 2.5px
}
.open-file-list li.tile.active {
border-top: solid 2px #00ee00;
background-color: rgba(0,0,0,0.2)
}
.open-file-list li.tile .file,.open-file-list li.tile .icon {
height: 20px;
width: 20px;
font-size: 1em;
background-size: 14px;
background-position: center;
color: inherit
}
I found similar topics, but it did not work.
1) I am trying to show an image when I hover over each item on the navigation bar, but it is not showing up.
2) I want to create a single line of repeated images, but it is not showing up under this tag:
<div id= "coffeeBean"></div>
Example: https://jsfiddle.net/RE006/LLo4246b/
jsfiddle and Stackoverflow won't let me upload my image.
CSS:
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
}
#coffeeBean {
background-image: url(images/beans.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
body {
background-color: #c4c7c6;
color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 62.5%;
position: relative;
}
.container {
background-color: #fff;
margin: 0px auto;
width: 80%;
}
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover::after {
background-image: url("http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png");
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid red;
content: "";
display: block;
height: 40px;
position: absolute;
top: 0;
width: 40px;
opacity: .5;
z-index:-1;
}
nav li a{z-index:9999;}
header, main, footer {
display: block;
}
header h1 {
background-color: #858070;
color: #fff;
font-size: 2rem;
letter-spacing: 2px;
padding: 1.25em .5em .25em 1em;
width: 100%;
}
img {
filter: alpha(opacity=35); /* For IE8 and earlier */
height: 200px;
margin: 0px auto;
opacity: 0.35;
position: absolute;
left: 30%;
top: 200px;
}
main {
font-size: 1rem;
padding: 1.5em;
}
label, input, select {
margin: 10px 0px;
}
#coffeeBean {
background-image: url(http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
footer {
clear: both;
font-size: 1rem;
margin-top: 50px;
padding: 1em;
position: relative;
text-align: center;
}
Please insert content:'' and width property like below will work
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
content:'';
width:100%;
}
I've tried everything. I've tried to refresh the page multiple times, I've tried uploading various ways to ensure that the css file is updated. Nothing seems to work. My media queries don't seem to be overriding them, but in Dreamweaver, they work just fine.
Here is the code for the CSS:
header {
width: 100%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
position: fixed;
top: 10px;
left: 0px;
right: 0px;
height: 55px;
border-bottom: 4px solid #636466;
margin-bottom: 10px;
margin-top: 0px;
}
#logo {
float: left;
background-image: url(wordsbyperla_wordpress%20header_small.png);
background-repeat: no-repeat;
height: 50px;
width: 40%;
position: absolute;
margin-top: 24px;
max-width: 411px;
background-size: 100%;
min-width: 300px;
background-position: bottom;
margin-bottom: 10px;
}
nav {
top: 40px;
position: absolute;
right: 3%;
width: auto;
vertical-align: text-bottom;
height: auto;
padding: 0;
font-size: 12px;
}
nav li {
list-style: none;
display: inline-block;
vertical-align: bottom;
height: auto;
top: auto;
}
.menu-item {
text-decoration: none;
list-style: none;
font-family: "Courier";
background-color: transparent;
width: auto;
display: inline-block;
margin-right: 20px;
}
.menu-item a , .menu-item a:visited, .menu-item a:active{
color: #000;
text-decoration: none;
list-style: none;
}
.menu-item a:hover {
color: #EC2726;
}
#searchform {
font-family: "Courier";
border: 1px solid #000000;
margin-bottom: 1px;
background-color: #fff;
}
#s {
border: none;
font-family: "Courier";
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: transparent;
margin-left: 5px;
}
#searchsubmit {
border: none;
font-family: "Courier";
margin: 0;
background-color: transparent;
}
#contentWrap {
position: absolute;
top: 100px;
right: 0px;
width: 100%;
overflow: auto;
bottom: 50px;
margin-right: 0px;
margin-top: 10px;
margin-left: 0px;
}
.meta {
width: 25%;
position: relative;
font-family: "Courier";
font-size: 12px;
margin-top: 20px;
margin-right: 70%;
margin-left: 0px;
max-width: 200px;
min-width: 100px;
}
.meta div {
text-decoration: none;
text-align: right;
padding-right: 20px;
padding-top: 0px;
}
.meta div a {
text-decoration: none;
color: #000;
}
.meta div a:hover, .meta div a:active {
color: #EC2726;
}
.meta span {
color: #EC2726;
text-transform: lowercase;
}
#tags {
color: #000;
margin-right: 10px;
right: auto;
width: auto;
}
.meta .pagination {
position: fixed;
left: 2%;
font-size: 14px;
font-family: "Courier";
bottom: 35px;
text-decoration: none;
max-width: 200px;
vertical-align: middle;
text-align: right;
right: 70%;
width: 23%;
}
.meta .pagination ul {
padding-right: 25px;
}
.meta .pagination li {
display: inline-block;
list-style: none;
text-decoration: none;
font-family: "Courier";
color: #000;
}
.meta .pagination a , .meta .pagination a:visited{
text-decoration: none;
text-align: left;
margin: 0;
color: #000;
}
.meta .pagination a:hover , .meta .pagination a:active {
color: #EC2726;
}
.meta2 {
height: auto;
width: 75%;
margin-left: 21%;
position: relative;
padding-left: 15px;
min-width: 300px;
top: -50px;
}
.meta2 a , .meta2 a:visited {
font-family: "Helvetica Neue";
text-transform: lowercase;
font-style: normal;
font-weight: bolder;
text-decoration: none;
color: #000;
font-size: 18px;
margin-top: 10px;
}
a:hover, a:active, .meta2 a:hover{
color: #EC2726;
}
.entry p {
font-family: Helvetica;
font-size: 12px;
font-style: normal;
font-weight: 200;
margin-bottom: 50px;
margin-top: -15px;
}
footer {
margin-top: 10px;
position: fixed;
bottom: 10px;
width: 100%;
height: 30px;
/* [disabled]background-color: #f7f7f7; */
border-top: 3px inset #636466;
font-family: Courier;
font-size: 10px;
/* [disabled]display: inline; */
left: 0px;
}
footer ul {
float: right;
margin-right: 3%;
/* [disabled]margin-left: 5px; */
display: inline-block;
width: auto;
list-style: none;
}
And here is the code for the #media query for the iPhone 6:
/*iphone 6+*/
#media (device-width:414px) and (device-width:736px) and (-webkit-device-pixel-ratio: 3){
#contentWrap {
top: 85px;
}
#logo {
width: 90%;
}
.meta {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
width: 100%;
max-width: none;
top: auto;
padding: 0;
text-align: right;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
.meta2 {
width: 96%;
max-width: none;
margin-top: 55px;
margin-right: 3%;
margin-left: 3%;
padding: 0;
margin-bottom: auto;
}
.entry p {
margin-top: -15px;
padding: 0;
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.meta .pagination {
width: 100%;
max-width: none;
text-align: center;
bottom: 25px;
height: 30px;
vertical-align: middle;
}
footer {
position: fixed;
height: 7px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
footer ul {
margin-bottom: auto;
margin-top: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 0;
float: none;
}
footer li {
margin: auto;
text-align: center;
float: none;
}
nav {
padding-top: 0;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 0;
top: -10px;
text-align: center;
/* [disabled]margin-left: 3%; */
/* [disabled]margin-right: 8%; */
width: 100%;
}
.meta div {
margin: 0;
text-align: right;
padding: 0;
width: 100%;
}
}
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}