My website is http://playersprogramu.com/
I'd like to have my main header banner auto stretch across the top of my forum. How would I go about doing that?
Make image width 100% and adjust banner_logo in CSS.
How do unmake it 100% and what do u change in Ccs file?
(http://i.imgur.com/1tTlP00.png)
like that ?
edit the height to 100px in .header_main in your css file.
if you want graphic design services contact me.
That didn't work
did not work in what way? if you want help you need to provide some details on what is going on.
In the file /Themes/your_theme/css/index.css
You need to modify some parts:
Search:
.header_main
{
width: 100%;
height: 100px;
background: #1a6291 url(../images/vertex_image/main_bg.png);
background-repeat: repeat-x;
}
and delete the height: 100px; line.
Search:
.banner_logo
{
float: left;
width: 200px;
height: 72px;
padding-left: 15px;
}
delete the height: 72px; line, and change the width: 200px; to width: 100%;.
And finally, add to the end of the file this:
.banner_logo img {
width: 100%;
}
With that, the banner will be all across your forum width at any resolution.
Gluz that totally fixed it! Thank you!!
I have one more issue. After doing this it seems I can't change my banner. I replaced my banner_logo.png and my banner is not changing. I'm note sure if it's because of the changes I made in the last post
OK, so I just needed to clear my cache. Now I want to know if anyone can look at my page at playersprogramu.com and tell me how to stretch my banner all the way across the top of my page but does cover a majority of the top header but not the whole top header. Thank you all for your help
In the index.css
.header_main_content {
margin: 0 auto;
display: table;
width: 100%;
line-height: 36px;
}
delete the line-height: 36px;
I deleted
line-height: 36px;
The banner still is showing the same size at playersprogramu.com & not stretching all the way across the top of the page.
Does the last part at the bottom of the css file look ok?
}
.banner_logo img {
width: 100%;
}
Can you take a screenshot and mark where you want it to fill?
Because I see it the width of the forum and the height of the top part filled with the banner.
I'll have to wait till I get home to do that. I appreciate your help on this!
Here's the screen shot. It shows the banner not stretching all the way across. Nee to stretch a bit more to completely cover header
Oh, that is a setting on your forum, that is at 95%, but can be override with this:
.header_main_content {
margin: 0 auto;
display: table;
width: 100%;
}
Delete the line display: table;
And change the width: 100%; to width: 100% !important;
.banner_logo {
float: left;
width: 100%;
padding-left: 15px;
}
Delete the line padding-left: 15px;
Fixed! Thank you!!!
Gluz, I did notice that on the right-side of my page there is the smallest part that is no stretching all the way across the top. See screen shot below. Can I fix that?
That space is the space for the scrollbar that your browser have, I tested in Chrome and Firefox in my android phone, latest versions, and doesn't show that way, neither in the desktop browsers.