Jump to content

Changing Screen Resolutions


SillyBilly
 Share

Recommended Posts

I created my web pages using a screen resolution of 800x600 px. I am trying to make the pages display correctly using a resolution of 1024x768 px. I initially tried to use a width of 30% for each of the divs to hold the flags. I tried many combinations of code and can get the left div and the right div to display correctly by padding and floating the right div to the right.However, I cannot get the flag in the mid div to center over the text in the middle column.Any suggestions will be appreciated. Here is a link to the site Visit My WebsiteHere is the relevant code<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="mystyle.css"><link rel="stylesheet" type="text/css" href="print.css" media="print"><style type="text/css"><!--body {margin: .5em;}#header {position:relative;width: 99%;height: 100px;margin-bottom: .5em;}#flags {position:relative;width: 99%;height: 80px;margin-bottom: .5em;padding: 10px 0 0 0;border-bottom: medium solid silver;}#imleft {position:relative;top: 0px;left: 0px;height: 20px;float: left;padding: 0 20px 0 10px;}#immid {position:relative;top: 0px;left: 210px;height: 20px;float: left;}#imright {position:relative;top: 0px;left: 400px;height: 20px;float: left;padding: 0 0px 0 0px;image-align: right;}--></style><title>Genealogy of the Collier Family</title></head><body><div id="header"><h1>Welcome to the Genealogy <br> of the Collier Family</h1></div><div id="flags"><div id="imleft"><img src="pictures/irelandflag.gif" alt="Flag of Ireland"></div><div id="immid"><img src="pictures/englandflag.gif" alt="Flag of England"></div><div id="imright"><img src="pictures/Can.gif" alt="Flag of Canada"></div></div>

Edited by SillyBilly
Link to comment
Share on other sites

Try giving the left hand div a float of left, width of 25%, texta-align of left.Right div, float right, width of 25%, text-align of right.Then the middle div, float left, width of 75%, text-align center.Get rid of any left and right margins and paddings already on those divs, and the positions.That should point you in the right direction.:)

Link to comment
Share on other sites

Try giving the left hand div a float of left, width of 25%, texta-align of left.Right div, float right, width of 25%, text-align of right.Then the middle div, float left, width of 75%, text-align center.Get rid of any left and right margins and paddings already on those divs, and the positions.That should point you in the right direction.:)
Thanks Real Illusions. A width of 75% for the middle div was too large (25 + 75 + 25 >100).Your suggestions did point me in the right direction. I was able to adjust the code to have the page display well in both resolutions. Now I'm on to the other 14 pages that need to be changed. Not all of them have the same problem. I may be back.
Link to comment
Share on other sites

maybe try 25, 50, 25edit: nm, looks like you figured it out

Edited by thescientist
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...