1 Topic by mkorczowski (edited by mkorczowski 2006-10-16 02:07)

  • Registered: 2006-10-16
  • Posts: 5

Topic: Moving a header image up a tad.

I'm in the process of editing a theme to work with my site.  I have a header image that I've put there in a kind of sloppy way by editing the CSS and putting it where the board title should be.

#brdtitle {
    background: url(http://www.berkeleyjsa.org/rw_common/themes/freshtwo/images/header.jpg) center top no-repeat;
    height: 230px;
}

That gives me this:  http://www.berkeleyjsa.org/forums

But I'd like the header image to be all the way at the top, like this: http://www.berkeleyjsa.org/

What would be the best way to do that??  I've tried with that CSS file but I can't figure it out.  Do I have to edit a template file?  What would be the best way?

Thanks for your help!

P.S. even better would be if it could be put there without using the 'brdtitle' part of CSS so I could make that invisible and not have text overlaid on my header image when I enter the (required) board title.

  • Gizzmo
  • Senior Member
  • Offline
  • From: Earth, Milkyway Galaxy
  • Registered: 2004-01-27
  • Posts: 762

Re: Moving a header image up a tad.

try this. Remove "margin-top: 5px" from the #punwrap block

  • Registered: 2006-10-16
  • Posts: 5

Re: Moving a header image up a tad.

Wow, that should'a been obvious.  Thanks!

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Moving a header image up a tad.

I would set the image as a background to the main wrapper #punwrap and just increase the top padding on #punwrap to the height of the image.

You should then be able to get rid of #brdtitle in an accessible way by doing this

#punwrap #brdtitle {
   position: absolute;
   left: -9000px;
   height: 0;
   }

  • Gizzmo
  • Senior Member
  • Offline
  • From: Earth, Milkyway Galaxy
  • Registered: 2004-01-27
  • Posts: 762

Re: Moving a header image up a tad.

why not just use "display:none" insted of moving it?

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Moving a header image up a tad.

Because display:none is treated as speak:none by screenreaders.