...

View Full Version : Layout problem, Text Issue, Transparent Drop Down



mlmorg
07-15-2007, 07:00 PM
Hey all,
I've got three questions about my site http://homepages.nyu.edu/~mlm440/guilford/index.html

1. fixed it!

2. transparent vertical drop down questions below!

3. I was having trouble with the text in the content section. If I used html like <h1> or <p> etc. the repeated background image of the content div would split up and I could see the blue background - http://homepages.nyu.edu/~mlm440/guilford/trouble.jpg So instead I used <font class="h1"> etc. and that worked fine...Is there a reason for this?

Thanks for any help! Matt

mlmorg
07-15-2007, 07:32 PM
I'm and idiot...I figured out the first question I had. (Is there a strikeout code on this site?)

Just did a header wrap that had a background of both the left and right drop shadows over the blue background then just did the mainpic div nested in that cetered and worked perfectly.

Anyone have any suggestions for the last two? Thanks!

twodayslate
07-15-2007, 08:49 PM
Here is a tut on transparency/opacity: http://www.mandarindesign.com/opacity.html

mlmorg
07-15-2007, 08:53 PM
Thanks for the reply...but looks as though I had just figured out how to do it!

So if you look at http://homepages.nyu.edu/~mlm440/guilford/index.html I have the transparent menu. I don't know how to make the text not transparent though...and I'd also like the second level links to be a smaller height than the first level links, like www.nyu.edu . Anyone know how to achieve either of these problems?

Thanks again! Matt

twodayslate
07-15-2007, 09:09 PM
For the text problem: http://www.cssplay.co.uk/opacity/png.html
For the second problem I think you will have to use positions on the sub links.

mlmorg
07-15-2007, 09:34 PM
I tried adding another div just around the text and setting the opacity to 100%but that didn't seem to work...I don't really understand what the png opacity is on that link...Is there something else I can try?

Also, what do you mean when you say use positions for the sublinks?

Thanks, Matt

mlmorg
07-15-2007, 09:38 PM
Also if someone has a better idea for what I should do with the menu I would definitely be open to suggestions...Everything I've tried for the menu never looks right to me, this transparent vertical drop down to the side of the pic is the best I've found imo...but please please tell me if you know of a better way to do a menu on this site!

twodayslate
07-15-2007, 10:37 PM
Please do not double post.
Please post your navigation code.

mlmorg
07-15-2007, 10:41 PM
Sorry about that...the edit wasn't working for some reason

Here is the css for the nav section:


#nav, #nav ul { /* all lists */
filter:alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
padding:0;
margin:0;
list-style:none;
float:left;
width:6em;
}

#nav li { /* all list items */
position:relative;
float:left;
line-height:2.90em;
margin-bottom:1px;
width:6em;
}

#nav li ul { /* second-level lists */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position:absolute;
left:-999em;
margin-left:8.1em;
margin-top:-2.9em;
}

#nav li ul ul { /* third-and-above-level lists */
left:-999em;
}

#nav li a {
background:#fff;
width:7em;
display:block;
color:black;
font-weight:bold;
text-decoration:none;
padding:0 0.5em;
}

#nav li a:hover {
color:white;
background-color:black;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left:auto;
}

twodayslate
07-15-2007, 10:54 PM
Try this
#nav li ul { /* second-level lists */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position:relative;
left:-999em;
margin-left:8.1em;
margin-top:-2.9em;
top: #;
}
For each second level list you will have to give it it's own class/id (unless you just have one). Then you can do margin-top: # or something like that.

edit:// you used the suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html) method correct?

mlmorg
07-15-2007, 11:13 PM
yeah i did...and i just tried that add of top:# offline but it didn't seem to do anything...maybe I just don't understand right.

I'm getting very annoyed with this nav...I don't like the look of it, I don't know if there's any other way to put a nav on this site though...ugh

Also just read on this page: http://www.domedia.org/oveklykken/css-transparency.php that "moz-opacity and opacity, all elements inside the styled box will also recieve the same transparency. Can't find a way to get around this." the only workaround it seemed he found was for IE...

twodayslate
07-15-2007, 11:19 PM
an image looks like the only work around for your opacity problem.

You were supposed to add your own number for top: #;
ex:
top: 7em;

mlmorg
07-15-2007, 11:22 PM
Yeah I think you're right...thanks for all the help though...I will keep at it

twodayslate
07-15-2007, 11:31 PM
Did it work? The position: relative; top: 7em;

mlmorg
07-15-2007, 11:33 PM
no it just moved the last three links far down the page

twodayslate
07-15-2007, 11:39 PM
then do position: relative; top: -7:em;

You can edit the em to your liking.

mlmorg
07-15-2007, 11:45 PM
Ahh ok...I had to keep it position:absolute though because otherwise the last three links go far down the page...if I keep it absolute and then change the top:#em then I can move around the second level links so thats gooood, thanks!

Is there no way to change the height of the second level links?

twodayslate
07-15-2007, 11:50 PM
Does
#nav li ul { /* second-level lists */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position:relative;
left:-999em;
margin-left:8.1em;
margin-top:-2.9em;
bottom: 3em;
height: #px;
}
not work?


I personally would stay away from position: absolute, are you sure position: relative does not work?

mlmorg
07-15-2007, 11:54 PM
no that doesn't work...i tried line-height too

well position:relative works if I have the height:#px; in there (doesn't matter what number of pixels either)

twodayslate
07-15-2007, 11:57 PM
no that doesn't work...i tried line-height too

well position:relative works if I have the height:#px; in there (doesn't matter what number of pixels either)

Then use position relative. You will thank me later.

try min-height

mlmorg
07-16-2007, 12:00 AM
ok will do...and min-height didn't work

also was just wondering about what you said before and having to make a new class/id for each second level link (if I were to have more than the one I have now)...how would i do that? where do I set the class/id for each seperate one?

twodayslate
07-16-2007, 12:07 AM
Do you understand the suckerfish code? Once you understand the suckerfish code you will know where to put the classes/ids.

http://cssplay.co.uk/menus/flyout2.html Stu at CSSplay does a good job with menus. Look at his FLYOUT menus, just what you need.

http://www.codingforums.com/images/buttons/reputation.gif

mlmorg
07-16-2007, 03:55 PM
ok thanks very much, i will look over that site

twodayslate
07-16-2007, 05:41 PM
LMK if you need more help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum