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.
Related
I want to place the text nearby the logo but justify-content: center; is making it more difficult, how can I move the text closer to the logo without having to use position: left/right ?
Using css-position will affect the responsiveness in the future ?
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
justify-content: space-between;
}
img {
width: 100px;
}
p {
font-size: 30px;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<img alt="logo" src="logo.png">
<p>Random Text</p>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
</body>
</html>
You can just remove the justify-content and add a margin-left: auto to the nav instead (to make it right aligned). That should make the text right next to the logo.
If you need to add some space between the logo and the text, just add a margin-right to the logo and add the space you need.
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
/* Removed justify-content */
}
img {
width: 100px;
/* add margin-right to set distance between logo and text */
}
p {
font-size: 30px;
}
/* Adding this will make the navigation right aligned */
nav {
margin-left: auto;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<img alt="logo" src="logo.png">
<p>Random Text</p>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
</body>
</html>
.header-left {
display:flex;
align-items: center;
};
img {
width: 100px;
}
body {
background: #19111d;
}
header {
background: #8761b3;
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
padding: 0px 20px;
}
<header>
<div class="header-left">
<img alt="logo" src="logo.png">
<p>Random Text</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</header>
I tried putting it on the same line by using the float: left element on the h1 and float: right on the nav, but it keeps putting the h1 below or above the nav. I am trying to set up a website so that the top line can read the name of the company and the links to the different pages through the navigation bar. Is there something to do with it? Here is some of my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Virginia Delights</title>
<meta charset="utf-8">
<link href="Delights.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<nav>
Home
About
Mission
Staff
Donate
Contact
</nav>
<h1>Virginia Delights</h1>
</header>
<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="200" width="200">
<footer>
Copyright © 2020 Virginia Delight
</footer>
</div>
</body>
</html>
nav { text-align:right;
float: right;
margin: 0;
font-size:1.3em;
text-shadow:3px 3px 3px gray;}
header {width: 100%;}
nav a {text-decoration: none;
color: white;
}
h1 {float: left;
height: 100px;
width: 700px;
font-size: 2em;
padding-left:150px;
padding-right:150px;
border-radius:20px;
padding-top:0.5px;
margin-left:auto;
margin-right:auto;
text-shadow:3px 3px 3px gray;
color:white;}
It's not clear where you want your logo image, but all in all you can use display: flex; on the container (header) and add justify-content: space-between, plus the settings used below.
Note: I changed some of your width settings to fit everything in to one line in the snippet here, I erased the float settings, and I changed the order of elements in the HTML code because that really didn't seem logical in your code, considering the way you want it to appear.
header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: baseline;
}
nav {
margin: 0;
font-size: 1.3em;
text-shadow: 3px 3px 3px gray;
}
nav a {
text-decoration: none;
color: white;
}
h1 {
height: 100px;
font-size: 2em;
border-radius: 20px;
padding-top: 0.5px;
text-shadow: 3px 3px 3px gray;
color: white;
}
<div id="container">
<header>
<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="100" width="100">
<h1>Virginia Delights</h1>
<nav>
Home
About
Mission
Staff
Donate
Contact
</nav>
</header>
<footer>
Copyright © 2020 Virginia Delight
</footer>
</div>
We can't really tell until you show us your css, otherwise here is some good old fashion css and html I would do with your html.
Remember you want to make everything semantic so I would recommend making your navbar like this
<header>
<div class="container">
<h1 id="logo">Virginia Delight</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Staff</li>
<li>Mission</li>
<li>Staff</li>
<li>Donate</li>
</li>Contact</li>
</ul>
</nav>
</div>
</header>
As for the CSS you just need to float the id="logo" to the left and the nav to the right
header {
background-color: <Whatever color>;
min-height: 100px;
color: <Whatever color>;
}
header #logo {
float: left;
margin-top: 30px;
}
header nav {
float: right;
margin-top: 40px;
}
header li {
list-style-type: none;
display: inline;
margin-left:30px;
}
header a {
text-decoration: none;
color: <Whatever color>;
}
I am having trouble aligning two items together in my navbar. I am trying to bring logo on left and align tabs on right.
I have created lis for links and simple h1 for logos.
The trouble I am having is that h1 is taking all of space and pushing lis down to next line, I have tried doing several things but can't really figure it out where I am going wrong.
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
float: right;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
You shouldn't use floats when working with Flexbox. Flexbox takes care of aligning your items the way you want. If you want two columns on the same row, add display:flex on the parent. If you want one on the left and one on the right, use justify-content: space-between;
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-between;
}
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
In order to understand Flexbox, there is a game that will teach you all the necessary properties in an easy way. This visual guide will also help you.
#Hanan: no need of using float just need to ad add display: flex and justify-content: space-betweenin navbar
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
/* float: right; */remove
}
.navbar {
display: flex;
justify-content: space-between;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
Flexbox is the easiest way. For the h1 set flex: 1 auto. This will make it grow to fill the remaining space. All navigation links will just consume the needed space. It's also working when wrapping the links into another element like ul/li
.navbar {
display: flex;
align-items: center;
width: 100%;
}
.navbar h1 {
flex: 1 auto;
}
.navbar a {
padding: 0 0.5em;
}
<header>
<nav class="navbar">
<h1>My Site</h1>
Link 1
Link 2
Link 3
Link 4
</nav>
</header>
please try to change your code to bellow.
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-around;
}
.main-nav {
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
float: left;
}
a {
color: black;
text-decoration: none;
}
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
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%);
}