Reply
CSS drop down/popout- help
Old 01-06-2006, 07:07 AM CSS drop down/popout- help
Seanneo's Avatar
Experienced Talker

Posts: 42
Hey there!
I have been teaching myself pop out/drop downs by trial and error over the last few weeks and had many problems but finaly last night i think i have almost got it just a few things are happning that i need help in fixing:

1.) The pop out goes behind a frame.(<iframe></iframe>)
2.) It wont work in IE, it just has a big empty gap between my 2 buttons.
And then when i hover over the button in IE nothing appears also.

I wud be grateful if anyone cud give me some suggestions on how to fix these problems.
Thx in advance
Seanneo
Seanneo is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 01-06-2006, 01:43 PM
vangogh's Avatar
Post Impressionist

Posts: 8,820
Name: Steven Bradley
Location: Boulder, Colorado
Could you post your html and css so we can see what you're doing?
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-06-2006, 04:17 PM
Seanneo's Avatar
Experienced Talker

Posts: 42
CSS
Code:
.normnav {
    position: relative;
    font-family: Arial;
    background-image: url(button6.jpg);
    background-repeat: no-repeat;
    white-space: nowrap;
    display: block;
    width: 120px;
    height: 30px;
    margin: 0;
    padding: 0;
}

.normnav a {
display: block;
color: #000000;
font-size: 11px;
font-align: centre;
width: 120px;
height: 30px;
display: block;
float: left;
color: #666666;
text-decoration: none;
}

.normnav img {width: 120px; height: 30px; border: 0; }
* html a:hover {visibility:visible;}
.normnav a:hover img{visibility:hidden;}
.normnav:hover .menu{ visibility:visible
}

.normnav span {
position: absolute;
left: 35px;
top: 5px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

.menu { visibility:hidden; display: table-cell
}


a.inside, a.inner:visited {
display:block;
width:100px;
height:10px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
background:#006699;
}
a.inside:hover {
background:#FFFFFF;
}

.normnav {
display: block
}
.menu { visibility:hidden;
}

a.inside, a.inner:visited {
display:block;
width:100px;
height:10px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family:tahoma, verdana, arial, sans-serif;
font-size:10px;
text-align:center;
}
a.inside:hover {
background:#FFFFFF;
}
HTML
Code:
<div class="normnav"><a href="announcements.htm" target="frame" title="Site Announcements"><img src="button1.jpg" alt="home"/><span>Announcements</span></a>
      <div class="menu"><a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>
Seanneo is offline
Reply With Quote
View Public Profile
 
Old 01-06-2006, 06:33 PM
vangogh's Avatar
Post Impressionist

Posts: 8,820
Name: Steven Bradley
Location: Boulder, Colorado
I just tried your code and wasn't able to get it work in Firefox until I changed

.normnav:hover .menu { visibility:visible}

to

div.normnav:hover .menu { visibility:visible}

I also noticed you have .menu {visibility:hidden} toward the end of you css when you had already defined that above.

I'm not sure what the issue is with the iframe in IE, but you can try adding a z-index to .normnav You can give it any number you want greater than 0 and I think that will bring it on top of the iframe. You may also need to give the iframe some kind of position and give it a z-index less that what you give to .normnav

I aslo noticed the closing </div> on .normnav was missing from your code, but I'm guessing you have it in your code and just missed it when copying and pasting here.

I hope that helps. I'm not sure I answered your actual questions, but I hope I've at least gotten you a little closer to what you're trying to do. If not feel free to post again and I'll try again.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-06-2006, 07:28 PM
Seanneo's Avatar
Experienced Talker

Posts: 42
Hey thx for help but im afraid my problems weren't solved, the adjustments u told me to make just left it looking the same.
i dont have a clue about the menu popping-out below the frame but on the IE not working part, should i try using a <ul> / <il> made up menu instead??
thx again
Seanneo is offline
Reply With Quote
View Public Profile
 
Old 01-06-2006, 10:05 PM
vangogh's Avatar
Post Impressionist

Posts: 8,820
Name: Steven Bradley
Location: Boulder, Colorado
My bad. I forgot what you're doing doesn't work in IE. Here's a link to some code for a drop down that will work in both.

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

The basic idea is the same as what you were doing with a few lines of Javascript to make it work in IE. Unfortunately you still need Javascript to get drop down menus to work in IE.

I think the tutorial in the link will be easy to understand especially since you already understand how most of it is working.

Sorry to lead you down the wrong path before.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-07-2006, 08:19 AM
Seanneo's Avatar
Experienced Talker

Posts: 42
Thx alot for your help, im gonna try this l8r then report back.
***edit***
Hey just got back from trying it.
Works better than before but still there are some annoying problems
1.) position of drop down is different in IE and Mozilla
2.) it is still appearing behind things but now i know more specifically, behind a flash box.
3.) also in mozilla the middle 2 options from drop down are missing from list... im not sure at all why that is happening, i will post pictures l8r on.

thx for all your help so far,
Seanneo

Last edited by Seanneo : 01-07-2006 at 09:03 AM.
Seanneo is offline
Reply With Quote
View Public Profile
 
Old 01-07-2006, 02:51 PM
vangogh's Avatar
Post Impressionist

Posts: 8,820
Name: Steven Bradley
Location: Boulder, Colorado
Seanneo keep me updated on how things are working. If you could post everythng some place online that would be great. I'll be happy to keep looking and trying to help though I think you've been getting closer mostly on your own so far. I'm not all that sure I've helped much.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-07-2006, 03:55 PM
Seanneo's Avatar
Experienced Talker

Posts: 42
thx alot for your help, i have desided to start again. maybe a fresh start may help....
Seanneo is offline
Reply With Quote
View Public Profile
 
Old 01-07-2006, 07:39 PM
vangogh's Avatar
Post Impressionist

Posts: 8,820
Name: Steven Bradley
Location: Boulder, Colorado
Take a look at the link I posted above. it really is an easy to use drop down menu system. It also has the advantage of being lightweight and standards compliant.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-08-2006, 03:11 PM
CannonBallGuy's Avatar
Webmaster Talker

Posts: 616
Location: http://k00l.notlong.com
I can't see what is causing your specific problems, and I see you're starting again anyway.

Here is something I made a while ago:
http://www.kaziaz.com/stuff/menux.html
I know it works in Safari, Camino and Firefox.

Hope it helps,
CBG.
__________________
CannonBallGuy is offline
Reply With Quote
View Public Profile Visit CannonBallGuy's homepage!
 
Reply     « Reply to CSS drop down/popout- help
 

Thread Tools

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.16263 seconds with 12 queries