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;
}
Related
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
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
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>
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
Hi I'm trying to make my maintenance page for my site however when I try and put the main content div in the middle by using margin: auto; however it seems to stay at the top and the only way to pull it down is by using <br /> but i'd prefer not to use that as it looks messy so I was wondering if you has any ideas what's wrong
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div class="topBarcontainer">
<img class="logo" src="images/logo.png" alt="Chattrd home">
</div>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<div id="mainContent"></div>
</body>
</html>
CSS:
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
white-space: nowrap
}
.topBar {
background: #06C;
height: 40px;
}
#navigationBar {
background: #1f1f1f;
height: 28px;
color: white;
font-family: 'Open Sans';
}
.topBarcontainer{
margin: auto;
width: 1000px;
}
.logo {
padding: 7px;
height: 24px;
width: 98px;
}
#navigationBar ul {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: center;
}
#navigationBar ul li {
display: inline;
}
#navigationBar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#navigationBar ul li a:hover {
color: #FFF;
background-color: #06C;
}
#mainContent {
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Vertical centering will not work because there is nothing to center - the body will, like all HTML elements by default, be just the height needed to accomodate its contents.
Since your main content is of a fixed size you could simply solve it with absolute positioning:
#mainContent {
width: 500px;
height: 200px;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -250px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Fiddled for your pleasure.