Based on this, I've managed to figure it out, but when resizing the window, the h2 still presents a margin, which I've just removed by removing 20px from the h2, which I shouldn't have to do, however, this still presents a problem. When I resize the window, the divs do not follow the image and I'm left seeing the background. Is there any way I can fix this without having to remove 20px from every h2? But still have no gap/nothing breaks when resizing the window. If you view the snippet full window then resize your browser window you'll see what I mean.
body {
padding:0;
margin: 0;
font-family: 'Raleway';
}
.nav {
display:none;
background-color: black;
text-decoration: none;
color: silver;
margin: 0;
list-style: none;
text-align: center;
}
.nav > li {
display: block;
}
/* .nav > li:before {
content: "*";
} */
.nav > li > a {
text-decoration: none;
color: silver;
font-size:24px;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 4px;
}
.nav-btn {
display:block;
font-size: 30px;
background-color: black;
color: silver;
text-align: center;
cursor: pointer;
}
.image {
background-image:url('https://www.wbnx.com/uploads/downloads/cover_art/850x315_reign_mary.jpg');
width:100%;
max-height:400px;
background-position: left center absolute;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}
.title {
display: inline-block;
color: white;
position:relative;
margin: 15%;
text-transform: uppercase;
}
.image {
text-align: center;
position:relative;
background-color:green;
}
.image > h2 {
padding-top: 50%;
line-height: 50%;
}
#media screen and (max-width: 411px) {
.title > h2 {
font-size: 15px;
}
.image {
max-height:280px;
}
}
.submitbox {
color: yellow;
background-color: darkblue;
padding:0;
margin-top:-20px;
}
<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css1">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
<span class="nav-btn">Menu</span>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div class="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
$('ul.nav').toggle();
});
</script>
</body>
Related
my problem is that the heading "greeting" influences the position of my navigation bar.
I want it to stay at the top right corner of the screen but the heading moves it down a bit, which is inconvenient.
Could someone please give me some advice?
I thank you in advance
here the html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<h1 id = "greeting"> Hello </h1>
<body>
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
</body>
</html>
and the css code:
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
you can simply give your navigation bar an "absolute" position and set its top:0
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
top: 0;
position: absolute;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
You need to wrap the navbar and the content (contains H1) with a flex parent:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="flex-grid">
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
<div class="main-content">
<h1 id="greeting">Hello</h1>
</div>
</div>
</body>
</html>
And then apply this CSS to them:
.flex-grid {
display: flex;
}
.main-content {
flex-grow: 1;
}
.main-content h1 {
text-align: center;
}
I've ran into a problem that I'm not sure how to fixed and I believe it may have to do with the position? I've tried to look up solutions but still can't figure out why this is happening.
So I am trying to put my header (name) in my fixed navigation bar. When I attempt to do this, the header is sitting behind the grey background colour...
How can I bring the header to be on top of the background? I want the header to be fixed with the navigation bar.. thanks so much in advance!
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: -1;
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
Change z-index of h1 to 1
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: 1; /* Change to 1*/
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
The best way to do this is to fix the navbar div and then float a div to the left and include the h1 tag and a div to the right and include the ul. I wouldn't float the h1 and the ul. Something like below:
.navbar{
position: fixed;
width: 100%;
top: 100%;
left: 100%;
background-color: #f5f5f5;
}
.navbar-left{
float left;
text-align: left;
}
.navbar-right{
float: right;
text-align: right;
}
.navbar ul{
display: inline-block;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.navbar ul li{
float: left;
}
.navbar ul li a{
display: block;
padding: 14px 16px;
color: #555555;
font-family: open-sans;
}
.navbar ul li a:hover{
color: #000;
}
.clear{
clear: both;
}
<div class="navbar">
<div class="navbar-left">
<h1>header text</h1>
</div>
<div class="navbar-left">
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
Sorry about formatting. Used mobile phone to post.
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
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>