For some reason I cannot get the right menu to float right this is a horizontal div menu. the image and the left links are perfect.. the right just doesn't work, the are both in a single div.
I would like it to look like
logo--- link---link--link--link-----------------------------Date & Time
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
You need to float your block level elements, otherwise they will still take up 100% width. So float #left and #right.
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
padding-top: 9px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
#left {
float: left;
}
#right {
float: right;
}
#menu li {
display: inline-block;
}
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
I would suggest you check out flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can get a real good understanding from https://css-tricks.com/all-about-floats/. Give it a read .. :D
/* align all direct child of menu, in same horizontal .... */
#menu > * {
display: inline-block;
color: #fff;
}
/* float the right component to right, and add a margin to top to bring all to same level */
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-top: 50px;
}
#menu > * {
display: inline-block;
color: #fff;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right {
margin-top: 10px;
overflow: hidden;
float: right;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
<div id="menu">
<a href="">
<img src="logo.svg">
</a>
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
<div id="right">
<ul>
<li>Date & Time</li>
</ul>
</div>
</div>
Working Fiddle
Here is a simple hack. What I have done is added your right div inside left div, and it has done the trick.
<div id="menu">
<img src="logo.svg">
<div id="left">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<div id="right">
<ul>
<li style="color:white">Date & Time</li>
</ul>
</div>
</ul>
</div>
</div>
CSS
#menu {
height: 37px;
background-color: #000;
border-bottom: 1px solid #1a1a1a;
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
#left ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left li {
float: left;
}
#left li a {
display: block;
color: #777777;
text-align: center;
padding: 9px 14px;
text-decoration: none;
}
#right ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#right li {
float: right;
margin-top:10px;
}
#right li span {
display: block;
color: #777777;
text-align: center;
padding: 8px 14px;
text-decoration: none;
}
#menu img{
margin-top: 6px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
float: left;
height: 24px
}
Related
I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?
Thanks for your help!
JS Fiddle
HTML
<body>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120">
<ul style="list-style: none;">
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
<br>
</br>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<footer class="footer" id="footer">
<div align="center">
<p>Taylor Laboratory<br>
Leichtag Biomedical Research Building
4th Floor, Room 412
<br>
University of California, San Diego
<br>
9500 Gilman Dr. mc0654<br>
La Jolla, CA 92093
<br>
Ph: (858) 534-8190
<br>
Fax: (858) 534-8193 </p>
</div>
</footer>
</div>
</body>
CSS
li ul{
display:none;
}
li:hover ul{
display:block;
}
body {
margin: 0px;
background-color: #CCCCCC;
}
.content {
background-color: #FFFFFF;
padding-right: 6px;
padding-left: 6px;
}
.footer {
background-color: #357f7f;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
position: absolute;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1280px;
min height: 100%;
position: relative;
height: auto;
min-height: 100%
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-spacer-top {
height: 10px;
}
#content-spacer-bottom{
height:1%;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
float: left;
text-align: center;
width: 14.28%;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
display: block;
list-style-type: none;
clear: none;
margin: 0px;
height: 2%;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #357F7F;
border-right-color: #357F7F;
border-bottom-color: #357F7F;
border-left-color: #357F7F;
}
#mainnav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
.style4 {font-size: x-small}
.style5 {background-color: #357f7f; font-family: arial;}
#footer {
width:1280px;
height:120px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
Alright, so after having a look at your updated fiddle I was able to see the problem straight away. Firstly your code is really messy (sorry, but it is haha) and you have so many unnecessary css declarations.
It was so badly written I have just written a brand new fiddle and included a working navigation bar. Find the relevant code below.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Research</li>
<li>Susan Taylor</li>
<li>Lab Members
<ul>
<li>Current Members</li>
<li>Former Members</li>
<li>Gallery</li>
</ul>
</li>
<li>Publications</li>
<li>Links</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav {
display: table;
border-top: 1px solid #357F7F;
border-bottom: 1px solid #357F7F;
}
nav ul {
display: table-row;
position: relative;
margin: 0;
padding: 0;
z-index: 1;
}
nav ul a {
display: block;
color: black;
text-decoration: none;
padding: 10px 15px;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
position: relative;
display: inline-block;
display: table-cell;
width: 1%;
list-style-type: none;
text-align: center;
}
nav ul li:hover {
background-color: #357F7F;
}
nav ul li:hover a {
color: white;
}
nav ul ul{
display: none;
position: absolute;
background: rgba(0,0,0,0.4);
width: 100%;
}
nav ul ul li {
width: 100%;
display: inline-block;
}
nav ul li:hover > ul {
display: block;
}
JSFiddle
Hope this helps! :)
I've only been practicing HTML and CSS for a little over a year. I obviously have a lot to learn. When I started the re-design of my site, I used an available template. I've changed nearly everything except the sidebar. It has the sidebar on the left, and I want it on the right, because I figure it'll look nicer. I've changed the float from left to right for the sidebar. I've changed the float from right to left for the content. This just causes a lot of problems that I can't explain, and I don't know how to fix it. I've toyed with a lot of the css. Please help me understand what I'm doing wrong, and what I'm not thinking of changing that needs to be changed. I've played with this on a fiddle, and here it is with my changes (as you can see, I didn't get anywhere): The Fiddle
Here's my original:
HTML
<body>
<div id="wrapper">
<div id="header">
<!-- end div#logo -->
<div id="menu">
<ul style="
overflow: hidden;
width: 892px;
/* text-align: center; */
margin: 0 auto;
">
<li id="logo"></li>
<li>Home</li>
<li>Games</li>
</ul>
</div>
<!-- end div#menu -->
</div>
<!-- end div#header -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<!-- InstanceBeginEditable name="Page Content" --><div class="post">
<h2 class="title">New Site Update!</h2>
<p class="byline">Posted by Nicholas Maguire</p>
<div class="entry">
<p> This is the editable area.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- InstanceEndEditable -->
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Newest Games</h2>
<ul>
<li>ATV Destoyer</li>
<li>Army Driver</li>
<li>Arkanoid</li>
<li>Amazing Football</li>
<li>Alien Vs Predator</li>
<li>Airport Madness</li>
<li>Age of War</li>
</ul>
</li>
<li>
<h2>Contact Me</h2>
<ul>
<li>Contact Form</li>
<li>Requests</li>
</ul>
</li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page -->
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright © 2014 Crazy Block. All Rights Reserved. </p>
<p id="links">Privacy Policy | Terms of Use</p>
</div>
<!-- end div#footer -->
</body>
CSS
{
margin: 0;
padding: 0;
}
body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #1692ef;
}
a:hover {
text-decoration: none;
color: #165bef;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
/* Logo */
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo h2 a {
color: #9AA9B1;
}
#logo a {
text-decoration: none;
color: #165bef;
}
/* Menu */
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}
#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}
/* Search */
#search {
height: 45px;
padding: 0px 0px 40px 0px;
}
#search form {
margin: 0;
padding: 12px 0px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}
#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}
/* Page */
#page {
width: 892px;
margin: 0 auto;
}
#page-bgtop {
padding: 0px 30px;
}
/* Content */
#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}
.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.post .entry {
}
.post img {
float: left;
padding: 15px 0px;
}
.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}
.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}
#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 1px;
}
#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}
#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}
#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}
#sidebar h3 {
font-size: 77%;
color: #454E55;
}
#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}
#sidebar a {
border: none;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Submenu */
#submenu {
}
/* News */
#news {
}
#news a {
font-size: 85%;
}
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
Fiddle
When you used Position attribute in css float attribute won't work. So instead of float used right:0; see below code.
#sidebar {
/* float: left;*/
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
right:0;
}
#content {
float: left;
width: 564px;
padding-top: 30px;
}
And provide 100% width to inside (p, h2, div) so they wrap inside the #content div.
I want to achieve this:
I have achieved this:
Why are the margins set on #members-content-box not working correctly? The page is live at http://goo.gl/e7yiAf
<section id="members-content">
<div id="members-menu">
<ul>
<li>My Items</li>
<li>Submit Items</li>
<li>Account Settings</li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>
My CSS:
/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}
Use margin instead of padding - padding will just enlarge the div from inside including its background
#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}
To Achieve the above one put the padding-bottom for members-menu ul
#members-menu{
padding-bottom:30px;
}
And change members-content-box css like this
#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}
I think this one helpful to you.
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}