So I know the file path is right as chrome tools show me its all valid, I just can't see the image. I am assuming I have missed something really obvious.
The intention is the spacer class divs are opaque as a result you will see a nice image of Rome at the back of the site which will reappear each time div class spacer is reached.
CSS
header {
width: 100%;
height: 100px;
background-color: black;
color: grey;
position: absolute;
}
body {
margin: 0;
}
.parallax {
background-image: url("rome.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content{
width: 100%;
height: 300px;
background-color: black;
}
.spacer {
width:100%;
height:250px;
opacity: 0.2;
}
#logo{
float: left;
margin-left: 25px;
font-size: 30px;
margin-top: 35px;
}
#menu ul li {
color: white;
display:inline;
font-size: 25px;
float: right;
padding-right: 30px;
padding-left: 0px;
margin-top: 35px;
list-style-image: none;
}
li a:hover {
color: white;
}
a:link, a:visited {
color: Grey;
text-decoration: none;
}
#media (max-width: 732px) {
#menu ul li {font-size: 12px;
}
#logo { font-size: 15px;
margin-top: 40px;
margin-left: 10px;
}
}
#media (min-width: 946px) {
li {font-size: 12px;
}
ul {
margin-right: 45px;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content= "width=device-width">
<meta name = "keywords" content = "web design, mobile website, affordable design, professional website">
<meta name = "autor" content = "Simon Dean">
<title>Spartan Design</title>
<link rel = "stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1 id = "logo"> Spartan | Design </h1>
<nav id = "menu">
<ul>
<li> Contact Us </li>
<li> Portfolio </li>
<li> Home </li>
</ul>
</nav>
</header>
<div class="parallax"></div>
<div class = "spacer">
</div>
<div class = "content">
Shity shity shit
</div>
<div class = "spacer">
</div>
</body>
</html>
Related
I use a div tag but my about division is still overlapping my navbar division.
This is my demo:
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip p {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#descrip h1 {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
<!----- references and resources
https://www.w3schools.com/html/default.asp
https://www.facebook.com/SmileToGoHongKong/
https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog
https://www.w3schools.com/css/default.asp
https://www.youtube.com/watch?v=hp-LP8Nv18s
https://www.youtube.com/watch?v=svv7jOxaSzw
https://slicknav.io/----->
I think this will help.
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip{text-align:center;}
#descrip p {
text-align: center;
font-size: 16px;
}
#descrip h1 {
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
so I will explain cause i have been in your place before ..
first you are making the elements inside #descrip position absolute and that's okay if u add position relative and a height to #descrip .. cause now the elements are flowing out of that #descrip container and that container's height is small so the about is coming after it therefore under the element
what would be better is using the margins and so on to place the element in the place u want .. read about margin auto also is really help full .. and be careful with float .. read about flex box also really helpful
/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/
header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.
Here is a screenshot
The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.
Learn more about CSS resets here.
Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.
/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/
header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
write following on the top of your CSS file (before any other code)
*
{
margin:0;
padding:0;
}
Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps
I know that multiple questions has been discussed on this subject, I coped and pasted every suggestion/answers.. None of them work, please help!
Remember I would like the content, when scrolled to not overlap the menubar.
My Problem
Here is the image.
When ever I scroll the center div(the one that says "this website is dedicated to games") overlaps the menu bar.
How do I prevent this from happening?
Here's another image
Code Id(s)
Center div that is colored black. id="divCenter".
Element that is being overlapped("menu bar). id="NavDivef"
Code, html
<!DOCTYPE html>
<html>
<head>
<title>Home:</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="nav">
<div id="maindic">
<div id="NavDivef">
<ul>
<h1>CPG</h1>
<li>Contact</li>
<li>Find out more</li>
<li>Contact</li>
<li>Find out more</li>
</ul>
</div>
</div>
</nav>
<center>
<div id="divCenter">
<p>
This website is dedicated to games.
</p>
</div>
</center>
<img alt="" id="gameImage" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>
</body>
</html>
Code, css
body{
font-family: arial, sens-serif;
background-size: cover;
}
*{
padding: 0px;
margin: 0px;
}
#NavDivef ul{
width: 100%;
height: 80px;
background-color: black;
line-height: 80px;
position: fixed;
line-height: 80px;
opacity: 0.8;
}
#NavDivef ul li{
list-style-type: none;
display: inline-block;
float: right;
}
#NavDivef ul a{
text-decoration: none;
padding: 30px;
color:White;
}
#NavDivef ul li:hover{
background: orangered;
color: #cc0000;
}
#NavDivef h1{
color:red;
width: 300px;
float: left;
font-size: 480%;
margin-left: 15px;
}
#divCenter{
position: absolute;
width: 50%;
height: 54%;
background-color: black;
margin-top: 280px;
margin-left: 350px;
}
#divCenter p{
color:red;
margin-top: 30px;
margin-left: 30px;
font-size: 40px;
}
#divExample{
width: 600px;
height: 700px
}
Thank you in advance.
I've begun making a basic porfolio page and I'm starting with a simple header that I want at the top center of the white space of the page, and it seems to be hidden or just not there at all. Can anybody see what I'm doing wrong? Link to site: http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
Here is the HTML bit i'm focusing on:
<div class="header"><h1>Portfolio</h1></div>
and the entire CSS for the whole site is:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
in your css you have 'header' as id and not a class, use the dot notation for a class
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
adding margin:auto; will center the div in the middle. It automatically gives even spacing either side.
Well.. your defining a class but styling a id selector.
1.) remove the below.
#header { ... }
2.) replace with.
.header { ... }
3.) You need to define a height, you can keep your existing style you had associated with misplaced #header but a few additional suggestions below:
.header {
height: 100px; // define height
margin: 0 auto; // center if you want
}
You have multiple closed head tags and you haven't defined a class for your header.
<!doctype html>
<html>
<head>
<style>
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One' rel='stylesheet' type='text/css'>
<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>
<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>
<body>
<div id="sidebar">
<h2><ul>
<li>Home</li>
<li class="current">Portfolio
<ul>
<li>Design</li>
<li><a href="photo.html">Photo</li>
<li><a href="motion.html">Motion</li>
<li><a href="web.html">Web</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul></h2>
</div>
<div class="header"><h1>Portfolio</h1></div>
<div class="social-sidebar-buttons">
<img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/>
<img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" />
<img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" />
<img src="mailto2.png" target="_blank" alt="Email Chloe" />
</div>
</div>
</body>
</html>
I am going through a tutorial right now but for some reason my code (even though it looks the same) it won't display correctly. I was hoping someone could explain why the header doesn't display black across the top and the image won't auto size.
<html>
<head>
<title> Englightenment Web Site </title>
<style type = "text/css">
* {margin: 0; padding: 0;}
body {
font-family: arial;
background-color: #ebebeb;
}
#header {
background-color: black;
height: 100px;
width: 100px;
}
.container {
width: 960px;
height: auto;
margin: 0 auto;
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(tree.jpg);
float: left;
}
#navArea
{
height: 100px;
float: right;
}
#nav
{
list-style: none;
margin-top: 30px;
}
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
#nav li
{
float: left;
margin-left:30px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
#nav li:hover
{
background-color: gray;
}
.page
{
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div id = "header">
<div class = "container">
<div id = "logoArea"></div>
<div id = "navArea">
<ul id = "nav">
<li> Home </li>
<li> Forum </li>
<li> Enlightener </li>
<li> Contact </li>
</ul>
</div>
</div>
</div>
<div id = "mainArea">
<div class = "container page">
<h3> One Can't Understand without First Listening </h3>
</div>
</div>
</body>
</html>
So I resized the original image to fix the size of my css format for the logo. It now works. Guess you need an exact pic size initially? Seems a little off but oh well I got it to fix.