Jump to content

PollyAplin

Members
  • Posts

    9
  • Joined

  • Last visited

Posts posted by PollyAplin

  1. #main li {	display: block;	position: relative;	float: left;	width: 84px;}#main li.topLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.7em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 92px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;}#main li .nestedList {	position: absolute;	top: 28px;	left: 2px;	display: none;	list-style-type: none;	width: 84px;	height: 25px;}#main li:hover .nestedList {	display: block;}#main li.subLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 200px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;	z-index: 1;}

    HTML:

    <ul id='main'>	  <li class="topLevel"><a href="../index.html">Home</a>	  <ul class="nestedList">	  <li class="subLevel"><a href="../contact-us.html">Contact Us</a></li>	  <li class="subLevel"><a href="../about-us.html">About Us</a></li>	  <li class="subLevel">Donate</li>   </ul></li>

    You will need to edit this to fit your own needs, but it demonstrates how to use the "Nested List" within the main top level menus. To add extra top levels, just copy the <li class="topLevel">, not the <ul id="main">.I am using XHTML 1 Transistional. But note, this still won't work in IE6 or earlier.Mark.P.S. Do especially note the use of Display: none rather than Visibility: hidden. The visibility: hidden will leave a blank section in your page, whilst display: none will effectively remove it altogether, only to appear when hovered.

    Thanks for this but even this menu doesn't work in IE for me. I don't know what the ###### is wrong with the website i'm building...
  2. you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
    I just implemented these changes...and my drop down menu disappeared...does this mean the menu isn't valid??
  3. you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
    wow, thank you very much!
  4. Can you post code and a link to the page so we have something to go on?
    Sure,HTML:<div id="menubx"><div id="navMenu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Company</a> <ul> <li><a href="profile.html" border="0" target=Main>Profile</a></li> <li><a href="meettheteam.html" border="0" target=Main> Meet the Team</a></li> <li><a href="News.html" border="0" target=_top>News</a></li> <li><a href="downloads.html" border="0" target=Main>Downloads</a></li> <li><a href="careers.html" border="0" target=Main>Careers with KIGG</a></li> <li><a href="contact.html" border="0" target=Main>Contact</a></li> </ul> <!--End inner UL Company--> </li> <li><a href="factoryhub.html" border="0" target=Main>Factory Start-Ups</a> <ul> <li><a href="energyelecmeter.html" border="0" target=Main>Energy / Electricity Meter</a></li> <li><a href="watermeter.html" border="0" target=Main>Flow Meter</a></li> <li><a href="others.html" border="0" target=Main>Other Start-Up Options</a></li> </ul> <!--End inner UL Factory--> </li> <li><a href="productshub.html" border="0" target=Main>Products</a> <ul> <li><a href="FTIII.html" border="0" target=Main>Energy Meter Testing</a></li> <li><a href="GHGA.html" border="0" target=Main>GHGA</a></li> <li><a href="Smartmetering.html" border="0" target=Main>Smart Metering</a></li> <li><a href="Carbonfootprint.html" border="0" target=Main>Carbon Footprint</a></li> <li><a href="WABI.html" border="0" target=Main>WABI</a></li> <li><a href="measurecontauto.html" border="0" target=Main>Measurement/Control </a></li> <li><a href="testterminalblock.html" border="0" target=Main>Test Terminal Block</a></li> </ul> <!--End inner UL Products--> </li> <li><a href="randdhub.html" border="0" target=Main>R&D</a> <ul> <li><a href="customdesign.html" border="0" target=Main>Custom Design</a></li> <li><a href="energydesign.html" border="0" target=Main>Energy Meter Design</a></li> <li><a href="carbon.html" border="0" target=Main>Carbon Measurement</a></li> <li><a href="equiptest.html" border="0" target=Main>Communications</a></li> </ul> <!--End inner UL R&D--> <li><a href="Labcalibrationhub.html" border="0" target=Main>Lab / Calibration</a> <ul> <li><a href="calibrationservices.html" border="0" target=Main>Calibration Services</a></li> <li><a href="testingandcert.html" border="0" target=Main>Testing & Certifications</a></li> </ul> <!--End inner UL Lab--> <li><a href="services.html" border="0" target=Main>Services</a></li> <li><a class="ecohealth" href="br.html" border="0" target=Main>Environment & Health</a></li> <!--This opens BR info in your main website content window--> </li> </ul> <!--End Main UL--><br class="clearFloat"</></div> <!--End navMenu--></div> <!--End Menubx-->CSS#Menubx{ width:1072px; height:70px; background:#fff; position:absolute; padding:0; margin-top:230px; text-align:center; z-index:35;}#navMenu{ Margin:0; Padding:0; width:1072px; }#navMenu ul{ Margin:0; Padding:0; line-height:30px;}#navMenu li{ Margin:0; Padding:0; list-style:none; Float:left; position:relative; background:#BEDAE0;}#navMenu ul li a{ padding:0; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:150px; display:block; color:#00539b; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left:2px solid #fff;}#navMenu ul ul{ position:absolute; visibility:hidden; top:30px; }#navMenu ul li:hover ul{ visibility:visible; }/**************************************************************/#navMenu li:hover{ background:#09F; }#navMenu ul li:hover ul li a:hover{ background:#09F; color:#FFF;}#navmenu a:hover{ color:#FFF;}
  5. I suggest that you don't use Iframes in your pages. Many unscrupulous webmasters use these to deliver malware. Several browser add-ons have been written to block Iframes. A better choice might be a scrolling Div tag.Below you will see a space between the A tag and the Img tag. This space will produce a physical presence on your page. It will make a one-character blank space that will force your image to the right. Back when Netscape 3.0 Gold was popular it's WYSIWYG HTML Editor used to do that. Then you had to open the source in Notepad to remove it.<a class="thumb" href="elecfactory1.jpg" target="picture"> <img src="elecfactory1thumb.jpg" border="0">If you can't get rid of your zoom, try zooming out with css in your image tags to make up the difference.
    Thanks for your suggestions, i tried deleting the space and no luck. i'm going to try using css zoom to compensate.I know itts frowned upon to uuse iframes and frames but i find sometimes its the only way to implement a particular design. I'll have a look at scrolling Divs, but the problem is i don't want the scrolling function.
  6. Do you have a link to the an example of what is happening. Is this browser specific i.e. does it only happen in Internet Explorer or does it happen in all browsers??
    Sorry i haven't got access to the webspace to upload it as an example.It looks like it only happens in Firefox! safari, ie and chrome are all fine. Presumably this would be my firefox settings.
  7. Have you tried removing the padding from the iFrame??. The padding could be causing your picture to shrink thus requiring magnification to bring it back to it's correct size. A link to an example would help us understand your problem a little bit better.
    I just tried that, no luck. I've got padding on my text that is next to the iframe. would this effect it too?
  8. Hoping for some help.I've implemented an iframe into a website i'm making and the pictures that load in the iframe have a 'zoom' function that i haven't coded for. Does anybody know how to get rid of this zoom function? itt enlarges the pictures by a fraction and i can't understand why it won't load the full picture without needing a zoom.Here's my HTML and CSS.HTML<a class="thumb" href="elecfactory1.jpg" target="picture"> <img src="elecfactory1thumb.jpg" border="0"></a><a class="thumb" href="elecfactory2.jpg" target="picture"> <img src="elecfactory2thumb.jpg" border="0"></a><a class="thumb" href="elecfactory3.jpg" target="picture"> <img src="elecfactory3thumb.jpg" border="0"></a><iframe name="picture" width="338" height="470" scrolling="no" frameborder="0" src ="elecfactory3.jpg" allowTransparency="true"> <p>Your browser does not support iframes.</p></iframe>CSSiframe{ border:none; float:left; padding:5px;}Thanks x

×
×
  • Create New...