I'm trying to have a header banner in my html assignment however I cannot get the header image to appear.. or any background-image.
Here is my code
All of the files are in a folder named assign1_1, images are in a folder named images, css is in a folder named styles.
Everything else in the css works however the image doesn't. Help would be appreciated!
* {
padding: 0;
margin: 0;
font-family: Arial
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header{
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("images/bg.jpg") no-repeat;
height: 100%;
width: 97%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
Make sure the current web page is in the same directory with "images" and "styles". Does your directory tree look like this?
- assign1_1
- - file.html
- - styles
- - - style.css
- - images
- - - bg.jpg
Or is assign1_1 in the same folder as the others? You might want to change images/bg.jpg to ../images/bg.jpg if it is. I tested your code using a stock blue sky image from Google Images, it seems to be working fine. You were missing a semicolon in the universal selector block with "Arial".
* {
padding: 0;
margin: 0;
font-family: "Arial";
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header {
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("https://image.freepik.com/free-photo/blue-sky-with-clouds_1232-936.jpg") no-repeat;
height: 100%;
width: 97%;
display:flex;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
I found it odd you have your <footer> nested inside of a <div id="footer">, instead of being alongside <header> and <nav>. You could get rid of the nesting and just do footer instead of #footer in the CSS.
First try to edit in your elements
first edit your css like this
/*changes top 60px or its up to you */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 60px;
width: 100%;
display: flex;
justify-content: space-around;
}
Then Copy my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<!-- this is added to your code as sample -->
<div class="header">
<h1><Center>Header</Center></h1>
</div>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
That is only a sample if you want a background image you need to set background image inside header class. hope it helps you
Related
I am working on a navigation bar, and I am stuck because my code won't work as attended. When on mobile (760px) I want my nav-bar to show 3 div classes as an icon for the 'pop up' menubar. I just can't figure out why it won't show up.
The code, CSS:
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
Code, HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links"
<ul>
<li>
Home
<li>
<li>
About
<li>
<li>
Work
<li>
<li>
Our Project
<li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
If anyone, can see the problem, it would be great if you could tell me.
I found the problem with the code. And it a simple mistake, but one I did not think would matter, or can't see why it worked. So if anyone can explain why this solved the issue, that would be great. Anyway, I moved the 'div burger class' to before the 'nav-links' in my HTML code. I am not sure why this fixed the issue, but it did. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com" rel='Stylesheet'>
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Project
</li>
</nav>
<script src="app.js"></script>
</body>
</html>
I can't figure out why it would matter to move the code, but I did in an attempt to see if that was the reason, and it was. If you can explain to me why this is the answer, that would be great.
Use Bootstrap for designs like this first.There is an error at the top of the css code you wrote, fix it.
body, *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
It has to be like this
I'm trying to clone the Google front for educational purposes in my career as a front-end developer. In this case I am working with Google's own sprite. Here I put an image of the sprite with which I am working.
This is the HTML that I carry so far. As you can see, I am still creating the header.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google. Búsqueda avanzada · Programas de publicidadTodo acerca de GoogleGoogle.com in English. © 2020 - Privacidad - Condiciones." />
<meta name="author" content="Diesan Romero" />
<link rel="stylesheet" href="./assets/css/main.css" />
<title>Google</title>
</head>
<body>
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
</header>
</body>
</html>
On the other hand, this is the sass file that I have so far:
header {
width: 100%;
height: 60px;
nav {
display: flex;
justify-content: flex-end;
.nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
a {
margin-right: 10px;
color: $black-color;
}
a.menu-icon {
background-image: url('../images/sprite.png');
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: .55;
}
}
}
}
The reason I use sass is because periodically I will take the project to another level, maybe I will pass it to React, etc.
The problem is that I don't know if I'm positioning the sprite well so that it shows me the icon I want. Here is an image of the icon that should come out:
However, this is what I am getting:
Yeah, I know, very sad 😢
Can someone please help me?
I think you just need to set the element as a display:inline-block and give it a size
From what i can see, i think that the element is 0x0 px right now.
Try adding this to the a.menu-icon class
height: 29px;
width: 28px;
display: inline-block;
/* compiled style */
header {
width: 100%;
height: 60px;
}
header nav {
display: flex;
justify-content: flex-end;
}
header nav .nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}
header nav .nav-right__section a {
margin-right: 10px;
color: #222;
}
header nav .nav-right__section a.menu-icon {
background-image: url("https://i.stack.imgur.com/YTlAV.png");
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: 0.55;
display: inline-block;
width: 30px;
height: 30px;
}
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
I am trying to build a custom navigation bar. Currently, it looks like this:
How do I bring each of my anchor element to get in the center of each box (both vertically, and horizontally)? Also, the brand element has a bigger font, but I want a solution which will center all the elements nicely.
In short, I want it to look something like this:
The borders on the first pic is for testing obviously. I made the second pic with a photoshop edit. My code for this page looks is this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-top: 13px;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 20px;
font-weight: bold;
margin-top: 7px;
margin-right: 25px;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav class="navbar">
<div class="container">
<ul class="navbar-list navbar-list-left navbar-brand-list">
<li class="navbar-item navbar-brand-item">
BRAND
</li>
</ul>
<ul class="navbar-list navbar-list-left">
<li class="navbar-item">
Product
</li>
<li class="navbar-item">
Pricing
</li>
<li class="navbar-item">
Company
</li>
<li class="navbar-item">
Blog
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li class="navbar-item">
Log in
</li>
<li class="navbar-item">
Sign up
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="twelve column">
<h4>Basic Page</h4>
<p>
Lorem ipsum ....
</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Note: I am using Skeleton for this.
So how do I fix my navbar? These are the things I want:
The text of each anchor element needs to be centered vertically and horizontally.
I want the element containing the element to take up 100% of the height of the navbar.
Any help is appreciated!
Replace this css and check, it may help you..
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}
</style>
i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}
I'm trying to force the word "District" to sit below "Area School", but it tends to force "District" to the left of the page underneath the logo
HTML:
<!DOCTYPE html>
<head>
<meta name="description" content="EPASD is a public school district that serves the communities in and around East Pennsboro Township in Central Pennsylvania.">
<meta name="author" content="John Gibson">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="nomargins">
<header id="MainHeader">
<nav>
<ul>
<li class="inline" style="max-width:auto">
<img src="EPASD logo.svg" id="logo">
</li>
<li class="inline" id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li class="inline" id="DistrictName_2">
<div class="inline">Area School</div>
<div class="inline">District</div>
</li>
</ul>
</nav>
</header>
<aside>
<nav style="VerticalNavbar">
<a href="">
</nav>
</aside>
<section id-"MainContentArea">
<div id="carousel">
</div>
</section>
<aside id="articles">
<h1 class="ArticleSectionHeading">Articles</h3>
</aside>
</body>
</html>
CSS:
* {
margin: 0px 0px 0px 0px;
}
body {
background-image: url(background.svg);
background-size: cover;
background-attachment: scroll;
}
.nomargins {
margin: 0px 0px 0px 0px;
}
#MainHeader {
background: #F08819;
position: fixed;
z-index: 100;
height: 115px;
width: 100%;
min-width: 320px;
color: #000000;
opacity: 0.9;
}
#articles {
position: relative;
overflow: hidden;
}
#logo {
height: 100%;
max-height: 150px;
margin-top: -17px;
}
ul {
list-style-type: none;
padding-left: 0px;
max-height:auto;
overflow: visible;
display: inline-block;
}
#DistrictName_1 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 3.6em;
vertical-align: 60px;
margin-left: 26px;
}
#DistrictName_2 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.625em;
vertical-align: 80px;
}
.inline {
display: inline;
}
.block {
display: block;
}
Any suggestions on how to force District underneath? I'd like to keep it as text rather than merging the text into an .svg
Is this what you wanted to achieve?
Changed HTML
<ul>
<li style="max-width:auto">
<img src="EPASD logo.svg" id="logo"></img>
</li>
<li id="DistrictName_1">
<span>East Pennsboro</span>
</li>
<li id="DistrictName_2">
<div>Area School</div>
<div class="clear">District</div>
</li>
</ul>
CSS
ul li, #DistrictName_2 > div {
display:inline-block;
}
.clear {
float:left;
clear:both;
}
Working example here:
JSFiddle