Jump to content

Warrior_of_God

Members
  • Content Count

    11
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Warrior_of_God

  • Rank
    Newbie
  1. Ah well...it seems to look better solid as opposed to transparent...I may just ditch the transparency code.
  2. The page looks fine, except for the fact that the transparency code for IE is not taking effect.Take, for example, my doctrine page:http://www.hcc-sa.org/doctrine.shtmlIn FF, I see the transparency...in IE, I don't.
  3. I am trying to make semi-transparent panels on my page, but the code for IE doesn't seem to work:filter:alpha(opacity=75);Is there something wrong?Here's the entire code for that section: div.text {background-color: #229933;text-align: justify;border: thick groove #005500;padding: 10px 25px 10px 25px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}
  4. In researching based on your post, I found a link on the main cssplay page that takes you into a menu builder for the flyout menu that generates a CSS layout to put into an external CSS file or style tag and also generates the necessary HTML code. (http://www.cssplay.co.uk/menus/menu_builder_flyout) The HTML code varied slightly from mine, and the CSS code wasn't much different aside from the z-index. So I incorporated the HTML code that was generated in hopes that it will work with IE6. If you have IE6 please post back with feedback...the site is:http://www.hcc-sa.orgThanks.
  5. This is the site where the code came from for the flyout menu. if you look on my external css code, the copyright is commented on there...It works beautifully in FF & IE7, but in IE6, I have double links for the flyout links and they don't even flyout on mouseover.
  6. Well, I finally fixed it by changing where I set the #include code for the menu file...apparently, having it at the bottom as opposed to the top makes a difference...thanks for the ideas & help guys.edit:works great in FF, but subs don't show in IE...what's the deal?edit#2:okay...just installed IE7 & it looks CLEAN. Wow! I don't get why it won't show properly in IE6...
  7. okay, i fixed the firefox problem, but now I can't get the submenus to stay up or be on top of everything else...the menu in action:http://www.hcc-sa.org(I know there's A LOT of code on here, but I'm not sure where the problem would be, as I'm still a novice on web design)here's the entire code for my external css file: body {background: #ffffff url('images/HCCBG.jpg') fixed no-repeat;background-position: 200px 175px;margin: 0;}#page {width: 100%;}#content {position: absolute;left: 200px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #000000;}#logo {position: absolute;top: 0;left: 0;height: 150;}#header {background-color: #ffffff;position: absolute;left: 200px;top: 0;height: 175px;padding-left: 90px;overflow: hidden;background: transparent;font-family: verdana,arial,helvetica,sans-serif;font-size: 11px;color: #000000;}div.text {background-color: #229933;text-align: justify;border-style: groove;padding: 10px 25px 10px 25px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}div.ctrtext {background-color: #229933;text-align: center;border-style: groove;padding: 10px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}/* flyout menu display *//* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)html is available at [url="http://www.cssplay.co.uk/menus/flyoutt.html"]http://www.cssplay.co.uk/menus/flyoutt.html[/url]Copyright © 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements.=================================================================== *//* common styling */#menu {font-family:verdana,Arial,sans-serif;position:relative;top:150px;left:0;width:189px;font-size:16px;border:2px solid #005500;margin-right:3px;float:left;text-align:left}#menu ul li a, #menu ul li a:visited {display:block;text-decoration:none;width:188px;height:36px;border-style:solid;border-color:#005500;border-width:1px 1px 0 0;background-color:#229933;line-height:19px;font-size:16px}#menu ul {padding:0;margin:0;list-style-type:none}#menu ul li {float:left;margin-right:1px;position:relative}#menu ul li ul {display:none}/* specific to non IE browsers */#menu ul li:hover a {background-color:#229933}#menu ul li:hover ul {display:block;position:absolute;top:0;left:189px;width:188px}#menu ul li:hover ul li a.hide {background-color:#229933;z-index:8}#menu ul li:hover ul li:hover a.hide {width:188px;background-color:#229933;z-index:8}#menu ul li:hover ul li ul {display: none}#menu ul li:hover ul li a {display:block;background-color:#229933;width:188px}#menu ul li:hover ul li a:hover {background-color:#229933}#menu ul li:hover ul li:hover ul {display:block;position:absolute;left:189px}#menu ul li:hover ul li:hover ul li a {display:block;width:200px;background-color:#229933}#menu ul li:hover ul li:hover ul li a:hover {background-color:#229933}/* standard page text properties */a {color: #ffffff;text-decoration: none;}a:visited {color: #ffffff;text-decoration: none;}a:hover {font-size: 125%;text-decoration: underline;}a:hover {font-size: 125%;font-style: italic;text-decoration: underline;}h1 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 26px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h2 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 20px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h3 {font-size: 18px;font-weight: bold;color: #000000;}h4 {font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}h5 {font-size: 20px;font-weight: bold;color: #ff0000;display: inline;} Here's the external sheet for IE properties: /* for IE browsers */table {border-collapse:collapse;border:0;margin:0;padding:0;}#menu ul li a.hide,#menu ul li a:visited.hide,#menu ul li a:hover ul li a.hide {display:none}#menu ul li a:hover {background-color:#229933}#menu ul li a:hover ul {display:block;position:absolute;top:0;left:189px;width:188px}#menu ul li a:hover ul li a.sub {background-color:#229933}#menu ul li a:hover ul li a {display:block;background-color:#229933;width:188px}#menu ul li a:hover ul li a ul {visibility:hidden}#menu ul li a:hover ul li a:hover {background-color:#229933}#menu ul li a:hover ul li a:hover ul {visibility:visible;position:absolute;left:189px;top:0}#menu ul li a:hover ul li a:hover ul li a {display:block;width:200px;background-color:#229933}#menu ul li a:hover ul li a:hover ul li a:hover {background-color:#229933} here's the menu code: <div style="background-color: #229933; z-index=10;"><ul><li><a href="index.shtml">Home</a></li><li><a class="hide" href="java script:void()">Hill Country Living</a><!--[if lte IE 6]><a href="java script:void()">Hill Country Living<table><tr><td><![endif]--><ul><li><a href="heritage.shtml">Our Heritage</a></li><li><a href="model.shtml">Our Model</a></li><li><a href="DNA.shtml">Our DNA</a></li><li><a href="doctrine.shtml">Our Doctrine</a></li><li><a href="purpose.shtml">Our Purpose</a></li><li><a href="philosophy.shtml">Our Philosophy</a></li><li><a href="vision.shtml">Our Vision</a></li><li><a href="worship.shtml">Our Worship</a></li><li><a href="family.shtml">Our Family</a></li><li><a href="values.shtml">Our Values</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="http://calendar.hcc-sa.org" target="_blank">Calendar</a></li><li><a href="contact.shtml">Contact Us</a></li><li><a href="directions.shtml">Directions</a></li><li><a href="pastors.shtml">Meet Our Pastors</a></li><li><a href="faqs.shtml">F. A. Q. s</a></li><li><a class="hide" href="java script:void()">Resources</a><!--[if lte IE 6]><a href="java script:void()">Resources<table><tr><td><![endif]--><ul><li><a href="edge.shtml">The Leading Edge</a></li><li><a href="kings.shtml">Kings I Must Conquer</a></li><li><a href="spirits.shtml">The 7 Spirits of God</a></li><li><a href="freelife.shtml">Living a Free Life</a></li><li><a href="godsorder.shtml">God's Order for Life</a></li><li><a href="cross.shtml">The Power of the Cross</a></li><li><a href="everyeye.shtml">Every Eye Shall See Him</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="java script:void()">Fellowship</a><!--[if lte IE 6]><a href="java script:void()">Fellowship<table><tr><td><![endif]--><ul><li><a href="peace.shtml">Peace Provokers</a></li><li><a href="oasis.shtml">The Oasis</a></li><li><a href="WRAP.shtml">Generation WRAP Groups</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div>
  8. okay...here's the updated menu, but I can't get it to be on top and I can't get the submenu to stay up when I move the mouse out of the main menu area into the submenu area (both in IE)...also I can't get the links with subs to show in firefox...http://www.hcc-sa.orgcss code in external screen.css: /* common styling */#menu {font-family:verdana,Arial,sans-serif;width:200px;position:relative;top: 150px;font-size:16px;font-weight: bold;border:2px groove #00ff00;margin-right:3px;float:left;text-align:left;}#menu ul li a, .menu ul li a:visited {display:block;text-decoration:none;width: 200px;border:1px groove #00ff00;background-color:#229933;line-height:19px;font-size:16px;font-weight: bold;}#menu ul {padding:0;margin:0;list-style-type:none}#menu ul li {float:left;margin-right:1px;position:relative;}#menu ul li ul {display:none}/* specific to non IE browsers */#menu ul li:hover a {background-color:#229933;}#menu ul li:hover ul {display:block;position:absolute;top:0;left:200px;width:175px;z-index:8;}#menu ul li:hover ul li a.hide {background-color:#229933;z-index:8;}#menu ul li:hover ul li:hover a.hide {width:175px;background-color:#229933;z-index:8;}#menu ul li:hover ul li a {display:block;background-color:#229933;width:175px;}#menu ul li:hover ul li a:hover {background-color:#229933;}/* styling for IE browsers */#menu table {border-collapse:collapse;border:0;margin:0;padding:0;z-index:8;}#menu ul li a.hide,.menu ul li a:visited.hide,.menu ul li a:hover ul li a.hide {display:none;}#menu ul li a:hover {background-color:#229933;}#menu ul li a:hover ul {display:block;position:absolute;top:0;left:200px;width:175px;z-index: 8;}#menu ul li a:hover ul li a.sub {background-color:#229933;}#menu ul li a:hover ul li a {display:block;background-color:#229933;width:175px;z-index:8;}#menu ul li a:hover ul li a:hover {background-color:#229933;z-index:8;} menu code: <ul><li><a href="index.shtml">Home</a></li><li><a class="hide" href="java script:void()">Hill Country Living</a><!--[if lte IE 6]><a href="java script:void()">Hill Country Living<table><tr><td><![endif]--><ul><li><a href="heritage.shtml">Our Heritage</a></li><li><a href="model.shtml">Our Model</a></li><li><a href="DNA.shtml">Our DNA</a></li><li><a href="doctrine.shtml">Our Doctrine</a></li><li><a href="purpose.shtml">Our Purpose</a></li><li><a href="philosophy.shtml">Our Philosophy</a></li><li><a href="vision.shtml">Our Vision</a></li><li><a href="worship.shtml">Our Worship</a></li><li><a href="family.shtml">Our Family</a></li><li><a href="values.shtml">Our Values</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="http://calendar.hcc-sa.org" target="_blank">Calendar</a></li><li><a href="contact.shtml">Contact Us</a></li><li><a href="directions.shtml">Directions</a></li><li><a href="pastors.shtml">Meet Our Pastors</a></li><li><a href="faqs.shtml">F. A. Q. s</a></li><li><a class="hide" href="java script:void()">Resources</a><!--[if lte IE 6]><a href="java script:void()">Resources<table><tr><td><![endif]--><ul><li><a href="edge.shtml">The Leading Edge</a></li><li><a href="kings.shtml">Kings I Must Conquer</a></li><li><a href="spirits.shtml">The 7 Spirits of God</a></li><li><a href="freelife.shtml">Living a Free Life</a></li><li><a href="godsorder.shtml">God's Order for Life</a></li><li><a href="cross.shtml">The Power of the Cross</a></li><li><a href="everyeye.shtml">Every Eye Shall See Him</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="java script:void()">Fellowship</a><!--[if lte IE 6]><a href="java script:void()">Fellowship<table><tr><td><![endif]--><ul><li><a href="peace.shtml">Peace Provokers</a></li><li><a href="oasis.shtml">The Oasis</a></li><li><a href="WRAP.shtml">Generation WRAP Groups</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
  9. Yeah, I saw that...Thanks for the info.
  10. Yeah! Looking at the source code & css file right now. Thanks!
  11. Warrior_of_God

    CSS Menu

    I want to create a menu that is basic, but expands on mouseover. The setup I have on www.hcc-sa.org/resources.shtml shows the main menu with a submenu. I want to show just the main menu, and have the submenu appear (slide out if possible) on a mouseover & disappear on mouseout. I will be creating more submenus and am fairly new to using css. I'm using SSI for the entire page with the menu code in a separate file. So how do I accomplish this? Here's my html code for the menu file: <div align=center><hr><a href="index.shtml">Home</a><br><hr><a href="vision.shtml">Our Vision</a><br><hr><a href="foundation.shtml">Our Foundation</a><br><hr><a href="http://calendar.hcc-sa.org">Calendar</a><br><hr><a href="contact.shtml">Contact Us</a><br><hr><a href="directions.shtml">Directions</a><br><hr><a href="pastors.shtml">Meet Our Pastors</a><br><hr><a href="faqs.shtml">F. A. Q. s</a><br><hr><a href="worship.shtml">Let's Worship</a><br><hr><a href="resources.shtml">Resources</a><br><hr><a href="youth.shtml">Youth Group</a><br><hr></div> here's my screen.css code: body {background: #ffffff url('images/HCCBG.jpg') fixed no-repeat;background-position: 200px 175px;margin: 0;}#page {width: 100%;}#content {position: absolute;left: 200px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #000000;}#rescontent {position: absolute;left: 350px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #005500;}#header {background-color: #ffffff;position: absolute;left: 200px;top: 0;height: 175px;padding-left: 90px;overflow: hidden;background: transparent;font-family: verdana,arial,helvetica,sans-serif;font-size: 11px;color: #000000;}#resfooter {position: relative;left: -75px;}div.text {background-color: #229933;text-align: justify;border-style: groove;padding: 10px 25px 10px 25px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}div.ctrtext {background-color: #229933;text-align: center;border-style: groove;padding: 10px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}#menu {position: absolute;left: 0;top: 175;width: 200px;background-color: #009900;overflow: visible;font-family: verdana,arial,helvetica,sans-serif;font-size: 16px;color: #ffffff;}#resmenu {position: absolute;left: 200px;top: 175px;width: 150px;background-color: #009900;overflow: visible;font-family: verdana,arial,helvetica,sans-serif;font-size: 10px;color: #ffffff;}#menu a {color: white;font-weight: bold;text-decoration: none;}#menu a:visited {color: white;font-weight: bold;text-decoration: none;}#menu a:hover {color: white;font-weight: bold;font-size: 20px;text-decoration: none;}#menu a:hover.res {color: white;font-weight: bold;font-size: 20px;text-decoration: none;}#menu a:active {color: white;font-weight: bold;font-style: italic;font-size: 20px;text-decoration: underline;}#resmenu a {color: white;font-weight: bold;text-decoration: none;}#resmenu a:visited {color: white;font-weight: bold;text-decoration: none;}#resmenu a:hover {color: white;font-weight: bold;font-size: 12px;text-decoration: none;}#resmenu a:active {color: white;font-weight: bold;font-style: italic;font-size: 12px;text-decoration: underline;}a {color: #ffffff;text-decoration: none;}a:visited {color: #005500;font-size: 85%;}a:hover {font-size: 125%;text-decoration: underline;}h1 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 26px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h2 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 20px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h3 {font-size: 18px;font-weight: bold;color: #000000;}h4 {font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}h5 {font-size: 20px;font-weight: bold;color: #ff0000;display: inline;} I expect to take out resmenu, rescontent, and resfooter as they would no longer be necessary.
×
×
  • Create New...