PDA

View Full Version : Help! My banner covers my forum



WendyC
Sep 15th, 2010, 09:45 PM
Hello, I need help with getting my banner to sit on the top center of the page without burying the forum underneath it. I understand that the default settings have something to do with this, but I don't really understand it.

The logo is sited in the imageset folder and is inserted via a form in the admin control panel. I can't add it in with CSS, which would be easier and give me more control. So I need to fiddle with the following code to make it work:


/* GENERAL STYLES */
/*--------------------------*/

* { margin : 0; padding: 0; border: 0; }

body {
background: #0B1E29 url("{T_THEME_PATH}/images/brown velvet.jpg") repeat;
color: #0F1415;
font-size: 10pt;
font-family: Verdana, Arial;
margin-bottom: 10px;
font-size: 10px;
}

a:link,a:active,a:visited { text-decoration: none; color : #114057; }
a:hover { text-decoration: none; color : #172F3B; }

.fr { float: right; }

.fl { float: left; }

/*------------------------*/
/* LAYOUT STYLES */
/*------------------------*/

#container { width: 100%; }

#wrapper {
width: 916px;
margin: 0 auto;
background: url("{T_THEME_PATH}/images/wrapper.jpg") top center repeat-y;
position: relative;
top: 88px;


}


#header {

height: 327px;
position: absolute;
top: -88px;
left: -50px;
}

#footer {
background: url("{T_THEME_PATH}/images/footer.gif") bottom center no-repeat;
height: 80px;
text-align: center;
clear: both;
color: #616161;
padding-top: 20px;
}



Please advise on what I can do to sort this out. Here's a link to the forum, which I've put up as a test to get the code right: http://writers-rendezvous.co.cc/test/l/test/forum/phpBB3

The banner isn't my design, and the designer wants it at that size and in that position. I promised I'd do it, but I need to know how to do it without burying the forum beneath it.

Thanks in advance.

Pepineros
Sep 16th, 2010, 12:18 AM
Are you sure you can't reach the banner through css? It might have an automatic property, like h1 or maybe one this particular site gives it. You could try to contact the forum host and request the info, or just explain your problem and ask them for a solution. If they can't do that for you, you might be able to put a container (like your #wrapper id) around everything *but* the banner (ie, around the rest of the content of that forum), and then give it enough margin-top to move it all down from underneath it.

WendyC
Sep 16th, 2010, 12:21 AM
They're not terribly helpful, I'm afraid. I know there's a bit of code I can add to the header to make this work, but I'm not sure what. Thanks for answering.

What I mean by not terribly helpful is that I've applied the advice given and it doesn't work at all.

WendyC
Sep 16th, 2010, 12:55 AM
I had a go at adding #header-inner, and that pushed the content down, but messed up my banner position. At least I can sign in and out now. How do I get my banner top and centre?

Pepineros
Sep 16th, 2010, 12:58 AM
How exactly did it mess up banner position? Positioning that banner with position:absolute should work, since it's only the banner it's unlikely that's gonna cause trouble with other elements on the page.

WendyC
Sep 16th, 2010, 01:00 AM
Could you hop over and see for yourself, please? It's been shoved down and to the right.

Here's the code:


#header {
#header-inner {overflow: visible no-repeat;

}

position: absolute;
top: -88px;
left: -50px;
height: 327px;

}



Without that header-inner, half my forum would be buried underneath the banner.

Pepineros
Sep 16th, 2010, 01:12 AM
Ah, yes, I see. I usually center elements with margin:0 auto;, but that doesn't work on elements with position:absolute;. However, if you know exactly how wide it is, and the banner falls inside your 916px wrapper, you should be able to correctly center it with left:somethingpx, right? And if the banner doesn't fall inside the wrapper, then... I dunno. Try position:relative (or no position attribute at all) and add margin:0 auto, that will get it in the middle, but it might also cause it to cover the rest of the page again.

WendyC
Sep 16th, 2010, 01:13 AM
I already did all that. I've been messing with absolute and relative all evening, to no avail. The only thing that seems to have worked is adding the inner banner. Adding absolute and relative to that didn't sort it, which is why I came here.

Donkey
Sep 16th, 2010, 02:58 AM
First delete the part in red on your CSS



#header {
#header-inner {overflow: visible;
margin: 0 auto;

}

position: absolute;
top: -88px;
left: -50px;
height: 327px;


}

Then in your HTML change the top margin on the table using the in-line style:

<table class="tablebg" style="margin-top: 200px;" cellpadding="0" cellspacing="1" width="100%">

Personally I would drop the header down 20px or so - it looks very odd stuck up there at the top, and I would re-sample the header to be the same width as the content.


Edit/

If you can't get at the image to change the size you can do it in the html e.g.


<a href="./index.php"><img src="./styles/DarkFantasy/imageset/EMClellandbanner.jpg" alt="" title="" height="293" width="916"></a>

Then delete this line from the header CSS


left: -50px;

WendyC
Sep 16th, 2010, 11:01 AM
Thanks for the offer of help, Donkey, but the problem is I have to make the changes in CSS because of the way the defaults are. I know there's a way to do it. I just don't know how.

Now as loopy as it sounds, the idea is to get the banner at its current size top and centre. I'm not sure how to alter the HTML and I don't want to mess with it too much or I'll end up wrecking the theme. Can anybody else help?

WendyC
Sep 16th, 2010, 11:37 AM
JOY!! It's sorted. I read through some tutorials online and came up with this:




#headercontainer {
width: 100%;
height: 327px;
padding: 0;
margin: 0;
background: #6e4509;
border: none;
position: absolute;

}

#header {

position: relative;
top: -88px;
left: -50px;
height: 327px;


}



Now I've got it just how I want it. Thanks anyway, guys.