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.
Related
Writing two paragraphs, these are spaced apart. My paragraphs are very far and I don't understand why.
I tried to unlink css files, between the two paragraphs there was an empty line: missing in the code.
My page:
<div class="sharp">
<p class="title">Chi sono?</p><p class="content">Seguimi su Twitter!</p>
</div>
All my CSS:
*{
margin: 0;
height: 100%;
}
.title{
color: #2d3436;
text-align: center;
text-shadow: 3px 2px #b2bec3;
font-size: 50px;
font-weight: bold;
}
.content{
color: #2d3436;
text-align: center;
text-shadow: 2px 1px #b2bec3;
font-size: 25px;
font-weight: lighter;
}
hr {
width: 95%;
height: 2px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 20px;
margin-bottom:20px;
}
.space{
height: 100px;
}
.dark{
margin: auto;
padding: 20px;
background: #000;
color: #fff;
width: 85%;
height: 80px;
}
.sharp{
margin: auto;
padding: 20px;
background: #fff;
border-radius: 25px;
border: 1px solid #dfe4ea;
width: 85%;
box-shadow: 5px 10px 8px #888888;
}
body{
width: 100%;
background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
background-repeat: no-repeat;
background-size: 4000px 4000px;
}
.img-container{
background-image: url(../data/images/hero.png);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index:1;
}
.inner-container{
text-align: center;
width: 100%;
color: #fff;
position: absolute;
height: auto;
margin-top: 200px;
}
h1{
font-size: 7em;
font-family: "Shadows into Light", Sans Serif;
}
h2{
margin-top: -17px;
font-family: "Source Sans Pro", Sans Serif;
font-size: 1.7em;
text-align: center;
font-weight:400;
}
a{
margin-top: 20px;
font-size: 1.3em;
font-family: "Source Sans Pro", Sans Serif;
}
.btn{
display: inline-block;
width: 200px;
font-weight: bold;
padding: 10px;
color: #fff;
border: 4px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover,.btn:active{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
#media only screen and (max-width: 920px){
.inner-container{
margin-top: 100 px;
}
}
#media only screen and (max-width: 540px){
.inner-container{
margin-top: 150px;
}
h1{
font-size: 5em;
}
h2{
font-size: 1.4em;
}
The two paragraphs are too far apart. I hope someone can help me...[How the page looks.][1]
By writing *{height: 100%} in your css, you are telling it to make every element (aka *) take up 100% of the available height. In doing so, your first paragraph is taking up all the height it can, pushing the second one all the way down.
If the only element you want to ensure has a 100% height is the white background, consider styling it individually.
The
*{
height: 100%;
}
part of your CSS file is telling every element on the page to be the same height as the window, so the second element is pushed down. If you remove that line from the CSS file the problem will go away.
Problem solved by giving
height: 10%;
to the paragraphs.
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;
So I have a button, but here's the issue. On Firefox only does it not completely fill up. As seen here
This is what it should look like
I'm not really sure what to do. Here's the CSS
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
}
And a demo http://jsfiddle.net/h7PXe/
Reason why it showing up is that you use line-height bigger than height of element.
Here you can see how box model is woking and were are outlines:
http://i.stack.imgur.com/Q6J6n.png
You can achieve the same look without using basic properties (then it will work in every browser)
.button-panel .button {
display: inline-block;
padding: 7px 0 5px;
border: 3px solid #6699FF;
width: 100%;
font-family: 'Avenir Next';
font-size: 27px;
font-weight: 300;
letter-spacing: 0.05em;
text-align: center;
background-color: #6699FF;
cursor: pointer;
}
http://jsfiddle.net/h7PXe/1/
Do height: 100%. You need to do this or else the browser won't know what to set the height to.
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
height: 100%
}
And a demo.
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;
}
I'm very new to HTML and CSS. Right now i'm trying to create a header, you can see the demo here
Basically I want the text and icons from "Login" move to the right side of header so it looks more like this:
I also want the text and icons positioned inside the header when you zoom out in different browser.
I've tried to position the a tags to the right but it keeps going outside of the header on different browser. I've also tried to create a div class for the left part and the right part in the header, but some how the text and icons keeps going out of the header in Safari and Chrome.
Is there any simple solution for these two problems?
Here is the full code for the header.
HTML:
<header id="header">
<span class="free-shipping">Free Shipping</span>
<span class="free-returns">Free Returns</span>
<span class="same-day-dispatch">Same-day Dispatch</span>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="Create Account">Create Account</a>
<a class="language-icon" href="#" alt="Choose your language">Language</a>
<a class="delivery-country-icon" href="#" alt="Choose your delivery country">Delivery Country</a>
</header>
CSS:
/* ------------------ TOP HEADER ------------------ */
#header {
border-bottom: 1px solid #ddd;
background: #f5f5f5;
height: 45px;
white-space: nowrap;
width: 1024px;
}
.free-shipping {
background-image: url("images/shipping.png");
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-weight: bold;
padding-left: 23px;
margin-left: 15px;
}
.free-returns {
background-image: url("images/returns.png");
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-weight: bold;
padding-left: 23px;
}
.same-day-dispatch {
background-image: url("images/dispatch.png");
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-weight: bold;
padding-left: 23px;
}
.login {
font-weight: bold;
text-decoration: none;
font-size: 11px;
padding-right: 8px;
line-height: 45px;
color: #202020;
}
.login:hover { text-decoration: underline; }
.create-account {
font-weight: bold;
text-decoration: none;
font-size: 11px;
padding-right: 8px;
line-height: 45px;
color: #d13030;
}
.create-account:hover { text-decoration: underline; }
.language-icon {
border: 1px solid #ddd;
color: #202020;
font-weight: bold;
padding-right: 8px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
height: 24px;
margin-top: 10px;
line-height: 25px;
text-align: right;
text-decoration: none;
border-radius: 4px;
background: #f5f5f5 url("images/language-sprite.png") no-repeat 0 0 ;
}
.language-icon:hover { background: #fff url("images/language-sprite.png") no-repeat 0 -20px ; color: #d13030; }
.delivery-country-icon {
border: 1px solid #ddd;
color: #202020;
padding-right: 9px;
padding-left: 30px;
font-weight: bold;
display: inline-block;
font-size: 11px;
height: 24px;
line-height: 25px;
text-align: right;
text-decoration: none;
border-radius: 4px;
background: #f5f5f5 url("images/delivery-country-sprite.png") no-repeat top left ;
}
.delivery-country-icon:hover { background: #fff url("images/delivery-country-sprite.png") no-repeat 0 -20px ; color: #d13030; }
Thank you in advance.
See in this link an example of this:
http://codepen.io/anon/pen/Gitjl
I used float to position the elements, one on the left and the other on the right.
Hope it helps you. :D