My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
Related
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
I'm creating my personal website but having trouble understanding why navigation bar size changes when I change from one HTML file to another HTML file. For example, when I click Photography_Color HTML, the navigation bar becomes bigger compared to the Main HTML. All the HTML files are using the same CSS, so I'm not sure what the problem is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<!--SOCIAL MEDIA ICON STYLESHEET-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]Son | Art & Code </title>
<div class="top">
<div class = "center">
<h>J[a]son</h>
<p>Personal Blog</p>
</div>
<nav class = "top_child">
<div class = "logos">
</div>
<div class = "nav">
<ul>
<li>HOME</li>
<li>PHOTOGRAPHY
<ul class="photography_1">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>CODING</li>
<li>ABOUT</li>
</ul>
</div>
</nav>
</div>
</head>
CSS:
body {
background-color: black; /*rgb(241, 233, 233);*/
}
html, body {
height: 90%;
margin: 0;
padding: 0;
}
.top {
margin: auto;
padding: 1.0em;
overflow: hidden;
background-color: black;
top: 0;
display: block;
position: sticky;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
z-index: 100;
clear: both;
overflow: hidden;
}
.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.center {
text-align: center;
}
.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}
.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}
.nav {
float: right;
position: relative;
list-style: none;
display: block;
}
.nav li {
display: inline;
list-style: none;
position: relative;
}
.photography_1 {
display: none;
}
.photography_1 li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 20px;
left: 25px;
}
You need to move your div with the class of top, out of the tag and inside a tag.
The element is a container for metadata (data about data) and is placed between the tag and the tag.
The tag defines the document's body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="top">
<!-- Put the rest of whats inside the top div here -->
</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 want this layout:
So I tried this:
<h2>Make search awesome using Open Source</h2>
.banner .section_title h2 {
font-family: "Oswald", Arial, sans-serif;
font-size: 5em;
line-height: 1.4em;
text-transform: uppercase;
overflow: hidden;
text-align: center;
display: inline;
padding: 0 30px;
background: #176072;
}
But I am getting this result:
So, I want to add that padding (the red circle). How can I do that?
For the responsive design, I want this result:
Here's one solution. Wrap the components that you want on separate lines with a span or div element. This will you to style the sections of text independently but keep the full text within a heading tag.
<h2><span>Make Search Awesome Using</span> <span>Open Souce</span></h2>
h2 span {
font-family: "Oswald", Arial, sans-serif;
font-size: 3em;
line-height: 1.4em;
text-transform: uppercase;
padding: 0 30px;
background: #176072;
color: #FFFFFF;
display: inline-block;
}
h2 {
background-color: #062949;
padding: 25px;
text-align: center;
}
jsFiddle: http://jsfiddle.net/vcpo5rmj/
Note: This is not a complete responsive solution.
To dynamically keep the padding on your text you need to use the CSS outline property:
body {
background-color: #033569;
}
.container {
text-align: center;
}
h2 {
display: inline;
text-transform: uppercase;
background-color: #176684;
color: white;
font-family: sans-serif;
outline: 5px solid #176684;
}
<div class="container">
<h2>Make search awesome using Open Source</h2>
<p>Click Full Page button then resize the browser</p>
</div>
Or view the example and adjust the container width in this fiddle.
Container width at 200px below:
Oh just use CSS3 box shadows to emulate the padding on either side of each line:
body {
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #003366;
}
.section_title {
text-align: center;
}
.section_title h2 {
display: inline;
font-size: 3em;
background: #176072;
box-shadow: -.5em 0 #1D758C, .5em 0 #1D758C;
}
<div class="section_title">
<h2>Make search awesome using Open Source</h2>
<p>A different color box-shadow is used for illustration.</p>
</div>
best i could do https://jsfiddle.net/tonytansley/91j10osv/3/ - not responsive sorry
<div class="banner">
<div>
<h2>Make search awesome using</h2>
<h2>Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using <br/>
Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using<em></em><br/>
<em></em>Open Source</h2>
</div>
</div>
css
.banner div{
text-align:center;
}
.banner h2, .banner p{
font-family:"Oswald", Arial, sans-serif;
font-size: 2em;
line-height: 1.4em;
text-transform:uppercase;
text-align:center;
display: inline;
padding: 0 30px;
background: #176072;
color:white;
}
.banner h2:first-of-type{
margin-bottom:0.2em;
}
em{
width:30px;
display:inline-block;
}
try this
html code...
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="holder">
<h2> Make search awesome using </h2>
<h2> Open Sources </h2>
</div>
</body>
</html>
css code
body{
margin:0;
}
div.holder{
width:auto;
height: auto;
text-align: center;
}
div.holder h2{
font-family:"Oswald", Arial, sans-serif;
font-size: 4.5em;
text-transform:uppercase;
background: #176072;
display: inline;
line-height: 80px;
}
I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size > 230px, it just bleeds into the second line. Can someone help me?
Here is an image: http://imgur.com/ovT9XM4. How the blue area doesn't snap to the end of the screen.
CSS:
<style>
body {
background-color:black;
margin:0px;
padding:0px;
}
div {
margin:0px;
padding:0px;
}
.header {
color:white;
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
}
.box {
background-color:aqua;
}
#titlebig {
font-weight:normal;
font-size:232px;
text-align:left;
margin-left:-29px;
margin-top:-76px;
}
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
HTML:
<body>
<div class="container-fluid header">
<!-- Grid structure -->
<div class="row row-no-padding">
<div id="titlebig" class="col-xs-12 box">
Let's Create
</div>
</div>
</div>
</body>
You just need to remove margin-left: -29px; from #titlebig. For example:
body {
background-color: black;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
.header {
color: white;
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
}
.box {
background-color: aqua;
}
#titlebig {
font-weight: normal;
font-size: 232px;
text-align: left;
margin-left: -29px;
margin-top: -76px;
}
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid header">
<div class="row row-no-padding">
<div id="titlebig" class="col-xs-12 box">
Let's Create
</div>
</div>
</div>
</body>
Because col-xs-* includes float: left per https://github.com/twbs/bootstrap/blob/3487898a6af8c1d5b12f7b040d30e71b19e34923/less/mixins/grid.less#L24.
If you remove the col-xs-12 class, it will be full width.
With that said, you don't need the row class either. If you are just trying to have a full width div that goes edge to edge and wraps text correctly, you are describing an unstyled block element, of which div is one.