Options
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.