I would like my navigation bar to span the full width of the screen (there is a patch of white to the left of the nav bar). I would also like the tabs to be centered. Can anyone help me with this? I am a beginner to this so please explain thoroughly. I would also like to put my logo to the left of my nav bar, does anyone know how to put that there and how many pixels to display my logo, thanks.
Here is my html code.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
<title>Connection InterFace</title>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</head>
<body>
</body>
<footer>
</footer>
Here is my css.
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:red;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 24px;
text-decoration: none;
}
li a:hover {
background-color:maroon;
}
ul {
position:fixed;
top:0;
width:100%;
}
.active {
background-color:black;
The space was there because the browser has a default margin and padding. so you remove the padding by doing a "CSS reset". I just showed a basic way to remove the paddings and margin for everything. Now you can set your own custom padding and margins for whatever you want.
I don't know if you're aware, but I wanted to say that browsers come with there default "User agent" styles. For example the default font size is 16px for most browsers but you can override that like the padding and margin. in your case I believe that the body had a margin of 8px.
*{
margin: 0;
padding: 0;
}
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:red;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 24px;
text-decoration: none;
}
li a:hover {
background-color:maroon;
}
ul {
position:fixed;
top:0;
width:100%;
}
.active {
background-color:black;
}
.logo{
display: inline-block;
width: 20%;
background: orange;
padding: 22px 24px;
}
<ul>
<li class = "logo"><div >LOGO</div></li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here is a demo of moving around the nav elements to make it more centered by playing around with the li:nth-child(2) a{
margin-left: 50px ;
} .. This is not the best way but It's a good way without changing your HTML set up.
*{
margin: 0;
padding: 0;
}
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:red;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 24px;
text-decoration: none;
}
li a:hover {
background-color:maroon;
}
li:nth-child(2) a{
margin-left: 50px ;
}
ul {
position:fixed;
top:0;
width:100%;
}
.active {
background-color:black;
}
.logo{
display: inline-block;
width: 20%;
background: orange;
padding: 22px 24px;
}
<ul>
<li class = "logo"><div >LOGO</div></li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I added below how to show an image for the logo I like using background-images because we get to use background-size: cover; helpful for displaying images in places.
*{
margin: 0;
padding: 0;
}
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:red;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 22px 24px;
text-decoration: none;
}
li a:hover {
background-color:maroon;
}
li:nth-child(2) a{
margin-left: 50px ;
}
ul {
position:fixed;
top:0;
width:100%;
}
.active {
background-color:black;
}
.logo{
/*display: inline-block;*/
width: 20%;
background: orange;
/*padding: 22px 24px;*/
}
.logo div{
background: url("http://placehold.it/100x100/ff66cc/ffffff&text=IMAGE") no-repeat center center ;
background-size: cover;
height: 65px;
}
<ul>
<li class = "logo"><div></div></li>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Get rid of whitespace in the left corner
you can make margin,padding 0
body {
background-color:white;
margin:0;
padding:0;
}
http://codepen.io/anon/pen/grvpOE
Add logo to the left,
by adding line-height according to the size of the image
li {
float: left;
line-height:7.2px;
}
http://codepen.io/anon/pen/QNQbwb
Related
How to align the logo to my navigation bar?
My HTML code is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports</li>
<li>Tools</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
and heres my style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav{
margin: 0;
overflow:hidden;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav > ul > li > a{
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
-----------
.logo-img{
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div{
background:#333;
}
I want to display the logo at the left side and the navigation bar to the right side.
Made a pen far more simpler:
https://codepen.io/DevAlokes/pen/yLEJEYY
* {
text-decoration: none;
list-style-type:none;
color: white
}
.bg-div {
background-color: #333;
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
}
nav ul li{
margin: 0 12px;
}
The simplest and most basic answer is, use floats.
.logo-img {
float: left;
}
nav {
float: right;
}
Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
i cant get this navigation bar to center. Please help.
Here is my html:
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Latest News</li>
<li>Results & Events</li>
<li>Fundraising</li>
<li>Gallery</li>
</ul>
</div>
Here is my css:
#nav {
margin:0px auto; }
ul {
display: inline-block;
list-style-type:none;
margin:0 auto;
padding:0;
position: absolute; }
li {
display:inline;
float: left;
margin-right: 1px; }
li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: Century Gothic, Candara, Tahoma, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none; }
li:hover a {
background: #659d32; }
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px; }
li:hover ul a:hover {
background: #659d32;
color: #fff; }
li ul {
display: none; }
li ul li {
display: block;
float: none; }
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px; }
ul li a:hover + .hidden, .hidden:hover {
display: block; }
.show-menu {
font-family: Century Gothic, Candara, Tahoma, sans-serif;
text-decoration: none;
color: #fff;
background: #659d32;
text-align: center;
padding: 10px 0;
display: none; }
input[type=checkbox]{
display: none; }
input[type=checkbox]:checked ~ #menu{
display: block; }
#media screen and (max-width : 760px){
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
}
}
I tried adding a div around the whole thing and setting margin to auto but that hasnt worked. Im not sure what to do.
Firstly you're targeting #nav while it's .nav according to your html.
Then you need to set a width to your nav parent in order to have a centered position.
Working example
.nav {
margin:0px auto;
width:705px;
}
Edit: Since your list items and links aren't responsive, it doesn't make sense to add a percentage to the parent nav.
You can use something like this to have a responsive centered navigation:
.nav {
margin:0px auto;
width:90%;
}
ul {
list-style-type:none;
padding:0;
}
li {
float: left;
width:18%;
}
li a {
width:100%;
}
I think the reason why your auto margins didn't work is because you need to define a width on your wrapper. Also make sure that you are using the right selector # for id and . for class. Here's how id go about centering the navigation.
jsFiddle
<div class="wrapper">
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Latest News</li>
<li>Results & Events</li>
<li>Fundraising</li>
<li>Gallery</li>
</ul>
</div>
</div>
add this to your css:
.wrapper {
width:80%;
margin-left:auto;
margin-right:auto;
}
You almost had it, use:
.nav {
display: block;
margin: 0 auto;
width: 100%;
max-width: 960px;
}
You will simply need to adjust your max-width to move the navbar into the center (depending the width of your page container).
See Example
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.
Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.
A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}