I have a header section holding my nav bar and an image. It's a black header on a white background.
<header id="header">
<img id="header-img" src="https://ruwix.com/rubiks-cube-image.php?n=4&fl=xpxyowrrbygywygowbgwyowrrxyorgybrrwyrwybwyowbgwb&bg=AABBBB&m=xy&f=png&size=200&b=40&d=5" height=100 width=100>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#catalogue">Catalogue</a></li>
</ul>
</nav>
</header>
I want to have it fixed to the top of my screen to have it always in view.
So far my CSS is
.nav-list-link {
display: inline;
padding-left: 10px;
}
#header {
display: flex;
position: fixed;
width: 100%;
background-color: black;
}
The rest of the page rises up behind it. When I adjust the width to 100%, it expands to the entire row length but leaves some space on it's left. Also, there is space above it that I can't seem to shrink.
I want to have the header at the top of the page with no extra space at the top or sides.
I solved the problem and improved your code
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<header>
<div class="navbar">
<img id="header-img" src="https://ruwix.com/rubiks-cube-image.php?n=4&fl=xpxyowrrbygywygowbgwyowrrxyorgybrrwyrwybwyowbgwb&bg=AABBBB&m=xy&f=png&size=200&b=40&d=5" height=50 width=50 style="float: left">
Home
News
Contact
</div>
</header>
<div class="main">
<h1>Fixed Top Navbar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
I see you have a class in you css but it isn't in your ul tag where i think it should be. The space that remains on you left could be the padding-left:10px in you css, keep an eye on it.
On your header selector remove the width property and add the following properties:
#header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: black;
}
This will keep it fixed to the top of your browser window
Related
I'm working on a school project that has several limitations: CSS only (No JS) & a rigid delineation of sections. The idea is as follows:
top left header w/ image top right navbar
header border bottom covering width of page
I have successfully pushed the navbar to its correct position at the top right of the page
Unfortunately, this has cut off the border-bottom spanning the width of the page and no amount of jerking it around has allowed me to keep both.
Code:
header {
border-bottom: 2px solid blue;
padding-top: 12px;
position: absolute;
}
body {
background-color: white;
}
nav {
float:right;
position: relative;
text-align: right;
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
</header>
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
</div>
</body>
</html>
There must be something exceedingly obvious I'm missing and I'm losing my mind. Any suggestions?
Just Wrap the logo and nav on the header, and change the header to use flex.
Fixed code
header {
border-bottom: 2px solid blue;
padding-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
body {
background-color: white;
}
nav {
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="container">
</div>
</body>
</html>
Your <header> tag (with bottom border) needs to enclose both the logo and the nav.
It's more efficient to use the flexbox model than floats and to avoid using position: absolute where possible.
header {
display: flex;
justify-content: space-between;
border-bottom: 2px solid blue;
}
Here's a working fiddle that will get you on track.
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 currently designing a simple web page which will consist of a logo, a horizontal navbar to the right of that, a full width image with a fixed height underneath and if on a certain page, an extra horiontal navbar underneath. Something like this:
HTML
<img src="img/imgicon.jpg" />
<nav id="mainnav" style="float: right />
<img src="img/fixedimg" style="width: 100%; height: 30%; />
<nav id="secondnav" />
The problem I have is that the fixed image is always full size and not fixed. I've tried using a parent container (div) and setting a fixed height on that, however the image always goes full size. The only solution I could find is setting the position of the image to absolute but then the nav bar underneath is hidden under the image, and I don't want to use 20 <br> to get it underneath.
What would be the best possible way to solve this?
Here's a snippet:
body {
font-family: cambria;
margin: 0;
}
/*TOP NAVBAR */
#topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
float: right;
height: 71px;
}
#topnav li {
margin-top: 13px;
float: right;
}
#topnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
color: #4d4d4d;
margin-right: 3px;
}
#topnav li a:hover {
color: blue;
}
.active1 {
color: blue;
}
/*SECONDARY NAVBAR */
#secondnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
border-bottom: 5px solid #8c8c8c;
width: 100%;
}
#secondnav li {
float: left;
}
#secondnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
color: white;
margin-right: 3px;
font-weight: bold;
}
#fullwidth {
width: 100%;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css" />
<title>Website</title>
</head>
<body>
<!--LOGO-->
<div style="width: 100%; height: 71px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" />
<!--MAIN NAV-->
<ul id="topnav">
<li>LOGIN
</li>
<li>GALLERY
</li>
<li>CONTACT
</li>
<li>INFORMATION
</li>
<li>HOME
</li>
</ul>
</div>
<div style="height: 5%; width: 100%;">
<img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" />
</div>
<!--SECONDARY NAV-->
<ul id="secondnav">
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
</ul>
</body>
</html>
As you can see from the snippet, even though the image is set to small it goes full size, as if I haven't set any attributes at all.
Use css and give the img a class
#fixed {
width: 100% height: 30%;
}
<img src="img/imgicon.jpg">
<nav id="mainnav" style="float: right;>
<img class=" fixed; src="img/fixedimg,png">
<nav id="secondnav"></nav>
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'm trying to make my logo on my navbar be centered and the other items of the navbar be around it. Currently the logo is in the center of the text items where it should be but I cannot get the whole logo with the text around it to center.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Charity</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
</ul>
<img src="images/main-logo.png" id="logo" />
<ul class="navigation">
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div><!-- end of nav -->
</body>
</html>
The css
html, body {
padding: 0;
margin: 0;
}
#logo {
float: left;
margin:auto;
}
#nav {
margin:auto;
background-color: #CCC;
height: 66px;
box-shadow: 0px 1px 10px #5E5E5E;
}
.navigation {
list-style-type: none;
float: left;
}
li {
display: inline;
padding: 15px;
margin:auto;
}
#nav a {
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: #262626;
opacity: 0.26;
}
#nav a:hover {
opacity: 0.36;
}
If the point is to center the image between the li items, just make it an item also:
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
<li><img src="images/main-logo.png" id="logo" /></li>
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div>
!!! Don't forget to remove the #logo style !!!
Check it out: http://jsfiddle.net/QUkPj/
In order for margins to work on an image, you need to declare display:block on them. img tags by default are displayed as inline elements (and margin will not do anything to inline elements).
See here: http://jsfiddle.net/9xtea/1/
because you want to center the logo and have the rest of the elements aligned to left and right of that, you'll need to use position absolute:
#logo { position: absolute; top: 0; left: 50%; margin-left: -??px; } /* negative margin half the width of the logo */
.navigation-left { list-style-type: none; position: absolute; right: 50%; margin-right: ??px } /* positive margin half the width of the logo */
.navigation-right { list-style-type: none; position: absolute; left: 50%; margin-left: ??px } /* positive margin half the width of the logo */
this centers the logo in the nav bar and then puts the left and right menu options around it regardless of their size
http://jsfiddle.net/EWf56/