There is a navigation menu that I developed in <header>. However, the <p> element I use after the <header> element and the <header> components overlap. Why does this issue occur and how do I fix this issue?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
position: fixed;
top:0px;
padding: 0 30px;
background: transparent;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
<body>
<!-- Navigation Menu -->
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<!-- Content -->
<p>test</p>
</body>
This issue occurs in the .navbar class style position: fixed; caused by its use. In this case, the navigation menu remains fixed when the scrollbar is opened. So you can enclose other elements after the <header> element in a <div> element; apply a margin-top style to this element and you will see all other content scroll.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
/* This style applied causes the <p> element to render above. */
position: fixed;
top:0px;
padding: 0 30px;
background: yellow;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
/* The following style has been applied to the <div> element that encloses other elements. */
.container {
margin-top: 70px; /* To avoid shifting caused by the "position: fixed" class style */
height: 1500px; /* To make the scrollbar pop up */
}
p {
height: 200px;
border: 1px solid red;
background-color: lightgray;
}
<body>
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<div class="container">
<p>Content</p>
</div>
</body>
Related
How do I make the spaces between my links in my navbar wider? I am trying to make a website for my production company.
I want Home to be on far left, Portfolio to be on the left, Contact on the right, and About on far right.
body {
margin: 0;
}
.header {
Color: #FFFFFF;
background-color: #000000;
padding: 50px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
<ul style="font-size:20px">
</ul>
You need to use display: flex and justify-content: space-between. This page is required reading regarding flex boxes.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
display: flex;
justify-content: space-between;
}
li {
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
Just give padding in li in style.css
Like
li {
padding : 10px;
}
I would use CSS grid (flexbox is also an option), which will allow you to organize your links into 4 columns.
Create a div and set its display to grid:
HTML
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: 20% 30% 30% 20%;
}
Change the grid-template-columns as needed to get the right spacing. You can adjust column-gaps and more, just look up the documentation.
body {
margin: 0;
}
.header {
Color: #FFFFFF;
background-color: #000000;
padding: 50px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: justify;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
li:nth-child(3),
li:nth-child(4){
float: right;
}
<div class="header">
<h1>Sphinx Productions</h1>
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
What is nth-child()?
nth-child() is a pseudo-class css selector that selects a child and styles it using the css you put in.
For example:
<body>
<p>This is the first child of the body tag</p>
<p>This is the second child</p>
<p>This is the third child(selected)</p>
<p>This is the fourth and last child</p>
</body>
p:nth-child(3){
-----
}
The nth-child() takes one argument and that is what child will be selected.
What about float?
This is a property that will move elements to the position you input. It will stay structured with the rest of the elements.
for example:
<p>first and second child will be selected</p>
<p>----me----</p>
<p> not me </p>
p:nth-child(1),
p:nth-child(2){
float: right;
}
They will go to the right, but it won't overlap or do anything crazy.
So i'm currently working on building my own website but ran into some trouble when it came to centering my actual ul within my navigation bar. The nav bar is already centered and fine but i am trying to center the actual ul and still keep it left aligned. I am using Brackets text editor. Any Help ?
Thanks in advance and heres my CSS code:
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
float: left;
width: 10%;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<html>
<head>
<title>Satori</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
</body>
</html>
Update below css part
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
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: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
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: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5