/    Sign up×
Community /Pin to ProfileBookmark

Resolution size affecting positions

Copy linkTweet thisAlerts:
May 16.2006

Hi,

I have a big problem. I’m trying to make a website for an online game I’m making, but am running into trouble. I’m using css to place certain objects and headers all over the page, but depending upon what resolution the person is using, the objects don’t always show up in the correct spots. Here is my site [url=http://www.omnimagaproject.co.nr/]http://www.omnimagaproject.co.nr/[/url] I don’t have any actual example code because I keep going through and messing around with it, but here is just an example. The #’s prob. won’t line up:

[code=html]<html>
<head>
<style type=”text/css”>
p.latestnews
{
position:absolute;
top:200px;
left:150px;
margin-top:0px;
}
</style>
</head>

<body bgcolor=”gray”>
<div align=”center”>
<img src=”mainimage.bmp” width=725px><img src=”sliverimage.bmp” width=725px><img src=”copyright.bmp” width=725px><p class=”image”>
<a href=”http://www.freedomain.co.nr/” target=”_blank”>
<img src=”anima.gif” width=”88″ height=”31″ border=”0″ alt=”Free Domain Name Service”></a>
</p>
<p class=”latestnews”><b>Latest News</b></p>
</div>

</body>

</html>[/code]

Pretend that those values on a 1024×768 resolution put the text Latest news exactly in the center of the small gray box on the right side column. If someone goes onto the same site w/ 800×600 resolution, the place is completly thrown off. How can I fix this??? I tried %values instead of pixels and that didn’t help either.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@NedalsMay 16.2006 — Do you have a screen that's

725 + 725 + 725 = 2175px wide??

That's what your code is asking for. Probably not what you want.

How are the images supposed to line up?
Copy linkTweet thisAlerts:
@UltimaterMay 16.2006 — This will keep your news box in the center:
<i>
</i>&lt;div style="text-align:center;"&gt;
&lt;div style="width:725px;margin:0 auto;"&gt;
&lt;p class="latestnews"&gt;&lt;b&gt;Latest News&lt;/b&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

Also, you should avoid [color=red]<div align="center">[/color] just as much as [color=red]<center>[/color].

Instead you should use text-align, margins and a set width to center block-level elements.
Copy linkTweet thisAlerts:
@tenniskid493authorMay 16.2006 — The reason I put no breaks is so that there wouldn't be any blank space in between the images. The whole reason I did that was cuz I assumed that no one would have a screen that wide so it automatically scrolls onto the next line.
Copy linkTweet thisAlerts:
@knowjMay 16.2006 — you dont have a doctype so your sending browsers into quirks moded this will affect how the browser displays the site

http://www.w3.org/QA/2002/04/valid-dtd-list.html

your also using html tags which are depleted.

align="center" = depending on what your centering margin:0 auto; or text-align:center;

bgcolor="#FFFFFF" = in css = background-color:#FFFFFF;

i reccomend you use doctype for html 4.01 strict or xhtml 1.0 strict

a standard website heading is
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
[/code]
Copy linkTweet thisAlerts:
@NedalsMay 16.2006 — The reason I put no breaks is so that there wouldn't be any blank space in between the images.[/QUOTE]
<i>
</i>This will give you space between images
&lt;img src="images/.." alt="" width=50 height=50&gt;
&lt;br&gt;
&lt;img src="images/.." alt="" width=50 height=50&gt;
&lt;br&gt;
&lt;img src="images/.." alt="" width=50 height=50&gt;
&lt;br&gt;

This will not...
&lt;img src="images/.." alt="" width=50 height=50&gt;&lt;br&gt;
&lt;img src="images/.." alt="" width=50 height=50&gt;&lt;br&gt;
&lt;img src="images/.." alt="" width=50 height=50&gt;&lt;br&gt;

The whole reason I did that was cuz I assumed that no one would have a screen that wide so it automatically scrolls onto the next line.[/QUOTE]And that is NOT the way to control layout
×

Success!

Help @tenniskid493 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...