here i try to fix submenu .. when i drag cursor on menu then the image slider which is below the menu goes down..
HERE IS IMAGE 1
and when i hover mouse on menu then look like this
image2
code
/* CSS Document */
body{
padding:0px;
margin:0px;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
#top{
width:1000px;
float:left;
}
.top1{
width:500px;
float:left;
height:176px;
display:inline;
background:url(../images/top1.jpg) no-repeat;
}
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
.contecntA {
width: 400px;
height: 480px;
padding-top: 60px;
font-family: Candara;
font-variant: normal;
}
.contPersz {
width: 990px;
height: 900px;
margin-bottom: 10px;
margin-top: 210px;
padding-right: 10px;
margin-left:70px;
}
.imggsas
{
margin-left: 40px;
width:240%;
margin-top: -30px;
}
.img_wrperas
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: -90px;
margin-left: 35px;
}
.corporate
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: 80px;
margin-left: 35px;
}
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
width: 109%;
margin: 0px;
padding: 0px;
}
.navbar li {
height: auto;
width: 131px;
/* Each menu item is 150px wide */
float: left;
/* This lines up the menu items horizontally */
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d;
/* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065;
/* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: white;
/* Text color is white */
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
padding: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
/*i add this css code for link box*/
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}
.b:hover .a {
visibility:visible;
display:block;
}
.a {
margin-top:-5px;
visibility:hidden;
display:none;
}
.topnaviation
{
float:right;
display:inline-block;
margin-right: 400px;
}
div.topnaviationleft ul {
list-style: none outside none;
margin-left: 0px;
display:inline-block;
}
div.topnaviationleft li {
float: left;
}
.indxim
{
width:1050px;
height:800px;
margin-top: -20px;
}
.blankSeparator {
margin:10px 0;
display: block;
}
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="Company_Profile.html">Company Profile</a></li>
<li>Our Philsohpy</li>
<li>CEO Profile</li>
<li>Board of Directors</li>
<li>Our People</li>
<li>Global Partnership</li>
<li>Career</li>
</ul>
</li>
<li>TRAINING
<ul id="Ul2">
<li><a id="A2" href="Academics.html">Academics</a></li>
<li>Corporate</li>
<li>Our Personnel</li>
</ul>
</li>
<li>PUBLISHING </li>
<li>CONFERENCES</li>
<li>EXHIBITION</li>
<li>RESEARCH
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul class="c">
<li class="a"> Link
</li>
</ul>
</li>
<li>Data Collection Services
</li>
<li>Editing & Proof Reading
</li>
</ul>
</li>
<li id="active">CONTACT US
</li>
</ul>
</div>
<div align="center">
<img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" />
</div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url('images/Malaysian-Flag.png'); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> is a consulting firm that offers training and research services in whole disciplinesof studies. Its goal is to provide a platform for Young Scholar, Academic & Corporate Researcher, and Trainers to discuss and frame strategies for the betterment of their goals and organization success...</p>
<h2 class="hindx">Training</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> offers broad range of academic and corporate Seminar programs for all public and private sector Universities and Companies. Global Academy of Training and Research goals is to uplift individual’s skills...</p>
<h2 class="hindx">Research</h2>
<p class="paraindex"><strong>Global Academy of Training and Research </strong>provides customized information and research collation to bring innovative and provocative insight into any emerging agenda for our clients. We excel in delivering insight needed to perform....</p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 info#gatrenterprise.com</div>
<br /><br />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, Global Acdemy of Training & Research</p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: +603 2201 1665 E:info#gatrenterprise.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
so how i fix this menu and submenu ??
Add this properties to your #headerrrr and #wrap:
Always in the top of screen:
#wrap{
position:fixed;
top:0;
}
In the top of the website:
#wrap{
absolute;
top:0;
}
Related
I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}
For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View
I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.
I currently have a navbar that stays relative as I scroll; what I want to do is have the bar span the entire top from left to right (responsive to different screens) with no gaps on either side. Also, when I move my cursor over the bar or click on one of the links it begins shrinking from the right to the left, down to about half of it's original size.
Here is a screenshot of my current navbar: http://prntscr.com/5x02ef
Here is my HTML:
<div id="header">
<div id="navbar">
<ul>
<li>
Me
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
And here is my CSS code:
#header {
position: relative;
}
#navbar {
text-align: center;
text-decoration: none;
position: fixed;
top: 10px;
margin-top:1.2%;
}
ul {
position: fixed;
margin: 0px;
height: auto;
}
li {
display: inline;
border: 2px solid rgb(73, 73, 73);
border-left: none;
border-right: none;
border-top:none;
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left:14%;
padding-right:14%;
background-color: #FFFFFF;
}
is this what you want?
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
#navbar {
text-align: center;
text-decoration: none;
}
body{
text-align:center;
}
#header {
position: relative;
text-align:center;
}
ul {
height: auto;
}
li {
display: inline-block;
border: 2px solid rgb(73, 73, 73);
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left: 6.25em;
padding-right: 6.25em;
border-radius: 5px 5px;
background-color: #FFFFFF;
}
<div id="header">
<div id="navbar">
<ul>
<li>Me
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</div>
</div>
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
In this image, on left side there is half side view of website and on the right side there is extra space which I want to omit. Also look at the bottom there is a bar which I don't want.
How do I remove this extra space?
css
/* CSS Document */
body{
padding:0px;
margin:0px;
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
/*top panel ends here*/
/*content panel starts here*/
#content{
width:1000px;
float:left;
}
.img_txt{
float:left;
position:relative;
margin:-10px 0px 0px 10px;
}
.img_tp{
width:865px;
float:left;
background:url(../images/img_tp.gif) no-repeat;
height:15px;
}
#con{
width:865px;
float:left;
background:url(../images/part_bg.gif) repeat-y;
}
.con1{
width:560px;
float:left;
display:inline;
padding-left:4px;
padding-top:10px;
}
.con2{
width:280px;
float:left;
padding-left:20px;
display:inline;
padding-top:10px;
}
.txt{
width:560px;
float:left;
margin-top:35px;
color:#515455;
font:12px/18px georgia;
}
.wor{
float:right;
position:relative;
margin:-30px 10px 0px 0px;
}
#part2{
width:1000px;
float:left;
}
#cen{
width:640px;
float:left;
height:237px;
background:#009BD9;
}
.cont{
float:left;
margin:10px 0px 0px 0px;
}
.con_txt{
width:211px;
color:#515455;
float:left;
font:12px/16px georgia;
margin:10px 0px 0px 20px;
}
.abt_txt{
width:550px;
float:left;
margin-top:15px;
color:#FFF;
font:12px/18px georgia;
}
#link{
width:257px;
float:left;
padding:10px 0px 0px 15px;
}
.copy{
width:700px;
float:left;
margin:10px 0px 0px 200px;
color:#D4D0D0;
font:12px/18px georgia;
}
.copy a{ color:#D4D0D0; font:12px/18px georgia; }
/*footer panel ends here*/
.contecnt1
{
width:400px;
height:480px;
margin-top: 100px;
padding-top : 60px;
font-family:Candara;
font-variant:normal;
}
.imgg
{
margin-left:40px;
margin-top:-40px;
}
.imggss
{
margin-left:40px;
margin-top: -100px;
}
.para
{
text-align:justify;
color:Black;
float:left;
width:990px;
padding-left:20px;
}
.img_wrper
{
background-image:url("images/Malaysian-Flag.png");
width :990px;
height:492px;
margin-bottom:10px;
margin-top:150px;
}
.contPers
{
margin-bottom: 10px;
margin-top: 230px;
padding-right: 10px;
margin-left:65px;
}
.contPers1
{
width: 990px;
height: 800px;
margin-bottom: 10px;
margin-top: 230px;
background-color:#E6E6FA;
padding-right: 10px;
}
.contPers2
{
width: 990px;
height: 1100;
margin-bottom: 10px;
margin-top: 210px;
background-color:#E6E6FA;
padding-right: 10px;
margin-left:70px;
}
.pers
{
font-family:Candara;
font-size:18px;
padding-left:18px;
padding-top:30px;
font-weight:normal;
}
.persjbssr
{
font-family: Candara;
font-size: 18px;
padding-left: 18px;
padding-top: 30px;
font-weight: normal;
}
.pes1
{
font-family:Candara;
font-size:20px;
padding-left:18px;
font-weight:normal;
margin-left: -70px;
}
.para1
{
padding-left:18px;
font-size:15px;
font-weight:normal;
font-family:Candara;
text-align:justify;
margin-left:-70px;
width:1000px;
}
.imggs
{
margin-left:10px;
margin-right:40px;
width:100px;
}
.imggs1
{
margin-left:20px;
width:100px;
height:120px
}
.imggs2
{
margin-left:20px;
width:150px;
}
html of index file
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/MyMenu1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
<!--
function Text_Newsletter_onclick() {
}
// -->
</script>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="menu">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="">abc</a></li>
<li>def</li>
<li>xyz</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li><a href="">ddd/li>
</ul>
</li>
<li>eee
<ul id="Ul2">
<li><a id="A2" href="">fff</a></li>
<li><a href="">ggg/a></li>
<li>hhh</li>
</ul>
</li>
<li>iii </li>
<li></li>
<li>ghj</li>
<li>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="#"></a>
<ul class="c">
<li class="a">A</li>
</ul>
</li>
<li>Data Collection Services</li>
<li>Editing & Proof Reading</li>
</ul>
</li>
<li id="active">CONTACT US</li>
</ul>
</div>
</div>
</div>
<div align="center"><img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" /></div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url(''); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex">Read More</a></p>
<h2 class="hindx"></h2>
<p class="paraindex"></p>
<h2 class="hindx">Research</h2>
<p class="paraindex"></p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 <br /><br /> <a class="email" href="https://secure.ipage.com/secure/login.bml" target="_blank"> <img src="images/email-login.png" alt="signin" /> </a></div>
<br /><br /><br /><hr />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, </p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: E:</p>
</div>
</div>
</div>
</body>
</html>
ok i notice it where is mistake in menu bar when i remove width=140% it is fine and extra space is gone but when i add width=140% it occur extra space and also menu look like this see this link
image
menu bar code
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
margin: 0px;
padding: 0px;
position:absolute;
margin-left:40px;
}
.navbar li {
height: auto;
width: 131px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}
Sorry for the n00b questions but here goes:
As seen in the screenshot, I can't align the text list items to the nav bar. Refer to the code so you can see what i'm talking about. It's a bit of a mess but what I basically have is a master div that holds the other divs in attempts to keep them "organized"
If anyone can help, it'd be great. thanks!
Screenshot here: http://imgur.com/dL1eMXR
HTML
<div class="masterwrappernav">
<div class="abovenav">
<div class="logowrappers">
<div id="logo">
<img src="img/logo.png">
</div>
<div id="slogan">
<img src="img/1pyramid.png">
</div>
</div>
</div>
<div class="headernav">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Devotions</li>
<li>Bible Study</li>
<li>Schedule</li>
<li>Merchandise</li>
<li>Contact Us</li>
<li>Donations</li>
</ul>
</div>
</div>
</div>
CSS
.masterwrappernav {
background-color:#11120D;
width:100%;
height:180px;
margin:0 auto;
}
.abovenav {
background-image:url('/img/wtmot.png');
background-color:#f7f7f7;
width:100%;
height:140px;
margin:0 auto;
box-shadow: 1px 1px 18px #D6D6D6;
}
.headernav {
position:absolute;
background-image:url('/img/grad.png');
background-color:#f7f7f7;
height:40px;
width:100%;
box-shadow: 1px 1px 10px #212121;
text-align:center;
}
.nav {
position:relative;
margin: 0 auto;
}
.nav ul li {
display:inline;
font-family:'Roboto', sans-serif;
font-size:19px;
}
.nav ul li a:link {
border-left:1px solid;
padding:9px 1%;
background-image:url('/img/grad.png');
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}
Thanks in Advanced
You have a fixed height of 40px on your .headernav. Auto height can fix the alignment problem.
.headernav {
height: auto;
}
Otherwise, if you want exact 40px height for .headernav you can use this snippet below-
.nav ul {
margin-top: 5px;
}
.nav ul li a:link {
padding-top: 0;
padding-bottom: 0;
}
you're messing around with "position: absolute;" without any need IMHO and your UL/LI get some auto-assigned margin/padding - use a RESET!
Look at this jsfiddle for a possible way to a solution.
CSS:
.masterwrappernav
{
background-color:#11120D;
height:180px;
margin:0 auto;
}
.abovenav
{
background-color:#f7f7f7;
height:140px;
margin:0 auto;
box-shadow: 1px 1px 18px #D6D6D6;
}
.headernav
{
background-color:#f7f7f7;
height:40px;
width:100%;
box-shadow: 1px 1px 10px #212121;
text-align:center;
}
.nav
{
margin: 0 auto;
}
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0; padding: 0; }
.nav ul li
{
display:inline;
font-family: sans-serif;
font-size:19px;
height: 40px;
line-height: 40px;
}
.nav ul li a:link
{
border-left:1px solid;
padding:9px 1%;
background-color:#f7f7f7;
color:#454443;
text-decoration:none;
}
HTML:
<div class="masterwrappernav">
<div class="abovenav">
<div class="logowrappers">
<div id="logo"><!--<img src="img/logo.png" alt="LOGO">--></div>
<div id="slogan"><!--<img src="img/1pyramid.png" alt="PYRAMID">--></div>
</div>
</div>
<div class="headernav">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Devotions</li><li>Bible Study</li>
<li>Schedule</li>
<li>Merchandise</li>
<li>Contact Us</li>
<li>Donations</li>
</ul>
</div>
</div>
</div>
I am running into a bit of trouble trying to get the mid section content div to appear under the top div. What I mean is that the bottom div is overlapping and appearing underneath, or on the bottom of, the top div.
Here are two images and the code to give you a better idea of what I am trying to write:
Here is what it looks like in browser:
Here is what it should look like:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="topBar">
<div id="wrapper">
<!--top left phone number and icon start-->
<div id="leftTop">
<div id="facebookTop">
<a href="#">
<img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" />
</a>
</div>
<p class="topLeftNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--top right phone number and icon start-->
<div id="rightTop">
<div id="twitterTop">
<img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" />
</div>
<p class="topRightNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
</div>
<!--top left phone number and icon end-->
<!--Left nav bar start-->
<div id="leftNavBar">
<!--left nav dropdown start-->
<div id="navBarLeft">
<div id="dropdownContainerLeft">
<div id="menuLeft">
<ul>
<li class="home">HOME</li>
<li class="attractions">THEME PARKS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">WATER PARKS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--left nav dropdown end-->
</div>
<!--Left nav bar end-->
<!--Right nav bar start-->
<div id="rightNavBar">
<!--Right nav dropdown start-->
<div id="navBarRight">
<div id="dropdownContainerRight">
<div id="menuRight">
<ul>
<li class="attractions">DINNER SHOWS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">ATTRACTIONS
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
<li class="attractions">SERVICES
<ul>
<li class="attractions">Disney</li>
<li class="attractions">Universal Studios</li>
<li class="attractions">SeaWorld</li>
<li class="attractions">Busch Gardens</li>
<li class="attractions">Dinner Shows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--Right nav dropdown end-->
</div>
<!--Right nav bar end-->
<!--Main image start - ONLY CHANGE IMAGE IN INLINE CODE-->
<div id="mainImage">
<img class="main" src="images/main-image.jpg" alt="Discount Walt Disney World Tickets" />
</div>
<!--Main image end-->
<!--Logo start-->
<div id="logo">
<a href="http://www.greatorlandodiscounts.com">
<img src="images/logo.png" alt="Great Orlando Discount Tickets" />
</a>
</div>
<!--Logo end-->
</div>
</div>
<!--Middle section start-->
<div id="midSecWrapper">
<!--midSpacer start-->
<div id="midSpacer"></div>
<!--midSpacer end-->
</div>
<!--Middle section end-->
</body>
</html>
Here is my CSS:
#charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
background-image:url(../images/body-bg.jpg);
background-repeat:repeat;
}
#topBar {
width: 100%;
height: 58px;
background-image:url(../images/top-bar.png);
background-repeat:repeat-x;
position: relative;
z-index:0;
}
#wrapper {
width: 980px;
height: 501px;
position:relative;
z-index:100;
margin: 0 auto;
}
#logo {
width: 260px;
height: 185px;
position:relative;
z-index:999;
margin: 0 auto;
}
#leftTop {
width: 350px;
height: 58px;
float: left;
z-index:200;
}
#rightTop {
width: 360px;
height: 58px;
float: right;
z-index:300;
}
#mainImage {
width: 980px;
height: 401px;
float: left;
clear: left;
position: absolute;
z-index: -100;
margin-top: 100px;
left: 0px;
top: -2px;
}
#facebookTop {
float:left;
margin: 4px 10px 0px 0px;
}
#twitterTop {
float:right;
margin: 4px 0px 0px 10px;
}
#leftNavBar {
width: 340px;
height: 40px;
float: left;
clear: both;
z-index:600;
}
#rightNavBar {
width: 360px;
height: 40px;
float: right;
clear: right;
z-index:700;
}
#midSecWrapper {
margin: 0 auto;
width: 980px;
height: 501px;
}
#midSpacer {
width: 980px;
height: 30px;
background-image:url(../images/spacer.png);
background-repeat:repeat-x;
}
.topLeftNumber {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 18px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
}
.topRightNumber {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 18px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
text-align:right;
}
mark.orange {
color:#fa7252;
background: none;
}
.twitterTop {
}
/*Nav bar style left*/
#menuLeft {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuLeft ul{
padding:0;
margin:0;
}
#menuLeft li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuLeft li a{
font-size: 12px;
width:110px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuLeft li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fa7252; background-color: #e1ebf4;
}
#menuLeft ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuLeft ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style left end*/
/*Nav bar style right*/
#menuRight {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuRight ul{
padding:0;
margin:0;
}
#menuRight li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuRight li a{
font-size: 12px;
width:120px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuRight li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fff; background-color: #e1ebf4;
}
#menuRight ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuRight ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style right end*/
Looks like you did not set
clear:both;
so the bar is floating up
if you can provide the url then i can tell you exactly which/where to add
I see you set the top's bar position as relative but relative to what?: you dont't specify a top, left, right nor a bottom relative amount. Also, you should set your midSecWrapper's clear property to both:
#topBar {
width: 100%;
height: 58px;
background-image:url(../images/top-bar.png);
background-repeat:repeat-x;
/* position: relative; */
z-index:0;
float: left;
}
#wrapper {
width: 980px;
height: 501px;
/* position:relative; */
z-index:100;
margin: 0 auto;
float: left;
}
#midSecWrapper {
margin: 0 auto;
width: 980px;
height: 501px;
clear: both;
}
You can test it with this fiddle.
I posted this in the comment section, but I thought I would post it as an answer. I may be a solution and possibly help someone else out with a similar problem.
I was actually able to make it work by putting a #wrapperContainer around the entire top div. I set it like this:
wrapperContainer {
margin: 0 auto;
width:100%;
height:505px;
}
That contained all of the elements and allowed me to drop the midSecWrapper in place under the image.
Is that good, or good code, or is there a "right way" to do it? I always assumed that if the site functions the way I want it to and it validates, it is good to go.