So Im currently creating a webpage, and I want to put a navigation bar at the top, but for some reason its not showing even though I set the colour of it to black in my CSS. I need the header "JG.OFFICIAL" to be inside the nav since its the logo. But it does not seem to be working well, some advice is appreciated.
My site: https://jgofficial1.000webhostapp.com/index.html
Here is my code:
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
position: fixed;
}
nav {
color: black;
height: 60px;
width: 100%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME
</li>
<li>WORK
</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
You should declare background: black; in nav if thats what you're looking for.
The CSS property for setting background color is background or background-color and not color.
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
position: fixed;
}
nav {
background: black;
height: 60px;
width: 100%;
}
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
This code will work for you
h1 {
color: white;
font-family: 'Montserrat', sans-serif;
height: 40px;
width: 70px;
}
body {
background-image: url("../images/hello.jpg");
background-size: cover;
margin:0;
padding:0;
}
nav {
background-color: #e76160;
height: 60px;
width: 100%;
}
ul{
list-style: none;
}
li{
display: inline-block;
}
<nav>
<div class="header-logo">
<h1>JG.OFFICIAL</h1>
</div>
<ul>
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
There are other problems besides the background color. I've put in a few inline styles using Chrome that may be helpful to see some possible changes. You also have an element at the bottom with a z-index that's amazingly high. You may want to reconsider that number as I don't know of a good reason to have a z-index that's 2 billion something.
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?
family=Montserrat:600" rel="stylesheet">
</head>
<body data-gr-c-s-loaded="true" cz-shortcut-listen="true">
<nav>
<div class="header-logo" style="
display: inline-block;
margin-left: 20px;
margin-right: 50px;">
<h1>JG.OFFICIAL</h1>
</div>
<ul style="
display: inline-block;
margin-left: 650px;">
<li>HOME</li>
<li>WORK</li>
</ul>
</nav>
<h2>There's Still a bit of work to be done, come back soon</h2>
<!-- the rest of your body -->
</body>
Related
I've already set the navbar, the image with the text, and the under part is going to be another menu. How an I first of all center the bottom menu and overlap it on the image as in the example? This is
How I want it to look
On the other hand, this is
How it looks
I've only placed the code of the image and the under part since the code of the nav bar doesn't matter
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,700|Prata" rel="stylesheet">
<style>
.HomeTabImage {
background-image: url('Images/Chairs.jpg');
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script>
</script>
<link rel='stylesheet' href='Styles.css'/>
</head>
<body>
<header class="TopMenu">
<nav class="TopSetup-Container">
<img src="Images/Logo.png"/ id="Logo">
<ul class="Menu">
<li>Login</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
<ul class="Menu">
<li>Support</li>
<li>About Us</li>
<li>Submission</li>
<li>Tutorial</li>
</ul>
</nav>
</header>
<article class="HomeTabImage">
<h1> Service Finder </h1>
<p> Let the opportunities begin </p>
<p> Everything we do is driven by opportunities </p>
<p> Search and provide services </p>
</article>
<article class="Services">
<h3 id="HomeTabServicesTitle"> Here are the services provided by the community </h3>
<div class="ServicesContainer">
<ul class="Options">
<li>Univeristies<br>🎓</br></li>
<li>Internships<br>📊</br></li>
<li>Courses<br>💻</br></li>
<li>Jobs<br>💼</br></li>
<li>Services<br>🌐</br></li>
</ul>
</div>
</article>
</body>
</html>
CSS
.HomeTabImage {
height: 340px;
width: 100%;
text-align: center;
line-height: normal;
}
.HomeTabImage h1 {
font-size: 70px;
color: black;
}
.HomeTabImage p {
font-size: 50px;
color: black;
}
/*Home Tab Info part*/
.Services {
text-align: center;
width: 80%;
}
.Services p {
width: 640px;
}
.ServicesContainer {
}
#HomeTabServicesTitle {
color: #828282;
border-bottom: 2px solid #8B8C8C;
padding-top: 20px;
padding-bottom: 10px;
}
.Options {
display: flex;
justify-content: space-around;
width: 100%;
padding-top: 20px;
}
.Options li {
list-style: none;
}
.Options a {
font-size: 25px;
}
To center it, use margin-left: 10%;.
For overlapping try using z-index: 2;.
My hover code is only working on a specific zoom size, which is 67% for all of the the boxes. However, when I zoom to 80% only two work. When I zoom in to 100% only one works. I will provide the parts that are used. I need my code to show where the boxes are for main-nav in different zoom-ins please help. Here is the HTML & CSS code thank you:
HTML
...
<div class="row">
<div class="logo">
<img src="LogoSmall.jpg">
</div>
<ul class="main-nav">
<li class="active"><a>Sell Your House</a></li>
<li>How It Works</li>
<li>Compare</li>
<li>About</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
<div class="title">
<h1>Sell Your House Today<br>
Get Started Now...</h1>
<div class="button">
Get Started
Learn More
</div>
</div>
</header>
CSS
...
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(HouseJPEG.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 140px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
Im kind of new to programming and to this website. I copied your code and it worked fine for me. Im using Google Chrome right now and no matter how much I zoom in, the hover effect always does its job. You could try specifying the viewport in the area by:
<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
!DOCTYPE html is to tell the browser to use HTML5 but what you should really be looking at is the meta viewport. I hope this helps
My website has a vertical navigation bar to the left, so when I center text it is centered but not centered in the green section.
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 300px;
background:#6495ED;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color:#27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Code is here. http://pastebin.com/xgvt4P0a
Here is the image the text is centered, but not centered in the green section. https://imgur.com/kkDlnik
Thanks!
You are using wrong HTML, So i will not go any forward.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body bgcolor="#81F781">
<div id="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="content">
<h1> Informational Tech Site</h1>
<div>
</body>
</html>
You have specified an absolute width to your sidebar, which in general is fine. But your <h1> is declared outside of your sidebar container (which, as already said, has a fixed width). To put your <h1> into the center, just specify a padding-left: 300px; (as already mentioned a few times by others in here) to your <h1> or, and that's more responsive for future purposes, wrap your sidebar and <h1> inside a parental container, so your sidebar and <h1> will automatically fit into that parent container. While doing so, using text-align: center; on your <h1> should work without a padding.
As per you code add margin-left:300px; to h1 will make your h1 in proper center.
Because your sidebar is fixed and having width:300px.
And why your have h1 in head section.
.sidebar {
position: fixed;
height: 100%;
left: 0;
top: 0px;
width: 300px;
background: #6495ED;
}
h1 {
text-align: center;
margin-left: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color: #27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Fiddle
Add padding-left:300px to body
This is something to do with layouts.
Anyhow, as your side bar width is 300px and fixed positioned, you could just add padding-left:300px to body, so any content added will be aligned into the green place.
Here you go:
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 25%;
background:#6495ED;
}
#Content {
width: 75%;
float: right;
}
jsFiddle
You need another div to put h1 to it then use percentage for width of both divs, mean new div called content and sidebar. your issue is h1 got full width of your page because your sidebar has fixed position and you need to use percentage width to keep them equal. just a float: right for content and width: 75%; and 25% width for sidebar will solve your problem.
First, your elements isn't sorting well, you have to write the <h1> inside the <body> tag not in <head>
To center the h1 you have to add 300px padding in left, because your 'fixed' positioning sidebar isn't take physical place in body canvas, so, if you're using 'fixed' or 'absolute' positioning it's not taking effect in positioning of other elements.
Use following css for .sldebar rule:
.sidebar {
position: fixed;
height: 100%;
left: 50%;
top: 0px;
width: 300px;
background: #6495ED;
transform: translateX(-50%);
}
i have searched about and can't seem to find the answer I am looking for.
I want to know how to move my div down below my fixed header.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
width: 100%;
margin: auto;
}
.container {
width: 75%;
margin: 0 auto;
}
.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 15%
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "Oswald", sans-serif
}
.nav {
float: right;
margin-right: 15%
}
<!DOCTYPE html>
<html>
<head>
<title>team Zeus | Home</title>
<link rel="stylesheet" href="../stylesheets/styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1>team Zeus</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Page</li>
<li>Another page</li>
<li>1 other page</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
</div>
</body>
</html>
I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out
Thanks
You mean just move the content down below the header? If that's what you want just position the content div like this:
.div {
position:relative;
top: 100px;
}
i think this will definately help
I'm currently converting my portfolio mock up into html/css and I've come across something that has confused me.
http://www.mozazdesign.co.cc/
As you can see, the navigation text is positioned in the wrong place; I want it to be inline with the markers. I've looked through the code loads and looked at other websites but can't figure out why it's not working..
This is the exact code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('Images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('Images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
}
#main_nav li {
list-style-type: none;
display: inline;
font-family: century gothic;
font-size: 18px;
color: white;
margin-right: 17px;
}
Any ideas why it isn't positioned correctly?
Thanks in advance!
Add a new CSS class:
#main_nav
{
position: relative;
top: -10px;
}
Adjust the top value until it looks correct.
The relative position says 'position this element where it naturally occurs' and then you can use 'Top' and 'Left' values (positive values to move it down and right, negative to move it up or left) to modify it's position from it's relative position.