I want to position a dropdown menu exactly under the button. Here's my code, as you can see the submenu under programs is a not exactly under the programs button.
Here is my HTML Code:
<!Doctype>
<html>
<head>
<title>HelpHelp | Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="banner">
<img src="logo.psd" alt="" height="70px" />
<h3>Debugging HTML Since 2012</h3>
</div>
<div id="nav">
<ul>
<li> Home </li>
<li> About </li>
<li> Forum </li>
<li> Code </li>
<li> Programs
<ul>
<li>Windows</li>
<li>Macintosh</li>
</ul>
</li>
<li> Tutorials </li>
</ul>
</div> <!-- End Nav Div -->
</body>
</html>
Here is my CSS Code:
/* CSS Document */
body{
margin:0px;
background: -webkit-linear-gradient(#f1f0f0 0%, #dadada 100%);
}
#banner{
border-bottom:2px solid #000;
background: -webkit-linear-gradient(#6e90e6 0%, #77a3f4 100%);
height: 100px;
}
#banner img{
position: relative;
top:5px;
left: -10px;
}
#banner h3{
font-family: cursive;
position:absolute;
top: 0px;
left: 250px;
font-style: italic;
font-weight: bold;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
}
#nav{
border-bottom:1px solid #000;
padding:0px;
width:100%;
background: #ff8c00;
}
#nav ul{
list-style-type: none;
margin:0px auto;
text-align:center;
padding-left:20px;
position: relative;
}
#nav li{
display:inline-block;
padding:10px;
width:100px;
background:#ff8c00;
border-right:1px solid #fff;
}
#nav a{
padding:5px;
text-align: center;
background:#ff8c00;
color: #000;
text-decoration: none;
font-family: sans-serif;
font-size: 15px;
}
#nav a:hover{
border-radius: 5px;
box-shadow: -1px -1px 1px #000;
background:#e27c0;
padding-left:10px;
padding-right:10px;
}
#nav ul ul{
visibility: hidden;
position:absolute;
left:64%;
top: 37px;
padding: 0px;
border:1px solid #000;
border-top: 1px solid transparent;
}
#nav ul li ul li{
background: transparent;
float:none;
display:block;
border-right:none;
border-bottom:1px solid #fff;
}
#nav ul li:hover ul{
visibility: visible;
background: #ff8c00;
}
#about_title{
width:100%;
height:45px;
border-bottom:1px solid #bfbfbf;
}
#about_who{
width:250px;
padding:10px;
border: 1px solid#000000;
margin-left:15%;
position: relative;
top: 10px;
}
#about_what{
width:250px;
padding:10px;
border: 1px solid #000000;
margin-left:15%;
position: relative;
top: 10px;
}
Might be tricky to get the ul centered under the li because of potentially varying li widths and necessarily absolute positioning of the ul. Adding this gets you there if the li elements are always the same width, anyway:
#nav li {position: relative;}
#nav ul li:hover ul {position: absolute; left: -3px;}
http://jsfiddle.net/yhfYt
Related
I'm working on a navbar with a megamenu.
To manage the megamenu I'm using the bootstrap-dropmenu library (GitHub link) based on Bootstrap 3.
Everything is working well, but the megamenu content is not aligned with the div container.
Here a screenshot to explain better the problem.
What I'd like is to have the first element of the megamenu aligned with "LOGO".
Here HTML the code:
<nav class="navbar top-menu">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand logo" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse navigation-menu">
<ul class="nav navbar-nav">
<li>
home
</li>
<li class="dropdown dropdown-megamenu">
<a class="dropdown-toggle" data-toggle="dropdown" >tab 1</a>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
<li>elem 4</li>
</ul>
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the CSS:
.top-menu{
background: green;
}
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
}
.logo:hover, .logo:visited, .logo:link, .logo:active {
color: #FFFFFF;
text-decoration: none;
}
.navigation-menu{
width:auto;
float:left;
}
.navigation-menu li{
font-size:13px;
font-size:1.3rem;
display:block;
font-weight:700;
line-height:16px;
text-align:left;
text-transform:uppercase;
margin:0 10px;
}
.navigation-menu li a{
color: #FFFFFF;
display:block;
padding:20px 20px;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
}
.dropdown-megamenu li a{
font-size:13px;
font-size:1.3rem;
color: #000080;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.dropdown-megamenu li a:hover{
font-size:13px;
font-size:1.3rem;
color: #e5ae07;
display:inline;
padding:0;
text-decoration:none;
text-align: center;
border-top: 5px solid transparent;
text-transform:uppercase;
font-weight:700;
line-height:16px;
margin:0 10px;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
background-color: #b3b3ff;
color:#000080;
text-decoration: none;
display:block;
height: 100%;
margin-top: 0;
margin-bottom: 0;
}
ul.nav a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.nav > .dropdown-megamenu {
position: static;
}
.nav .open>a {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid transparent;
}
.nav .open>a:hover {
background: #000080;
color: #FFFFFF !important;
border-top: 5px solid #b3b3ff;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
}
.dropdown-menu>li {
display: inline;
padding: 10px;
}
I've have prepared a JSFiddle with the real case.
Can anyone explain to me how to achieve my goal?
You are using a div with class container which was actually causing issue.Because by default it was adding margin and paddings to your navbar.I have removed that div. Plus did some addition to your logo margin-left and dropdown-container:
.logo{
font-size:40px;
font-size:4rem;
color:#FFF;
display:block;
float:left;
font-weight:700;
overflow:hidden;
text-decoration:none;
margin-top: 5px;
/* addition to your code */
margin-left: 25px;
}
.dropdown-megamenu > .dropdown-container {
background-color: #e6e6ff;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
text-align: left;
/* Addition to your code*/
padding: 0px 13px;
}
You can check the JSFiddle. It is also responsive.
Currently I have a header and above it I have my navbar. On my editor it is centered but when I stretch the page or view it in a different format it won't appear to be on top of the center of the header. Any ideas on what I should do?
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}
#nav li{
float:left;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Much of what I provided will not be useful to this question, and I apologize for that, but I just want to provide as much information as possible to get help. Thanks!
Hi now try to this css
#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}
Demo
#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Add these properties to your existing classes.
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
width:100%;
text-align:center;
}
#nav li{
display:inline-block;
}
This should solve your issue.
Make your nav bar take full width, and center the inner contents horizontally using text-align:center;
Here is my code:
<head>
<style type="text/css">
#cssmenu > ul li {
background-color: #F4F4F4;
display: block;
position: relative;
text-decoration:none;
}
#cssmenu > ul li a {
background-color: #F4F4F4;
display: block;
position: relative;
margin: 0;
border-bottom: 1px dotted #d9d9d9;
border-left: 1px dotted #D9D9D9;
border-right: 1px dotted #D9D9D9;
padding: 15px 10px;
width: 150px;
font-size: 11px;
text-decoration:none;
color:#7C7C7C;
}
#cssmenu > ul li a:hover {
background-color:#4285F4;
color:white;
}
#header_content {
height:25px;
width:60%;
color:White;
background-color:#083061;
margin-left:320px;
}
</style>
</head>
<body>
<div style="width:100%">
<div id='cssmenu' style="width:10%;margin-top:1px;">
<ul style="margin-top:0px;margin-left:30px;">
<li><a href='#'><span>DASHBOARD</span></a></li>
<li><a href='#'><span>RESOURCES</span></a></li>
<li><a href='#'><span>CALL ROUTING</span></a></li>
<li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
</ul>
</div>
<div id="header_content">
<label>Dashboard</label>
</div>
</body>
I want to fix this two div horizontally?
if you want to align two or more divs horizontally you can use display property of thier css styles:
div#foo {
display: inline-block;
}
div#bar {
display: inline-block;
}
fiddle: here
use float:left in style for the div id="cssmenu"
<style type="text/css">
#cssmenu > ul li {
background-color: #F4F4F4;
display: block;
position: relative;
text-decoration:none;
}
#cssmenu > ul li a {
background-color: #F4F4F4;
display: block;
position: relative;
margin: 0;
border-bottom: 1px dotted #d9d9d9;
border-left: 1px dotted #D9D9D9;
border-right: 1px dotted #D9D9D9;
padding: 15px 10px;
width: 150px;
font-size: 11px;
float:left;
text-decoration:none;
color:#7C7C7C;
}
#cssmenu > ul li a:hover {
background-color:#4285F4;
color:white;
}
#header_content{
height:25px;
width:60%;
color:White;
background-color:#083061;
margin-left:320px;
}
</style></head>
<body>
<div style="width:100%">
<div id='cssmenu' style="width:10%;margin-top:1px;">
<ul style="margin-top:0px;margin-left:30px;">
<li><a href='#'><span>DASHBOARD</span></a></li>
<li><a href='#'><span>RESOURCES</span></a></li>
<li><a href='#'><span>CALL ROUTING</span></a></li>
<li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
</ul>
</div>
<div id="header_content">
<label>Dashboard</label>
</div>
</div>
</body>
CSS here is jsfiddle
#cssmenu{
margin-top:1px;
display:inline-block;
}
#cssmenu > ul li {
background-color: #F4F4F4;
display: block;
position: relative;
text-decoration:none;}
#cssmenu > ul li a {
background-color: #F4F4F4;
display: block;
position: relative;
margin: 0;
border-bottom: 1px dotted #d9d9d9;
border-left: 1px dotted #D9D9D9;
border-right: 1px dotted #D9D9D9;
padding: 15px 10px;
width: 150px;font-size: 11px;
text-decoration:none;color:#7C7C7C;
}
#cssmenu > ul li a:hover {
background-color:#4285F4;
color:white;}
#header_content{
height:25px;
width:60%;
color:White;
background-color:#083061;
display:inline-block;
vertical-align:top;
}
HTML
<div style="width:100%">
<div id="cssmenu">
<ul style="margin-top:0px;">
<li><a href='#'><span>DASHBOARD</span></a></li>
<li><a href='#'><span>RESOURCES</span></a></li>
<li><a href='#'><span>CALL ROUTING</span></a></li>
<li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
</ul>
</div>
<div id="header_content">
<label>Dashboard</label>
</div>
When I resize my browser windows I am getting some unexpected behavior from IE and Chrome. The navigation menu does not stay locked in place.
I know the problem has something to do with the long text that is right justified with the logo. In this case, the "Comic Subscription..." text. When the "C" of this text comes to the edge of the last navigation menu item, that is when the navigation menu drops.
IE screenshot:
Internet Explorer http://www.jaylefler.com/ie.png
Chrome screenshot:
Chrome http://www.jaylefler.com/chrome.png
Firefox screenshot:
Firefox http://www.jaylefler.com/firefox.png
<!DOCTYPE html>
<html>
<head>
<title>Demolition Comics Subscription Management System</title>
<style>
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
background-repeat:no-repeat;
background-color:#FAF8CC;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
font-weight: bold;
}
nav ul{
padding:0;
margin: 0;
min-width: 755px;
overflow: hidden;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
min-width: 150px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
width:200px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
nav ul li ul li a {
text-align:center;
width:200px;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
#logo {
background-color: black;
width: 100%;
min-width: 800px;
color: rgb(255,200,0);
height: 100px;
margin:0px;
}
#logo img {
padding: 10px;
vertical-align: middle;
}
.left_part, .right_part {
height: 100px;
}
.left_part {
float: left;
}
.right_part {
float:right;
width:500px;
margin-top: 10px;
text-align: right;
}
.right_part a {
line-height: 10x;
color: rgb(255,200,0);
vertical-align:middle;
text-align:right;
text-decoration:none;
padding: 25px;
}
#contents, #footer {
background:#fff;
width:1024px;
padding:20px;
padding-top:5px;
}
#contents {
margin:15px auto 0;
border: 5px solid black;
border-bottom: 0;
border-radius: 15px 15px 0 0;
/*box-shadow: 6px 6px 4px 4px #000;*/
box-shadow: 10px 15px 5px #888888;
min-height: 550px;
background-color:#F0F7FF;
}
#footer {
background-color: rgb(255,200,0);
border-radius: 0 0 15px 15px;
/*box-shadow: 6px 6px 4px 4px #000;*/
box-shadow: 10px 10px 5px #888888;
border: 5px solid black;
border-top:1px dashed #000;
color:#000;
margin:0 auto 40px;
}
.bigHead {
font-size: 2em;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 22px;
}
.littleNavi {
font-size: 1em;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
<div class="bigHead">Comic Subscription Management</div>
<div class="littleNavi">CONTACT US - FAQ - ABOUT</div>
</div>
</div>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<h2>Hello ladies and gentlemen!</h2>
</div>
<div id="footer">
Text here
</div>
</body>
</html>
Add position: absolute; to nav and margin:45px auto; to #contents
The problem seems to be that the <nav> is not clearing the floated list items.
Add overflow:hidden; to your <nav> element, and the problem should be resolved. overflow:hidden; will force a container to expand to the height of its floated children.
I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).
I have tried working with negative margins on the navigation container but no solution as of yet.
web graphic http://jaylefler.com/webgraphic.png
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
}
#logo img {
padding: 10px;
}
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
#navMenu {
width: 760px;
height: 30px;
background-color:rgb(255,200,0);
border:1px #000 solid;
font-weight:bold;
margin-left: -2px;
}
#navMenu ul{
margin:-1px 0 0 0;
padding:0;
line-height:32px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
position:relative;
background-color:rgb(255,200,0);
float:left;
border:1px #000 solid;
}
#navMenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top: 31px;
margin-left: -2px;
}
#navMenu ul li:hover ul{
visibility: visible;
}
#navMenu a:hover {
background-color:#000;
color:rgb(255,200,0);
}
.left_part {
background:black;
}
.right_part {
background:yellow;
float:right;
white-space:nowrap;
display:inline;
text-overflow:ellipsis;
overflow:hidden;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
</div>
</div>
<div id="navContainer">
<div id="navMenu">
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
</div>
</div>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
#navmenu {
width: 760px;
height: 30px;
background-color: #FFC800;
border: 1px black solid;
border-top: 0; /* REMOVE TOP BORDER */
margin-left: -2px;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
height: 30px; /* MATCH HEIGHT */
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.
Here is a simplified code that fixes your problem:
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
}
nav ul{
padding:0;
margin: 0;
overflow: hidden;
}
nav > ul{
min-width: 755px;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
top: 31px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>