I am working on the project where I set the div of the header to 100% and the main container is also 100%, but the right and left sides are to filled by the header. And the top is also not at the very top, but I managed to fix it by applying -ve margin, but don't want to do that for the left and right sides.
Please help me fix this, this is the CSS and HTML code:
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>
Note: I used embedded font Junction, which is not online. And also, I don't want to increase the width to 120% and make the left margin -ve. Please suggest another way
Thank you so much,
Arthrax
You need to remove the default margins from the body and other elements. A 'universal' reset is a good option althouta proper Reset CSS is optimal
* {
margin:0;
padding:0;
}
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
* {
margin:0;
padding:0;
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>
Try adding:
body {
margin: 0;
}
as show in this fiddle.
Most browsers apply a default margin of 8px to all sides of the <body>. Beyond that the margins of your <h1> are also causing your #header DIV to be pushed down. That margin will also cause a DIV below #header to be pushed down and add a "white" space between.
body,
#header h1 {
margin: 0;
}
Just add margin with a property value of 0 to body
#font-face{ font-family:'Junction';
src:url('junction/Junction-webfont.eot');
src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');
}
body {
margin: 0;
}
#main {
width: 100%;
padding: 0;
}
h1 {
font-size: 2em;
padding: 1.7%;
}
#header {
min-width: 100%;
background-color: #FF6978;
display: block;
font-family: Junction, "Times New Roman", sans-serif;
width: 100%;
margin-top: -1.6%;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Chekcking</h1>
</div>
<!--close header-->
</div>
<!--close main-->
</body>
</html>
Related
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
I was just messing around with CSS & HTML and added a header with a background color to the top of my website. Then I saw that there was lots of white space on top of the header's background color and to the sides of it. How do I get rid of this white space using CSS? Here is my code along with a picture of how the website looks right now:
<!DOCTYPE html>
<html>
<head>
<title>
Website
</title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
.typeofvirus{
font-family: 'Open Sans', sans-serif;
}
br {
line-height: 2%;
}
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p></p>
<section id = "topheader">
<div id = "topheaderdiv">
<h1 style = "font-family: 'Baloo Bhaina', cursive; text-align: center;"><big>Hello</big><br><small><small><small style = "font-family: 'Nunito', sans-serif;">This is a webpage</small></small></small></h1>
</div>
</section>
<h2 class = "typeofvirus">What are Microbes?</h2>
<p></p>
<h3 class = "typeofvirus"><big>Types of viruses caused by microbes in the bathroom</big></h3>
<ul>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Dermatophitic fungi</big></i>: Caused by people walking barefoot in bathrooms</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Gastrointestinal viruses</big></i>: Caused by contact with a toilet. This can remain on a solid surface for over a week. This causes stomach ailments.</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Residual fungi</big></i>: which can cause asthma or allergies. This is caused by the mold in the bathroom due to lack of cleaning.</li>
</ul>
</body>
</html>
You need to reset your body and html margin and padding too:
Add this to your CSS:
html, body {
margin: 0px;
padding: 0px;
}
I would go with anned20's answer but for the sake of academic curiosity you can also add
overflow: hidden;
to body and html. Or manually give the element a negative upper margin and a 100% width like this
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
But, again, anned's solution is ideal.
I'm trying to expand the background image of the header to 100% of browser height but it doesn't work. The bg image is just a small bar although it is a big wallpaper, do you see my mistake?
<head>
<meta charset="UTF-8">
<title>TEXT</title>
<meta name="description" content="text">
<meta name="keywords" content="text" >
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header>
<h1>TEXT <br> <span>TEXT</span></h1>
</header>
<section>
<article>
<p>TEXT</p>
<img src="images/spachtel1.jpg"><br>
<img src="images/spachtel1.jpg"><br><br>
</article>
</section>
<footer>
<h3>text<br>
</footer>
</body>
Here's the CSS file:
#font-face { /* ERSTENS LADE font family rein*/
font-family: 'alex_brushregular';
src: url('../css/alexbrush-regular-webfont.eot');
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../css/alexbrush-regular-webfont.woff2') format('woff2'),
url('../css/alexbrush-regular-webfont.woff') format('woff'),
url('../css/alexbrush-regular-webfont.ttf') format('truetype'),
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
font-size: 1rem;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
h1 { /
font-family: 'alex_brushregular', 'sans-serif';
}
section p {
font-weight: 100;
font-size: 1.13rem;
font-style: italic;
}
span.by {
color: red;
}
section a {
color: #eda318;
text-decoration: none;
font-style: normal;
}
section a:hover {
text-decoration: underline;
}
header {
background-image: url('../images/bgheader1.jpg');
background-position: 50% 50%;
background-size: cover;
}
I think this is because your background image is set only to affect your header. Try making it affect your body.
Try adding the background image styling to the <BODY> tag instead of the <HEADER> tag like this:
body {
background-image: url('http://lorempixel.com/400/200/nature/');
background-position: 50% 50%;
background-size: cover;
}
I solved it:
I had to write
height: 100%;
to the header of the CSS file.
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!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>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty
Here's the image:
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FLoung</title>
<meta charset="utf-8">
<style>
body {
background-color: #cfcfcf;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
text-decoration: none;
}
#wrapper {
width: 700px;
margin: auto;
padding: 5px;
margin-top: 75px;
}
</style>
</head>
<body>
<div id="wrapper">
Test
</div>
</body>
</html>
how would I go about doing the second dark layered background? the top part is light grey, how would I go about doing the bottom part dark?
Would I just create a new div, with a z-index?
You could just split the wrapper div into two divs with different background colours
Example here