Fixed div is getting down when I give margin-top to the div below it...why?
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
you need to add top:0 to your .header_bg, see more about position
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black;
top:0
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
Related
I am try to put the div nav2 on the same line as nav 1 but it just not going up what is the problem i even try float but it not working also
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display:
}
#navbar ul {
list-style: none;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px 0px 20px;
}
#nav2 {
float: right;
}
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
<div id="head">
<div>
<h3>Company</h3>
</div>
<div>
<h1>Invert Like a idiot</h1>
</div>
<div>
<p>because money is lame</p>
</div>
</div>
</div>
I expect that Both "nav1" and "nav2" on the name line just like normal navbar but i want "nav2" on the right side that why i make it div "nav2"
This is probably what you want to do :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display: grid;
grid-template-columns: auto auto;
height: 50px;
}
#nav1 ul, #nav2 ul {
display: grid;
grid-gap: 20px;
grid-auto-columns: minmax(min-contant, max-content);
grid-auto-flow: column;
height: 100%;
align-items: center;
list-style: none;
}
#nav1 ul {
padding-left: 20px;
justify-content: left;
}
#nav2 ul {
padding-right: 20px;
justify-content: right;
}
#head {
padding: 50px 20px 0 20px;
}
<html>
<head></head>
<body>
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
i want to add drop-down list for every menu but its showing only for "Products". Firstly i made drop-down list only for "Products" menu.But for others menu its not working.
Html code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown"><li>Company
<ul class="submenu">
<li>About us
</li>
<li>New Realeses
</li>
<li>Contact us
</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits
</li>
<li>Seurity Cameras
</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services
</li>
<li class="dropdown"><li>Support
<ul class="submenu">
<li>Support Home
</li>
<li>Warranty
</li>
<li>Feedback
</li>
<li>Contact Tech Support
</li>
</li>
<li class="dropdown"> <li>Multimedia
<ul class="submenu">
<li>Video
</li>
<li>Podcasts
</li>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
style.css:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
The issue is here:
<li class="dropdown"><li>Company
You have two <li>s. Please remove one. Also you forgot to include this after the </ul>:
</li>
</ul>
</li>
</ul>
Here's a working snippet:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown">Company
<ul class="submenu">
<li>About us</li>
<li>New Realeses</li>
<li>Contact us</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits</li>
<li>Seurity Cameras</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services</li>
<li class="dropdown">
Support
<ul class="submenu">
<li>Support Home</li>
<li>Warranty</li>
<li class="dropdown">
Multimedia
<ul class="submenu">
<li>Video</li>
<li>Podcasts</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
Just take down the <li>, because you did it twice.
here is a working Jsfiddle https://jsfiddle.net/v7dLps8b/
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block
I have a page that has a dark grey sidebar that has a ul in it that is holding some navigation. Currently the UL is getting pushed over within the side bar.
Fiddle: http://jsfiddle.net/PWZJd/
I would like the UL to be pressed up against the left side of the sidebar. Then I can add some padding to move it over as I see fit.
HTML:
<div class="content">
<header id="myNav" class="top_block navbar-fixed-top" >
<ul>
<li>Home</li>
<li>4Tell</li>
<li>Console 1</li>
<li>Console 2</li>
<li>About</li>
</ul>
</header>
<aside class="background sidebar">
<div class="sidenav">
<ul class="menu side-menu">
<li>NCR at your service</li>
<ul class="sub-menu">
<li>My Support Link</li>
<li>My Asset List</li>
<li>My Invoices</li>
<li>My Somthing Else</li>
</ul>
<li>Q2C MAC</li>
<ul class="sub-menu">
<li>Move</li>
<li>Add</li>
<li>Change</li>
<li>Swap</li>
</ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
<div class="left_block sidebar">
</div>
<div class="bottom_block footer">
<p class="text-center">Designed by Steve Wilson <br>With contributions from Alex Cronon and Robert Moua</p>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.background.sidebar {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 200px;
background-color: #33404c;
margin-top: 50px;
margin-bottom: 50px;
border-right: 1px solid;
}
.sidebar {
height: auto;
width: 20%;
padding-bottom: 75px;
}
.footer {
width: 100%;
height: 50px;
background-color: #e3e6ea;
padding-top: 5px;
}
.sidenav {
margin-top: 10px;
color: #f9fafb;
}
.side-menu {
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
list-style: none;
line-height: 2em;
}
*Note: I have cut some of the code for Stack Overflow, see the fiddle for a more complete version.
adjust the padding and margin on your side-menu to 0.
See: http://jsfiddle.net/PWZJd/2/
The default padding on the ul element is what's moving it to the right. Just update the padding and you can dock the ul up against the left side of the side-bar as close as you want.
Demo: http://jsfiddle.net/PWZJd/3/