I have to div's that will not go next to each other. The menu on the left keeps going below and I can not bring it up. I have tried using "top:-..." but it will not work! Please help!
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper">
<div id="midwrap"></div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>News</li>
<li>Learn</li>
<li>Useful Sites</li>
</ul>
</div>
</body>
</html>
CSS:
html, body {height: 100%;}
* { height: 100%; }
body{
position:relative;
background:#fffffc;
margin: auto auto;
height:100%;
}
#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}
#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:44px;
}
#headerlinks li{
display:inline;
padding-left:25px;
}
#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}
.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-66px;
position:relative;
clear: right;
}
#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}
#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#wrapper{
position:relative;
top:-82px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}
#sidelinksleft{
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
margin-left:-25px;
top:15px;
}
#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}
#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;
}
.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
}
#midwrap{
width:70%;
height:90%;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left:300px;
background:black;
top:10px;
position:relative;
overflow: hidden;
}
And I have no more detail, but it is saying I need more so I am typing this random paragraph to make it so I can post my question.
Your left-margin (300px) and width of div(70%) is too much for your left nav to stay in place.
div by default is a block element and here in your case it occupies the whole space of the container, So float your div too as you float your left nav and remove clear from left nav to have it sit with the float as that appears before the div. and give clear:right on div.
So modified styles:
#midwrap {
width:70%;
height:90%;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left:100px; /*Reducing this to 100px*/
background:black;
top:10px;
position:relative;
overflow: hidden;
float:right; /*float right*/
clear: right; /*add this here*/
}
#sidelinksleft {
margin-left:auto;
margin-right:auto;
float:left;
height:25px;
position:relative;
/*removed clear from here*/
float:left;
margin-left:-25px;
top:15px;
}
Demo
See the following HTML code:
<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper">
<div style="float:left;">
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>News</li>
<li>Learn</li>
<li>Useful Sites</li>
</ul>
</div>
<div id="midwrap"></div>
<div style="clear: both;"></div>
</body>
I created a div holding the menu and used the float: left property.
Related
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
I have made this drop down from the following website:
Inspirational Pixels
Here is my HTML code:
<td class="dess rec">
<a href="#" id="l_desserts" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
It is a part of a table
CSS:
.submenu {
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li {
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a {
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover {
border:2px solid white;
}
#l_desserts:hover .submenu {
z-index:1;
opacity: 1;
}
What my problem is that this drop down list is not working here in this case but earlier I made a drop down list using this method. You can see this here (the following link is of a blogger):
Indian Tadka
The same method is applied in here. I dont know Why it is not working>
body{
margin:0px;
}
#header{
height: 90px;
background-color: #444;
margin:0px;
color: #fff;
}
#logo{
width:70px;
height:90px;
background-image: url('../images/logo.jpg');
background-size: 70px 90px;
position:absolute;
z-index:2;
color:#fff;
text-align: center;
font-family: arial;
font-weight: bold;
text-shadow: 2px 1px #000;
cursor: pointer;
}
#complete_name{
position:absolute;
top:0px;
color:#fff;
font-family:arial;
font-weight:bold;
font-size:20px;
z-index:1;
background-color:#444;
}
#nav{
position:absolute;
left:75px;
color:#fff;
z-index:0;
top:37px;
}
#l_desserts, #l_rice{
color:#fff;
text-decoration:none;
padding-left:24px;
font-family: Lucida Sans Unicode;
display:block;
background-image: url('../images/coffie_paper_texture.jpg');
background-position:center;
background-size: 100px 20px;
}
.rec{
width:100px;
}
.otl{
width:100px;
background-color:#717171;
}
.submenu{
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li{
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a{
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
border:2px solid white;
}
#l_desserts:hover .submenu{
z-index:1;
opacity: 1;
}
<header id="header">
<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
<font id="complete_name"></font>
<table id="nav">
<tr id="Oth_links">
<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
</tr>
<tr id="toRecipes">
<td class="dess rec">
<a href="#" id="l_desserts" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
<td class="rice rec">
Rice
</td>
</tr>
</table>
</header>
I got the answer
i just have to change my line:
#l_desserts:hover .submenu{ ...
to this:
#l_desserts:hover+.submenu
but it still dont know how the preceding method did worked in my blogger
body{
margin:0px;
}
#header{
height: 90px;
background-color: #444;
margin:0px;
color: #fff;
}
#logo{
width:70px;
height:90px;
background-image: url('../images/logo.jpg');
background-size: 70px 90px;
position:absolute;
z-index:2;
color:#fff;
text-align: center;
font-family: arial;
font-weight: bold;
text-shadow: 2px 1px #000;
cursor: pointer;
}
#complete_name{
position:absolute;
top:0px;
color:#fff;
font-family:arial;
font-weight:bold;
font-size:20px;
z-index:1;
background-color:#444;
}
#nav{
position:absolute;
left:75px;
color:#fff;
z-index:0;
top:37px;
}
#l_desserts, #l_rice{
color:#fff;
text-decoration:none;
padding-left:24px;
font-family: Lucida Sans Unicode;
display:block;
background-image: url('../images/coffie_paper_texture.jpg');
background-position:center;
background-size: 100px 20px;
}
.rec{
width:100px;
}
.otl{
width:100px;
background-color:#717171;
}
.submenu{
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li{
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a{
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
border:2px solid white;
}
#l_desserts:hover+.submenu{
opacity:1;
z-index:3;
}
<html>
<head>
<title>Indian Tadka- Home</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scr_home.js"></script>
<script type="text/javascript" src="scripts/JIO.js"></script>
</head>
<body>
<header id="header">
<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
<font id="complete_name"></font>
<table id="nav">
<tr id="Oth_links">
<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
</tr>
<tr id="toRecipes">
<td class="dess rec">
<a href="#" id="l_desserts" onmouseover="showDess();" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
<td class="rice rec">
Rice
</td>
</tr>
</table>
</header>
</body>
</html>
On further investigation I have discovered that there is something in my CSS that is making my navigation display funny -> Everything on my innerPage and HTML below (Main Page) load fine but I am still being driven crazy by the nav so I have uploaded my full html and css to resolve this issue,
HTML:
<div id="container">
<header>
<h1>company</h1>
<div id="logo">Home</div>
<section id="sales">
<p></p>
</section>
<section id="searchBox">
<form id="searchBoxForm">
<fieldset>
<input type="text" name="search" id="search" placeholder="Search Here" />
<input class="submit" type="submit" name="submit" id="submit" value="Search" />
</fieldset>
</form>
</section>
</header><!-- Header End -->
<nav id="mainMenu">
<ul>
<li>Nav 1
<ul><!--Sub Menu Hosting -->
<li>Drop Down 1</li>
</ul><!-- Sub Menu Hosting Ends -->
</li>
<li>Nav 2
<ul><!-- Sub Menu Email -->
<li>I want my own email</li>
</ul><!-- Sub Menu Email Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu Support -->
<li>Need Support?</li>
</ul><!-- Sub Menu Support Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu About -->
<li>About</li>
</ul><!-- Sub Menu About Ends -->
</li>
<li><a class="signup" href="#">SIGN UP</a></li>
</ul>
</nav><!-- Main Menu End -->
<div id="billboard">
<h1 contenteditable="true">Cloud Hosting </h1>
<p>Hosting to take you way above the clouds</p>
</div>
<article id="services">
<section class="service1">
<h2>Plan 1</h2>
<p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p>
<p>More</p>
</section>
<section class="service2">
<h2>Plan 2</h2>
<p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p>
<p>More</p>
</section>
<section class="service3">
<h2>Plan 3</h2>
<p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p>
<p>More</p>
</section>
<section class="service4">
<h2>MS Exchange</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
<section class="service5">
<h2>Domains</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
</article><!-- Services End -->
<div id="servicesBanner">
<p>Services: </p>
</div>
<ul id="nav-footer">
<div id="col">
</div>
<p>©</p>
</div> <!-- container -->
</body>
</html>
CSS:
body {
line-height:1;
font:12px normal helvetica,arial,sans-serif;
color:gray;
background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
h1 {
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#58585a;
font-weight:700;
}
h2 {
padding-bottom:9px;
border-bottom:1px solid #e5e5e5;
font-size:18px;
line-height:30px;
color:#58585a;
font-weight:700;
margin:40px 0 10px;
}
h3 {
margin-bottom:3px;
font-size:14px;
line-height:20px;
color:#58585a;
font-weight:700;
}
h4 {
font-size:12px;
font-weight:700;
color:#58585a;
line-height:20px;
}
ol {
list-style:decimal;
margin:0 0 20px 16px;
}
strong {
color:#4a4a4a;
}
.subheading {
margin-bottom:40px;
font-size:16px;
line-height:24px;
}
h1.small {
font-size:26px;
line-height:36px;
}
#container {
width:960px;
margin:0 auto;
padding:0 0 40px;
}
pre {
border-left:2px solid #00afd8;
background:url(/assets/img/pre-bg.png);
font-size:12px;
line-height:20px;
width:620px;
overflow:auto;
overflow-y:hidden;
margin:0;
padding:0;
}
code {
display:block;
margin:0 0 0 10px;
}
header{
z-index:100;
margin-bottom:-30px;
width:100%;
height:100px;
}
header h1{
font-family: 'Springsteel Lig', arial, serif;
}
h1#logo,#logo a {
display:block;
left:0;
top:30px;
text-indent:-99999px;
width:193px;
height:41px;
margin:0;
}
/* Main Menu */
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu .signup:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:115px;
top:50px;
right:-37px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:152px;
height:30px;
font-weight:bold;
margin-left:-38px;
line-height:35px;
}
footer{
clear:both;
border-top: 1px solid #d3d3d3;
width:100%;
height:50px;
}
#sales {
width:160px;
height:30px;
float:right;
margin-top:-140px;
margin-right:215px;
}
/*Sales */
#sales p{
font-weight:bold;
text-align:center;
line-height:45px;
}
/*Search Bpx */
#searchBox{
float:right;
margin-top:-125px;
}
#searchBoxForm{
margin-top:10px;
}
#searchBoxForm .search {
font-size: 11px;
color: #fff;
padding: 6px;
border: 1px solid #b8b8b8;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit {
background-color:#00afd8;
width: 67px;
height: 26px;
border: none;
color: #fff;
cursor: pointer;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
background-color:#00afd8;
}
/* Billboard */
#billboard {
min-height:240px;
background:#00afd8;
font-size:16px;
line-height:24px;
color:#fff;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
padding:34px 520px 60px 40px;
}
#billboard h1 {
font-family:arial;
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#fff;
}
#billboard a {
color:#fff;
text-decoration:underline;
}
#services {
background-color:#fff;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
}
#services a{
text-decoration:none;
}
#services h2 {
position:relative;
border:0;
background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
margin:-40px 0 3px;
padding:0;
}
#services h2 a {
display:block;
color:#58585a;
padding:94px 0 0;
}
#services .service1 {
padding-left:20px;
border-left:0;
}
#services .service2 h2 {
background-position:-168px 0;
}
#services .service3 h2 {
background-position:-336px 0;
}
#services .service4 h2 {
background-position:-504px 0;
}
#services .service5 h2 {
background-position:-672px 0;
}
#services .service1,.service2,.service3,.service4,.service5{
float:left;
background-color:#fff;
border-left:1px solid #e5e5e5;
width:154px;
height:100%;
padding:0 18px 0 19px;
margin-bottom:10px;
}
#services img{
height:100px;
width:100px;
margin:0 auto;
}
#servicesBanner{
clear:both;
width:100%;
height:90px;
margin:15px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#servicesBanner p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Nav Content */
.subNavHeading{
color:#fff;
padding-top:10px;
margin:9px 0 15px 45px;
}
/*Inner Page CSS */
#innerPageLeftCol{
float:right;
width:220px;
min-height:100%;
margin:-10px 0 10px 0;
}
#innerPageContent{
background-color:#fff;
float:left;
width:720px;
min-height:100%;
margin-bottom:10px;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne{
background:url(../images/sidebarBox.png) no-repeat;
width:220px;
height:100%;
min-height:100%;
margin:10px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne li{
margin:5px 0 0 0;
padding-top:5px;
}
.boxOne a{
text-decoration: none;
color:#00afd8;
}
.boxTwo{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxThree{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 5px 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
#innerPageContent h1{
margin:30px;
}
#innerPageContent .innerPageSubHeading{
display:block;
font-size:16px;
margin:30px;
width:450px;
}
#innerPage .separator{
margin-top:20px;
padding-top:20px;
}
#innerPageContent p{
margin:30px;
}
#innerPageContent img{
float:right;
width:175px;
height:175px;
margin:30px;
padding:3px;
}
/*Packages Template */
#packageContainer{
width:320px;
list-style:none;
font-size:14px;
color:#000;
margin:0 auto;
}
#packageContainer .leftCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .leftCol li{
height:15px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
#packageContainer .rightCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .rightCol li{
height:15px;
text-indent:8px;
border-bottom:1px solid #ccc;
}
#packageContainer .orderButton{
float:left;
margin:0px 20px 20px 65px;
background:#00afd8;
font-family:Helvetica,arial,sans-serif;
font-size:12px;
color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 5px;
}
#innerPageProducts{
clear:both;
width:100%;
height:90px;
margin:10px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#innerPageProducts p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Footer */
#nav-footer{
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
border-top: 1px solid lightGrey;
list-style: none;
font-size: 11px;
}
#nav-footer #col{
margin: 0 auto;
display:inline-block;
width:215px;
}
#nav-footer li{
margin:10px 0 0 -10px;
text-align:left;
}
#nav-footer li a{
text-decoration:none;
}
#nav-footer ul{
list-style:none;
}
#nav-footer .first{
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
My menu seems to align fine in Chrome but when I open it in Firefox 5 I get why?
Answer 1:
I have tested on another computer in firefox 3.6 and get:
HTML:
<nav id="mainMenu">
<ul>
<li class="first">
Domains
<ul>
<li class="first">
Transfer my Domain
</li>
<li class="last">
Get A Domain Name
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Hosting
<ul>
<li class="first">
Website Hosting
</li>
<li class="">
Hosted CRM
</li>
<li class="last">
Transfer to HostOne
</li>
</ul>
</li>
</ul>
<ul>
<li class="has_current">
Email
<ul>
<li class="first">
Personal E-Mail
</li>
<li class="">
Business Email
</li>
<li class="last current">
Microsoft Hosted Exchange
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Support
</li>
</ul>
<ul>
<li class="signup last">
SIGN UP
</li>
</ul>
</nav><!-- Main Menu End -->
CSS:
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup a{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu li .signup a:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:135px;
top:50px;
right:-55px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:170px;
height:30px;
font-weight:bold;
margin-left:-35px;
line-height:35px;
}
OK, I didn't see exactly what you were seeing, but I did see that it was a bit messed up in FF. I made some changes to a couple of your CSS statements, and it was working in Chrome and FF. Here is what I did:
Changed "#mainMenu ul li" removed "display: inline;" added "float: left; list-style: none;"
#mainMenu ul li
{
margin-left:0px;
width:120px;
height:56px;
position:relative;
float: left;
list-style: none;
}
Added "#mainMenu .signup" with a "float: right;"
#mainMenu .signup
{
float: right;
}
Removed "margin-left: 360px;" from "#mainMenu .signup a"
#mainMenu .signup a
{
background-color:#69c21c;
height:50px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
Now since I am using floats in your nav bar you will probably want to put a clear div after the closing nav tag to clear the floats and start a new div normally.
<div style="clear: both;"> </div>