I have this HTML and css and works fine in chrome/firefox but on IE the header layout is over place and sub menu is not displayed on hover, can you help please:
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=1024" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<link href="images/favicon.ico" type="image/x-icon" rel="icon" /><link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page">
<div id="header">
<div class="content">
<div id="logo">
<img src="images/logo.gif" title="" alt="" />
</div>
<div class='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div id="sub_header">
<div class="content">
<div class="content_l">
<span id="sub_head_title">Welcome</span>
</div>
<div class="content_r">
<span>
Call
<strong>000000000000</strong>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
And css is :
* html .clearfix,
* html #main_panel {
height: 1%;
overflow: hidden;
}
/* float clearing for IE7 */
*+html .clearfix {
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
html, body {
background: #e5e5e5;
font-size: 13px;
}
#header {
background: transparent url(../images/header-bg.jpg) repeat-x; height: 60px;
}
#header .content, #sub_header .content {
overflow: visible; position: relative;
}
#header .content, #sub_header .content {
overflow: visible;
position: relative;
}
div.content {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
#logo {
position: absolute;
}
#logo { margin: 8px 0 8px 0; }
#logo a { border: none; }
#page #sub_header {
margin-bottom: 0;
}
#sub_header {
line-height: 49px;
}
#sub_header {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 30px;
overflow: hidden;
}
.content_l {
float: left;
overflow: hidden;
width: 50%;
}
.content_r {
float: right;
text-align: right;
width: 50%;
}
#sub_header span {
color: #2D2D2D;
line-height: 49px;
}
#sub_head_title {
font: bold 21px Arial;
text-shadow: 2px 2px 2px #FFFFFF;
}
a.header_button_children span {
background: url("../images/header-children-off.gif") no-repeat scroll right -51px transparent;
padding-right: 25px;
}
a.header_button span {
height: 19px;
padding: 8px 10px 3px;
}
/*css Menu ................*/
.cssmenu{
border:none;
border:0px;
margin:0;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
position: absolute;
right: 0;
}
.cssmenu ul{
background:#333333;
height:35px;
list-style:none;
/*margin:0 0 0 287px;*/
margin:0;
padding:0;
}
.cssmenu li{
float:left;
padding:0px;
}
.cssmenu li a{
background:#333333 url('../images/seperator.gif') bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.cssmenu li a:hover, .cssmenu ul li:hover a{
background: #2580a2 url('../images/hover.gif') bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.cssmenu li:hover ul{
display:block;
}
.cssmenu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.cssmenu li:hover li a{
background:none;
}
.cssmenu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.cssmenu li ul a:hover, .cssmenu li ul li:hover a{
background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.cssmenu p{
clear:left;
}
/*End of css Menu ................ */
Its working with me, but seems that DOCTYPE is missing so your browser lunch Quirks mode, so add
<!DOCTYPE html>
Before <html> tag to prevent your IE browser to switch to Quirks mode.
Related
I have a problem with my navigation bar. It is looking great now, but if I add a position:fixed to my css, it messes everything up. Also, if the bar can't fit horizontally on screen, the browser breaks it into two rows, so it fits, but I don't want that!
I added a bg height only so I can scroll and see if the navbar stays.
What I want is a fixed navigation bar on top of the screen, not overlapping with future content, and filling the screen horizontally.
Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700|Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!-- A roboto font stylesheetje a google fontsban -->
</head>
<body>
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
Here you can see it working: http://jsfiddle.net/DzLvT/
Try this demo
<div id="nav">
<ul>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
#nav{
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
bottom:auto;
background-color: #353539;
height:50px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
vertical-align: middle;
line-height:50px;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body{
background-color:#c5c5c5;
height:1500px;
}
you can also use css rules:
position:fixed; and top:0px;
on your menu tag
Try remove the #nav and iclude it on ul#nav, and add position fixed
http://jsfiddle.net/LZAhC/
#nav ul {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
position: fixed;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
u must give the #nav fixed with and a width with % on the a tags . They will be resized within the width of their parent if the space is too small they will go to a new line so summ them to 97% total and leave 3% for margins and paddings. instead of positioning the text with paddings u can use Line-height for height and text-aling-center
add to ur div somethink like 800/960px width remove the overflow and see the magic :D
just replace this in ur css:
#nav ul li {
list-style-type: none;
text-align: center;
display: inline-block;
width: 19%;
margin: 0px;
/* padding: 0px 10px 0px 10px; REMOVE THE PADDING*/
border-right: 1px solid #DDD;
vertical-align: middle;
line-height: 50px; /*THE SAME AS HEIGHT BUT FOR text elements*/
}
i've created a page where in the content area I am trying to create two columns using div float left but when i increase the the height of columns my footer collapses. here is the initial fiddle without columns : jsfiddle.net/Vrk5C/ and here is the fiddle with columns in it : jsfiddle.net/GKCT7/
here is the entire code of my html and css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact | Chaithanya Public School</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body id="body1">
<div class="container">
<div class="header">
<div style="float:left; width:300px; margin-top:5px;">
<img src="images/logotext.png" /></div>
</div><!-- header ends-->
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="content">
<br />
<div class="heading">Contact</div>
<br />
<br />
</div><!-- Content ends-->
</div><!-- container ends-->
<div class="footer">
<div class="footerbox">
<div class="footerbox1">
<!-- box1 -->
<ul id="footerul">
<p id="footerli" class="footerhead">About</p>
<li>School</li>
<li>Vission & Mission</li>
<li>Management</li>
</ul>
</div> <!-- box1 end -->
<div class="footerbox2"> <!-- box2 -->
<ul id="footerul">
<p id="footerli" class="footerhead">Admission</p>
<li>Overview</li>
<li>Application</li>
<li>Documents</li>
</ul>
</div> <!-- box2 end -->
<div class="footerbox2"> <!-- box3 -->
<ul id="footerul">
<p id="footerli" class="footerhead">School</p>
<li>Calander</li>
<li>Gallery</li>
<li>Careers</li>
</ul>
</div> <!-- box3 end -->
<div class="footerbox2"> <!-- box4 -->
<ul id="footerul">
<p id="footerli" class="footerhead"> Contact</p>
<li style="color:#929497;">082 4227 1080</li>
<li style="color:#929497;">Info#chaithanyaschool.com</li>
<li>Map Directions</li>
</ul>
</div> <!-- box4 end -->
<div class="footerbox3" style="padding-top:45px; padding-left:70px;"> <!-- box5 -->
<table border="0" style="float:right">
<tr>
<td></td>
<td></td> </tr>
</table>
<table border="0" style="float:right; width:220px;">
<tr>
<td id="footerul" style="text-align:right; color:#929497;">© 2013 Chaithanya Public School</td>
</tr><tr>
<td id="footerul" style="text-align:right; color:#929497;">All Rights Reserved</td> </tr>
</table>
</div> <!-- box5 end -->
</div>
</div>
</body>
</html>
body {
margin:0px;
padding:0px;
/* fallback */
background-color: #3A454B;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A454B), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #3A454B, #D9E0E6);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #3A454B, #D9E0E6);
/* IE 10 */
background: -ms-linear-gradient(top, #3A454B, #D9E0E6);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #3A454B, #D9E0E6);
}
#body
{
background:url(images/head_bg.jpg) repeat-x;
}
#body1
{
/* background:url(images/head_bg1.jpg) repeat-x; */
}
.container
{
width:980px;
min-height:500px;
height:auto;
margin-left:auto;
margin-right:auto;
}
.header
{
width:980px;
height:100px;
}
.slider
{
width:976px;
height:230px;
border: 4px #fff solid;
}
.bar
{
margin-left: auto;
margin-right: auto;
margin-top:10px;
margin-bottom:10px;
padding: 0;
width: 980px;
height:30px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.content
{
margin-top:0px;
margin-bottom:10px;
width:980px;
min-height:500px;
height:auto;
background:#fff;
/* border:1px solid #000;
-moz-border-radius: 1px;
-webkit-border-radius: 1px; */
}
.footer
{
padding-top:20px;
height:250px;
background:#111312;
}
.footerbox
{
width:980px;
height:250px;
margin-left:auto;
margin-right:auto;
}
.footerbox1
{
float:left;
height:200px;
width:150px;
}
.footerbox2
{
float:left;
height:200px;
width:150px;
margin-left:3px;
}
.footerbox3
{
float:left;
height:200px;
width:220px;
}
#footerul {
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
}
#footerul a {
text-decoration:none;
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#999;
}
#footerul a:hover{
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#FFF;
}
#footerli {
border-bottom:1px solid #666;
padding-bottom:5px;
}
.footerhead
{
/*color:#C36241; */
color:#81C1ED;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
#facebook
{
display: block;
width:32px;
height:32px;
background:url(images/facebook_dark.png) no-repeat;
}
#facebook:hover
{
background:url(images/facebook_active.png) no-repeat;
}
#twitter
{
display: block;
width:32px;
height:32px;
background:url(images/twitter_dark.png) no-repeat;
}
#twitter:hover
{
background:url(images/twitter_active.png) no-repeat;
}
.logotext
{
font-family: 'Open Sans', sans-serif;
color:#FFF;
font-size:37px;
margin:0px;
}
.logotext1
{
font-family: 'Open Sans', sans-serif;
font-size:20px;
margin:0px;
}
.link
{
color:#000;
text-decoration:underline;
}
.link:hover
{
text-decoration:none;
color:#0CC;
}
.text
{
font-family: 'Droid Sans', sans-serif;
font-size:14px;
line-height:25px;
margin:0px;
color:#000;
text-align:justify;
}
.heading
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#4e5c64;
text-align:justify;
}
.heading1
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#999;
text-align:justify;
}
.hblock1
{
width:320px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
margin-left:4px;
}
.hblock2
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.hblock3
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.addressbox
{
width:200px;
height:400px;
float:left;
}
.add
{
width:200px;
height:400px;
float:left;
}
.adressbox1
{
width:300px;
height:150px;
float:left;
margin-top:20px;
}
.adressbox2
{
width:300px;
height:120px;
float:left;
margin-top:10px;
}
.adressbox3
{
width:300px;
height:30px;
float:left;
margin-top:10px;
}
.adressbox4
{
width:300px;
height:30px;
}
.menudiv {
width:980px;
}
.menu {
font-family:'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #AEA79F;
margin: 0;
list-style: none;
position: relative;
padding: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content:"";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding-top: 10px;
padding-bottom: 7px;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #2C001E;
border-bottom: 3px solid #2C001E;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #2C001E;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu > ul > li > a {
border-right: 1px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
here is what iam trying to do :
Clear your floats. Maybe using a <div style="clear: both"></div> just before your content ends:
http://jsfiddle.net/GKCT7/1/
give clear:both to class ".footer"
Basically I'm making a project for college and I need the logo on the left hand side which is not appearing at all right now, the nav buttons on the right and some social media icons on the rightmost, I haven't added the icons yet since i cant even get this part right.
I know the code is messed up but this is my first time with CSS and HTML and also if i want to insert a bullet between the nav items is that possible?
Here is the CodePen
head
<link rel="stylesheet" href="ab.css" type="text/css" />
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<!-- Slider -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<link rel="stylesheet" href="ab.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<body class="content">
<header>
<div class="navbuttons">
<div class="nav-main-wrapper">
<nav class="nav-main">
<ul>
<li><a class="logo" href="index.html"></a></li>
<li>QUIET</li>
<li>RAIN</li>
<li>THOUGHTS</li>
<li>CRAZY</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
css
.navbuttons{
background:#0099cc;
position:relative;
padding: 30px 0px 33px 0px;
height: 60px;
margin-bottom: 10px;
}
header{
margin-top: 0px;
position: relative;
z-index:-1;
}
.branding img{
position: relative;
top: 0px auto;
float: left;
margin: 0px 0px 156px 0px;
}
.logo{
background: url("http://tinypic.com/r/30k62ae/5");
background-repeat:no-repeat;
height:140px;
display:block;
width:105px;
margin-top:-80px;
left: 30px;
margin-left: 30px;
padding: 0;
}
.nav-main-wrapper{
float:left;
min-width: 470px;
bottom: 300px:
margin: 22px 0px 22px 47px;
}
.nav-main{
float:left;
clear:both;
}
.nav-main ul{
float:left;
display:block;
font-size:22px;
}
.nav-main ul li{
display:inline;
color:#237dac;
font-family: LeagueGothic;
}
.nav-main ul li a{
color: #fff;
margin-left: 128px;
text-decoration: none;
}
.nav-main ul li a:hover{
color:#056495;
text-decoration: none;
}
.nav-main ul li:last-child:after{
content: "";
}
.nav-main ul li a {
white-space: nowrap;
text-decoration: none;
}
#font-face {
font-family: LeagueGothic;
src: url('LeagueGothic-Regular.otf');
}
You link your logo to http://tinypic.com/view.php?pic=30k62ae&s=5 which is not an image, but a page.
Link it to http://oi41.tinypic.com/30k62ae.jpg instead.
Try the following CSS below :
body{
margin: 0 auto;
padding: 0;
}
.navbuttons{
background:#0099cc;
position:relative;
padding: 30px 0px 33px 0px;
height: 60px;
margin-bottom: 10px;
}
header{
margin-top: 0px;
position: relative;
z-index:-1;
}
.branding img{
position: relative;
top: 0px auto;
float: left;
margin: 0px 0px 156px 0px;
}
.logo{
background: url("http://tinypic.com/r/30k62ae/5");
background-repeat:no-repeat;
height:140px;
display:block;
width:105px;
margin-top:-80px;
left: 30px;
margin-left: 30px;
padding: 0;
float:right;
}
.nav-main-wrapper{
min-width: 470px;
bottom: 300px:
margin: 22px 0px 22px 47px;
}
.nav-main{
float:left;
clear:both;
margin:-46px 0 0 ;
}
.nav-main ul{
float:left;
display:block;
font-size:22px;
margin:0px; padding:0px;
}
.nav-main ul li{
display:inline;
color:#237dac;
font-family: LeagueGothic;
}
.nav-main ul li a{
color: #fff;
margin-left: 128px;
text-decoration: none;
}
.nav-main ul li a:hover{
color:#056495;
text-decoration: none;
}
.nav-main ul li:last-child:after{
content: "";
}
.nav-main ul li a {
white-space: nowrap;
text-decoration: none;
}
#font-face {
font-family: LeagueGothic;
src: url('LeagueGothic-Regular.otf');
}
HTML Source below :
<body class="content">
<div class="navbuttons">
<div class="nav-main-wrapper">
<div class=""> <a class="logo" href="#"> Your Logo</a></div>
<nav class="nav-main">
<ul>
<li></li>
<li>QUIET</li>
<li>RAIN</li>
<li>THOUGHTS</li>
<li>CRAZY</li>
</ul>
</nav>
</div>
</div>
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
body {
margin: 0px;
padding: 0px;
}
.menu {
width: 100%;
height: 100px;
background: #333;
}
.menu ul {
float: left;
margin: 0px;
padding: 0px;
}
.menu ul li {
list-style: none;
float: left;
padding: 0px;
background: #333;
}
.menu ul li:hover {
background: #555;
}
.menu ul li a {
display: block;
padding: 40px
}
.logo {
padding: 0px !important;
}
</style>
<body>
<div class="menu">
<ul>
<li><a class="logo" href="#"><img src="http://oi41.tinypic.com/30k62ae.jpg" width="119" /></a></li>
<li>text</li>
<li>text</li>
</ul>
</div>
</body>
</html>
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>
I've got the following inside a div. I'd like to center the menu elements. Currently they appear like so...
| Home | Blog | About | Contact |
I'd like it to center so something like...
| Home | Blog | About | Contact |
Here's my CSS, what would I need to change?
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
To center your menu, give your menu a width and use:
maring:0 auto;
The final result is something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
.menu
{
width:270px;
margin:0 auto;
}
ul#menu
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 30px;
font-size: 12px;
font-weight: bold;
background: transparent url(images/nav_bg.png) repeat-x top left;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
ul#menu li
{
display: block;
float: left;
margin: 0;
padding: 0;
width:60px;
text-align:center;
}
ul#menu li.divider
{
width:5px;
}
ul#menu li a
{
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 8px 20px 0 20px;
}
ul#menu li a:hover
{
color: #FFFFFF;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display: inline;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="menu">
<ul id="menu">
<li class="divider">|</li>
<li>Home</li>
<li class="divider">|</li>
<li>Blog </li>
<li class="divider">|</li>
<li>About </li>
<li class="divider">|</li>
<li>Contact</li>
<li class="divider">|</li>
</ul>
</div>
</body>
</html>
Update:
If you didn't want to use pipes in the divider, you could always use:
ul#menu li.divider
{
width:2px;
background-color:Black;
}
instead which will give a similar look and make screen readers not blow up at you.
I think you're looking for something like this: http://jsfiddle.net/sp45g/
div { // Container around the UL
text-align: center;
background-color: blue;
}
ul { // Inline block to shrink-wrap to contents
display: inline-block;
background-color: red;
}
li { // Inline to display in a row
display: inline;
}
I cleaned it up a little bit...
ul#menu{
margin:0;
padding:0;
list-style-type:none;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
color:#999999;
text-decoration:none;
padding:8px 20px 0 20px;
height:22px;
background:transparent url(images/nav_bg.png) repeat-x top left;
}
ul#menu li a:hover, ul#menu li a.current{
color:#FFFFFF;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
add a wrapper around the ul:
<div id="wrapper">
<ul id="menu">
<li><a>link</a></li> |
<li><a>link</a></li> |
...
</ul>
</div>
and add folling:
#wrapper{
width:100%;
}
ul#menu{
margin:0 auto;
}
I didn't test it, so maybe u have to change some values...