Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout problem, Text Issue, Transparent Drop Down

    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
    Last edited by mlmorg; 07-15-2007 at 07:56 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by mlmorg; 07-15-2007 at 06:35 PM.

  • #3
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Here is a tut on transparency/opacity: http://www.mandarindesign.com/opacity.html
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #4
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    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.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #6
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Please do not double post.
    Please post your navigation code.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that...the edit wasn't working for some reason

    Here is the css for the nav section:
    Code:
    #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;
    }

  • #10
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Try this
    Code:
    #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 method correct?
    Last edited by twodayslate; 07-15-2007 at 09:56 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #11
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #12
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    an image looks like the only work around for your opacity problem.

    You were supposed to add your own number for top: #;
    ex:
    Code:
    top: 7em;
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #13
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah I think you're right...thanks for all the help though...I will keep at it

  • #14
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Did it work? The position: relative; top: 7em;
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #15
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no it just moved the last three links far down the page


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •