SillyBilly Posted March 11, 2010 Share Posted March 11, 2010 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> Link to comment Share on other sites More sharing options...
real_illusions Posted March 11, 2010 Share Posted March 11, 2010 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 More sharing options...
SillyBilly Posted March 11, 2010 Author Share Posted March 11, 2010 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 More sharing options...
thescientist Posted March 11, 2010 Share Posted March 11, 2010 maybe try 25, 50, 25edit: nm, looks like you figured it out Link to comment Share on other sites More sharing options...
real_illusions Posted March 11, 2010 Share Posted March 11, 2010 Yeah, i meant 50, not 75 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.