notclive Posted June 3, 2006 Share Posted June 3, 2006 is it better to use percent like so:- div.example {text-align: center; position: absolute; top: 0%; left: 0%; width: 20%; background: #ffffff; border: 4px solid #111111; } or px like so:- div.example {text-align: center; position: absolute; top: 0px; left: 0px; width: 175px; background: #ffffff; border: 4px solid #111111; } i was thinking % because different screen resolutions may may make it look strange but some browsers may not support % correctly!!??!! any advise!! Link to comment Share on other sites More sharing options...
The Praetorian Posted June 3, 2006 Share Posted June 3, 2006 I'm having a similar problem with my div. The only advice I can give for the moment is... don't use percent for the width, at least. If you use % for the width, then your div with get skinnier or wider when people resize the window. So use px or em or cm for the width. For the rest, I can't really help. heh. But keep an eye on my topic here too, because our answers will probably be similar. Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 You don't have to include the unit (px or %) when the value is 0 :)The difference between pixels and percentages is that using percentages, also changes the width when resizing the window, and pixels don't. Pixels are relative to the user's resolution. If a user has a higher resolution, the same amount of pixels turn out to be smaller With percentages it don't :)So percentages are relative to the window, and pixels to the resolution. Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 so which should i use im edgin towards pixels now Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 That depends on what you want :)If the content should be static even the window gets resized, you should use pixels. If you like it to stretch with the window, use percentage instead Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 pixels thenalso is there any way of getting a div to fill up the rest of the width from a certain point on? or is that where i use % Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 To fill the rest of an already partly filled element with another element, you'd use percentages, but only if you know howmuch Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 thats my problem its all guessing work realy isnt it!! Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 oooo found away i put left:15px;right:0px Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 yeah, you can test it out by changing the percentage, or calculate it by seeing howmany pixels you have used and how many you still want to use Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 oooo found away i put left:15px;right:0px<{POST_SNAPBACK}> but internet explorer doesnt support this!! Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 Doesn't it work? :)Leaving left and top 0 doesn't mean it would not work, it would only place the element at the upmost left corner of the window Link to comment Share on other sites More sharing options...
notclive Posted June 3, 2006 Author Share Posted June 3, 2006 internet explorer doesnt seem to be able to size the width of my title so it's 175px from the left and 0px from the right Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 Can you post your code? I don't understand Link to comment Share on other sites More sharing options...
The Praetorian Posted June 3, 2006 Share Posted June 3, 2006 IE ignores px for some reason. (Some reason? It I know the reason!! IE sucks, thats the reason!) Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 3, 2006 Share Posted June 3, 2006 No it doesn't actually, my site was build with many px declarations, ant it works perfectly Link to comment Share on other sites More sharing options...
notclive Posted June 4, 2006 Author Share Posted June 4, 2006 Can you post your code? I don't understand <{POST_SNAPBACK}> div.title {text-align: center; background: #5555ff; position: absolute; top:0px; left:175px; height: 125px; right:0px} with opera or firefox it makes my title whatever lengh is between 175px from the left and 0px from the right, but with internet explorer it just makes it 175px from the left and auto's the width! But it does understand the right:0px for another div. Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 4, 2006 Share Posted June 4, 2006 div.title {text-align: center; background: #5555ff; position: absolute; top:0px; left:175px; height: 125px; right:0px}<{POST_SNAPBACK}> There is no such thing as right:0, replace it with "width:..px;" Link to comment Share on other sites More sharing options...
notclive Posted June 4, 2006 Author Share Posted June 4, 2006 right: seems to work it just cant adjust my width to fit between the two sides Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 4, 2006 Share Posted June 4, 2006 No, right is standardly "0" But its not a valid statement I think :)Use this: div.title{text-align: center;background: #5555ff; position: absolute; top:0px; left:175px; height: 125px; width:200px}Or whatever width you like Link to comment Share on other sites More sharing options...
notclive Posted June 4, 2006 Author Share Posted June 4, 2006 well i have a div as right:0px and it constantly stays on the right side? and not the left even though i left the left: blank Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 4, 2006 Share Posted June 4, 2006 Could you post the entire code of your page then? Link to comment Share on other sites More sharing options...
notclive Posted June 4, 2006 Author Share Posted June 4, 2006 Could you post the entire code of your page then?<{POST_SNAPBACK}> body {font: normal 16px lucida sans unicode,lucida sans,arial; color:black;background-color:#ffffff}div.navbar {text-align: center; position: absolute; top:0px; left:0px; width: 175px; background: #ff4444;}a.link:link {color: white; text-decoration: none; font: 18px }a.link:active {color: white; text-decoration: none; font: 18px }a.link:hover {color: black; text-decoration: none; background: white; font: 18px }a.link:visited {color: black; text-decoration: none; font: 18px }div.title {text-align: center; background: #5555ff; position: absolute; top:0px; left:175px; height: 125px; width:82%}div.main {text-align:left; position: absolute; top: 125px; left: 250px; background: #eeeeee; width: 450px}div.news {text-align:left; position: absolute; top: 125px; right: 0px; background: #eeeeee; width:200px}a.text:link {color: black; text-decoration: underline}a.text:active {color: black; text-decoration: underline}a.text:hover {color: black; text-decoration: underline}a.text:visited {color: black; text-decoration: underline}p {color:black}h1 {color:white; text-align:center}h2 {color:blue}h3 {color:red}h4 {color:green} Link to comment Share on other sites More sharing options...
Jack McKalling Posted June 4, 2006 Share Posted June 4, 2006 There are a few tiny things I would change, I colored them red: body {font: normal 16px "lucida sans unicode","lucida sans",arial; color:black;background-color:#ffffff}div.navbar {text-align: center; position: absolute; top:0px; left:0px; width: 175px; background: #ff4444;}a.link:link {color: white; text-decoration: none; font: 18px }a.link:active {color: white; text-decoration: none; font: 18px }a.link:hover {color: black; text-decoration: none; background: white; font: 18px }a.link:visited {color: black; text-decoration: none; font: 18px }div.title {text-align: center; background: #5555ff; position: absolute; top:0px; left:175px; height: 125px; width:82%}div.main {text-align:left; position: absolute; top: 125px; left: 250px; background: #eeeeee; width: 450px}div.news {text-align:left; position: absolute; top: 125px; right: 0px; background: #eeeeee; width:200px}a.text:link {color: black; text-decoration: underline}a.text:active {color: black; text-decoration: underline}a.text:hover {color: black; text-decoration: underline}a.text:visited {color: black; text-decoration: underline}p {color:black}h1 {color:white; text-align:center}h2 {color:blue}h3 {color:red}h4 {color:green}Also, I would suggest replacing the colornames by the hex codes, but that is not necessary. Is there anything after these changes, that works not completely as you want it? Link to comment Share on other sites More sharing options...
notclive Posted June 4, 2006 Author Share Posted June 4, 2006 but if i delete the right:0px it wont stay on the right side. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now