I'm very begginer in HTML/CSS and I'm trying to set one line under my text, I used border-bottom in my CSS file, and it shows 2 lines under my text. I'm sure that I missed something but I just don't know what. I don't want to use text-decoration:underline because I need space between my text and my line. My problem is with the <h3></h3>
Thanks in advance!
This is my code:
CSS / HTML
body {
background-color: #0d0d0d;
}
.center {
margin: auto;
width: 50%;
}
h1 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 3px solid #404040;
display: inline-block;
padding-bottom: 2px;
padding: 0px;
}
h3 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 1px solid #404040;
}
p {
color: #cccccc;
font-family: "Taviraj", serif;
font-size: 23px;
margin: 0px;
}
span {
color: #ffff1a;
}
span:hover {
color: #808080;
}
<!--http://jonchretien.com/ -->
<head>
<title>Jon Chretien | Front End Enginner</title>
<link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
<link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
<div class="center">
<h1>Hello</h1>
<p>My name is Jon Chretien. I'm a <span>NYC</span> based front end<br>
engineer currently working on web apps for artists at<br>
<span>Spotify</span>. Previously at <span>The New York Times</span>.</p>
<h3>Selected Works<h3>
</div>
</body>
You forgot the / in the closing </h3> tag, so the browser made two h3s out of it, creating two lines. Just inserting that slash into </h3> fixes it.
body {
background-color: #0d0d0d;
}
.center {
margin: auto;
width: 50%;
}
h1 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 3px solid #404040;
display: inline-block;
padding-bottom: 2px;
padding: 0px;
}
h3 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 1px solid #404040;
}
p {
color: #cccccc;
font-family: "Taviraj", serif;
font-size: 23px;
margin: 0px;
}
span {
color: #ffff1a;
}
span:hover {
color: #808080;
}
<!--http://jonchretien.com/ -->
<head>
<title>Jon Chretien | Front End Enginner</title>
<link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
<link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
<div class="center">
<h1>Hello</h1>
<p>My name is Jon Chretien. I'm a <span>NYC</span> based front end<br>
engineer currently working on web apps for artists at<br>
<span>Spotify</span>. Previously at <span>The New York Times</span>.</p>
<h3>Selected Works</h3>
</div>
</body>
Your problem is with your code you need to close the <h3></h3> observe the h3 is not close in your code
Related
Just curious, why when I do print preview the headings are still colored after I've set a class selector to black? If by putting .container within the media rule and setting the color too black, should every text including headings be set to black? I know I can easily add h1, h2... I'm just curious as to why I can not set a selector to a specific color and everything within that selector be set to that during print? Thanks for the feedback!
/* reset style */
html {
font-size: 12px;
}
/* body and page container */
.container {
max-width: 600px;
margin: 0 auto;
border: 3px red;
}
/* headings */
header {
text-align: center;
padding: .4em;
background-color: darkgrey;
}
h1 {
text-shadow:2px -4px 5px black;
color: #EADCDC;
font-size: 5em;
}
h2 {
color: brown;
font-size: 3em;
}
p {
font-size: 1.2em;
line-height: 1.4em;
}
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
background-color: #dee9f9;
}
h3 {
color: green;
font-size: 2em;
}
article {
background-color: gold;
padding: 3%;
}
.accent {
text-decoration: underline;
text-align: center;
line-height: .8em;
}
/* unordered list */
ul {
list-style: circle;
font-size: 1.2em;
line-height: 1.4em;
}
aside {
background-color: #EADCDC;
width: 45%;
padding: 2%;
margin: 2%;
box-shadow: 3px 3px 3px black;
border-radius: 30px;
float: right;
line-height:4em;
}
footer {
padding: 0.6em;
color: ivory;
background-color: darkgrey;
text-align: center;
}
/// This is what I am referring to
#media print {
body, .container, aside, article {
color: black;
background-color: white;
box-shadow: none;
}
}
#page {
margin: 1in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Super Battle</h1>
</header>
<aside>
<h2 class="accent"> ARE YOU READY?</h2>
<h3>DATE</h3>
<p>10/31/2022</p>
<p>12AM - 12pm</p>
<h3>LOCATION</h3>
<p>LAS VEGAS</p>
<p>NEVADA</p>
<p>MGM GRAND CASINO</p>
</aside>
<article>
<h3>PRICES</h3>
<p>$200General</p>
<p>$400 VIP</p>
<p>$1000 ALL ACCESS</p>
<h3>SPONSORS</h3>
<ul>
<li>ELON MUSK</li>
<li>DONALD TRUMP</li>
<li>TEKASHI 69</li>
<li>BARACK OBAMAS X WIFE</li>
</ul>
</article>
<footer>
<p> www.LASVEGASBATTLE.us</p>
</footer>
</div>
</body>
</html>
I'm relatively new to HTML/CSS, but like to think I have a rather good grasp on most aspects. However, this confuses me.
On my dummy website, no matter what new element I add, it's automatically being placed in a specific position near the top of the page. I've tried fiddling with the CSS but to no avail. In this example, the p element with value "Example element" is the last element in the code but appears just under the nav in the code snippet.
You may have to run the snippet fullscreen; I'm not sure as I haven't done any viewport stuff and it's been made to fit my abnormally-wide monitor.
Maybe I haven't been introduced to this particular concept yet.
#charset "UTF-8";
#font-face {
font-family: 'Gill Sans Std';
src: url(GillSansStd.otf) format("opentype");
}
#font-face {
font-family: 'SofiaPro';
src: url(SofiaPro.otf) format("opentype");
}
#logo {
margin: auto;
display: block;
opacity: 0.6;
}
header > h1 {
margin: 0 auto;
display: block;
border-style: none none solid none;
border-width: thin;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-size: 90px;
width: 380px;
}
nav {
margin-top: 55px;
margin-left: 650px;
margin-bottom: 20px;
}
nav > a {
margin-left: 85px;
margin-right: 85px;
font-family: "Raleway";
font-weight: bold;
padding: 10px;
}
nav > a:link {
color: black;
text-decoration: none;
}
nav > a:visited {
color: black;
text-decoration: none;
}
nav > a:hover {
background-color: black;
color: white;
}
#hero-content {
float: left;
margin-left: 90px;
margin-top: 150px;
}
#title {
font-size: 30px;
font-family: SofiaPro, sans-serif;
margin-bottom: 60px;
}
#subhead {
font-family: 'Gill Sans Std';
font-weight: 100;
font-size: 18px;
color: dimgrey;
border-style: none none solid none;
border-bottom-width: thin;
border-color: dimgrey;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 10px;
}
#hero {
float: right;
margin-top: 40px;
margin-right: 40px;
}
#heropara {
width: 600px;
margin-top: 60px;
font-family: 'Raleway';
font-size: 20px;
font-weight: 800;
}
<!doctype html>
<html lang="en-gb">
<head>
<title>Blah Group</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
</head>
<body>
<header>
<h1>Foo</h1>
</header>
<nav>
BLAH
BLAH
BLAH
BLAH
BLAH
</nav>
<div id="hero-content">
<h1 id="title">BLAH</h1>
<h2 id="subhead">BLAH</h2>
<p id="heropara">Lorem Ipsum blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
<img id="hero" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg" height="200" width="200" />
<p>Example element</p>
</body>
</html>
I have been studying CSS, however i came across a weird behavior, there is this anchor element that i gave a class with name "sponsor-link", it does not show up in Firefox nor in Chrome(completely removed from the DOM tree), however if i name it something else(i.e. sponsor-link-btn) then it shows up.
Can anyone explain why using "sponsor-link" as class name can remove an element?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<div class="container">
<main class="main">
<h2>Come join us!</h2>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</main>
<aside class="sidebar">
<a href="/twitter" class="button-link">
follow us on Twitter
</a>
<a href="/facebook" class="button-link">
like us on Facebook
</a>
<a href="/sponsors" class="sponsor-link">
become a sponsor
</a>
</aside>
</div>
</body>
</html>
CSS
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
}
header {
color: #fff;
background-color: #0072b0;
border-radius: .5em;
padding: 1em 1.5em;
}
main {
display: block;
}
.container {
display: flex;
}
.main {
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}
.button-link {
display: block;
padding: 0.5em;
color: #fff;
background-color: #0090C9;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link {
margin-top: 1.5em;
}
.sponsor-link {
display: block;
color: #0072b0;
font-weight: bold;
text-decoration: none;
}
I found out now.
My browsers have AdBlock Plus plugins,
which hide the element.
I think ABP black listed the text "sponsor-link"
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
Currently, I'm working on a basic navigation bar that changes the color of the text when clicked to go to a new page (So text on one page is a different color than text on another). I started the project ultimately using multiple CSS files to get the result I am looking for but it is horrendously inefficient. Obviously "if" statements don't exist in CSS but are there a way to call on an action if a certain page is loaded.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login">Login</li>
<li class="shop">Shop</li>
<li class="wname">Website Name</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
I would appreciate any help,
Jordan
Change this rule to add an active class as well:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
And in your individual pages, use the class for the <li>. Let's say, in the Shop page, use this code:
<li class="shop active">Shop</li>
This is because, you aren't using anything that checks the location and does stuff. Also, you aren't using any back end applications, which generate dynamic header, based on the URL.