My header changes size on different computer screens

Go down

Solved My header changes size on different computer screens

Post by equi on August 5th 2012, 11:09 pm

hi i have a header

http://illiweb.com/fa/pbucket.gif

and i want it on the top of my forum (www.equinepoint.forumotion.co.uk) and i want it to be able to stay in one place and not get larger than the forums boxes when i scroll the size of the page (to resize text)

i have this code already:
.post{
border: 1px solid #000;
-webkit-box-shadow: 0px 0px 0px #555;
-moz-box-shadow: 0px 0px 2px #555;
box-shadow: 0px 0px 0px #555;
}

.post .corners-top, .post .corners-bottom{
display: none !important;
}
{
background:url("http://illiweb.com/fa/pbucket.gif") no-repeat top center;
display:block;
text-indent:-9000px;
width: 400px;
height: 350px;
}


but it doesnt work?


On my 22" computer screen it looks normal, on my 17" laptop it looks like this:

however when i scroll on my 22" computer the image distorts like that ^


Last edited by equi on August 6th 2012, 1:18 pm; edited 2 times in total

equi
Forumember

Posts : 51
Reputation : 1
Language : english

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by equi on August 6th 2012, 1:18 pm

I have edited it thanks

equi
Forumember

Posts : 51
Reputation : 1
Language : english

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by Nera. on August 6th 2012, 2:36 pm

Hi,

The image size it self is not changing. On your site http://equinepoint.forumotion.co.uk/ it's allways the same:
1020px x 167px. The problem appears cause your .wrap is defined to be: width: 65%;

Code:
#wrap {
    width: 65%;
}

If you change it to 1020px it will stay the same, what means that your wrap will not change it's size on different screens. But I'd rather fix/lower the image size VIA photoshop.
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by equi on August 7th 2012, 1:26 pm

Thanks. But if i lower the image size then it is way too small on my 22" screen. I want it to work like this site and stay the same on every computer screen!

http://staffy-bull-terrier.niceboard.com/


equi
Forumember

Posts : 51
Reputation : 1
Language : english

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by LGforum on August 7th 2012, 2:50 pm

Then it can't be a fixed width. It needs to be a relative width, so it changes relative to the size of the users screen.

Put this in your CSS:
Code:
#logo, #logo img {  max-width: 100%; }
This is based on the fact that your forum looks like phpbb3 in the picture.
avatar
LGforum
Hyperactive

Male Posts : 2263
Reputation : 260
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by equi on August 7th 2012, 6:20 pm

Oh you are a legend! I have been trying to fix this for months! lol Thankyou so much.

equi
Forumember

Posts : 51
Reputation : 1
Language : english

Back to top Go down

Solved Re: My header changes size on different computer screens

Post by Sanket on August 7th 2012, 8:33 pm

Topic Solved & Locked
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum