I'm having an issue where the footer of my page has now moved up and is stuck with in the picture. This problem didn't use to occur and I'm unsure as to how to fix it.
When entering the website : https://gyazo.com/bcd6fe2f9514e761035deee64d820e22
After scrolling down : https://gyazo.com/cb9b9917d7d1730484c18a093b2a5f12
Here is the part of the code for index.php
html {
scroll-behavior: smooth;
}
body,
.cover {
height: 100%;
}
.cover {
background: url('img/main.jpeg') top left no-repeat;
background-size: cover;
display: table;
width: 100%;
padding: 20%;
box-shadow: inset 0 0 100px #000;
}
.cover-text {
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
.cover-text h1 {
margin: 0;
font-size: 70px;
letter-spacing: -3px;
}
nav.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
border: none;
}
.the-quote {
background: #222;
}
blockquote1 {
border: none;
margin: 0;
font-family: Georgia, Times, serif;
font-style: italic;
font-size: 32px;
color: white;
}
blockquote1 cite {
display: block;
text-align: right;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
color: #888;
margin-top: 40px;
}
section {
padding: 100px;
}
h2 {
text-align: center;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 60px;
}
h2 + p {
text-align: center;
margin-top: -60px;
}
#team {
background: url('img/fan.jpg') top left no-repeat;
background-size: cover;
color: white;
text-align: center;
}
#reviews p {
color: black;
}
#reviews h4 {
font-weight: 600;
}
#reviews {
text-align: center
}
#contact-us {
background: url('img/straighten.jpg') left no-repeat;
background-size: cover;
text-align: center;
}
footer {
background: #222;
color: black;
text-align: white;
padding: 20px;
font-family: Georgia, Times, serif;
position:absolute;
bottom: 0;
width: 100%;
}
footer a {
color: hotpink;
}
#media only screen and ( max-width : 568px ) {
.cover h1 {
font-size: 40px;
}
section {
padding: 20px;
}
}
.login-cover {
background: #333;
background-size: auto;
padding-top: 300px;
min-height: 93.8vh;
min-width: 100vw;
color: black;
text-align: center;
}
<!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">
<title>Modern Haircut Designs</title>
<!-- Bootstrap Stuff -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Coursework Style that's seperate -->
<link href="coursework_style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
#My navigation bar code
</nav>
<div class="cover" id="top">
<div class="cover-text">
<h1>Professional Haircut Service at its finest</h1>
<p class="lead">It's your haircut so why not choose the exact date, time and barber of your preference.</p>
Sign up by clicking right here!
</div>
</div>
<section class="the-quote">
# Quote
</section>
<section id="services">
#List of the services we offer
</section>
<section id="team">
# Team members
</section>
<section id="reviews">
#Reviews
</section>
<section id="contact-us">
#Contact-Us information
</section>
<!-- jQuery for javascript stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap javascript code / might remove tho -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<footer>
crafted with ♥ in Bangladesh by Roman Ryan Karim
</footer>
</html>
Before this error persisted, the footer used to appear underneath the contact-us section however it now appears the instance you go to the website and is stuck there. Can someone help? I don't mind sharing more of the code if you need it.
Try to remove your position absolute, of your footer
Related
When I set my browser window to a height of let's say 200px I have to scroll down to be able to see all the text in the left column of my page. I would like my background image to not only cover the viewport height, but to cover the complete page which has to be scrolled through, so that my layout does not break and the text is visible on top of the background image.
I'm doing an online course and it was explained that I can solve this problem by setting a min-height: 100vh. I've set this on .intro, .bg-image and .intro-content. My problem still occurs though.
Thanks in advance.
DEMO :
body {
margin: 0;
font-size: 1.125rem;
font-family: 'Source Sans Pro', sans-serif;
color: #404040;
text-align: center;
display: flex;
}
/* ===============
Typography
=================*/
h1,
h2,
p {
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
color: #fff;
margin: 4em 0 0;
}
h1 + p {
color: #f18119;
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0;
}
.top-text {
color: #f18119;
font-weight: 900;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-top: 5px solid #f18119;
order: -1;
}
h2 {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
h2 + p {
color: #f18119;
font-weight: 900;
text-transform: uppercase;
}
.disclaimer-text {
font-size: 0.625rem;
letter-spacing: 1px;
}
strong {
font-weight: 900;
}
/* ===============
Intro
=================*/
.intro {
width: 50%;
min-height: 100vh;
position: relative;
}
.bg-image {
background-image: url(bbq_spareribs.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(51, 44, 44, .7);
background-blend-mode: overlay;
filter: blur(3px);
width: 100%;
max-width: 100%;
min-height: 100vh;
}
.intro-content {
width: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
min-height: 100vh;
box-sizing: border-box;
padding: 0 .5em 2em;
display: flex;
flex-direction: column;
}
/* ===============
Main content
=================*/
.main-content {
padding: 2em 1em;
box-sizing: border-box;
width: 50%;
min-height: 100vh;
}
<!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">
<meta name="author" content="Tristan Graaff">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>BBQ</title>
</head>
<body>
<div class="intro">
<div class="bg-image"></div>
<div class="intro-content">
<h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
<p>Join us for this live webinar</p>
<p class="top-text">Mouthwateringly delicious</p>
</div>
</div>
<div class="main-content">
<h2>Become a BBQ master! </h2>
<p>Register Today</p>
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art!
One way to speed up the process is to learn from the best. You can do just that by signing up for this free
webinar!</p>
<form>
<input type="text" value="first name">
<input type="text" value="email address">
<input type="submit" value="register">
</form>
<p class="disclaimer-text">We'll never share your information without your permission</p>
</div>
</body>
</html>
As you already set your container .intro with height: 100vh;. You should just set on .bg-image, min-height: 100%; instead of 100vh;. This way the image will grow with a minimum height of your container.
The problem with putting always min-height:100vh; in a container with the same setting than you cannot add margin as you did because the block wont be contain by container anymore.
For the image to fit correctly with its sibling you should make the css as below.
otherwise the intro-content will be too long. I let you check the little change I made.
DEMO:
body {
margin: 0;
font-size: 1.125rem;
font-family: 'Source Sans Pro', sans-serif;
color: #404040;
text-align: center;
display: flex;
}
/* ===============
Typography
=================*/
h1,
h2,
p {
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
color: #fff;
margin: 4em 0 0;
}
h1 + p {
color: #f18119;
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0;
}
.top-text {
color: #f18119;
font-weight: 900;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-top: 5px solid #f18119;
order: -1;
}
h2 {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
h2 + p {
color: #f18119;
font-weight: 900;
text-transform: uppercase;
}
.disclaimer-text {
font-size: 0.625rem;
letter-spacing: 1px;
}
strong {
font-weight: 900;
}
/* ===============
Intro
=================*/
.intro {
width: 50%;
min-height: 100vh;
position: relative;
}
.bg-image {
background-image: url(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(51, 44, 44, .7);
background-blend-mode: overlay;
filter: blur(3px);
width: 100%;
max-width: 100%;
/*min-height: 100vh;*/
min-height: 100%; /* ADDED */
position:absolute; /* ADDED */
z-index:-1; /* ADDED */
}
.intro-content {
width: 100%;
max-width: 100%;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
z-index: 2;
min-height: 100vh;
box-sizing: border-box;
padding: 0 .5em 2em;
display: flex;
flex-direction: column;
}
/* ===============
Main content
=================*/
.main-content {
padding: 2em 1em;
box-sizing: border-box;
width: 50%;
min-height: 100vh;
}
<!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">
<meta name="author" content="Tristan Graaff">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>BBQ</title>
</head>
<body>
<div class="intro">
<div class="bg-image"></div>
<div class="intro-content">
<h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
<p>Join us for this live webinar</p>
<p class="top-text">Mouthwateringly delicious</p>
</div>
</div>
<div class="main-content">
<h2>Become a BBQ master! </h2>
<p>Register Today</p>
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art!
One way to speed up the process is to learn from the best. You can do just that by signing up for this free
webinar!</p>
<form>
<input type="text" value="first name">
<input type="text" value="email address">
<input type="submit" value="register">
</form>
<p class="disclaimer-text">We'll never share your information without your permission</p>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm working on building a responsive website using CSS and flexbox and have run into issues with my #media query. The media query is supposed to produce the changes when the min-width value reaches 992 px. (i.e the text should move to the right of the image). I looked at it multiple times and tried running it on multiple browsers, but still can't seem to figure things out.
Any help would be much appreciated.
//main.css
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');
* {
margin=0;
padding=0;
box-sizing: border-box;
}
body {
font-family: 'Roboto Mono', monospace;
}
:root {
--light: #fff;
--dark: #181b24;
--grey: #899495;
--orange: #fc5130;
--SectionGrey: #f2f2f2;
--SectionWhite: #fff;
}
/* nav*/
.nav {
background: var(--light);
}
/*end of nav*/
/*header*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./img/header-bcg.jpeg)center/cover fixed no-repeat;
flex-direction: column;
}
/*end of header*/
/*banner*/
.banner {
/* as a flex child*/
flex: 1 0 auto;
/*as a flex parent*/
display: flex;
justify-content: center;
align-items: flex-end;
color: var(--dark);
text-align: center;
padding-bottom: 4rem;
font-weight: 700;
}
.banner__title {
font-size: 4em;
letter-spacing: 0.15rem;
margin-bottom: 0.5 rem;
font-style: italic;
text-transform: capitalize;
}
.banner__jobs {
letter-spacing: 0.15rem;
text-transform: capitalize;
font-size: 1.5rem;
color: var(--light);
}
/*end of banner*/
/*about section*/
.about {
padding: 2rem 0;
background: var(--SectionWhite);
}
.about__center {
max-width: 90vw;
margin: 2rem auto;
}
.about-img-photo {
margin: 3rem 0;
position: relative;
}
.about-img__photo {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.about-img:before {
content="";
background: var(--grey);
width: 100%;
height: 100%;
position: absolute;
bottom: -10px;
left: -10px;
}
.about-info {
margin: 3rem 0;
}
.about-info__title {
font-size: 3rem;
text-transform: capitalize;
letter-spacing: 0.5rem;
background: url('./img/title-bcg.svg')no-repeat;
}
.about-info__text {
color: var(--grey);
line-height: 1.5;
font-size: 1.2rem;
margin: 3rem 0;
}
.about-info__single-link {
display: inline-block;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1.5rem;
letter-spacing: 0.2rem;
text-transform: capitalize;
border: 3px solid var(--dark);
transition: all 1s linear;
margin-right: 1rem;
}
.dark-btn {
background: var(--dark);
color: var(--light);
}
.dark-btn:hover {
background: var(--light);
color: var(--dark);
}
.light-btn {
color: var(--dark);
}
.light-btn:hover {
background: var(--dark);
color: var(--light);
}
#media screen and(min-width:992px) {
.about__center {
display: flex;
justify-content: space-between;
}
.about-info,
.about-img {
flex: 0 0 calc(50% - 1rem);
}
.about-info {
display: flex;
align-items: flex-end;
}
}
/*end of about section*/
//index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<!--main css-->
<link rel="stylesheet" href="main.css">
<!--font awewsome-->
<script src="all.js"></script>
</head>
<body>
<header class="header">
<!--first child-->
<nav class="nav"></nav>
<!--second child-->
<section class="banner">
<!--banner container-->
<div class="banner__container">
<h1 class="banner__title">I'm a clever techie</h1>
<h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
designer
<span><i class="fas fa-angle-double-right"></i></span>
photographer</h1>
</div>
</section>
</header>
<!--end header-->
<!--about section-->
<section class="about"></section>
<div class="about__center">
<article class="about-img">
<img src="img/header-bcg.jpeg" alt="" class="about-img__photo">
</article>
<article class="about-info">
<div class="about-info__container">
<h1 class="about-info__title">about me</h1>
<p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
<div class="about-info__links">
hire me
download CV
</div>
</div>
</article>
</div>
<!--end of about section-->
<script src="script.js"></script>
</body>
</html>
Screenshot before expansion
After expansion of browser window
Expected output
There is no space between 'and' and bracket '(' and that is the reason it is breaking the css. Put a space as shown below, and it should work with your own code:
Previously #media screen and(min-width:992px) {
Corrected #media screen and (min-width:992px) {
I have checked your code and I have made some changes:
I used just '#media' instead of '#media screen and...'
I used 'max-width' instead of 'min-width'.
Hope it helps!
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');
* {
margin=0;
padding=0;
box-sizing: border-box;
}
body {
font-family: 'Roboto Mono', monospace;
}
:root {
--light: #fff;
--dark: #181b24;
--grey: #899495;
--orange: #fc5130;
--SectionGrey: #f2f2f2;
--SectionWhite: #fff;
}
/* nav*/
.nav {
background: var(--light);
}
/*end of nav*/
/*header*/
.header {
min-height: 100vh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg')center/cover fixed no-repeat;
flex-direction: column;
}
/*end of header*/
/*banner*/
.banner {
/* as a flex child*/
flex: 1 0 auto;
/*as a flex parent*/
display: flex;
justify-content: center;
align-items: flex-end;
color: var(--dark);
text-align: center;
padding-bottom: 4rem;
font-weight: 700;
}
.banner__title {
font-size: 4em;
letter-spacing: 0.15rem;
margin-bottom: 0.5 rem;
font-style: italic;
text-transform: capitalize;
}
.banner__jobs {
letter-spacing: 0.15rem;
text-transform: capitalize;
font-size: 1.5rem;
color: var(--light);
}
/*end of banner*/
/*about section*/
.about {
padding: 2rem 0;
background: var(--SectionWhite);
}
.about__center {
max-width: 90vw;
margin: 2rem auto;
}
.about-img-photo {
margin: 3rem 0;
position: relative;
}
.about-img__photo {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.about-img:before {
content="";
background: var(--grey);
width: 100%;
height: 100%;
position: absolute;
bottom: -10px;
left: -10px;
}
.about-info {
margin: 3rem 0;
}
.about-info__title {
font-size: 3rem;
text-transform: capitalize;
letter-spacing: 0.5rem;
background: url('./img/title-bcg.svg')no-repeat;
}
.about-info__text {
color: var(--grey);
line-height: 1.5;
font-size: 1.2rem;
margin: 3rem 0;
}
.about-info__single-link {
display: inline-block;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1.5rem;
letter-spacing: 0.2rem;
text-transform: capitalize;
border: 3px solid var(--dark);
transition: all 1s linear;
margin-right: 1rem;
}
.dark-btn {
background: var(--dark);
color: var(--light);
}
.dark-btn:hover {
background: var(--light);
color: var(--dark);
}
.light-btn {
color: var(--dark);
}
.light-btn:hover {
background: var(--dark);
color: var(--light);
}
#media(max-width:992px) {
.about__center {
display: flex;
justify-content: space-between;
}
.about-info,
.about-img {
flex: 0 0 calc(50% - 1rem);
}
.about-info {
display: flex;
align-items: flex-end;
}
}
/*end of about section*/
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<!--main css-->
<link rel="stylesheet" href="main.css">
<!--font awewsome-->
<script src="all.js"></script>
</head>
<body>
<header class="header">
<!--first child-->
<nav class="nav"></nav>
<!--second child-->
<section class="banner">
<!--banner container-->
<div class="banner__container">
<h1 class="banner__title">I'm a clever techie</h1>
<h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
designer
<span><i class="fas fa-angle-double-right"></i></span>
photographer</h1>
</div>
</section>
</header>
<!--end header-->
<!--about section-->
<section class="about"></section>
<div class="about__center">
<article class="about-img">
<img src="https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg" alt="" class="about-img__photo">
</article>
<article class="about-info">
<div class="about-info__container">
<h1 class="about-info__title">about me</h1>
<p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
<div class="about-info__links">
hire me
download CV
</div>
</div>
</article>
</div>
<!--end of about section-->
<script src="script.js"></script>
</body>
</html>
I am new to HTML CSS and JS and am creating a website and have had a problem for a few days now, I have created a navigation bad to switch between pages but i cannot seem to position it correctly in the top left corner I was wondering if anyone could help. I would like it to be positioned exactly in the top left corner but it seems to be out of position. I have tried many solutions but cant seem to get the result i am looking for.
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
You can modify the position of an element with css position, specifying top, left, right, bottom position (only one x and one y are needed).
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
But your problem is that you specified a
margin-left: 50px;
for your body, causing the elements to move 50 px to the right, and you can reach it by deleting it:
body {
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
I'm having issues adding styles to a span tag from an external CSS file to the following snippet of HTML.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<span>LINK</span>
</div>
</body>
</html>
The corresponding CSS is below; it appears that the problematic line is the text-decoration line in the span block, which for some reason isn't being applied. Any input?
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #BCD2EE;
border-style: dashed;
border-width: 3px;
border-radius: 5px;
margin: auto;
text-align: center;
}
span {
color: blue;
font-family: times;
text-decoration: none;
}
This line was from anchor tag, rather then from span. Check css below:
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #BCD2EE;
border-style: dashed;
border-width: 3px;
border-radius: 5px;
margin: auto;
text-align: center;
}
span {
color: blue;
font-family: times;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
<div>
<span>LINK</span>
</div>
</body>
</html>
Use this
a {
color: blue;
font-family: times;
text-decoration: none;
}
Super new to Front-End development, but doing my best to get better at it by recreating websites that I like from scratch. So far, so good, but for some reason Nav bars are the bane of my existence.
Right now, the Nav links (li's inside of a div) are stacking due to what I can only imagine is a width issue. When I set a certain width, they don't stack anymore, but setting that width restricts me from aligning them to the right with my buttons.
So, what I want to do is have the "logo" div aligned to the left & the "nav_content" div aligned to the right. And when I hit a tablet breakpoint, the "nav_content" div will collapse to a hamburger menu. Hopefully this question makes sense.
Here is my code:
HTML & CSS
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
i think you need to set inline links and button so set style='clear:both' for set in same line
Add padding-left: 0; in your ul to get rid of the width problem in this scenario. I would suggest to use bootstrap to have a super responsive web design. If you still want to use your own responsive design use width (in %) in all the siblings which need to be in same line. For example width should be mentioned in % in both div.logo and div.nav_content.
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links ul {
padding-left: 0;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}
<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li>Home</li>
<li>Features</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>