• Locked
No replies
Wed, 2009-01-21 13:09
Atamagaokashii
Offline
newbie
Last seen: 14 years 2 weeks ago
Joined: 2008-12-11
Posts: 2
Points: 0

Hiya guys,

I'm trying to do a dropdown in CSS. This I've completed, I have a working dropdown, with selectable items. I just can't seem to get the items, when selected, to show text in a different area. I don't want to use a text box because the other page I have doesn't use them. The code so far is very basic and doesn't include anything like it's doctype:

<style type="text/css">
 
#info {position:relative; height:24em;}
#info h2 {margin-bottom:7em;}
#holder {position:absolute; top:50px; left:320px; width:100px; 
 
line-height:18px; height:20px; border:1px solid #f96; 
 
overflow:hidden; text-align:center; z-index:100; 
 
background:#eee;}
#holder:hover {height:130px; cursor:pointer; background:#eee;}
#holder a:visited, #holder a {display:block; width:100%; line-
 
height:18px; color:#000; text-decoration:none;}
#holder a:hover {color:#c00;background:#ddd;}
 
</style>
<body>
<a href=menu.html>Home</a>
 
<div class=holdera>
<div id="holder">
<img src=Tutorials.png border="0" width="95" height="19"><br>
<hr>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
 
<div id="1">
<div><p>1</p></div>
<div id="2">
<div><p>2</p></div>
<div id="3">
<div><p>3</p></div>
<div id="4">
<div><p>4</p></div>
<div id="5">
<div><p>5</p></div>
</div>

I also have a screenshot of this:

My other page I'm using the code from another site that was teaching on that sort of thing ... But it's probably only the CSS from there you'd need:

div.tabs {
  min-height: 20em;
  position: relative;
  line-height: 1;
  z-index: 0;
  color: #FFFFFF}
div.tabs > div {
  display: inline}
div.tabs > div > a {
  color: #FFFFFF;
  background: #000000;
  padding: 0.2em;
  border-bottom: 0.1em solid #000000}
div.tabs > div:not(:target) > a {
  border-bottom: none;
  background: #000000}
div.tabs > div:target > a,
:target #default2 > a {
  border-bottom: 0.1em solid #000000;
  background: #000000}
div.tabs > div > div {
  background: #000000;
  z-index: -2;
  left: 0; top: 1.3em;
  bottom: 0; right: 0;
  overflow: auto;
  padding: 0.3em;
  border: 0em outset #000000}
div.tabs > div:not(:target) > div {
  position: absolute }
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;
  z-index: -1}

Yes if you saw my other topic it's the same xD This is a little add-on.

What I want to happen, is when someone clicks "1", I want "1" to show up UNDERNEATH the drop down. But I can't seem to get it to work. =[ Sad

Top
Tags: