I tried adding the Paypal smart button to my first project. When the Debit or Credit card button is pressed, the text above it goes through the navbar.
I tried adding additional blank space to the background image, but it did not work.
Is there a way to extend the blank space already made by the Paypal button script?
What can I do to fix it?
Navbar problem
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.4)),url(slike/slika\ 2.JPG);
background-position: center;
background-size: 100%;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 500px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 20px;
position: sticky;
}
.nav-links ul li a{
color: #7814ac;
text-decoration: none;
font-size: 30px;
font-family: 'Lora', serif;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: white;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
margin-top: 200px;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 36px;
color: white;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 12px 34px;
font-size: 24px;
background: transparent;
position: relative;
cursor: pointer;
margin-bottom: 5px;
}
.hero-btn:hover{
border: 1px solid #7814ac;
background: #7814ac;
transition: 1s;
}
The problem would appear to be the container in which all that text is located. Perhaps it has a fixed position or height. The black debit/credit card button needs to be rendered in a container that can expand normally. If for some reason you are not able to change the site's CSS to allow this, you can disable the black button with &disable-funding=card. Other buttons will open the PayPal window normally.
Related
I have a strange problem.
Everything on my page went well, I had my navigation bar ready (also for my mobile phone).
Then I put a photo under the navigation bar and the bar was gone ..
I want the bar fixed so that it remains visible, but when I do it is gone.
The picture should remain relative otherwise this will not be correct anymore if you resize to mobile phone.
Someone a solution that keeps the bar back?
Image css
.header{
max-width: 100%;
margin-left: 0;
margin-top: 0;
position: relative;
letter-spacing: 4px;
margin-top: 70px;
box-sizing: inherit;
}
.header-image{
max-width: 100%;
height: auto;
border-style: none;
background-size: cover;
background-position: center center;
display: block;
position: relative;
box-sizing: inherit;
}
.header-image-tekst{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: inherit;
display: block;
text-align: center!important;
margin-top: 16px!important;
}
.header-image-tekst h1{
color: white;
font-size: 38px!important;
margin: 10% 0;
}
.header-image-tekst h1 .border{
padding: 8px 16px!important;
background-color: black;
opacity: 0.75;
}
Navigation bar css
.container{
margin: 0 auto;
width: 100%;
position: fixed;
}
.nav{
border-bottom: 1px solid #EAEAE8;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
}
.menu{
margin: 0 30px 0 0;
}
.menu a{
clear: right;
text-decoration: none;
color: #000;
margin: 0 10px;
line-height: 70px;
padding: 20px;
border-radius: 40px;
}
.menu a:hover{
background-color: #03999e3b;
}
label{
margin: 0 40px 0 0;
float: right;
margin: 0 10px;
line-height: 70px;
font-size: 26px;
display: none;
width: 26px;
float: right;
}
#toggle{
display: none;
}
#media only screen and (max-width: 700px){
label{
display: block;
cursor: pointer;
position: fixed;
}
.menu{
text-align: center;
width: 100%;
display: none;
}
.menu a{
display: block;
border-bottom: 1px solid #03989E;
margin: 0;
}
#toggle:checked + .menu {
display: block;
position: fixed;
}
}
.active{
background-image: linear-gradient(315deg, #ffffff 0%, #03989E 74%);
}
From what I can tell, the image is likely over-lapping the navbar. Use z-index on the navigation bar to make it appear on top of the image. If you don't want them overlapping then you'll have to adjust some of your layout CSS but that should work. I'll usually put my z-index for my navigation at 10, that way it'll always be in front of other elements where I have a z-index set.
Here's a reference article: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
So, it's my first time getting into HTML/CSS and naturally, I'm having problems with certain parts.
I made a "Contine" button in my setup.html and gave it a class so I can style it in my styles.css, now the problem is that text-align center doesnt work on the button. I also have a "Start" button in my index.html, but strangely text-align center works there. I tried giving both buttons the same class and different classes. I'm not sure what to do at this point in time.\
My Button in HTML:
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
My CSS:
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
max-width: 280px;
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
Like I said the #contine part in my styles.css is the exact same for the "start" button, but it only works for the start button.
Problem is with max-width: 280px; and padding: 10px 100px; of button.
you are giving padding of 200px on the horizontal scale and then you are limiting button width to 280px. which leaves only 80px for text within. Remove button width for a better look of a button. Alternatively, you can trade off any of the CSS property over others.
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
/* max-width: 280px; */
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
Currently I am trying to center my arrows that are created using CSS when I hover over my nav menu. Even though I have set the margin left and right to auto. It still does not seem to want to center. It could be because of the format of my HTML. I have tried a number of options but none of them seem to have helped.
Please see my HTML and CSS below:
(Unfortunately I cannot seem to re-create my code but I will post it and continue to try and recreate it in the mean time)
#navbar {
overflow: hidden;
background-color: $base-white;
font-size: 11px;
z-index: 2;
border: 1px solid $base-grey;
height: 50px;
}
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a {
display: block;
float: left;
color: $base-grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a:hover:after {
content: ' ';
position: absolute;
bottom: -10px;
width: 0;
height: 0;
text-align: center;
border-width: 10px 10px 0;
border-style: solid;
border-color: $base-grey transparent;
margin: 0 auto;
display: block;
}
<div class="navbar-links">
<div class="navbar-dropdown">
<button class="navbar-drop-btn">
<div class="navbar-arrow"></div>
</button>
<div class="navbar-dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['insights']" (mouseover)="displayInsightDropDown();" (mouseleave)="hideInsightDropDown();">INSIGHTS</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['explore']">EXPLORE</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['aboutus']">ABOUT</a>
</div>
Here is a picture of the result:
As you can see the arrow is positioned to the left, but never the center.
Any suggestions would help, thank you in advance.
You need to set the context for the absolutely positioned ::after. To do so, add a non static position (position: relative in this case) to the <a> tags.
To center the ::after element, I've used left: calc(50% - 10px) because the width of the arrow is known (20px). If to arrow can have variable size, you can use:
left: 50%;
transform: translateX(-50%);
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative; /** the absolute context **/
display: block;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
left: calc(50% - 10px);
position: absolute;
content: ' ';
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
display: block;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>
Although answer is accepted but I've another solution using flex property of CSS, add two line inside .navbar-links a
display: flex;
justify-content: center;
no need for calculation
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative;
/** the absolute context **/
display: flex;
justify-content: center;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
position: absolute;
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>
I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.
I am designing a new website, and I always spend a lot of time on the navigation bars when I do so. The following code has this intended effect:
HTML:
<div class="navbar">
Home
About
</div>
<hr></hr>
CSS:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
This works in Chrome, Opera, and even some versions of Internet Explorer, but the other browsers can't agree on anything:
Firefox (and some IE versions):
Safari:
here is a code snippet:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
<div class="navbar">
Home
About
</div>
<hr>
Is there any way to achieve the intended effect without browser sniffing?
The problem can be solved by doing following steps:
Add reset CSS (could be normalize or Meyer reset CSS)
Set a specific height to navbar and the element as Safari doesn't do well without the height
Applying box-sizing: border-box; for easy
styling without much of calculation between padding, border, margin
within one element.
Beside, I usually use the border of navbar instead of another hr tag for the line under the menu