12 Replies - 2604 Views - Last Post: 16 June 2006 - 06:08 PM

#1 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Text coming apart with Screen Resolution

Posted 12 June 2006 - 06:49 AM

Ok, my problem changed so I started a different post. My site seems to display fine at 1024x768 on every browser, but falls apart with I change the resolution. What am I doing wrong?

<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style type="text/css">
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}
.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:none;text-align:left;}
body {margin:0;height:100%;width:100%;}
  </style>
  <style>
.r{}
body { background: url(http://israel.clawz.com/GreyCkBrd2.bmp); }
.r{}
.nametext { color: black; padding: 5px; font-family:
Impact, sans-serif; font-size: 16pt; }
.r{}
.blacktext10 { color: green; }
.r{}
.orangetext15 { color: black; padding: 2px; }
.r{}
.r{}
body, table, td {background-color:transparent;border:none;border-width:0}
  </style>
  <style>
img.x {
position:relative;
left:77px;
top:29px;
z-index:0
}
#Grtf15 {
position:relative;
left:47px;
top:1px;
z-index:0
}
#Grtf17 {
position:relative;
left:32px;
top:1px;
z-index:0
}
#Grtf18 {
position:relative;
left:15px;
top:1px;
z-index:0
}
#Grtf19 {
position:relative;
left:24px;
top:1px;
z-index:0
}
#Grtf23 {
position:relative;
left:25px;
top:1px;
z-index:0
}
  </style>
  <meta name=""
 content="Christie Thornton RealEstate agent in Stockbridge, Ga. (770) 770 Home Buying Houses realtor information welcome to my home page. Hey Y'all, You aint gonna believe this. Lawn and garden. Blackberries. Dancing instructor. Tee shirts. ">
</head>
<body>
<div id="Oobj2"
 style="position: relative; z-index: 1; visibility: visible; height: 116px; width: 887px; top: 28px; left: 20px;">
<div class="style" id="Grtf2"><font class="fsx09"
 color="#d1d1d1" face="Times New Roman"><b>&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;The
Friendliest Way to Make Your Dreams Come True</b></font><br>
<font class="fsx07" face="Times New Roman"><b>&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; Christie
Thornton</b></font><br>
<font class="fsx03" face="Times New Roman"><b>&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
Phone:&nbsp; (770) 555-1212<br>
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;
Cell:&nbsp; (770) 555-2121<br>
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Email:&nbsp;
[email protected]<br>
</b></font></div>
</div>
<table align="center" border="0" width="900">
  <tbody>
	<tr>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	</tr>
	<tr>
	  <td>&nbsp;</td>
	  <td><br>
	  <img class="x"
 style="width: 850px; height: 600px; position: absolute; top: 26px; left: 78px;"
 alt="Example Image"
 src="http://www.angelfire.com/linux/2130/Christie2.gif"></td>
	  <td>&nbsp;</td>
	</tr>
  </tbody>
</table>
<div id="Oobj17">
<br>
<div style="position: absolute; top: -18px; left: 657px;"
 id="Grtf15" class="dfltt"><font class="fsx07"
 face="Arial"><a
 href="mailto:[email protected]" class="txdec"><font
 class="txdec" color="#d1d1d1">Contact Me</font></a><br>
</font></div>
</div>
<div id="Oobj19"
 style="position: absolute; z-index: 2; visibility: visible; left: 438px; top: 145px; width: 141px; height: 31px;">
<div id="Grtf17" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Neighborhoods</font></a><br>
</font></div>
</div>
<div id="Oobj20"
 style="position: absolute; z-index: 3; visibility: visible; left: 290px; top: 145px; width: 123px; height: 31px;">
<div id="Grtf18" class="dfltt"><font
 class="fsx07" color="#d1d1d1" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Development</font></a><br>
</font></div>
</div>
<div id="Oobj21"
 style="visibility: visible; height: 31px; width: 72px; z-index: 4; left: 170px; top: 145px; position: absolute;">
<div id="Grtf19" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Listings</font></a><br>
</font></div>
</div>
<div id="Oobj24"
 style="position: absolute; z-index: 5; visibility: visible; left: 81px; top: 145px; width: 56px; height: 31px;">
<div id="Grtf23" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Home</font></a><br>
</font></div>
</div>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Text coming apart with Screen Resolution

#2 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 12 June 2006 - 07:33 PM

I don't see what you mean by "falls apart"; it looks the same at every resolution except that parts of the page are obscured and have to be scrolled to at lower resolutions. If you want a dynamic page that scales to different resolutions, don't specify everything in absolute terms (don't set absolute dimensions and positioning on the layout elements).
Was This Post Helpful? 0
  • +
  • -

#3 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 13 June 2006 - 12:03 AM

Ah yes, it doesn't "fall apart" that's just my quick slang that's edited from "going 2 s%*$"
But I already got that advise about absolute positioning in another forum. I tried position:relative and a few other things but still came up with nothing. This is the last code I wrote:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style type="text/css">
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}
.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:none;text-align:left;}
body {margin:0;height:100%;width:100%;}
.r{}
body { background: url(http://israel.clawz.com/GreyCkBrd2.bmp); }
.r{}
.nametext { color: black; padding: 5px; font-family:
Impact, sans-serif; font-size: 16pt; }
.r{}
.blacktext10 { color: green; }
.r{}
.orangetext15 { color: black; padding: 2px; }
.r{}
.r{}
body, table, td {background-color:transparent;border:none;border-width:0}
img.x {
position:relative;
left:77px;
top:29px;
z-index:0
}
#Grtf15 {
position:relative;
left:47px;
top:1px;
z-index:0
}
#Grtf17 {
position:relative;
left:32px;
top:1px;
z-index:0
}
#Grtf18 {
position:relative;
left:15px;
top:1px;
z-index:0
}
#Grtf19 {
position:relative;
left:24px;
top:1px;
z-index:0
}
#Grtf23 {
position:relative;
left:25px;
top:1px;
z-index:0
}
  </style>
</head>
<body>
<div id="Oobj2"
 style="position: relative; z-index: 1; visibility: visible; height: 116px; width: 887px; top: 28px; left: 20px;">
<div class="style" id="Grtf2"><font class="fsx09"
 color="#d1d1d1" face="Times New Roman"><b>&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;The
Friendliest Way to Make Your Dreams Come &nbsp; &nbsp; </b></font><font
 class="fsx07" face="Times New Roman"><b>&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; Christie
Thornton</b></font><br>
</div>
<font class="fsx03" face="Times New Roman"><b>&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
Phone:&nbsp; (770) 555-1212<br>
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;
Cell:&nbsp; (770) 555-2121<br>
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Email:&nbsp;
[email protected]<br>
</b></font></div>
<table align="center" border="0" width="900">
  <tbody>
	<tr>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	</tr>
	<tr>
	  <td>&nbsp;</td>
	  <td><br>
	  <img class="x"
 style="width: 850px; height: 600px; position: absolute; top: 26px; left: 78px;"
 alt="Example Image"
 src="http://www.angelfire.com/linux/2130/Christie2.gif"></td>
	  <td>&nbsp;</td>
	</tr>
  </tbody>
</table>
<div id="Oobj17">
<br>
<div style="position: absolute; top: 145px; left: 657px;"
 id="Grtf15" class="dfltt"><font class="fsx07"
 face="Arial"><a
 href="mailto:[email protected]" class="txdec"><font
 class="txdec" color="#d1d1d1">Contact Me</font></a><br>
</font></div>
</div>
<div id="Oobj19"
 style="position: absolute; z-index: 2; visibility: visible; left: 438px; top: 145px; width: 141px; height: 31px;">
<div id="Grtf17" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Neighborhoods</font></a><br>
</font></div>
</div>
<div id="Oobj20"
 style="position: absolute; z-index: 3; visibility: visible; left: 290px; top: 145px; width: 123px; height: 31px;">
<div id="Grtf18" class="dfltt"><font
 class="fsx07" color="#d1d1d1" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Development</font></a><br>
</font></div>
</div>
<div id="Oobj21"
 style="visibility: visible; height: 31px; width: 72px; z-index: 4; left: 170px; top: 145px; position: absolute;">
<div id="Grtf19" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Listings</font></a><br>
</font></div>
</div>
<div id="Oobj24"
 style="position: absolute; z-index: 5; visibility: visible; left: 81px; top: 145px; width: 56px; height: 31px;">
<div id="Grtf23" class="dfltt"><font
 class="fsx07" face="Arial"><a
 href="http://www.christiethornton.com" class="txdec"><font
 class="txdec" color="#d1d1d1">Home</font></a><br>
</font></div>
</div>
</body>
</html>


I don't think I'll every sleep right again if I don't figure this out...
Was This Post Helpful? 0
  • +
  • -

#4 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 13 June 2006 - 06:22 AM

Two hours of sleep... This code is a little cleaner and works slightly better. Still changing with screen res though.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style type="text/css">
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}
.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:none;text-align:left;}
body {margin:0;height:100%;width:100%;}
.r{}
body { background: url(http://israel.clawz.com/GreyCkBrd2.bmp); }
.r{}
.nametext { color: black; padding: 5px; font-family:
Impact, sans-serif; font-size: 16pt; }
.r{}
.blacktext10 { color: green; }
.r{}
.orangetext15 { color: black; padding: 2px; }
.r{}
.r{}
body, table, td {background-color:transparent;border:none;border-width:0}
img.x {
position:relative;
left:77px;
top:29px;
z-index:0
}
#Grtf15 {
position:relative;
left:47px;
top:1px;
z-index:0
}
#Grtf17 {
position:relative;
left:32px;
top:1px;
z-index:0
}
#Grtf18 {
position:relative;
left:15px;
top:1px;
z-index:0
}
#Grtf19 {
position:relative;
left:24px;
top:1px;
z-index:0
}
#Grtf23 {
position:relative;
left:25px;
top:1px;
z-index:0
}
  </style>
</head>
<body>
<div id="Oobj2"
style="position: relative; z-index: 1; visibility: visible; height: 116px; width: 887px; top: 28px; left: 95px;">
<div class="style" id="Grtf2"><font class="fsx09"
color="#d1d1d1" face="Times New Roman"><b>The
Friendliest Way to Make Your Dreams Come True</b></font><font
class="fsx07" face="Times New Roman"><b><br> Christie
Thornton</b></font><br>

</div>
<font class="fsx03" face="Times New Roman"><b>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]<br>
</b></font></div>
<table align="center" border="0" width="900">
  
	  <img class="x"
style="width: 850px; height: 600px; position: absolute; top: 26px; left: 78px;"
alt="Example Image"
src="http://www.angelfire.com/linux/2130/Christie2.gif"></td>
	 
	</tr>
  </tbody>
</table>

<div id="Oobj17">
<br>
<div style="position: absolute; top: 145px; left: 657px;"
id="Grtf15" class="dfltt"><font class="fsx07"
face="Arial"><a
href="mailto:[email protected]" class="txdec"><font
class="txdec" color="#d1d1d1">Contact Me</font></a><br>
</font></div>
</div>
<div id="Oobj19"
style="position: absolute; z-index: 2; visibility: visible; left: 438px; top: 145px; width: 141px; height: 31px;">
<div id="Grtf17" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Neighborhoods</font></a><br>
</font></div>
</div>
<div id="Oobj20"
style="position: absolute; z-index: 3; visibility: visible; left: 290px; top: 145px; width: 123px; height: 31px;">
<div id="Grtf18" class="dfltt"><font
class="fsx07" color="#d1d1d1" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Development</font></a><br>
</font></div>
</div>
<div id="Oobj21"
style="visibility: visible; height: 31px; width: 72px; z-index: 4; left: 170px; top: 145px; position: absolute;">

<div id="Grtf19" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Listings</font></a><br>
</font></div>
</div>
<div id="Oobj24"
style="position: absolute; z-index: 5; visibility: visible; left: 81px; top: 145px; width: 56px; height: 31px;">
<div id="Grtf23" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Home</font></a><br>
</font></div>
</div>
</body>
</html>

This post has been edited by Israel: 13 June 2006 - 06:22 AM

Was This Post Helpful? 0
  • +
  • -

#5 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 13 June 2006 - 07:48 PM

Start by trying this:
  • Remove all position: absolute declarations from your code.
  • Use a doctype that doesn't put your page in quirks mode in every browser. It almost entirely defeats the purpose of using one at all. Resource: Activating the Right Layout Mode.
  • Stop using and get rid of the deprecated (obsolete) font element.
  • Clean up your HTML so that it's easily readable. All CSS should be inside the style element or in an external *.css file. Refrain from using the style attribute (don't use CSS anywhere inside the body element).
  • Clean up your CSS by removing empty or pointless style rules (like .r{}). If you're trying to use that pointless code as dividers, use CSS comments instead. Consolidate your CSS. Why do you have three separate rules for the body element? You can also consolidate certain CSS properties by using their short-hand properties (such as font to combine font-family, font-size, font-style, and font-weight).
  • Lastly, give your IDs and classes names that are more meaningful than .dfltt or .fsx15. Anyone should be able to look at your code and understand what these references are referring to. In addition, don't use names that describe the resultant effect since the effect might change; for example, you have .blacktext10 but it's referring to green text. I assume you changed your mind? That's why you don't name IDs or classes for their aesthetic effect. Name them after what object they are referring to instead.
The first two rules will have the most direct effect on your code. Most of the rest are just for organization purposes, however you should still fix them as a matter of good coding practice. If your code isn't organized it makes it difficult to find problems and make changes. It also means your code is less efficient regarding readability, file size, and download times.
Was This Post Helpful? 0
  • +
  • -

#6 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 13 June 2006 - 09:08 PM

Ok I just got the same advice from someone else about the absolute positioning and the DOC type. Problem is when I tried to remove the absolute positioning, with what I believe is the correct DOC type the hyperlinks almost went off the screen and were too far off to get back into position (beyond -300px) I have tried to make my code leaner and cleaner but my positioning just gets a little worse. What can I do here to not use absolute positioning and is this the correct DOC type?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style type="text/css">
.fsx03 {
font-size: 13px;
color: #000000;
font-family: Times New Roman;
}  

.fsx07 {
font-size: 21px;
color: #d1d1d1
Times New Roman;
} 

.fsx09 {
font-size: 27px;
color: #d1d1d1;
Times New Roman;
}  
.txdec {text-decoration: none;}
.dfltt {font-family:Times New Roman;font-size:14px;font-weight:normal;text-decoration:none;text-align:left;}
body {margin:0;height:100%;width:100%;}
body { background: url(http://israel.clawz.com/GreyCkBrd2.bmp); }
.nametext { color: black; padding: 5px; font-family:
Impact, sans-serif; font-size: 16pt; }
.blacktext10 { color: green; }
.orangetext15 { color: black; padding: 2px; }
body, table, td {background-color:transparent;border:none;border-width:0}

  </style>
</head>
<body>
<div id="Oobj2"
style="position: relative; z-index: 1; visibility: visible; height: 116px; width: 887px; top: 50px; left: 95px;">
<div class="style" id="Grtf2"><font class="fsx09"><b>The
Friendliest Way to Make Your Dreams Come True</b></font><font
class="fsx07" "><b><br> Christie
Thornton</b></font><br>

</div>
<font class="fsx03"><b>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]<br>
</b></font></div>
<div> 
  
	  <img class="x"
style="width: 850px; height: 600px; position: relative; top: -70px; left: 78px;"
alt="Example Image"
src="http://www.angelfire.com/linux/2130/Christie2.gif"></td>
	 
	</div>
<div style="position: absolute; top: 165px; left: 657px;"
id="Grtf15" class="dfltt"><font class="fsx07"
face="Arial"><a
href="mailto:[email protected]" class="txdec"><font
class="txdec" color="#d1d1d1">Contact Me</font></a><br>
</font></div>
</div>

<div id="Oobj19"
style="position: absolute; z-index: 2; visibility: visible; left: 475px; top: 165px; width: 141px; height: 31px;">
<div id="Grtf17" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Neighborhoods</font></a><br>
</font></div>
</div>
<div id="Oobj20"
style="position: absolute; z-index: 3; visibility: visible; left: 320px; top: 165px; width: 123px; height: 31px;">
<div id="Grtf18" class="dfltt"><font
class="fsx07" color="#d1d1d1" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Development</font></a><br>
</font></div>
</div>
<div id="Oobj21"
style="visibility: visible; height: 31px; width: 72px; z-index: 4; left: 215px; top: 165px; position: absolute;">
<div id="Grtf19" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Listings</font></a><br>
</font></div>
</div>
<div id="Oobj24"
style="position: absolute; z-index: 5; visibility: visible; left: 125px; top: 165px; width: 56px; height: 31px;">
<div id="Grtf23" class="dfltt"><font
class="fsx07" face="Arial"><a
href="http://www.christiethornton.com" class="txdec"><font
class="txdec" color="#d1d1d1">Home</font></a><br>

</font></div>
</div>

</body>
</html>

This post has been edited by Israel: 13 June 2006 - 09:50 PM

Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 14 June 2006 - 10:47 AM

View PostIsrael, on 13 Jun, 2006 - 08:00 PM, said:

Ok I just got the same advice from someone else about the absolute positioning and the DOC type. Problem is when I tried to remove the absolute positioning, with what I believe is the correct DOC type the hyperlinks almost went off the screen and were too far off to get back into position (beyond -300px) I have tried to make my code leaner and cleaner but my positioning just gets a little worse. What can I do here to not use absolute positioning and is this the correct DOC type?
That doctype is fine. It's XHTML though so all elements must be explicitly closed, including elements without end tags. Examples: <div></div>, <img src="image.gif"/>, <br/>, <meta name="author" content="name"/>.

The way to avoid absolute positioning is to use logical order and nesting. You might do something like:

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>


Also, this is invalid:

.fsx07 {
font-size: 21px;
color: #d1d1d1
Times New Roman;
}


It should be (with a double quoted multi-word font name too):

.fsx07 {
font-size: 21px;
color: #d1d1d1;
font-family: "Times New Roman"
;
}


Generally, you also write it in short-hand form with the equivalent Mac font and a basic font-family as a back-up:

.fsx07 {
color: #d1d1d1;
font: 21px "Times New Roman", Times, serif;
}

Was This Post Helpful? 0
  • +
  • -

#8 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 14 June 2006 - 05:51 PM

Ok, I'm following your suggestions and trying to trim the code down and make it more logical as I also study for my finals. But I'm having trouble finding an example of a nested <div> for positioning. Lots of examples come up in google when I search for "CSS + nesting" but the ones I saw seem to mostly all be for fonts and colors. Could you give me an example of that?

This post has been edited by Israel: 14 June 2006 - 05:51 PM

Was This Post Helpful? 0
  • +
  • -

#9 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 15 June 2006 - 12:45 AM

View PostIsrael, on 14 Jun, 2006 - 04:43 PM, said:

Ok, I'm following your suggestions and trying to trim the code down and make it more logical as I also study for my finals. But I'm having trouble finding an example of a nested <div> for positioning. Lots of examples come up in google when I search for "CSS + nesting" but the ones I saw seem to mostly all be for fonts and colors. Could you give me an example of that?
I gave you an example of that already:

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>


The header, navigation, content, and footer div will be positioned within the container div. The header div will come first, followed by the navigation, content, and footer div. Each lower div will be forced downward as the height of the div above it increases. Thus their positions are defined by their surroundings. From there, you modify their positions as desired (without absolute positioning).

If you want something like the navigation and content div to be on the same line, you can use CSS float: left on them. This means you'll also need to use clear: left on the footer to keep it below those two div as well. If you want to center the container, you'll need to assign it a width and add a CSS margin-left: auto; margin-right: auto or just margin: auto declaration to it.

In any case, your content is restricted to the container's area and flows in a logical order.
Was This Post Helpful? 0
  • +
  • -

#10 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 15 June 2006 - 08:11 PM

Ok... I've just learned how to use float a little but I can't see what I'm doing when I position because the text is now going behind the main image. I know how to use z-index to fix this with absolute or relative positioning but I cut all that out and when I try to put z-index in the <style> tags of the <head> I seem to get no results? Should I be using something other than z-index? I look on W3C but all I found was this.

Here's what I'm looking at now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style type="text/css">

  
.style1 {
font-size: 13px;
color: #000000;
font: 14px "Times New Roman", Times, serif;
}  

.style2 {
float: right;
font-size: 21px;
color: #d1d1d1
font: 21px "Times New Roman", Times, serif;
} 

.style3 {
font-size: 27px;
color: #d1d1d1;
font: 26px "Times New Roman", Times, serif;
right: 20px;

}  
.hyper {
text-decoration: none;
color: #d1d1d1
}
body { background: url(http://israel.clawz.com/GreyCkBrd2.bmp); }  

</style>
</head>
<body>
<div id="header" class="style3"><b>The
Friendliest Way to Make Your Dreams Come True<b><br></div>
<div id="Ct" class="style2"> Christie
Thornton</b><br>
</div>

<div id="digits" class="style1"><b>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]<br>
</b></div> 
  
	  <img class="x"
style="width: 850px; height: 600px; position: relative; top: -70px; left: 78px;"
src="http://www.angelfire.com/linux/2130/Christie2.gif"></td>
	 
	</div>
<div id="Contact" class="style2"><a
href="mailto:[email protected]" class="hyper">Contact Me</font></a><br>
</div>


<div id="Hoods" class="style2"><a
href="http://www.christiethornton.com" class="hyper">Neighborhoods</a><br>
</div>

<div id="Develop" class="style2"><a
href="http://www.christiethornton.com" class="hyper">Development</a><br>
</div>

<div id="List" class="style2"><a
href="http://www.christiethornton.com" class="hyper">Listings</a><br>
</div>

<div id="Home" class="style2"><a
href="http://www.christiethornton.com" class="hyper">Home</a></div>
</body>
</html>

This post has been edited by Israel: 15 June 2006 - 08:16 PM

Was This Post Helpful? 0
  • +
  • -

#11 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 16 June 2006 - 04:28 AM

View PostIsrael, on 15 Jun, 2006 - 07:03 PM, said:

Ok... I've just learned how to use float a little but I can't see what I'm doing when I position because the text is now going behind the main image. I know how to use z-index to fix this with absolute or relative positioning but I cut all that out and when I try to put z-index in the <style> tags of the <head> I seem to get no results? Should I be using something other than z-index? I look on W3C but all I found was this.
  • All elements must be closed in XHTML including br and meta elements.
  • Use a logical layout (including a container element).
  • Opening and closing tags must be in a logical order. Example: if you open a b element inside a div element, that b element must be closed before its parent element (the div) can be closed. It can't "leak out".
    • Right: <div><b></b></div><div><b></b></div>
    • Wrong: <div><b></div><div></b></div>

  • Stylistic elements such as b should be avoided in favor of CSS (Cascading Style Sheets). Example: font-weight: bold.
  • Layout images should be presented as backgrounds of elements such as div. Context and content images such as photos and charts are presented using the img element.
  • Z-indexing doesn't work unless an element has the position property set to relative or absolute. If an element is set to its default position of static, then z-index doesn't work. Using it should be avoided except to achieve special effects that you otherwise can't achieve. Nothing you've presented here requires special positioning through either the position or z-index properties.
  • Placing CSS in the style element should have the same effect as placing it inline. You should avoid placing CSS inline, however.
  • Validate your code: http://validator.w3.org/.
Example Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-us">
<head>

<!-- This Page Is Valid XHTML 1.0 Strict! -->

<meta http-equiv="content-type" content="text/html; charset = iso-8859-1;"/>
<meta name="date" content="2006 June 16"/>

<title>Christie Thornton, Making Home Buying Enjoyable.</title>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: normal;
  font-weight: normal;
  }

body {
  padding-top: 10px;
  background: #666 url("http://israel.clawz.com/GreyCkBrd2.bmp");
  }

#container {
  width: 850px;
  height: 600px;
  margin: auto;
  background: url("http://www.angelfire.com/linux/2130/Christie2.gif") no-repeat;
  font-family: "Times New Roman", Times, serif;
  }
#header {
  width: 700px;
  height: 100px;
  margin-bottom: 1px;
  padding: 5px 10px;
  }
#header h1 {
  color: #d1d1d1;
  line-height: 26px;
  font-size: 26px;
  font-weight: bold;
  }
#header h2 {
  color: #000;
  line-height: 20px;
  font-size: 20px;
  font-weight: bold;
  }
#header address {
  display: inline;
  line-height: 16px;
  font-size: 14px;
  font-weight: bold;
  }
#navigation {
  width: 720px;
  height: 40px;
  text-align: center;
  }
#navigation ul,li {
  display: inline;
  }
#navigation li {
  border-left: 2px solid #d1d1d1;
  padding-left: 4px;
  }
#navigation li:first-child { /* not supported by MSIE */
  border-left: 0;
  padding-left: 0;
  }
#navigation a {
  color: #d1d1d1;
  line-height: 40px;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  }
</style>

</head>
<body>
<div id="container">

<div id="header">

<h1>The Friendliest Way to Make Your Dreams Come True</h1>
<h2>Christie Thornton</h2>

<address>
Phone: (770) 555&#x2013;1212<br/>
Cell: (770) 555&#x2013;2121<br/>
Email: [email protected]
</address>

<!-- Address element used because the information refers to calling and electronic mailing addresses. Character entity U+2013 is the en dash, used between numbers. -->

</div><!-- #header -->

<div id="navigation">
<ul>
<li><a href="http://www.christiethornton.com/">Home</a></li>
<li><a href="http://www.christiethornton.com/">Listings</a></li>
<li><a href="http://www.christiethornton.com/">Development</a></li>
<li><a href="http://www.christiethornton.com/">Neighborhoods</a></li>
<li><a href="mailto:[email protected]">Contact Me</a></li>
</ul>
</div><!-- #navigation -->

</div><!-- #container -->
</body>
</html>

This post has been edited by Arbitrator: 16 June 2006 - 06:05 PM

Was This Post Helpful? 0
  • +
  • -

#12 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 821
  • Joined: 22-November 04

Re: Text coming apart with Screen Resolution

Posted 16 June 2006 - 04:34 PM

Thank you once again Arbitrator, you're the man. You've taught me a lot through these. I thought I had a grasp on html (...turns out I need to go back and refesh some more) and I hadn't really tried with CSS before a few weeks ago. Thanks for dragging my ass over the coals before giving me the solution. I appreciate the tutoring and not being hounded for being a stupid noob. Thanks :D
Was This Post Helpful? 0
  • +
  • -

#13 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Text coming apart with Screen Resolution

Posted 16 June 2006 - 06:08 PM

Heh, sure. If I call you "n00b" it doesn't help anything.

Btw, apparently the forum converted the character entities for the en dash into the actual dash; when the characters are entered literally the code is invalid. I did something to trick it into showing the entities as I had them written though, so the code for the phone numbers should be correct now.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1