I'm having an issue with my footer. I set up the footer to be a flexbox and I want the "social media" header and icons to wrap onto the second row of the footer but for some reason whenever I set the "container" class to flex-wrap: wrapeverything in the footer becomes aligned vertically down the screen.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
width: 100%;
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
Any help with getting the "Follow Us" and the social icons belew it to wrap onto the next row and remain horizontal and ideally centered would be greatly appreciated.
you should use flex-wrap:wrap inside the container, but also remove width:100% from items.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.full {
/* flex-grow: -1; */
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
/* width: 100%; */
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap full">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
Related
i was wondering if I can change the "fa fa-cube" so the background is not transparent. I want to use it on top of a playingcard-background and as you can see below, it doesn't look that great like this...
The best would be a white or light-blue fill.
Maybe i can put another cube behind it? But i am really a beginner.
.deck {
border: 2px dashed #080808;
width: 160px;
height: 120px;
}
.deck .card {
justify-content: space-around;
font-size: 50px;
color: #0023F5;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
transform-origin: center;
border-radius: 15px;
border: 5px solid black;
height: 116px;
background-color: #e5e5f7;
opacity: 0.8;
background-image: linear-gradient(135deg, #F74141 25%, transparent 25%), linear-gradient(225deg, #F74141 25%, transparent 25%), linear-gradient(45deg, #F74141 25%, transparent 25%), linear-gradient(315deg, #F74141 25%, #e5e5f7 25%);
background-position: 10px 0, 10px 0, 0 0, 0 0;
background-size: 10px 10px;
background-repeat: repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="deck">
<div class="card">
<i class="drawing fa fa-cube"></i>
</div>
</div>
PS: i tried aria-hidden="true" but didn't really know what this does.
Probably not the most elegant solution but it works. Basically, I layered in copies of the icon (as filler) and used a couple of different clip-paths to render the white background where the transparent parts are, then put everything in a container and used z-index to push the white parts behind the actual blue icon so the background fillers wouldn't overlap the actual blue icon. You can use the container for positioning etc.
.deck {
border: 2px dashed #080808;
width: 160px;
height: 120px;
}
.deck .card {
justify-content: space-around;
font-size: 50px;
color: #0023F5;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
transform-origin: center;
border-radius: 15px;
border: 5px solid black;
height: 116px;
background-color: #e5e5f7;
opacity: 0.8;
background-image: linear-gradient(135deg, #F74141 25%, transparent 25%), linear-gradient(225deg, #F74141 25%, transparent 25%), linear-gradient(45deg, #F74141 25%, transparent 25%), linear-gradient(315deg, #F74141 25%, #e5e5f7 25%);
background-position: 10px 0, 10px 0, 0 0, 0 0;
background-size: 10px 10px;
background-repeat: repeat;
}
.faContainer {
display: flex;
flex-direction: column;
padding: 0;
margin: 0 auto;
position: relative;
}
.fa-cube {
z-index: 1;
}
.fa-cubeBGTop {
position: absolute;
z-index: 0;
background-color: white;
clip-path: polygon(7% 28%, 47% 14%, 86% 29%, 46% 44%);
}
.fa-cubeBGSide {
position: absolute;
z-index: 0;
background-color: white;
clip-path: polygon(43% 50%, 85% 30%, 90% 78%, 38% 95%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="deck">
<div class="card">
<div class="faContainer">
<i class="drawing fa fa-cube"></i>
<i class="fa fa-cube fa-cubeBGTop"></i>
<i class="fa fa-cube fa-cubeBGSide"></i>
</div>
</div>
</div>
I could able to get progress bar with below code, but couldn't find solution how to add a small circle on the progress bar ?
HTML
<progress max="100" value="75"></progress>
CSS
progress {
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
Add a second background using a radial-gradient
progress {
width: 90%;
display: block; /* default: inline-block */
margin-bottom:1em;
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: radial-gradient(4px at 97%,white,white 4px,transparent),linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%))
;
}
<progress max="100" value="75"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="25"></progress>
I have no idea how to add a circle at the end of the progress element, but it is possible to do it with the div element
CSS:
.first{
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
.second{
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
border-radius: 14px;
height: 10px;
width: 75%;
}
.third{
width: 10px;
background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
border-radius: 60px;
height: 8px;
width: 8px;
margin: 1px;
margin-right: 1px !important;
float: right;
margin-right: 0px;
color: white;
}
HTML:
<div class="first">
<div class="second">
<div class="third">.</div>
</div>
</div>
How can I remove this strange black outlines below my buttons. Take a look at my code and its output.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: hsl(0, 0%, 95%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 40px 0;
font-size: 15px;
}
div {
background: white;
width: 85%;
height: 30%;
}
.sedans {
background: hsl(31, 77%, 52%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
h2 {
font-family: "Big Shoulders Display";
color: hsl(0, 0%, 95%);
font-size: 2em;
}
p {
font-family: "Lexend Deca";
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.5em;
padding-bottom: 2em;
}
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 95%);
border-radius: 2em;
font-family: "Lexend Deca";
}
div.suvs {
background: hsl(184, 100%, 22%);
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
.suvs button {
color: hsl(184, 100%, 22%);
}
div.luxury {
background: hsl(179, 100%, 13%);
box-sizing: border-box;
padding: 2.9em;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-width: 450px;
}
.luxury button {
color: hsl(179, 100%, 13%);
}
.sedans button:hover {
background: hsl(31, 77%, 52%);
color: hsl(0, 0%, 95%);
}
.suvs button:hover {
background: hsl(184, 100%, 22%);
color: hsl(0, 0%, 95%);
}
.luxury button:hover {
background: hsl(179, 100%, 13%);
color: hsl(0, 0%, 95%);
}
#media only screen and (min-width: 1440px) {
body {
flex-direction: row;
margin: auto 100px;
.sedans {
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
max-width: 310px;
height: 500px;
}
.suvs {
max-width: 310px;
height: 500px;
}
.luxury {
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
max-width: 310px;
height: 500px;
}
p {
line-height: 1.7em;
}
h2 {
font-size: 2.5em;
}
button {
margin-top: 2em;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerson-web001</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sedans">
<img src="images/icon-sedans.svg" alt="">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordabiity and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<button>Learn More</button>
</div>
<div class="suvs">
<img src="images/icon-suvs.svg" alt="">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures</p>
<button>Learn More</button>
</div>
<div class="luxury">
<img src="images/icon-luxury.svg" alt="">
<h2>LUXURY</h2>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
<button>Learn More</button>
</div>
</body>
</html>
To remove your button outlines, you can simply set the border: 0 and outline: 0
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 100%);
border-radius: 2em;
font-family: "Lexend Deca";
/* Add this to your button tag */
outline: none; /* Optional */
border: 0;
}
I'm trying to reproduce (as close as possible) in CSS a gradient I've seen.
I managed to get close to it but I can't do better.
Here is the image of the gradient:
Gradient to reproduce
And here is my HTML / CSS code:
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {display: flex; align-items: center; justify-content: center;}
.logo {
background:
radial-gradient(circle farthest-corner at 10% 90%, #FFF200, transparent 50%),
radial-gradient(circle farthest-corner at 10% 130%, #FFF200, transparent 50%),
radial-gradient(circle farthest-corner at 150% 150%, #ed4444, transparent),
radial-gradient(circle farthest-corner at 170% 170%, #ed4444, transparent),
linear-gradient(#627AFF 40%, transparent);
border-radius: 50%;
font-size: 250px;
height: 1em;
position: relative;
width: 1em;
}
.logo:before {
content: "D";
color: white;
position: absolute;
left: 67px;
top: 17px;
font-size: 175px;
}
<div class='logo'></div>
Thank you in advance,
the best i can do for you, wish it helps you.
good luck,
.logo {
background:
radial-gradient(circle farthest-side at 50% 180%, white 15%, transparent 20%),
radial-gradient(closest-corner at 121% 84%, #ef5d5d 190%, transparent 307%),
radial-gradient(closest-side at 40% 77%, #fff64d 76%, transparent 185%),
linear-gradient(#9933ff 10%, transparent);
border-radius: 50%;
font-size: 250px;
height: 1em;
position: relative;
width: 1em;
}
.logo:before {
font-family: 'Brush Script MT', cursive;
content: "D";
color: white;
position: absolute;
left: 67px;
top: 17px;
font-size: 175px;
}
<div class='logo'></div>
I'd like to think that I an intermediate when it comes to HTML and CSS but this is a huge problem I haven't been able to resolve.
I am building a website for a business and I can't seem to center the facebook social media plugin "like Box"
here is my html:
<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../c9c.css">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Cloud 9 CrossFit - Home</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=141894429309879";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-40292409-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<nav>
<li>C9C</li>
<li>About Us</li>
<li>Schedule</li>
<li>Membership</li>
<li>WOD</li>
<li>Media</li>
<li>Links</li>
<li>Contact</li>
</nav>
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="container">
<div id="img"><img src="../img/image place holder.jpg" alt="" name="imgmain" width="983" height="435" id="imgmain"></div>
<div class="fb-like-box" data-href="https://www.facebook.com/Cloud9CrossFit" data-width="973" data-height="510" data-show-faces="true" data-stream="true" data-header="false"></div>
<div class="quickboxes">
<div id="box1"><img src="../img/Crossfit.png" width="960" id="img1" longdesc="http://www.navyreserve.navy.mil/Pages/default.aspx"></div>
<div id="box2"><img src="../img/Rogue logo" alt="rogue fitness" width="940" id="img2" ></div>
<div id="box3"><img src="../img/facebook logo.png" alt="facebook" width="73" id="img3"></div>
</div>
</div>
<!-- TemplateEndEditable -->
<footer>footer stuff | sitemap | etc | © 2013 Cloud 9 CrossFit</footer>
</body>
</html>
The CSS:
/* CSS Document */
body {
font: Calibri;
background-color: #EFEFEF;
width: 1120px;
height: auto;
margin: auto;
background-image:url(img/Name%20sideways.png);
background-position:0px 20px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#fb-root {
display: none;
}
nav {
margin: 20px auto;
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-weight:550;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px ##E9E8E9;
width: 974px;
height: 30px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
text-align: center;
-webkit-animation: showMenu 1s;
position: relative;
color: white;
}
nav li {
display: block;
float: left;
border-right: 1px solid #999;
border-left: 1px solid #E9E8E9;
width: 120px;
height: 30px;
border-bottom: 1px solid #D5D5D5;
border-top: 1px solid ##F5F5F5;
background-image: linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -o-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -moz-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -webkit-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -ms-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #999999),
color-stop(0.57, #CFCDCF),
color-stop(0.89, #F5F5F5)
);
background-color: #5f5f5f; /* Fallback */
margin:0 auto;
}
nav li:hover {
background-image: linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #696869),
color-stop(0.57, #8F8F8F),
color-stop(0.89, #C7C7C7)
);
background-color: #383838; /* Fallback */
-moz-box-shadow: inset 0 1px 2px 2px #666;
-webkit-box-shadow: inset 0 1px 2px 2px #666;
box-shadow: inset 0 1px 2px 2px #666;
}
nav li:active {
background-image: linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #262626),
color-stop(0.57, #525052),
color-stop(0.89, #C7C7C7)
);
background-color: #383838; /* Fallback */
-moz-box-shadow: inset 0px 0px 5px 5px #31304A;
-webkit-box-shadow: inset 0px 0px 5px 5px #31304A;
box-shadow: inset 0 0 5px 5px #31304A;
}
nav li a {
color: black;
text-decoration: none;
text-align: center;
display: block;
line-height: 30px;
outline: none;
}
nav li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
border-left: none;
}
nav li:first-child a img {
vertical-align: middle;
margin-top: -2px;
}
nav li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
border-right: none;
}
/* Fade in animation (Webkit only) */
#-webkit-keyframes showMenu {
from {
opacity: 0;
top:-20px;
}
to {
opacity: 1;
}
#container {
width: 980px;
height:auto;
margin:auto;
}
#img {
width: 980px;
margin: 0 auto;
}
#imgmain {
display: block;
border-radius: 8px;
opacity: 0.8;
-moz-box-shadow: 0px 0px 10px #999;
-webkit-box-shadow: 0px 0px 10px #999;
box-shadow: 0px 0px 10px #999;
}
.fb-like-box {
display: block;
width: 980px;
height: auto;
text-align: center;
margin: 15px auto;
}
.quickboxes {
width: 974px;
margin: 0 auto;
}
#box1, #box2, #box3 {
width: 33%;
display: inline-block;
overflow: hidden;
margin: 15px auto;
text-align: center;
}
#img1, #img2 {
width: 60%;
margin: 5px auto;
}
footer {
height:18px;
width: 974px;
margin: 5px auto;
padding: 5px 0px;
text-align: center;
border-top: thin #999 solid;
border-bottom: thin #999 solid;
}
The problem is that while the image and link boxes are centered, the Facebook like box will not center.
I don't want to absolute position because if the user changes the window size it get's distorted. I know this is a margin issue. But I'm not sure why.
This is simple CSS stuff so why does it fail to work properly?
I was able to fix it by adding
padding-left: 70px;
Hi a slight modification of Stefan's answer did the trick for me:
div.fb-like {
width: 100% !important;
position: relative;
text-align:center !important;
}
<div class="fb-like disp_fb_like" data-send="false" data-layout="box_count" data-width="90" data-show-faces="false" data-action="recommend"></div>
I cheated a little when I was encountering this issue.
I created a new container to surround the likebox and had to set a width (for the vertical configuration at 292px) with auto left/right margins.
All of the above did not work for me.
The following did:
.fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe {
width: 100% !important;
position: relative;
text-align:center !important;
}
Wrap another div around the Facebook code and add this to it:
#facebook-box {width: 278px; display: block; margin: 0 auto;}
Set the width to the same width as your facebook like box.