homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS problem with different screen resolution
sbdanielb




msg:3680643
 8:09 am on Jun 22, 2008 (gmt 0)

I can't get my banners, logo or menu to stay the same no matter what the size of the screen resolution is set on.

Here is bit of my css code, the only code i've changed to make this:

#bwlogo {
background-position: top left;
background-attachment: fixed;
width: 58px;
background-repeat: no-repeat;
margin: auto;
height: 45px;
position: absolute;
left: 156px;
top: 35px;
}

#babywiggles {
background-position: top left;
background-attachment: fixed;
width: 269px;
background-repeat: no-repeat;
margin: auto;
height: 40px;
position: absolute;
left: 202px;
top: 42px;
color: #777777;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
}

#advertisement {
color: #777777;
background-attachment: fixed;
font: bold 11px Arial, Helvetica, sans-serif;
margin: 5px;
height: 40px;
position: absolute;
left: 1005px;
top: 19px;
}

#topbannerad {
background-attachment: fixed;
position: absolute;
padding: 20px 40px 60px 150px;
line-height: 14px;
top: 15px;
left: 350px;
height: 5px;
clear: both;
}

#topmenu {
background-attachment: fixed;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
word-spacing: 20px;
color: #064BFA;
position: absolute;
left: 173px;
top: 22px;
}

#topmenu a:hover {
color: #E23500
}

#topmenucontact {
background-attachment: fixed;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
word-spacing: 0px;
color: #064BFA;
position: absolute;
left: 391px;
top: 22px;
}

#topmenucontact a:hover {
color: #E23500
}

I keep changing it but no matter how i put it, it still the same, i'm new to CSS so any help be great, thanks

 

4css




msg:3680752
 1:29 pm on Jun 22, 2008 (gmt 0)

Hi sbdanielb

Welcome to WebmasterWorld!

When you say that you want the banner etc to stay the same. What exactly do you mean? Same size? Stay in one spot?

When you position things as you are doing, they will move when you size the browser because you are telling them in your css where they need to go.

Like your babywiggles, You have it positioned absolutely 202 pixels from the left of the view port of the browser and 42 pixels from the top.

So, if you resize your browser from a larger window to a smaller one, or smaller to larger, they are still going to seek that position. And in a smaller browser window it will look different then in a larger window.

If you could post some of your (x)html and let us know what doctype you are using that would be helpful as well. Also, have you tried to validate [validator.w3.org]your page? Is it showing any coding errors?

sbdanielb




msg:3680802
 2:45 pm on Jun 22, 2008 (gmt 0)

Thank you for your reply, its a phpbb3 forum style, trying to get it to look like my normal site.

What i mean is, i don't want the banners, menu and images to stay in the same place if the browser is smaller or larger, i would like them to look the same no matter the size of the broswer windwon if you get me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Here is bit of the html i added.

<div id="bwlogo"><div class="bwlogo"><img src="{T_THEME_PATH}/images/bwlogo.png" alt="Logo" title="Logo" border="0" /></div></div><div id="babywiggles"><div class="babywiggles"><a href="linked removed"><img src="{T_THEME_PATH}/images/baby_wiggles.png" alt="Baby Wiggles" title="Baby Wiggles Home" border="0" /></a></div></div>
<div id="topbannerad"><div class="topbannerad">Banner ad here
</div></div><div id="advertisement">Advertisement</div>
<div id="topmenu"><div class="topmenu"><a href="/ucp.php?mode=login">Login</a> Register Forum</div></div><div id="topmenucontact"><div class="topmenucontact">Contact Us</div></div>

I did try a validate thing but i do not understand it and not all of that is from what i've added.

4css




msg:3680876
 5:13 pm on Jun 22, 2008 (gmt 0)

Hi sbdanielb,

Are you saying that it is failing vaidation in general? If so, this could be causing some of your issues, even if it isn't what you have added that is failing.

You can always validate and post the warnings or failures that yo are getting.

I'm not familiar with editing the phpbb forum software anymore. It has been a while since I have used that one. I'm sure though that someone will help you out.

If you can copy and paste the warning/failures you are getting in here I know you'll be helped with it a bit.

I find that fixing errors in the validator helps you to learn things that you might not have learned if your page didn't fail ;)

sbdanielb




msg:3680922
 6:37 pm on Jun 22, 2008 (gmt 0)

Well the forum style says its "This Page Is Valid XHTML 1.0 Strict!" so i am not sue how that is now going to help me.

So i guess itís the CSS code that i am using is wrong or i am not setting it up right. Well that fails the CSS Validator but what fails is none of the code Iíve added to it so I do not think that is my problem.

I just think I do not know how or understand how to use the CSS code to put things in the right places etc.

Thank you for your help though.

D_Blackwell




msg:3681170
 2:48 am on Jun 23, 2008 (gmt 0)

Well the forum style says its "This Page Is Valid XHTML 1.0 Strict!" so i am not sue how that is now going to help me.

It's important to remember that though validation is important and can solve a lot of problems - that doesn't mean that the page will look the way you want. It is telling you that the code is sound, which is good - but now you need to tweak that valid code so that the page will render the way you want. The XHTML validates. How about the CSS? What, specifically is failing?

I find that fixing errors in the validator helps you to learn things that you might not have learned if your page didn't fail ;)

My first pages had dozens of errors; usually the same mistake repeated many times. Once you pick it up, validation is mostly like using a spell checker - just picking up typ0s.

Can you pull out just the current version of XHTML and CSS being used that will replicate the problem? That's the only way it can be fixed here I think. The CSS looks like everything is specifically sized and positioned, so am also not clear on 'stay the same'.

So far as seeking out the exact correct pixel location, pixels don't 'move' like em or %. 202 pixels is 202 pixels. It shouldn't be possible to discern movement.

Like your babywiggles, You have it positioned absolutely 202 pixels from the left of the view port of the browser and 42 pixels from the top.

So, if you resize your browser from a larger window to a smaller one, or smaller to larger, they are still going to seek that position. And in a smaller browser window it will look different then in a larger window.

4css - I may be misunderstanding your position on this. He can resize the window from ultra-small to whopping-big - that {left: 202px; and top: 42px;{ shouldn't move at all. That position is 'locked' no matter how the window is sized.

swa66




msg:3681187
 3:53 am on Jun 23, 2008 (gmt 0)

I'ma bit familiar with phpBB3. Which template are you using to base everything off of? Prosilver?

I can't get my banners, logo or menu to stay the same no matter what the size of the screen resolution is set on.

I'm afraid I don't understand what you mean by "to stay the same".

Less important to you, but still: screen resolution is unimportant. The important part is viewport size. E.g. the resolution of the screen I'm working on right now is 1920x1200, but a browser window is very unlikely to get much wider than 1024 or even 800px

For the rest:

  • validation needs to be redone if you change things. I use the ones at [validator.w3.org...] and [jigsaw.w3.org...]
  • phpBB3 uses a dynamic system to generate css on the fly, you need to go to the administration panel and refresh is every time you make a change to the source files.
  • the CSS in phpBB3's prosilver uses parsing hacks ... IMHO a bad practice (although they are grouped in the source code in a separate file)

I'm afraid your absolutely positioning is goign to cause more problems than it will solve, but I don;t know the reasons you have to do it that way.

4css




msg:3681400
 1:11 pm on Jun 23, 2008 (gmt 0)

@d_blackwell
It's important to remember that though validation is important and can solve a lot of problems - that doesn't mean that the page will look the way you want. It is telling you that the code is sound, which is good - but now you need to tweak that valid code so that the page will render the way you want.

You are correct on this.

4css - I may be misunderstanding your position on this. He can resize the window from ultra-small to whopping-big - that {left: 202px; and top: 42px;{ shouldn't move at all. That position is 'locked' no matter how the window is sized.

Basically this is what I was trying to explain. I do pages a bit differently. I do a fixed width with floats within. So trying to recall positioning and putting it into words can be sometimes flustering for me. How you put it is exactly how I was trying to state it. The image isn't going to move from how he has it positioned.

Basically what I think he is trying to accomplish here is that when he makes the window smaller that image is going to stay in the same spot. Small viewport or large viewport, he wants it to be in the same position on the page. (IF I am reading correctly what he is saying.)

I'm wondering if maybe this belongs in the forum building (or community building section) of WebmasterWorld. I think he meeds someone such as swa66, who seems to understand how the phpbb software works.

I used to be familiar with it, but it has been several years since I have played with it.

swa66 appears to have a working knowledge of the software.

sbdanielb




msg:3681474
 2:11 pm on Jun 23, 2008 (gmt 0)

Thank you all for your help, i have checked the code with the CSS Validator and got no errors, i think i just do not know enough about CSS and how to position a image, text or menus etc.

Yes, what I am trying to say which I know isnít too easy for me to say or to get you to understand is that when some one with a smaller viewport looks at the site. It looks the same as it would on a bigger viewport.

I have managed to fix one part of it but now I can not do another. I can not move my text to the top of my border, instead I can only get it to go half way to the border.

This is the css code:

#advertisement {
position: relative;
color: #777777;
font: bold 11px Arial, Helvetica, sans-serif;
height: 0px;
width: 190px;
padding: 0px;
margin: 0px;
}

Now I can move it around but I can not get it to go top right and just under the border image. Do I need to change the location in the HTML file?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved