Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help

  Killersites.com Forum
  Category: General Web Design
  Forum: CSS - Styling your pages with Cascading Style Sheets.
  Thread: Drop Down Menu Help

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 4
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 928 times and has 3 replies Next Thread
Male svoltmer
Stranger




Joined: Mar 16, 2008
Post Count: 1
Status: Offline
Reply to this Post  Reply with Quote 
Drop Down Menu Help
Hi, I am having problems with a horizontal drop down menu in my site. If viewed in Firefox the hidden drop down nested list pushes the main content down. Also, I can't seem to center my navigation either. Any help? Thanks!

Here is a link to the site:
http://www.crosst.org/test/index.html


Here is the CSS:

body {
font:normal 62.5% Verdana, Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
background: #ffe66d url(images/bg.jpg) top repeat-x;
text-align:center;


}

h1 {
margin-top:25px;
padding:0;

}

.clear {
clear:both;
}


#wrapper {
margin:0 auto;
width:800px;
padding:0px;

}

#bgleft {
margin: 0px 0px 0px 0px;
float:left;
width:90px;
height:150px;
background-image:url(images/header_left.jpg);
background-repeat:no-repeat;
background-position:top left;
}

#bgright {
margin: 0px 0px 0px 0px;
float:right;
background-image:url(images/header_right.jpg);
background-repeat:no-repeat;
background-position:top right;
width:90px;
height:150px;


}

#header {
display:block;
height:150px;
width:646px;
background:url(images/header.jpg) top center no-repeat;
margin:27px 0px 0px 0px;
padding:0px;
}

#content {
width: 667px;
padding:0px;
margin:0px auto;
}


/* start navigation */

#center {
width:646px;
margin:0 auto;
}

#navcontain {
width:493px;
height:32;
margin:0 auto;
padding:84px 0px 0px 0px;


}

#nav{

padding:0px 0px 0px 0px;

}

#nav li {
width:79px;
float:left;
}

#nav li:hover ul, #nav li.sfhover ul {
position:relative;
left:auto;
background:#ffffff;
}


#nav li ul {
float:left;
position: relative;
left:-999em;
background:#ffffff;
}

ul li a{
color:#FFFFFF;
display:block;
width:79px;
height:32px;
float:left;
padding:5px 2px 0px 1px;
text-decoration:none;

}
ul li a:hover, ul li a:active {
color:#0000FF;
background:url(images/over.jpg) top center no-repeat;
width:79px;
height:32px;
padding:5px 2px 0px 1px;


}

ul {
font:bold 1.15em Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
list-style-type:none;
}

.bodycopy {
text-align:left;
text-indent: 10px;
}


.contentleft p {

text-align:left;
text-indent: 10px;
}

#contentright p {
text-align:left;
text-indent: 10px;
}

.contentright p {
line-height:.3em;
margin:0px;
padding:0px;
}


#contentright {
background:#ffffff url(images/rc_brcontent.png) bottom left no-repeat;
height:auto;
float:left;
width: 130px;
padding:10px 10px 10px 10px;
margin:150px 0px 0px 0px;
display:block;
}

.rightwrap {
margin-top:1px;
margin-left:20px;
float:left;
background: url(images/biblehead.jpg) top right no-repeat;
width:180px;

}

.contentleft {
height:auto;
background:#FFFFFF url(images/feather.jpg) bottom right no-repeat;
float:left;
width:445px;
margin: 9px 0px 0px 20px;
display:block;
text-align:left;

}
.contentleft p {
text-align:left;
text-indent:10px;
}

.contentleft_head {
padding:0px;
margin:0px;
}

.contentleft_head h1{
text-align:left;
padding:0px 0px 10px 0px;
margin:0px;
font: bold 1.7em Verdana, Arial, Helvetica, sans-serif;
color:#4284c0;

}

.contentleft_head .subhead {
padding:0px;
font:1.4em bold "Times New Roman", Times, serif;
text-align:left;


}

.contentleft_head h1 .hr_top {
border-bottom:1px solid #000000;
width: 200px;
height:5px;
margin-left:200px;
text-align:right;

}

.titles {
padding-top:5px;
font:bold 1.5em Verdana, Arial, Helvetica, sans-serif;
color:#4284c0;
border-bottom:1px solid #ffe66d;
text-align:left;
width: 400px;
}

.roundedcornr_top div {
background: url(images/roundedcornr_tl.png) no-repeat top left;
}
.roundedcornr_top {
background: url(images/roundedcornr_tr.png) no-repeat top right;
}
.roundedcornr_bottom div {
background: url(images/roundedcornr_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom {
background: url(images/roundedcornr_br.png) no-repeat bottom right;
}

.roundedcornr_top div, .roundedcornr_top,
.roundedcornr_bottom div, .roundedcornr_bottom {
width: 100%;
height: 12px;
font-size: 1px;
}
.roundedcornr_content {
margin: 0px 12px;
float:left;

}

.church {
float:left;
background:url(images/church.jpg) top left no-repeat;
width:190px;
height:137px;
margin:0px 10px 0px 0px;

}

.br_corner {
float:right;
text-align:right;
background:url(images/roundedcornr_br.png) bottom right no-repeat;
height:12px;

}

.bl_corner {
float:left;
background:url(images/roundedcornr_bl.png) bottom left no-repeat;
height:12px;
}

.tab_devotion {
height:30px;
width:130px;
background:url(images/tab.png) top center no-repeat;
font:1.6em "Times New Roman", Times, serif;
color:#FFFFFF;
margin:0px;
padding:0px 0px 0px 0px;
text-align:center;
line-height:30px;
}

.tab_botm {
height:160px;
width:130px;
background:url(images/botm.jpg) top center no-repeat;
font:1.3em "Times New Roman", Times, serif;
color:#FFFFFF;
padding:0px 0px 10px 0px;
text-align:center;
line-height:30px;
}

div .tab_search {
background:url(images/tab.png) top center no-repeat;
font:1.6em "Times New Roman", Times, serif;
color:#FFFFFF;
text-align:center;
line-height:30px;
padding:0px 0px 0px 0px;
margin-top:20px;

}

.tab_search p {
line-height:0px;
padding:0px 0px 0px 0px;
margin-top:0px;
}

.tab_search input {
padding-top:0px;
margin-top:10px;
}

#content_top td {
padding:5px 5px 5px 5px;
}
[Mar 16, 2008 6:46:03 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male tpattison
Advanced Member
Member's Avatar

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline
Reply to this Post  Reply with Quote 
Re: Drop Down Menu Help
The menus need to be taken out of the document's flow, using position: absolute should do just that. The width will need to be specified to make the sub-menu vertical and some top margin to lower it a bit:

#nav li:hover ul, #nav li.sfhover ul {
position:absolute;
left:auto;
margin-top: 25px;
width: 80px;
background:#ffffff;
}

#nav li ul {
float:left;
position: absolute;
left:-999em;
background:#ffffff;
}


Quite rough, but I'm sure you'll be able to take it from there.
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen
[Mar 16, 2008 9:00:42 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Wickham
Advanced Member
Member's Avatar

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline
Reply to this Post  Reply with Quote 
Re: Drop Down Menu Help
I found that the drop down menu didn't work in IE6. This is common and IE6, IE5.5 etc need a behavior file.

You add this in the head section just before the </head> closing tag:-

<!--[if lt ie 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->

and download the behavior file csshover.htc version 1.42.060206 from
http://www.xs4all.nl/~peterned/csshover.html near the page bottom and put it in the same folder.directory as the html file (no need to open it and look at it).

For my version of edits to your code see
http://www.wickham43.supanet.com/forumposts/svoltmerindex080316.html
and
http://www.wickham43.supanet.com/forumposts/svoltmerctstyles080316.css

Note that I had to change images/headers.jpg to
images/headersvoltmer.jpg because I already had a header.jpg
in my folder.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 3 times, last edit by Wickham at Mar 16, 2008 10:45:16 AM]
[Mar 16, 2008 9:51:28 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: Drop Down Menu Help
Using the suckerfish method referenced in the post, all that is need for the drop downs are a few lines of JS.

#nav li:hover ul, #nav li.sfhover ul {
position:relative;
left:auto;
background:#ffffff;
}



The JS is:

// suckerfish menu - js for ie6
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
// Run when page loads
if (window.attachEvent) window.attachEvent("onload", sfHover);
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[Mar 16, 2008 7:21:31 PM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
May 23, 2013 2:58:14 AM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net