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>
Related
I am looking horizontal dropdown menu pure css based and browser compatible....
i am looking like mentioned below example
see this is pure css bases dropdown menu:-
HTML
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
CSS
ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #617F8A;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #617F8A;
}
li:hover li a:hover
{
background: #95A9B1;
}
see the demo:- http://jsfiddle.net/XPE3w/7/
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* define a fixed width for the entire menu */
.navigation {
width: 150px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<html>
<body>
<head>
<link rel="stylesheet" type="css/text" href="nav.css">
</head>
</body>
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li>Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
Tested in IE7 - 9 and Firefox: http://jsfiddle.net/WCaKg/. Markup:
<ul>
<li><li></li>
<li><li></li>
<li><li>
<ul>
<li><li></li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
</li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 200%/1.5 Optima, 'Lucida Grande', Lucida, 'Lucida Sans Unicode', sans-serif;
}
ul {
width: 9em;
list-style-type: none;
font-size: 0.75em;
}
li {
float: left;
margin: 0 4px 4px 0;
background: #60c;
background: rgba(102, 0, 204, 0.66);
border: 4px solid #60c;
color: #fff;
}
li:hover {
position: relative;
}
ul ul {
z-index: 1;
position: absolute;
left: -999em;
width: auto;
background: #ccc;
background: rgba(204, 204, 204, 0.33);
}
li:hover ul {
top: 2em;
left: 3px;
}
li li {
margin: 0 0 3px 0;
background: #909;
background: rgba(153, 0, 153, 0.66);
border: 3px solid #909;
}
View code online on: WebCrafts.org
HTML code:
<body id="body">
<div id="navigation">
<h2>
Pure CSS Drop-down Menu
</h2>
<div id="nav" class="nav">
<ul>
<li>Menu1</li>
<li>
Menu2
<ul>
<li>Sub-Menu1</li>
<li>
Sub-Menu2
<ul>
<li>Demo1</li>
<li>Demo2</li>
</ul>
</li>
<li>Sub-Menu3</li>
<li>Sub-Menu4</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
</div>
</body>
Css code:
body{
background-color:#111;
}
#navigation{
text-align:center;
}
#navigation h2{
color:#DDD;
}
.nav{
display:inline-block;
z-index:5;
font-weight:bold;
}
.nav ul{
width:auto;
list-style:none;
}
.nav ul li{
display:inline-block;
}
.nav ul li a{
text-decoration:none;
text-align:center;
color:#222;
display:block;
width:120px;
line-height:30px;
background-color:gray;
}
.nav ul li a:hover{
background-color:#EEC;
}
.nav ul li ul{
margin-top:0px;
padding-left:0px;
position:absolute;
display:none;
}
.nav ul li:hover ul{
display:block;
}
.nav ul li ul li{
display:block;
}
.nav ul li ul li ul{
margin-left:100%;
margin-top:-30px;
visibility:hidden;
}
.nav ul li ul li:hover ul{
margin-left:100%;
visibility:visible;
}
You don't have to always use ul elements to achieve that, you can use other elements too as seen below. Here there are 2 examples, one using div and one using select.
This examples demonstrates the basic functionality, but can be extended/enriched more. It is tested in linux only (iceweasel and chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.drop_container
{
position:relative;
float:left;
}
.always_visible
{
background-color:#FAFAFA;
color:#333333;
font-weight:bold;
cursor:pointer;
border:2px silver solid;
margin:0px;
margin-right:5px;
font-size:14px;
font-family:"Times New Roman", Times, serif;
}
.always_visible:hover + .hidden_container
{
display:block;
position:absolute;
color:green;
}
.hidden_container
{
display:none;
border:1px gray solid;
left:0px;
background-color:#FAFAFA;
padding:5px;
z-index:1;
}
.hidden_container:hover
{
display:block;
position:absolute;
}
.link
{
color:blue;
white-space:nowrap;
margin:3px;
display:block;
}
.link:hover
{
color:white;
background-color:blue;
}
.line_1
{
width:800px;
border:1px tomato solid;
padding:5px;
}
</style>
</head>
<body>
<div class="line_1">
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
____1
___2
__3
_4
</div>
</div>
<div style="clear:both;"></div>
</div>
<br>
<div class="line_1">
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Create simple drop-down menu using HTML and CSS
CSS:
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
and HTML:
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
View demo online
There is different ways to make dropdown menu using css. Here is simple code.
HTML Code
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</label>
CSS Code
body {
color: #000000;
font-family: Sans-Serif;
padding: 30px;
background-color: #f6f6f6;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #222222
}
/* Dropdown */
.dropdown {
display: inline-block;
position: relative;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: absolute;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
More css code example
I'm a bit new to HTML/CSS and I'm having some trouble with creating properly positioning elements inside my navigation bar.
My li elements are overflowing out of the bar.
This is my code atm:
HTML
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
</div>
<div class="jumbotron">
</div>
CSS
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
JSFIDDLE
How do I make my buttons stay inside the navbar and expand it automatically?
I looked through a lot of similar posts and tried a couple of things, however I couldn't quite get it to work.
The reason is you must specify overflow property.
Here you must specify overflow:auto; with height:auto;(optional as it's default even if not specified)
CSS
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
height:auto /* Not mandatory as is default if not specifed */
overflow:auto;
}
Fiddle
Html file is this
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
<div class="clearBoth"></div>
</div>
<div class="jumbotron">
</div>
</body>
Css is this
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
/*height:25px;*/
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
.clearBoth{clear: both;}
I can't seem to be able to center the horizontal #menu in the center of the page.
I have tried adding a container DIV, but I can't seem to be able to get it to work at all.
Here is my HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
margin:0 auto;
width: 100%;
}
#menu {
list-style:none;
width:940px;
height:43px;
background: #014464;
border: 1px solid #002232;
}
#menu ul, li {
font-size:14px;
font-family: Segoe UI;
line-height:21px;
text-align:left;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
}
#menu li a {
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
.dropdown_column {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
width: 560px;
}
#menu li:hover .dropdown_column {
left:-1px;
top:auto;
}
.sub_col { width:130px; }
.col { width:550px; }
.sub_col, .col {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu ul li {
line-height:21px;
text-align:left;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#FFF;
background: #014464;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align: left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>4 Columns<!-- Begin 4 columns Item -->
<div class="dropdown_column"><!-- Begin 4 columns container -->
<div class="col">
<h2>This is a heading title</h2>
</div>
<div class="sub_col">
<h3>Some Links</h3>
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="sub_col">
<h3>Useful Links</h3>
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="sub_col">
<h3>Other Stuff</h3>
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="sub_col">
<h3>Misc</h3>
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
</div>
</body>
</html>
Add margin: 0 auto; to your #menu ul.
DEMO
Wrap the menu in div with style text-align: center
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 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