Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all! We have been experiencing an issue on site where threads have been missing the latest postings. The platform host Vanilla are working on this issue. A workaround that has been used by some is to navigate back from 1 to 10+ pages to re-sync the thread and this will then show the latest posts. Thanks, Mike.
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

suckerfish css dropdown

  • 08-08-2007 4:08pm
    #1
    squibs
    Closed Accounts Posts: 975 ✭✭✭


    Trying to improve my css skills, I played with suckerfish css dropdown menus

    http://www.alistapart.com/articles/dropdowns/

    I've been customising this example, and learning a lot:

    http://www.htmldog.com/articles/suckerfish/example/

    But I can't figure out how to make the dropdown appear below it's parent, rather than below and to the right as in the example. Can anybody point me in the right direction?

    Code reproduced below for reference:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xml:lang="en">
<head>
<title>the Suckerfish</title>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
 font-family: arial, helvetica, serif;
 font-size: 80%;
 background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
 padding: 2em;
 margin: 0;
}
#content {
 width: 34em;
 background-color: #f4ecd9;
 padding: 1em 0;
 border: 6px double #7d6340;
 margin: auto;
 voice-family: "\"}\""; 
 voice-family:inherit;
 width: 32em;
}
html>body #content {
 width: 32em;
} 
a {
 text-decoration: none;
}
a:link {
 color: #080;
}
a:visited {
 color: #790;
}
a:active {
 color: red;
}
a:hover {
 text-decoration: underline;
}
h1 {
 text-align: center;
 padding: 0 0 0.25em 0;
 margin: 0;
}
ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
#nav a {
 font-weight: bold;
 color: green;
}
#nav a {
 text-decoration: none;
}
#nav li li a {
 display: block;
 font-weight: normal;
 color: #060;
 padding: 0.2em 10px;
}
#nav li li a:hover {
 padding: 0.2em 5px;
 border: 5px solid #7d6340;
 border-width: 0 5px;
}
li {
 float: left;
 position: relative;
 width: 10em;
 text-align: center;
 cursor: default;
 background-color: white;
 border: 1px solid #7d6340;
 border-width: 1px 0;
}
li#first {
 border-left-width: 1em;
}
li#last {
 border-right-width: 1em;
}
li ul {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 font-weight: normal;
 background: url(images/ddbg3.gif) bottom left no-repeat;
 padding: 0.5em 0 1em 0;
 border-right: solid 1px #7d6340;
}
li>ul {
 top: auto;
 left: auto;
}
li li {
 display: block;
 float: none;
 background-color: transparent;
 border: 0;
}
li:hover ul, li.over ul {
 display: block;
}
hr {
 display: none;
}
p {
 clear: left;
 background: url(images/remora.gif) center left no-repeat;
 padding: 1em 1em 0 1em;
 margin: 0;
}
p.image {
 float: right;
 font-size: 0.8em;
 text-align: center;
 color: #7d6340;
 padding: 1.25em 1.25em 0.25em 0.25em;
}
p.image img {
 display: block;
 border: 1px solid #7d6340;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
    }
    node.onmouseout=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="content">
<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" /></h1>
<hr />
<ul id="nav">
 <li id="first">
  <div><a href="">Overview</a></div>
  <ul>
   <li><img src="images/remora4.gif" width="100" height="27" alt="Remora" /></li>
   <li><a href="">Classification</a></li>
   <li><a href="">Physcial Characteristics</a></li>
   <li><a href="">Habitat</a></li>
   <li><a href="">Lifestyle</a></li>
   <li><a href="">Evolution</a></li>
   <li><a href="">Distribution</a></li>
  </ul>
 </li>
 <li>
  <div><a href="">Species</a></div>
  <ul>
   <li><a href="">Ceylonese remora</a></li>
   <li><a href="">Remora remora</a></li>
   <li><a href="">Sharksucker</a></li>
   <li><a href="">Slender remora</a></li>
   <li><a href="">Spearfish remora</a></li>
   <li><a href="">Whitefin sharksucker</a></li>
   <li><img src="images/remora6.gif" width="59" height="80" alt="The top of a remoras head" /></li>
  </ul>
 </li>
 <li id="last">
  <div><a href="">Links</a></div>
  <ul>
   <li><a href="<A href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=168567">Remoras">http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=168567">Remoras at ITIS</a></li>
   <li><a href="[URL="http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html%22%3ERemora"]http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora[/URL] remora at ADW</a></li>
   <li><a href="[URL="http://www.oceanlight.com/html/remora_sp.html%22%3EPhillip"]http://www.oceanlight.com/html/remora_sp.html">Phillip[/URL] Colla photographs</a></li>
   <li><img src="images/remora3.gif" width="100" height="35" alt="Remora" /></li>
   <li><a href="[URL="http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm%22%3ESlender"]http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender[/URL] suckerfish at Australian Museum Online</a></li>
   <li><a href="[URL="http://www.colzoo.org/animalareas/shores/remora.html%22%3ERemora"]http://www.colzoo.org/animalareas/shores/remora.html">Remora[/URL] at Columbus Zoo</a></li>
  </ul>
 </li>
</ul>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
<p class="image"><img src="images/remora.jpg" width="200" height="108" alt="Remora photograph" />The Remora</p>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
<p class="image"><img src="images/whaleshark.jpg" width="200" height="108" alt="Remoras swim aruond a whale shark" />Remoras swim around a whale shark</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Suspendisse egestas</a> ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
<p>Suckerfish Dropdowns by <a href="[URL="http://www.orangeafro.com/ptg/%22%3EPatrick"]http://www.orangeafro.com/ptg/">Patrick[/URL] Griffiths</a> and <a href="[URL="http://www.danwebb.net%22%3edan/"]http://www.danwebb.net">Dan[/URL] Webb</a>.<br /><br /><a href="[URL="http://www.htmldog.com%22%3ehtml/"]http://www.htmldog.com">HTML[/URL] Dog</a> | <a href="[URL="http://www.alistapart.com%22%3ea/"]http://www.alistapart.com">A[/URL] List Apart</a></p>
</div>
</body>
</html>


Comments

  • #2
    tammy
    Registered Users, Registered Users 2 Posts: 155 ✭✭tammy


    Just implemented them here, so you can checkout the stylesheet_header_menu.css, http:www.healingharvest.ie. Can't remember where I got the initial code from but the core's the same just the colors etc changed. I used this implementation after I ran into difficulty with the alistapart one not working in IE6.


  • #3
    squibs
    Closed Accounts Posts: 975 ✭✭✭squibs


    Thnaks tammy - I'll have a good look at that one.


  • #4
    matt-dublin
    Registered Users, Registered Users 2 Posts: 4,468 ✭✭✭matt-dublin


    this should sort you out:

    [HTML]ul id="nav">
    <li id="first">
    <div><a href="">Overview</a></div>
    <ul style="position:absolute; margin-left:-60px;">
    <li><img src="images/remora4.gif" width="100" height="27" alt="Remora" /></li>
    <li><a href="">Classification</a></li>
    <li><a href="">Physcial Characteristics</a></li>
    <li><a href="">Habitat</a></li>
    <li><a href="">Lifestyle</a></li>
    <li><a href="">Evolution</a></li>
    <li><a href="">Distribution</a></li>
    </ul>
    </li>[/HTML]

    or:

    in your css

    [HTML]ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left:-60px;
    }[/HTML]


Advertisement