0

I´m making a website with the following css. Everytime I change the resolution on my computer, the text under the #info div gets mangled up. How can I fix that? Thanks.

#container {
background-image:url('pic.png');
height: 541px;
width: 1020px;
margin: 0 auto;
}

#musicplayer {
margin-top:90px;
display:inline;
}

#info {
position: absolute;
top: 29em;
left: 38em;
}
Fealiux Olio
  • 1
  • 1
  • I wouldn't use javascript to resize divs personally, as this would break the website in the case that javascript was turned off (you want it to degrade gracefully). I'm not sure I fully understand your question, however. You say the text under the info div becomes mangled, do you mean the text in the div or everything under it? In the case that the div is becoming mangled, don't use ems - use pixel measurements or percentages. The resolution of the screen should not affect the layout of your page - if your website is 1024px wide it will always be so regardless of the resolution of the screen. – E Steven Jul 20 '11 at 02:14
  • When I said the text gets managled, I mean it looks great in my normal resolution, but when I lower the resolution it formats to like 2 words on a line then a line under that... imagine it like this. hello world
    my name
    is bob
    nice to
    see you     – Fealiux Olio Jul 20 '11 at 03:09

1 Answers1

1

if you can go on the javascript side, use something like jquery and recompute your lengths. There is a stackoverflow entry for this:

jQuery Screen Resolution Height Adjustment

If you can not use javascript, I suppose using percentage to set top and left is an easy fix:

http://www.w3schools.com/cssref/pr_pos_top.asp

This bits of javascript also shows you how to change the font size:

http://www.shopdev.co.uk/blog/text-resizing-with-jquery/

since I would say this is related to the question.

Community
  • 1
  • 1
Nicolas Modrzyk
  • 13,961
  • 2
  • 36
  • 40