Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Trouble placing my header's banner

edited October 2006 in Vanilla 1.0 Help
Alright, I'd like some help with this if possible. I'm a PHP amateur, but I had a fiddle around with the vanilla.css within my Scene 1.0 style. But for some reason, there is a large gap above my banner, and I'm not sure why it's there! Here's the fora - http://lobby.psuni.org/ And here is the snippet of code for the part I experimented with.... ---------------------- /* Header.. */ #Header { background-image: url(http://lobby.psuni.org/lobbybanner3.jpg); padding-top: 0px; padding-bottom: 5px; border-bottom: 1px solid #ccc; } #Header * { margin:0px; padding:0px; } #Header h1 { text-align:center; color:#000; font-size:12px; margin:180px 0px; padding: 15px; } #Header h1 strong { color:#ccc; } #Header ul { text-align:center; font-weight:bold; } #Header ul li { display:inline; margin:0px 1px; } #Header ul li.TabOn { background-color:#fff; color: #ff00ff; } #Header ul li a { padding:5px; font-size:11px; text-decoration:none; background-color:#ccc; color:#fff; } #Header ul li a:hover { background-color:#ff00ff; color: #fff; } #Header ul li.TabOn a { background-color:#fff; color:#ff00ff; border: 1px solid #ccc; border-bottom: 1px solid #fff; } #Header ul li.TabOn a:hover { background-color:#ff00ff; color:#fff; border: 1px solid #ccc; border-bottom: 1px solid #ff00ff; } #Header ul li a em { font-style:normal; text-decoration:underline; } ----------------------- It goes without saying, that any help on this would be appreciated, there is obviously something my newbie cannot see... Thank you in advance ^^ ~Vox.

Comments

  • Options
    #Header { background: url(http://lobby.psuni.org/lobbybanner3.jpg) top center; padding-top: 0px; padding-bottom: 5px; border-bottom: 1px solid #ccc; padding-top:180px; } #Header * { margin:0px; padding:0px; } #Header h1 { text-align:center; color:#000; font-size:12px; margin:0px 0px; padding: 15px; }
  • Options
    #Header h1 {
    text-align:center;
    color:#000;
    font-size:12px;
    margin:180px 0px;
    padding: 15px;
    }

    Is saying there should be 180 pixels above and below #Header h1, you probably want to replace that with margin: 0 0 180px 0; or margin-bottom: 180px;
  • Options
    Okay thanks, I'll give it a try :)
  • Options
    Oh, one more thing, if you go with my suggestion, you might want to replace background-image: url(http://lobby.psuni.org/lobbybanner3.jpg); with background: #fff url('http://lobby.psuni.org/lobbybanner3.jpg') center top no-repeat;

    Ben's solution might work fine though!
  • Options
    It worked, I changed it to margin-bottom: 180 px; Thanks for pointing out that I have to specify it first, I didn't know that :)
  • Options
    Well, just in case people are interested, margin:180px 0px; is the same as
    margin-top:180px; margin-right:0px; margin-bottom:180px; margin-left:0px; There are a few ways to use margin: margin: A; will set A as the margin for all sides, margin A B; will set the top and bottom margins to A and the side margins to B. margin:A B C D; will set top to A, right to B, bottom to C, and left to D.
This discussion has been closed.