CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Hidden navbar-drop-down, 2 - CSS


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old December 20th, 2012, 01:44 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation 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
Reply With Quote
  #2  
Old December 21st, 2012, 06:43 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation 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>
Reply With Quote
  #3  
Old December 21st, 2012, 06:44 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation 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
Reply With Quote
  #4  
Old December 22nd, 2012, 06:46 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation 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).
Reply With Quote
  #5  
Old December 24th, 2012, 03:22 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation Power: 0
Season's greetings everyone.
Reply With Quote
  #6  
Old December 24th, 2012, 04:53 PM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
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
__________________
PHP Tutorial
Last edited by aeternus : December 24th, 2012 at 05:11 PM.
Reply With Quote
  #7  
Old December 24th, 2012, 08:22 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation Power: 0
Thanks so much "aeternus". I am investigating line 14.

ziggy
Reply With Quote
  #8  
Old December 24th, 2012, 08:44 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation Power: 0
Quote:
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
Reply With Quote
  #9  
Old December 25th, 2012, 03:42 AM
aeternus's Avatar
aeternus aeternus is offline
For POny!
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2012
Location: Amsterdam
Posts: 416 aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level)aeternus User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114
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.
Reply With Quote
  #10  
Old December 25th, 2012, 08:56 AM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation Power: 0
Quote:
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
Reply With Quote
  #11  
Old December 25th, 2012, 03:11 PM
ziggggy53 ziggggy53 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 9 ziggggy53 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 10 m 16 sec
Reputation Power: 0
Quote:
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...r2ca_style2.xht
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Hidden navbar-drop-down, 2 - CSS

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap