So I cant find a way to keep this navbar in my website from automatically putting itself over top of a header image! I try setting the navbar's position to relative, but that doesn't do anything! I wanna keep my header image's position to be both top and left 0, but without setting the images position to absolute, I cannot get the image to stay at 0 top and left on the screen!
body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>
<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</body>
</html>
try this in css
.navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}
I would recommend using a background image which will give you more control over the image re-sizing respective to your container. You can implement something like below to achieve what you want.
body {
font-family: Roboto;
background-color: #F0F0F0;
}
#header-wrapper {
width: 100%;
height: 50px;
}
.header-img {
float: left;
width: 100px;
margin: 0px;
height: 100%;
background-image: url("http://cdn6.bigcommerce.com/s-kjbnzo2/products/12634/images/13240/LP_8206__81949.1444680903.500.500__96128.1446754363.1280.1280.jpg?c=2");
background-repeat: no-repeat;
background-size: auto 100%;
top: 0px;
left: 0px;
}
.navbar {
float: left;
width: 80%;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<div id="header-wrapper">
<div class="header-img"></div>
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</div>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I cannot get hover to work on the dummy links in my CodePen. The cursor won’t even change to the hand icon. I am referring to the navigation bar, the dummy links do not work properly. Here is the CodePen
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
Your h1 tag is overlapping the ul tag
Solution is to add position:relative to your ul tag :)
Because Without any z-index value, elements stack in the order that they appear in the DOM and elements with non-static positioning ( relative ,absolute ..) will always appear on top of elements with default static positioning.
h1 : position:relative
ul : default static position
Adding position:relative will force your ul element to be on TOP.
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
position : relative ;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
-i set the background on black
-i set an image and changed the opacity so that it will blend in with the background.
-tried to create a text above the image but it wont show.
Here is a preview of the website:
and the following are the code that i did :)
/* Unfortunately the "---Greetings" text cant be seen in the preview and i tried finding it by changing colors just in case it was just misplaced but it didnt.
I tested another picture without the opacity, it worked but when i tried lessening it it disappears again :( */
body {
background-color: black;
}
.container img {
position: absolute;
top: 430px;
left: 670px;
right: 0;
bottom: 0;
margin: auto;
width: 101%;
min-height: 50%;
}
.container {
display: inline-block;
opacity: 0.8;
position: relative;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
color: red;
}
.mid-left h1 {
position: absolute;
left: 25px;
top: 10px;
}
.navbar {
text-align: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 5px;
right: 0px;
background-color: black;
}
.navbar a {
text-decoration: none;
color: white;
font-family: "montserrat-extrabold", sans-serif;
font-size: 15px;
letter-spacing: 3px;
}
.navbar ul {
display: inline-block;
list-style: none;
padding: 10px;
margin: 20px;
}
.navbar li {
float: left;
}
.navbar li+li {
margin-left: 20px;
}
/*changing of color when hover*/
.navbar a:hover {
text-decoration: underline;
color: red;
transition: 0.6s;
}
/*add color to the selective link*/
.navbar a:active {
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<title> R E S U M E</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" type="text/css" href="font.css">
<meta charset="utf-8">
</head>
<body>
<!-- <div id="bg">
<img src="Cover1.jpg" alt="">
</div>
-->
<div class="container">
<img src="Cover1.jpg" alt="Me">
<div class="mid-left">
<h1>----- Greetings!</h1>
</div>
</div>
<header class="flex flex-vertical-center">
<div class="navbar flex flex-horizontal-center">
<ul>
<li class="navitem"> Home </li>
<li class="navitem"> Personal</li>
<li class="navitem"> Education</li>
<li class="navitem"> Experience</li>
s
</ul>
</div>
</header>
</body>
</html>
You don't see .mid-left because
.container {
...
top: -50%;
left: -50%;
}
You have to remove top and left with these value. Furthermore I suggest to you to use background-image: url('Cover1.jpg') on .container and remove <img src="Cover.jpg" alt="Me">
I'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.