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.
Trouble placing my header's banner
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.
0
This discussion has been closed.
Comments
#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; }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;ormargin-bottom: 180px;background-image: url(http://lobby.psuni.org/lobbybanner3.jpg);withbackground: #fff url('http://lobby.psuni.org/lobbybanner3.jpg') center top no-repeat;Ben's solution might work fine though!
margin:180px 0px;is the same asmargin-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.