Blog Documentation Book a Demo

Trouble placing my header's banner

voxievoxie
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

  • BenBen
    #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; }
  • bjrnbjrn
    #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;
  • voxievoxie
    Okay thanks, I'll give it a try :)
  • bjrnbjrn
    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!
  • voxievoxie
    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 :)
  • bjrnbjrn
    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.