#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0

    Hidden navbar-drop-down, 2 - CSS


    This started with a need to update the church website. (They don't have the budget for a proper web developer.) I got the following layout approved:

    http://kevin.first311test.org/

    ... but a major need is a more advanced navbar with drop down menus. I created the drop down menu here:

    purecssmenu dot com (... but I'm not married to this method)

    ... and the navbar seems to work OK. I got that approved:

    http://kevin.first311test.org/FirstCongoNavbar4b.html

    When I merged the navbar into the HTML, it seems to work except that the navbar gets hidden when hover triggers the drop down. I've tried using code to force the menu to the top (based on another thread in this forum):

    Code:
    #main-menu-wrapper {
      position: relative;
      z-index: 99;
    }
    ... but it still is not working.

    Here is a late attempt:

    kevin.first311test.org/kztest/index_navbar2c.xht

    ... which also requires the following external CSS to display properly (although images do not display from this test folder):

    kevin.first311test.org/kztest/style.css

    I would appreciate any help, as I'm waaay over my head. I suspect that part of the problem is embedded CSS in the HTML, plus the external CSS.

    Thanks,

    ziggy
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Let me simplify. Will someone please look at the following and see if they can help expose the navbar-drop-down?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Pragma" content="cache" />
        <meta http-equiv="Content-Language" content="en" />
        <title>First Congo kz Navbar</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="creation" content="" />
        <meta name="expires" content="" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      <body id="idBkgnd">
        <div class="logodiv">
          <div class="logo"> <img width="329px" border="0" height="53px" src="kzImages/logo.png"
    
              alt="" /> </div>
          <!-- Start Navbar STYLE -->
          <style>
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#ffffff;
    	background-repeat:repeat;
    	}
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:148.05px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:2px 0px 0px 2px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	text-transform:uppercase;
      display:block;
    	vertical-align:middle;
    	background-color:#ffffff;
    	border-width:0px;
    	border-color:#6655ff;
    	border-style:solid;
    	text-align:left;
    	text-decoration:none;
    	padding:4px;
    	_padding-left:0;
    	font:18px Georgia;
      text-transform:uppercase;
    	color: #444444;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:center;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:5;
    	height:16;
    	display:inline-block;
    	background-color:#AAAAAA;	background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:100%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	text-transform:uppercase;
      background-color:#4792E6;
    	border-color:#665500;
    	border-style:solid;
    	font:18px Georgia;
      text-transform:uppercase;
    	color: #ffffff;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	text-transform:uppercase;
      position:relative;
    	background-color:#4792E6;
    	border-color:#665500;
    	border-style:solid;
    	font:18px Georgia;
      text-transform:uppercase;
    	color: #ffffff;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arrv_anim_1.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:11px;}
    ul.pureCssMenu li:hover>a>span{	background-image:url(./imagesNBar/arrv_anim_1o.gif);
    }
    ul.pureCssMenu a:hover span{	_background-image:url(./imagesNBar/arrv_anim_1o.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./imagesNBar/arr_double_1.gif)}
    ul.pureCssMenu ul li:hover > a span{	background-image:url(./imagesNBar/arr_double_1o.gif);}
    ul.pureCssMenu table a:hover span{background-image:url(./imagesNBar/arr_double_1o.gif);}
            #main-menu-wrapper {
      position: relative;
      z-index: 99;
    }
    </style><!-- End Navbar STYLE -->
          <!-- Start PureCSSMenu.com MENU -->
          <ul class="pureCssMenu pureCssMenum">
            <li class="pureCssMenui"><a title="Home" href="index.html" class="pureCssMenui"><span>Home</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="pureCssMenum">
                <li class="pureCssMenui"><a title="Worship" href="Worship.html" class="pureCssMenui">Worship</a></li>
                <li class="pureCssMenui"><a title="Sunday School" href="SundaySchool.html"
    
                    class="pureCssMenui">SUNDAY SCHOOL</a></li>
                <li class="pureCssMenui"><a title="Schedule" href="Schedule.html" class="pureCssMenui">Schedule</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class="pureCssMenui"><a title="About Us" href="AboutUs.html" class="pureCssMenui"><span>About
                  Us</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="pureCssMenum">
                <li class="pureCssMenui"><a title="Staff" href="Staff.html" class="pureCssMenui">Staff</a></li>
                <li class="pureCssMenui"><a title="History" href="History.html" class="pureCssMenui">History</a></li>
                <li class="pureCssMenui"><a title="Beliefs" href="Beliefs.html" class="pureCssMenui">Beliefs</a></li>
                <li class="pureCssMenui"><a title="Links" href="Links.html" class="pureCssMenui">Links</a></li>
                <li class="pureCssMenui"><a title="Information" href="Information.html"
    
                    class="pureCssMenui">Information</a></li>
                <li class="pureCssMenui"><a title="Map" href="Map.html" class="pureCssMenui">Map</a></li>
                <li class="pureCssMenui"><a title="FAQS" href="FAQS.html" class="pureCssMenui">FAQS</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class="pureCssMenui"><a title="Ministries" href="Ministries.html" class="pureCssMenui"><span>Ministries</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="pureCssMenum">
                <li class="pureCssMenui"><a title="Nursery" href="Nursery.html" class="pureCssMenui">Nursery</a></li>
                <li class="pureCssMenui"><a title="Music" href="Music.html" class="pureCssMenui">Music</a></li>
                <li class="pureCssMenui"><a title="Youth" href="Youth.html" class="pureCssMenui">Youth</a></li>
                <li class="pureCssMenui"><a title="Service Times" href="ServiceTimes.html"
    
                    class="pureCssMenui">Service Times</a></li>
                <li class="pureCssMenui"><a title="Sunday School" href="SundaySchool.html"
    
                    class="pureCssMenui">Sunday School</a></li>
                <li class="pureCssMenui"><a title="Newsletter" href="Newsletter.html"
    
                    class="pureCssMenui">Newsletter</a></li>
                <li class="pureCssMenui"><a title="Schedule" href="Schedule.html" class="pureCssMenui">Schedule</a></li>
                <li class="pureCssMenui"><a title="Missions" href="Missions.html" class="pureCssMenui">Missions</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class="pureCssMenui"><a title="Spiritual Life" href="SpiritualLife.html"
    
                class="pureCssMenui"><span>Spiritual Life</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="pureCssMenum">
                <li class="pureCssMenui"><a title="Devotions" href="Devotions.html"
    
                    class="pureCssMenui">Devotions</a></li>
                <li class="pureCssMenui"><a title="Pastorís Heart" href="PastorsHeart.html"
    
                    class="pureCssMenui">Pastorís Heart</a></li>
                <li class="pureCssMenui"><a title="Prayer Needs" href="PrayerNeeds.html"
    
                    class="pureCssMenui">Prayer Needs</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class="pureCssMenui"><a title="News" href="News.html" class="pureCssMenui"><span>News</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="pureCssMenum">
                <li class="pureCssMenui"><a title="Specific Events" href="SpecificEvents.html"
    
                    class="pureCssMenui">Specific Events</a></li>
                <li class="pureCssMenui"><a title="Newsletter" href="Newsletter.html"
    
                    class="pureCssMenui">Newsletter</a></li>
                <li class="pureCssMenui"><a title="Calendar" href="Calendar.html" class="pureCssMenui">Calendar</a></li>
                <li class="pureCssMenui"><a title="Projects" href="Projects.html" class="pureCssMenui">Projects</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            <li class="pureCssMenui"><a title="Contact Us" href="ContactUs.html" class="pureCssMenui">Contact
                Us</a></li>
          </ul>
          <a href="http://www.purecssmenu.com/" id="pcm">CSS Drop Down Menu by
            PureCSSMenu.com</a>
          <!-- End PureCSSMenu.com MENU -->
          <!-- NAVBAR END --> </div>
        <!-- LOGODIV END -->
        <div class="header">
          <div class="htxt">
            <p class="htitle"> God Lives in our hearts </p>
            <p class="htxt2"> Class aptent taciti sociosqu ad litora torquent per
              conubia nostra, per inceptos himenaeos. Aliquam risus massa, laoreet
              eu accumsan vel, rhoncus et velit. Nulla facilisi. Etiam sed tincidunt
              ante. Nunc aliquet euismod lorem id elementum. Nulla risus est, ornare
              vitae gravida at, euismod nec diam. Praesent venenatis lectus ut
              ligula venenatis iaculis. Vestibulum et ante in justo pellentesque
              malesuada.<br />
              <br />
              Maecenas id velit lorem. Curabitur ullamcorper arcu ut nisi venenatis
              rutrum. In dignissim libero id mauris accumsan commodo tempus justo
              molestie. Vivamus lorem sapien, adipiscing ac rhoncus et, Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Integer gravida nisi quis
              odio hendrerit facilisis eget non lectus. Morbi porta, est a laoreet
              eleifend ... </p>
            <div class="rmorebtn"> <a href="">read more</a> </div>
          </div>
        </div>
        <!-- HEADER END -->
        <div class="main">
          <div class="sidebar">
            <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                src="kzImages/titleicon.png" alt="" /> LATEST CHURCH NEWS</div>
            <div class="newsbox">
              <p class="newst"><span class="date">25.12.2012</span> <a href="file:///C:/MyWebSites/FirstCingoXHTML/kzPublic_html/sermons_new.html">Online
                  Sermons</a></p>
              Nulla enim elit, congue quis commodo sed, interdu m pharetra est.
              Vestibulum auctor leo a sem facili sis eu varius arcu congue. Mauris
              malesuada urn a augue, vitae dignissim mi. Nunc quis nulla digni ssim
              sapien molestie venenatis ultrices et libero. Phasellus dignissim ...
              <a class="rmorelink" href=""> READ MORE</a> </div>
            <!--NEWSBOX END -->
            <div class="newsbox">
              <p class="newst"><span class="date">25.12.2012</span> Title News 2</p>
              Nulla enim elit, congue quis commodo sed, interdu m pharetra est.
              Vestibulum auctor leo a sem facili sis eu varius arcu congue. Mauris
              malesuada urn a augue, vitae dignissim mi. Nunc quis nulla digni ssim
              sapien molestie venenatis ultrices et libero. Phasellus dignissim ...
              <a class="rmorelink" href=""> READ MORE</a> </div>
            <!--NEWSBOX END -->
            <div class="newsbox">
              <p class="newst"><span class="date">25.12.2012</span> Title News 3</p>
              Nulla enim elit, congue quis commodo sed, interdu m pharetra est.
              Vestibulum auctor leo a sem facili sis eu varius arcu congue. Mauris
              malesuada urn a augue, vitae dignissim mi. Nunc quis nulla digni ssim
              sapien molestie venenatis ultrices et libero. Phasellus dignissim ...
              <a class="rmorelink" href=""> READ MORE</a> </div>
            <!--NEWSBOX END -->
            <div class="thetitle2"><img width="27px" border="0" height="28px" class="titleicon"
    
                src="kzImages/titleicon.png" alt="" /> NEWEST MEMBERS</div>
            <div class="themember">
              <div class="memberphoto"> <img width="47px" border="0" height="44px"
    
                  src="kzImages/nophoto.png" alt="" /> </div>
              <div class="membertxt"> <span class="mname">John Donald</span><br />
                <p class="welcomemsg">Welcome <span class="subname">John Donald</span>
                  to our community and church ! Bless you !</p>
              </div>
            </div>
            <!--THEMEMBER END -->
            <div class="themember">
              <div class="memberphoto"> <img width="47px" border="0" height="44px"
    
                  src="kzImages/nophoto.png" alt="" /> </div>
              <div class="membertxt"> <span class="mname">Jim Mcnama</span><br />
                <p class="welcomemsg">Welcome <span class="subname">Jim Mcnama</span>
                  to our community and church ! Bless you !</p>
              </div>
            </div>
            <!--THEMEMBER END -->
            <div class="themember">
              <div class="memberphoto"> <img width="47px" border="0" height="44px"
    
                  src="kzImages/nophoto.png" alt="" /> </div>
              <div class="membertxt"> <span class="mname">Margaret Tacher</span><br />
                <p class="welcomemsg">Welcome <span class="subname">Margaret Tacher</span>
                  to our community and church ! Bless you !</p>
              </div>
            </div>
            <!--THEMEMBER END -->
            <div class="themember">
              <div class="memberphoto"> <img width="47px" border="0" height="44px"
    
                  src="kzImages/nophoto.png" alt="" /> </div>
              <div class="membertxt"> <span class="mname">William Ronald</span><br />
                <p class="welcomemsg">Welcome <span class="subname">William Ronald</span>
                  to our community and church ! Bless you !</p>
              </div>
            </div>
            <!--THEMEMBER END -->
            <div class="themember">
              <div class="memberphoto"> <img width="47px" border="0" height="44px"
    
                  src="kzImages/nophoto.png" alt="" /> </div>
              <div class="membertxt"> <span class="mname">Samantha Rock</span><br />
                <p class="welcomemsg">Welcome <span class="subname">Samantha Rock</span>
                  to our community and church ! Bless you !</p>
              </div>
            </div>
            <!--THEMEMBER END --> </div>
          <!--SIDEBAR END -->
          <div class="content">
            <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                src="kzImages/titleicon.png" alt="" /> A WORD FROM OUR PASTOR TO OUR
              CHURCH MEMBERS</div>
            <div class="wbinder">
              <div class="photopastor"> <img width="133px" border="0" height="121px"
    
                  class="pastorphoto" src="kzImages/pastor.png" alt="" /> </div>
              <div class="pword"> Aenean vitae sapien libero, vitae ultrices diam.
                Nullam fermentum, felis vel pharetra imperdiet, nulla quam
                vestibulum nisl id tincidunt lorem dolor vel risus. Nam auctor
                ultrices eros quis pulvinar. Mauris metus ipsum, tristique vel
                lacinia id, volutpat eu nulla. Cras a placerat sem. Donec felis est,
                placerat vel scelerisque at, consequat ornare quam. Ut auctor
                vehicula est vehicula adipiscing. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus mus. Maecenas
                iaculis, justo sit amet lobortis porttitor, sapien tortor ultricies
                enim, placerat egestas enim nisi id metus.<br />
                <br />
                Nam ornare porttitor dolor eu interdum. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Praesent volutpat tellus sit amet
                sapien scelerisque nec interdum sem tincidunt. Aliquam venenatis
                interdum sem sed scelerisque. Aenean aliquam, nunc ut tristique
                mauris lobortis dictum. Duis nisl erat, pulvinar ac dapibus sed,
                lobortis ut enim. </div>
            </div>
            <!--WBINDER END -->
            <div class="donationboxes">
              <div class="box1">
                <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                    src="kzImages/titleicon.png" alt="" /> Friends Indeed</div>
                <img width="220px" border="0" height="139px" src="kzImages/friends.png"
    
                  alt="" />
                <p class="donatetitle"> Celebrate New Nursery</p>
                Nam ornare porttitor dolor eu interdum. Lorem ipsum dolor sit amet,
                consectetur adipiscing e Praesent volutpat tellus sit amet sapien
                scelerisque nec interdum sem tincidunt. Aliqu venenatis interdum sem
                sed scelerisque. Aen aliquam, nunc ut tristique laoreet, nisl massa
                ultrices magna...
                <div class="rlink"><a class="rmorelink" href=""> READ MORE</a></div>
              </div>
              <!--BOX 1 END -->
              <div class="box2">
                <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                    src="kzImages/titleicon.png" alt="" /> Special Mention</div>
                <img width="220px" border="0" height="139px" src="kzImages/special_mention.png"
    
                  alt="" />
                <p class="donatetitle"> Honorable Service</p>
                Nam ornare porttitor dolor eu interdum. Lorem ipsum dolor sit amet,
                consectetur adipiscing e Praesent volutpat tellus sit amet sapien
                scelerisque nec interdum sem tincidunt. Aliqu venenatis interdum sem
                sed scelerisque. Aen aliquam, nunc ut tristique laoreet, nisl massa
                ultrices magna...
                <div class="rlink"><a class="rmorelink" href=""> READ MORE</a></div>
              </div>
              <!--BOX 2 END -->
              <div class="box3">
                <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                    src="kzImages/titleicon.png" alt="" /> HELP THE CHURCH</div>
                <div align="center"><tt><img width="166" border="0" height="139" src="kzImages/church.png"
    
                      alt="" /></tt></div>
                <p class="donatetitle"> Donate for the church</p>
                Nam ornare porttitor dolor eu interdum. Lorem ipsum dolor sit amet,
                consectetur adipiscing e Praesent volutpat tellus sit amet sapien
                scelerisque nec interdum sem tincidunt. Aliqu venenatis interdum sem
                sed scelerisque. Aen aliquam, nunc ut tristique laoreet, nisl massa
                ultrices magna...
                <div class="rlink"><a class="rmorelink" href=""> READ MORE</a></div>
              </div>
              <!--BOX 3 END --> </div>
            <!--DONATIONBOXES END -->
            <div class="thetitle"><img width="27px" border="0" height="28px" class="titleicon"
    
                src="kzImages/titleicon.png" alt="" /> DAILY STORY FROM THE HOLY
              BIBLE</div>
            <div class="thestory"> Maecenas aliquet feugiat eros quis sagittis.
              Maecenas volutpat congue urna, quis volutpat purus tristique id. Donec
              rhoncus fringilla tristique. Suspen se metus eros, vehicula nec
              aliquam eu, adipiscing at tortor. Nullam sit amet tortor ante. Donec
              lacus felis, volutpat et tincidunt in, hendrerit a tortor. Ali am
              pulvinar, diam vitae convallis adipiscing, leo nunc ullamcorper sem,
              sed congue lorem enim et odio. Sed ac augue id nisl lacinia porttitor
              a at quam. Nunc pulvinar tortor sit amet felis sagittis aliquet.
              Maecenas orci risus, iaculis sit amet laoreet et, condimentum vel
              tellus. Vestibulum iaculis facilisis suscipit. Morbi viverra ipsum at
              quam euismod ac suscipit tellus imperdiet.<br />
              <br />
              Fusce quis arcu sapien. Nullam id elementum nisi. Curabitur sodales,
              urna at aliquet porta, urna dui dapibus nisi, ut fringilla sapien enim
              ac sem. Inte dignissim enim sit amet nunc convallis molestie. Aenean
              vitae purus mi. Proin porta ultrices mi, id tempor justo semper sit
              amet. Sed commodo rhonc pulvinar. Vivamus ut porttitor turpis. Morbi
              fringilla scelerisque nibh id consequat.<br />
              <br />
              Praesent varius sollicitudin suscipit. Ut volutpat pharetra feugiat.
              Quisque luctus suscipit pulvinar. Pellentesque habitant morbi
              tristique senectus etpc netus et malesuada fames ac turpis egestas.
              Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur
              adipiscing elit. Donec vel velit ut odio de Nullam ut dolor felis, vel
              pretium magna. Praesent mollis porttitor nulla...
              <div class="rlink"><a class="rmorelink" href=""> READ MORE</a></div>
            </div>
          </div>
          <!--CONTENT END --> </div>
        <!-- MAIN END -->
        <div class="footer">
          <p>© 2012 - The Big Red Church - First Congregational, Sterling, IL</p>
        </div>
      </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Note that the above requires this external CSS:

    Code:
    body {
      background-image: url("kzImages/bodybg.png");
      background-repeat: repeat-x;
      background-color: #e8f4ff;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
    .logodiv {
      margin-left: auto;
      margin-right: auto;
      width: 1031px;
      background-color: white;
      overflow: hidden;
      height: 59px;
      padding-top: 15px;
    }
    .logo {
      float: left;
      width: 329px;
      padding-left: 5px;
    }
    .navbar {
      float: right;
      width: 690px;
      overflow: hidden;
      padding-top: 32px;
    }
    a {
      outline-width: medium;
      outline-style: none;
      outline-color: -moz-initial;
      outline-color: initial;
    }
    .navbar a:link {
      text-decoration: none;
      font-family: 'Georgia';
      font-size: 18px;
      display: block;
      float: left;
      padding-left: 36px;
      -epub-text-transform: uppercase;
      text-transform: uppercase;
      color: #6a90b4;
    }
    .navbar a:active {
      text-decoration: none;
      font-family: 'Georgia';
      font-size: 18px;
      display: block;
      float: left;
      padding-left: 36px;
      -epub-text-transform: uppercase;
      text-transform: uppercase;
      color: #6a90b4;
    }
    .navbar a:visited {
      text-decoration: none;
      font-family: 'Georgia';
      font-size: 18px;
      display: block;
      float: left;
      padding-left: 36px;
      -epub-text-transform: uppercase;
      text-transform: uppercase;
      color: #6a90b4;
    }
    .navbar a:hover {
      text-decoration: none;
      font-family: 'Georgia';
      font-size: 18px;
      display: block;
      float: left;
      padding-left: 36px;
      -epub-text-transform: uppercase;
      text-transform: uppercase;
      color: #afafaf;
    }
    .header {
      border-top-width: 13px;
      border-top-style: solid;
      border-top-color: #9fbbd5;
      border-bottom-width: 13px;
      border-bottom-style: solid;
      border-bottom-color: #9fbbd5;
      background-image: url("kzImages/bgheader.png");
      background-repeat: no-repeat;
      width: 1031px;
      height: 285px;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
      z-index:2;
    }
    .htxt {
      width: 638px;
      float: right;
      margin-top: 10px;
      margin-right: 15px;
    }
    p.htitle {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      font-family: 'Georgia';
      font-size: 36px;
      color: white;
      text-shadow: 0px 1px 1px #a7afb7;
    }
    p.htxt2 {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      font-family: 'Arial';
      font-size: 14px;
      color: white;
    }
    .rmorebtn {
      overflow: hidden;
      margin-top: -10px;
    }
    .rmorebtn a {
      float: right;
      width: 189px;
      height: 67px;
      text-align: center;
      background-image: url("kzImages/readmorebtn.png");
      background-repeat: no-repeat;
      line-height: 72px;
      color: #effeff;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Arial';
      -epub-text-transform: uppercase;
      text-transform: uppercase;
    }
    .main {
      width: 1007px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 12px;
      padding-right: 12px;
      padding-bottom: 12px;
      padding-left: 12px;
      overflow: hidden;
      background-color: white;
    }
    img.titleicon {
      vertical-align: middle;
    }
    .thetitle {
      font-family: 'Georgia';
      font-size: 18px;
      color: #6a90b4;
    }
    .thetitle2 {
      font-family: 'Georgia';
      font-size: 18px;
      color: #6a90b4;
      padding-top: 10px;
    }
    .sidebar {
      width: 244px;
      float: left;
      padding-right: 11px;
    }
    p.newst {
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 8px;
      padding-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      font-family: 'Arial';
      font-size: 12px;
      color: #6a90b4;
      font-weight: bold;
    }
    span.date {
      color: #efb929;
    }
    .newsbox {
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      padding-bottom: 8px;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: #6a90b4;
    }
    a.rmorelink {
      color: #efb929;
      font-family: 'Arial';
      font-size: 11px;
      text-decoration: none;
      -epub-text-transform: uppercase;
      text-transform: uppercase;
    }
    .themember {
      width: 244px;
      overflow: hidden;
      padding-top: 10px;
    }
    .memberphoto {
      float: left;
      width: 47px;
    }
    .membertxt {
      float: right;
      width: 190px;
    }
    span.mname {
      font-family: 'Georgia';
      font-size: 18px;
      color: #efb929;
    }
    p.welcomemsg {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      line-height: 12px;
    }
    span.subname {
      color: #6a90b4;
    }
    .content {
      float: left;
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #c8d6e3;
      padding-left: 10px;
    }
    .wbinder {
      overflow: hidden;
      width: 738px;
      padding-top: 10px;
    }
    .pword {
      float: right;
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      width: 584px;
    }
    .photopastor {
      float: left;
      width: 143px;
    }
    img.pastorphoto {
      border-top-width: 5px;
      border-top-style: solid;
      border-top-color: #f0f0f0;
      border-right-width: 5px;
      border-right-style: solid;
      border-right-color: #f0f0f0;
      border-bottom-width: 5px;
      border-bottom-style: solid;
      border-bottom-color: #f0f0f0;
      border-left-width: 5px;
      border-left-style: solid;
      border-left-color: #f0f0f0;
    }
    .donationboxes {
      overflow: hidden;
      width: 739px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-top: 12px;
      margin-bottom: 12px;
      border-top-width: 1px;
      border-top-style: dashed;
      border-top-color: #6a90b4;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: #6a90b4;
    }
    .box1 {
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      padding-right: 12px;
      width: 220px;
      float: left;
    }
    p.donatetitle {
      color: #6a90b4;
      font-size: 14px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 0px;
      font-weight: bold;
    }
    .rlink {
      text-align: right;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 5px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
    .box3 {
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      padding-left: 12px;
      width: 220px;
      float: left;
    }
    .box2 {
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      padding-right: 12px;
      padding-left: 12px;
      width: 220px;
      float: left;
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #c8d6e3;
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #c8d6e3;
    }
    .thestory {
      font-family: 'Arial';
      font-size: 11px;
      color: #afafaf;
      width: 739px;
    }
    .footer {
      border-top-width: 13px;
      border-top-style: solid;
      border-top-color: #9fbbd5;
      width: 100%;
      background-color: #769bbf;
      background-image: none;
      background-repeat: repeat;
      background-attachment: scroll;
      background-position: 0% 0%;
      font-family: 'Arial';
      color: #effeff;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      height: 59px;
      line-height: 38px;
    }
    .footer P {
      line-height: 22px;
      text-align: center;
    }
    .footer imp {
      border-top-width: medium;
      border-top-style: none;
      border-top-color: -moz-initial;
      border-top-color: initial;
      border-right-width: medium;
      border-right-style: none;
      border-right-color: -moz-initial;
      border-right-color: initial;
      border-bottom-width: medium;
      border-bottom-style: none;
      border-bottom-color: -moz-initial;
      border-bottom-color: initial;
      border-left-width: medium;
      border-left-style: none;
      border-left-color: -moz-initial;
      border-left-color: initial;
    }
    .footer a {
      color: white;
      text-decoration: none;
    }
    #idBkgnd {
      background-repeat: no-repeat;
    }
    Thanks,

    ziggy
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    I did run the HTML-w-inline-CSS through the HTML validation tool at w3 dot org, and it came up with 2 errors, which don't seem to affect the problem I'm having, and when I run the validator with the HTML-Tidy option on, an additional problem occurs with the resulting code, but it does nothing to affect my problem with the hidden drop down.

    The same code runs through the CSS validator with a few warnings, but no errors.

    The external CSS code runs through the CSS validator with no messages whatsoever (it's fine).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Season's greetings everyone.
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi,

    I assume you missed that you can edit your post?
    Can I assume that the code in your second post is needed in combination with your third post? Do you have this online somewhere, because with all the updates I can't really see what I should be looking at. Besides that you are using images with a relative url so I can't see them on a localhost. In other words. Do you have this test somewhere online so we can have a look at it (a complete one).

    P.s. Be aware that on this url: http://kevin.first311test.org/kztest/index_navbar2c.xht
    you have a overflow:hidden on line 14 of your stylesheet.(.logodiv) Remove that property anyway, because with a fixed height and width it can cause serious troubles. (this might very well be the answer/solution to your problem
    Last edited by aeternus; December 24th, 2012 at 05:11 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Thanks so much "aeternus". I am investigating line 14.

    ziggy
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Originally Posted by aeternus
    ...

    P.s. Be aware that on this url: http://kevin.first311test.org/kztest/index_navbar2c.xht
    you have a overflow:hidden on line 14 of your stylesheet.(.logodiv) Remove that property anyway, because with a fixed height and width it can cause serious troubles. (this might very well be the answer/solution to your problem
    Genius! Thanks so much.

    Check it out:
    kevin.first311test.org/index_navbar2c_style2.xht

    ziggy
  16. #9
  17. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    looks okay. Just remove the fixed width at line 40. This allows for bigger content such as Sunday School which now overlaps the ul
    to make it more precise at line 40 you see this:
    Code:
    ul.pureCssMenu ul {
        width: 148.05px;
    }
    Remove that

    happy coding!
    Last edited by aeternus; December 25th, 2012 at 03:46 AM.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Originally Posted by aeternus
    looks okay. Just remove the fixed width at line 40. This allows for bigger content such as Sunday School which now overlaps the ul
    to make it more precise at line 40 you see this:
    Code:
    ul.pureCssMenu ul {
        width: 148.05px;
    }
    Remove that

    happy coding!
    Thanks again, I'll try that later today.

    Best,

    ziggy
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Originally Posted by aeternus
    looks okay. Just remove the fixed width at line 40. This allows for bigger content such as Sunday School which now overlaps the ul
    to make it more precise at line 40 you see this:
    Code:
    ul.pureCssMenu ul {
        width: 148.05px;
    }
    Remove that

    happy coding!
    Looks great. Thanks again.

    http://kevin.first311test.org/index_...2ca_style2.xht

IMN logo majestic logo threadwatch logo seochat tools logo