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;
}
Related
i'm here to beg for your help! the problem is regarding Navigation bar, and the text/links for it.
The issue is that the last list item is all the way to the right of the header, i want to move everything to the left, not to center it completly, just to be able to move it bit by bit to fit it for my purpose!
Thanks on beforehand
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80% margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: right;
}
nav ul {
margin 0;
padding 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 20px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
.logo {
float: left;
padding: 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
try putting a margin-right: 50px or something on your nav tag
Please see the code snippets on CSS parts for the change. I hope this is your expected output.
/* CSS below: */
body {
margin: 0;
background: #222;
font-family: 'work sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
nav a:hover {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="logo1.png" alt="Logo" class="logo">
<nav>
<ul>
<li>Deals</li>
<li>Radiostyrt</li>
<li>El-fordon</li>
<li>Kontakta oss</li>
<li>Media Galleri</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
put margin-right: how much you want px on your nav tag, and don't forget to create a div to the logo, because if you put the margin-right the logo will go togheter to the left.
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.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
I'm new to the complete web design thing and I'm using github to host this little project of mine, it's not the best.
This is what I'm having a problem with.
My navigation bar isn't working and I'm not sure why. I've figured out it works when I remove my index.css and leave the navbar.css in.
This is my index.css.
html {
width: 100%;
height: 100%;
background: url("/images/background.jpg") center center no-repeat;
}
.responsive-container {
width: 100%;
border: 1px solid black;
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-family: Helvetica, Arial, sans-serif;
color: #e6e6e6 !important;
}
And this is my navbar.css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
And finally this is my index.html
<head>
<link rel="shortcut icon" href="/favicon.ico">
<title></title>
<link rel="stylesheet" type="text/css" href="/stylesheets/index.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/navbar.css">
</head>
<body>
<ul class="text">
<li><a class="active" href="/pwgen">Password Generator</a>
</li>
<li>Imgur
</li>
</ul>
<div class="responsive-container">
<div class="container"></div>
<div class="img-container">
<a href="https://www.overbuff.com/players/pc/TheKingJaffa-2542">
<img src="/images/logo.png" alt="logo" />
</a>
</div>
</div>
</body>
What I'm asking for is a little help on why it's not working properly. I'm guessing it's something in my index.css but I'm not sure what it is.
Sorry if this is fairly obvious and I'm not thinking things through
Your img-container is styled to overlay content. Use z-index to fix navigation.
Change this in CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
to this:
ul {
position: relative;
z-index:1;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
whenever i hover over the currently selected menu item its color changes i want to prevent that. here my code.
<html>
<head>
<title> Another Page </title>
<link rel="stylesheet" href="style4.css" type="text/css" />
<head>
<body>
<div id="title">
<ul>
<li class="current">Home</li>
<li>Content</li>
<li>Search</li>
</ul>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="header">
</div>
</div>
</body>
</html>
and here's the css
body
{
padding: 0;
margin: 0;
background-color: rgb(24,205,20);
}
h1,h2,h3
{
padding: 0;
margin: 0;
}
p
{
padding: 0;
margin: 0;
}
.current
{
background-color: black;
}
#title
{
background-color: orange;
}
#title ul
{
list-style: none;
padding: 0;
margin: 0;
}
#title li
{
float: left;
}
#title a
{
text-transform: uppercase;
text-align: center;
text-decoration: none;
display: block;
width: 120px;
font-weight: bold;
color: #ffffff;
padding: 4px;
}
#title a:hover
{
background-color: rgb(180,138,18);
}
#clear
{
clear: both;
}
need some urgent suggestions on solving this issue.
Thank you.
Add this line to the end of your CSS file:
#title .current a:hover {
background-color: inherit;
}