As part of a school project I am trying to create my first webpage. I am however stuck on this issue where my navigation bar moves down the page when I place a logo in the top bar and center it. I wonder if anyone could help?
JS Fiddle: https://jsfiddle.net/3k65c20u/
Here is my code:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li>Miten se toimii
</li>
<li>Osta
</li>
<li>Tarina
</li>
<li>Meistä
</li>
<li>Uutisia
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
not sure what design you want achieve, but i just changed the navigation bar position to relative, and the image to absolute, so... set left to 50% and using the CSS property transform: translateX(-50%); the image is finally centered
https://jsfiddle.net/3k65c20u/1/
Remove the padding: 210px at the .navigation-bar ul rule!
change css in ul to, removing padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
Related
So I am trying to create a webpage which has a sticky Navbar and Parallax Effect. It has 2 sections: first is the picture and under is some text. The navbar is only visible in the text sections.
Unfortunately, the navbar is, like, getting under the picture and then pops out when I scroll down to the text section. Would be grateful if someone could help me with this problem (first time making a webpage)!
body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
line-height: 1.5;
background-color: white;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
position: fixed;
background: #f4f4f4;
width: 100%;
height: 15%;
/* padding: 0px 30px;*/
box-sizing: border-box;
}
.name {
float: left;
width: 180px;
padding-right: 150px;
}
nav {
width: 100%;
height: 50px;
top: 0;
padding: 15px 0px;
color: black;
text-decoration: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-left: 10px;
margin-top: 0px;
position: relative;
padding: 20px;
}
nav ul li a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Helvetica, sans-serif;
transition: .4s;
}
<header>
<nav>
<div class="container">
<div class="name">
<img src="logoimg.png> </img>
</div>
<ul>
<li> Home </li>
<li> Who we are </li>
<li> What we do </li>
<li> Our projects </li>
<li> Contact us </li>
</ul>
</nav>
</header>
Add z-index to the CSS for nav:
nav {
width: 100%;
height:50px;
top: 0;
padding:15px 0px;
color: black;
text-decoration: none;
z-index: 20
}
I am creating a webpage and the css and html are fairly straightforward. However, in Chrome, and only on 100% zoom, when I hover over a navbar item a tiny sliver of the container div color stays the same. If I change the zoom level or use another browser this effect is not present. Any thoughts: Code is below.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Site Title</title>
</head>
<body>
<div class="img_div" id="visible_div1">
<img src="images/logo_transparent.png" class="logo_img" id="img1"/>
</div>
<div class="nav_bar_div" id="visible_div2">
<ul class="nav_bar" id="ul1">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="main_div" id="visible_div3">
</div>
</body>
<footer>
Footer Text
</footer>
CSS:
body{
background-color: #5d5953;
font: arial;
color: white;
}
.img_div{
position: relative;
margin: auto;
height: 10%;
overflow: hidden;
background: white;
width: 60%;
}
.logo_img{
top: 10%;
float: right;
height: 80%;
padding: 0 2% 0 2%;
position: relative;
}
.nav_bar_div{
width: 60%;
background: #ff9900;
margin: auto;
padding: 0;
}
.nav_bar{
list-style-type: none;
margin: auto;
overflow: hidden;
}
.nav_bar > li{
display: inline-block;
margin: 0;
padding: 1%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.nav_bar > li:hover{
background-color: white;
}
.nav_bar > li > a{
display: block;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
font-size: 2em;
margin: 0;
}
.nav_bar > li:hover a{
color: #ff9900;
}
.main_div{
background-color: white;
color: black;
width: 60%;
height: 85%;
margin: auto;
background-image: url("images/welcome_image.jpg");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
footer{
background-color: #ff9900;
font-family: arial;
width: 60%;
margin: auto;
text-align: center;
padding: 0.5% 0 0.5% 0;
}
Example (Chrome):
NavBar Issue In Chrome
Example (IE):
NavBar Correct In IE
I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-size: 13px;
background-color: #fafafa;
font-family: Arial, sans-serif;
}
.container {
height: auto;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
secion {
width: 100%;
height: auto;
background-color: #fff;
}
header {
width: 100%;
height: 168px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
}
.top-nav {
width: 100%;
height: 42px;
background-color: white;
}
.top-nav ul {
float: left;
line-height: 42px;
list-style-type: none;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a, a:visited {
color: #444;
padding: 42px 12px;
text-decoration: none;
}
.top-nav ul li a:hover {
background-color: #fafafa;
}
.center-console {
width: 100%;
height: 80px;
background-color: #f4f4f4;
}
header nav {
width: 100%;
height: 46px;
background-color: #fff;
}
header nav ul {
float: left;
line-height: 46px;
list-style-type: none;
}
header nav ul li {
margin: 0;
display: inline-block;
}
header nav ul li a, a:visited {
color: #444;
padding: 46px 12px;
text-decoration: none;
color: rgba(0,0,0,.54);
}
header nav ul li a:hover {
color: #15c;
background-color: #fff;
box-shadow: 0 4px 8px 0 #dcdcdc;
}
.logo {
float: left;
width: 200px;
height: 50px;
margin-top: 15px;
background-color: #fff;
}
.center-console form {
float: right;
width: 400px;
height: 40px;
padding: 0 15px;
margin-top: 20px;
border-radius: 3px;
background-color: #fff;
}
.search-icon-small {
width: 18px;
height: 19px;
float: right;
margin-top: 11px;
background-repeat: no-repeat;
background-image: url("../images/search-icon-small.png");
}
header form input[type=text] {
border: 0;
width: 342px;
height: 40px;
outline: none;
background-color: #fff;
}
.shopping-cart {
width: 38px;
height: 32px;
float: right;
margin-top: 7px;
font-size: 25px;
background-repeat: no-repeat;
background-image: url("../images/shopping-cart.png");
background-position:bottom;
}
.item-count {
color: #fff;
width: 18px;
height: 18px;
float: right;
font-size: 10px;
line-height: 19px;
font-weight: bold;
border-radius: 50%;
text-align: center;
background-color: #4683ea;
}
/*** Homepage ***/
.banner {
width: 100%;
height: 480px;
background-color: #4387fd;
}
.banner form {
width: 880px;
height: 50px;
margin: 0 auto;
padding: 0 15px;
margin-top: 228px;
border-radius: 3px;
background-color: #fff;
}
.search-icon {
width: 30px;
height: 30px;
float: right;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url("../images/search-icon.png");
}
.banner form input[type=text] {
border: 0;
width: 805px;
height: 50px;
outline: none;
background-color: #fff;
}
.featured-items {
width: 1200px;
height: 358px;
padding: 21px;
margin-top: 100px;
border-radius: 6px;
position: absolute;
overflow: hidden;
background-color: #fff;
}
.featured-items ul {
list-style-type: none;
}
.featured-items ul li {
float: left;
width: 214px;
height: 214px;
margin-right: 22px;
background-color: #f5f5f5;
}
.featured-items ul li:last-child {
margin: 0;
float: right;
}
footer {
width: 100%;
height: 400px;
margin-top: 80px;
overflow: hidden;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>BasicOffer</title>
<link rel="stylesheet" type="text/css"href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="top-nav">
<div class="container">
<ul>
<li>Selling</li>
<li>Help</li>
</ul>
<ul style="float:right;">
<li>Account</li>
</ul>
</div>
</nav>
<div class="center-console">
<div class="container">
<div class="logo"></div>
<form>
<input type="text" placeholder="Search..">
<div class="search-icon-small"></div>
</form>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>Health & Beauty</li>
<li>Household Supplies</li>
<li>Baby & Toddler</li>
<li>Home & Garden</li>
<li>Electronics</li>
<li>Pet Supplies</li>
</ul>
<div class="shopping-cart">
<div class="item-count">11</div>
</div>
</div>
</nav>
</header>
<div class="banner">
<div class="container">
<form>
<input type="text" placeholder="What are you looking for?">
<div class="search-icon"></div>
</form>
<div class="featured-items">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<footer>This will be the footer</footer>
</body>
</html>
Design:
Thanks,
Richard.
Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
working example
It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)
When I put my cursor right on top of the link text, the link is not clickable, but if I put my cursor a little bit below the text, it becomes clickable. I'm learning right now so please explain to me why it's doing that and how to fix it.
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
It's because your <h1> is a block-level element, which will lay over the menu elements. If you give it display: inline-block, it will work as supposed.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
See my example below.
* {
margin: 0;
padding: 0;
}
header {
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1 {
color: white;
position: relative;
left: 100px;
top: 5px;
display: inline-block;
/* Added */
}
nav {
margin-top: -20px;
margin-right: 100px;
}
nav ul {
float: right;
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover {
background-color: #84FFFF;
}
.main {
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop {
width: 1024px;
}
.title {
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3 {
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About
</li>
<li>My Work
</li>
<li>Contact Me
</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
The problem is occurring because of the interaction between some of your styles. You're floating the nav ul element to the right, but you're also setting the nav ul li display to inline-block which is also doing an implicit float (try replacing it with float: left and you'll see the same behavior).
If you set the position:relative on your nav ul, it willforce the elements to float correctly within the ul container.
nav ul{
float: right;
margin: 0;
padding: 0;
position:relative; /*ADD THIS*/
}
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr