How to do a space of 0.5 cm between 2 buttons in my banner ? I am stuck since several moment. Should I to change my blocks en HTML ?
Here in my code in CSS
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.myButtonRegister a {
color: #f2f2f2;
text-decoration: none;
}
.myButtonLogin{
float: left;
background-color: black;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
}
.button-action {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
Do you have an idea ?
Thanks for your answer.
Regards
Add margin-right: 30px; attribute to your class myButtonRegister.
.myButtonRegister{
float: left;
background-color: #C22312;
color: white;
height: 48px;
width: 168px;
text-align: center;
color: white;
font-family: 'Pridi', serif;
font-size: 26px;
padding-top: 10px;
word-spacing: 0px;
margin-right: 30px;
}
Add below line in class myButtonRegister
margin-right:10px;
You can change 10px as per your need.
Hope this helps.
Try putting in .myButtonRegister class this rule margin-right: 50px;
Related
I'm trying to make a simple website for a homework.
This is how the site looks like on google chrome.
At first, I used px instead of '%' for my website, then changed it because turned out it looked different on different browsers. After I used '%', I was satisfied because it looked the same, but then I tried to open it on my phone's google chrome and this is how it looks
I tried using the meta viewport, but that only made it worse. All the element overlaps with each other. My friends didn't use any media queries and their sites still looked alright on both mobile and desktop (fonts looked smaller and everything, but the layout was still alright).
here's the css code:
<style>
.header{
background-image: url("https://www.blibli.com/friends/assets/masakan-indonesia-featured-696x464.jpg");
position: absolute;
height: 25%;
width: 99%;
text-align: center;
filter: blur(2px);
-webkit-filter: blur(2px);
}
.headertext{
font-family: Bebas Neue;
font-size: 4.5em;
top: 7%;
left: 28%;
position: absolute;
color: white;
z-index: 1;
text-decoration: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: chocolate;
overflow: hidden;
position: absolute;
width: 99%;
top: 26.5%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 1% 9.92%;
text-decoration: none;
font-size: 1.373em;
font-family: Roboto;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.sidebar{
width: 20%;
height: 107%;
float: left;
display: block;
top: 40%;
position: absolute;
background-color: rgba(148, 145, 141, 0.37);
}
.main{
width: 76.3%;
height: 220%;
display: block;
position: absolute;
top: 40%;
left: 23%;
background-color: rgba(148, 145, 141, 0.37);
}
.box{
border:1px solid red;
position:absolute;
width:80%;
height:22%;
left: 5%;
transition: 0.2s;
}
.box:hover{
transform: scale(1.05);
}
.top{
top: 3%;
}
.middle{
position: absolute;
top: 31%;
}
.bottom{
position:absolute;
bottom:19%
}
.picture{
object-fit: cover;
width: 50%;
height: 85%;
position: absolute;
top: 7.5%;
left: 3%;
}
.text {
width: 40%;
height: 80%;
position: absolute;
top: 7.5%;
right: 4%;
font-family: Roboto;
font-size: 0.9em;
text-align: justify;
}
.judul{
font-family: Bebas Neue;
font-size: 1.6em;
line-height: 2;
letter-spacing: 0.3em;
}
.link{
bottom: 0px;
position: absolute;
font-family: Roboto;
font-size: 0.7em;
}
.button{
text-decoration: none;
display: inline-block;
padding: 1.5% 10%;
position: absolute;
bottom: 7%;
left: 35%;
font-family: Roboto;
font-size: 1.2em;
}
.button:hover{
background-color: white;
color: black;
}
.more{
background-color: chocolate;
color: white
}
.rekomendasi{
display: block;
position: absolute;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
text-align: center;
letter-spacing: 0.1em;
color: white;
}
.rekomendasicontent{
position: absolute;
top: 85%;
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
color: black;
line-height: 160%;
}
.populer{
display: block;
position: relative;
top: 49%;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
letter-spacing: 0.1em;
color: white;
text-align: center;
}
.populercontent{
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
position: absolute;
top:85%;
color: black;
line-height: 160%;
}
.link2{
color: black;
text-decoration: none;
background-color: none;
}
li{
transition: 0.2s;
}
li:hover{
transform: scale(1.1);
}
.footer{
width: 97.8%;
position: absolute;
top: 260%;
background-color: chocolate;
font-family: Roboto;
font-size: 1em;
color: white;
text-align: center;
padding: 0.5%;
}
</style>
I've made a button for my page, but it is not clickable. The pointer doesn't even appear. Why does it happen? How can I fix it?
Also, did I center the .intro and #more correctly? I feel like there is a better way than this which would also be more responsive, but I'm not sure. Some tips would be great!
Thanks a lot.
/*Continut centru*/
#continut {
padding-top: 250px;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
user-select: none;
pointer-events: none;
}
#intro {
text-transform: uppercase;
color: #77dff1;
font-size: 300px;
text-align: center;
}
.intro {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
text-align: center;
display: table-cell;
vertical-align: middle;
max-width: 700px;
margin: 0 auto;
line-height: 30px;
}
/*Buton MORE*/
#more {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: #77dff1 2px solid;
text-align: center;
text-decoration: none;
padding: 15px;
display: inline-block;
font-size: 2rem;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
<div id="continut">
<h1 id="intro">hi</h1>
<h6 class="intro">asdf</h6>>
<button type="button" href="#" id="more">More...</button>
</div>
Your parent div #continut has pointer-events as none and that's the reason the default mouse-event of button to is none, to override you could you !important rules.
/*Continut centru*/
#continut {
padding-top: 250px;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
user-select: none;
pointer-events: none;
}
#intro {
text-transform: uppercase;
color: #77dff1;
font-size: 300px;
text-align: center;
}
.intro {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
text-align: center;
display: table-cell;
vertical-align: middle;
max-width: 700px;
margin: 0 auto;
line-height: 30px;
}
/*Buton MORE*/
#more {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: #77dff1 2px solid;
text-align: center;
text-decoration: none;
padding: 15px;
display: inline-block;
font-size: 2rem;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
pointer-events: auto !important;
/* Add this */
}
<div id="continut">
<h1 id="intro">hi</h1>
<h6 class="intro">asdf</h6>
<button type="button" href="#" id="more">More...</button>
</div>
/*Continut centru*/
#continut {
padding-top: 250px;
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
user-select: none;
}
#intro {
text-transform: uppercase;
color: #77dff1;
font-size: 300px;
text-align: center;
}
.intro {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
text-align: center;
display: table-cell;
vertical-align: middle;
max-width: 700px;
margin: 0 auto;
line-height: 30px;
}
/*Buton MORE*/
#more {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: #77dff1 2px solid;
text-align: center;
text-decoration: none;
padding: 15px;
display: inline-block;
font-size: 2rem;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
z-index: 1;
cursor: pointer;
}
<div id="continut">
<h1 id="intro">hi</h1>
<h6 class="intro">asdf</h6>>
<button type="button" href="#" id="more">More...</button>
</div>
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}
If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}
Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.
i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}
So, when I hover over a button on my new site a background image of an arrow appears. Works great. But, in Chrome (haven't tested it yet on other browsers) the first appears as a big arrow, and a second later it changes to the right size.
This is my site:
http://stilld.nl/nieuw/
This is the code i'm using:
HTML:
<a class="btn1" href="contact/"><h4>
PLAN UW PROJECT
</h4></a>
CSS:
.item a {
text-decoration: none;
}
.item h4 {
position: absolute;
max-width: 200px;
width: 100%;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 43px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 28px;
padding-right: 28px;
margin-top: 0px;
bottom: 180px;
left: 8.5%;
color: white;
border-radius: 6px;
letter-spacing: 0.5px;
text-transform: none;
border-style: solid;
border-width: 1.5px;
border-color: white;
-webkit-font-smoothing:antialiased;
background-position: 93% 50%;
background-repeat: no-repeat;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.item h4:hover {
position: absolute;
max-width: 200px;
text-align: center;
width: 100%;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 43px;
font-size: 16px;
left: 8.5%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 46px;
margin-top: 0px;
color: white;
background: url(../images/arrow_btn_banner.png) no-repeat;
background-size: 30px 30px;
background-position: 93% 50%;
border-radius: 6px;
letter-spacing: 0.5px;
text-transform: none;
border-style: solid;
border-width: 1.5px;
border-color: white;
-webkit-font-smoothing:antialiased;
}
I tried putten background-size above the background-image, but that doesn't work. I've tried changing the size of the image. But that isn't working either.
Maybe you should set background-image and background-size to 0 in h4
and only reset background-size on h4:hover, so bg image is already loaded.