19 replies [Last post]
Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Ok, I've been pulling my hair out tonight reading W3C and trying to figure out what I'm doing wrong. For some reason this code seems to work perfect on every browser I've tried (Windows, Linux, Mac) but only at 1024x768 screen resolution. When I adjust it the text goes all over the place. Can anybody help me with this?

<!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">
<!--
body {
background-color: #CCCCCC;
}
-->
  </style>
  <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>
}
#Oobj2 {
position:absolute; left:40px;
top:28px;
z-index:0
} #Oobj17 {
position:relative;
;
} img.x {
position:absolute;
left:77px;
top:29px;
z-index:0
}
#Grtf15 {
position:absolute;
{vertical-align:text-top}
left:662px;
top:72px;
z-index:0
}
#Grtf17 {
{vertical-align:text-top}
position:relative;
left:82px;
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;
<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://israel.clawz.com/Christie2.gif"></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<div id="Oobj17"
 style="position: absolute; top: 72px; height: 31px; left: 662px; width: 130px; vertical-align: middle;">
<div id="Grtf15" class="dfltt" vertical-align=""
 middle=""><font class="fsx07" face="Arial"><a
 href="mailto:[email protected]" class="txdec"><font
 class="txdec" color="#d1d1d1">ContactMe</font></a><br>
</font></div>
</div>
<div id="Oobj19"
 style="position: absolute; z-index: 2; visibility: visible; left: 478px; 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 know its a mess, but I've had many, many, failed attempts tonight, Sorry.

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Text falling apart with Screen Resolution

A link to the page would be better but first, as you are using position:absolute;, you may find an answer there :
http://www.csscreator.com/css-forum/ftopic13756.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text falling apart with Screen Resolution

I'm afraid what you really need to do is ditch the automatically generated code and write some proper HTML first, THEN add the css.

Verschwindende wrote:
  • CSS doesn't make pies

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Ok, I see position:abosute is not recommended but what would one suggest?

<html>
<head>
  <meta>
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style>
.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>
</head>
<body>
<div>
<div><font><b>&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;The
Friendliest Way to Make Your Dreams Come True</b></font><br>
<font><b>&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; Christie
Thornton</b></font><br>
<font><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;
<br>
</b></font></div>
</div>
<table>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><br>
      <img></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<div>
<br>
<div><font><a><font>Contact Me</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Neighborhoods</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Development</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Listings</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Home</font></a><br>
</font></div>
</div>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text falling apart with Screen Resolution

WHat I already said - get some real HTML content in there, THEN start styling it.

Verschwindende wrote:
  • CSS doesn't make pies

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

I do not understand. What is my html missing?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text falling apart with Screen Resolution

It's OVERLY complicated, doesn't have any strcutural sense, and is completely missing the point of CSS layouts.

You've got all that styling in the <head> section which doesn't actually apply to ANY of the HTML.

You're using tables for layout.

You're using spaces to indent text.

<table>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><br>
      <img></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table> 

Huh? Thsi table doesn't actually contain anything.

You need to learn some HTML basics first, and how to construct a page properly.

Pages need structural markup - heading tags for titles, <p> tags for paragraphs of text, <div>s to group elements together.

Can you mock up an image of what you want it to look like, or maybe write a quick description of what each part is, and we can help you out from there.

Verschwindende wrote:
  • CSS doesn't make pies

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

I believe if you look at the code I have at 1024x768 you should see exactly what I'm trying to achieve.

Your right, my code sucks. I kept trying to switch back from WYSIWYG to hard-coding, and from one html editor to the next (Not to mention the orginal code came from my boss and had mistakes to begin with)

But I think your last post helped me understand something. Do you have to put text in a paragraph or a heading to apply CSS properly? Most of this time I've just been trying to apply it to the raw text itself. (I did try putting it in a heading once though, couldn't fix that either) This would really explain why I found so little after searching so much.

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Text falling apart with Screen Resolution

Using dreamweaver gives that sort of coding (and dreamweaver tidy may have helped for the obscure css).
You can style any valid tag <h1>, <h2>, <h3>, <p> etc.
In the Useful CSS section you will find nice sites to learn the basics (W3 schools...)

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Quote:
You can style any valid tag

Then how do I do this for a <div> tag. Especially since I have about 8 of them...
I tried to clean the code up some but I'm still having problems them screen res.

<DOCTYPE>
<html>
<head>
  <meta>
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style>
.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>
<div><font><b>The
Friendliest Way to Make Your Dreams Come True</b></font><font><b><br> Christie
Thornton</b></font><br>

</div>
<font><b>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]<br>
</b></font></div>
<table>
  
      <img></td>
     
    </tr>
  </tbody>
</table>

<div>
<br>
<div><font><a><font>Contact Me</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Neighborhoods</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Development</font></a><br>
</font></div>
</div>
<div>

<div><font><a><font>Listings</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Home</font></a><br>
</font></div>
</div>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text falling apart with Screen Resolution

First thing to do is get a proper doctype:

www.alistapart.com/articles/doctype

Next, remove ALL that CSS from the head section of the document, it's not helpful and it's not doing anything except confusing us.

Next, browse to the "How To" section of this site and look for a topic by me called "Divitis: What it is and How to Cure it". Have a read of that, it's quite long, but it shoudl give you some ideas about using HTML properly for your layout.

Let us know when you've done these three things Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Ok, I've read your links and tried to trim the code down. And I know that absolute positioning is a no no but when I use relative positioning now the links go almost off the page and I can't them back. It seems my Text is positioning a little worse too. I think I might have the right DOC type now though. I'm about to pull my hair out and I have finals at school this week. I know there's probably some magical <div> that would wrap up 90% of all my <div>'s into one (for my links) but its just escaping me.... What should I use in place of absolute positioning for my text?

<DOCTYPE>
<html>
<head>
  <meta>
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style>
.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>
<div><font><b>The
Friendliest Way to Make Your Dreams Come True</b></font><font
class="fsx07" "><b><br> Christie
Thornton</b></font><br>

</div>
<font><b>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]<br>
</b></font></div>
<div> 
  
      <img></td>
     
    </div>
<div><font><a><font>Contact Me</font></a><br>
</font></div>
</div>

<div>
<div><font><a><font>Neighborhoods</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Development</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Listings</font></a><br>
</font></div>
</div>
<div>
<div><font><a><font>Home</font></a><br>

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

</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text falling apart with Screen Resolution

<div>
<div><font><a><font>Home</font></a><br>

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

Why so many tags?

Verschwindende wrote:
  • CSS doesn't make pies

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Text falling apart with Screen Resolution

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 9 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Text falling apart with Screen Resolution

Quote:
.blacktext10 { color: green; } 
.orangetext15 { color: black; padding: 2px; }
This will only confuse thing more...

And you have
<font><b> 
Phone: (770) 555-1212<br> 
Cell: (770) 555-2121<br> 
Email:[email protected]<br> 
</b></font></div> 
<div> 
  
      <img></td>
closing td that is not open.

Remove all those <b></b>, <font></font> tags they should be done in the css not here. If you use the xhtml strict doctype you need to change all of the <br> to <br> That is, add a space and a forward slash to it. I tried to post the code but it wouldn't display it :twisted:

I think you really should take a few steps backwards and start again, this time with a blank page and add the basic bits of code first, then gradually add what else you need.

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Ok, I took someone's advice and pretty much started from stratch. Now I'm having trouble 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: http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2

Here's what I'm working with now:

<DOCTYPE>
<html>
<head>
  <meta>
  <title>Christie Thornton, Making Home Buying Enjoyable.</title>
  <style>

  
.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><b>The
Friendliest Way to Make Your Dreams Come True<br></div>
<div> Christie
Thornton<br>
</div>

<div>
Phone: (770) 555-1212<br>
Cell: (770) 555-2121<br>
Email:[email protected]
</div> 
  
      <img></td>
     
    </div>
<div><a>Contact Me</font></a>
</div>


<div><a>Neighborhoods</a>
</div>

<div><a>Development</a>
</div>

<div><a>Listings</a>
</div>

<div><a>Home</a></div>
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Text falling apart with Screen Resolution

You're going to have to edit your post and tick the 'disable HTML in this post' option because all your attributes have been stripped out.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Ok, here ya go:

<!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<br /></div>
<div id="Ct" class="style2"> Christie
Thornton<br />

</div>

<div id="digits" class="style1">
Phone: (770) 555-1212<br />
Cell: (770) 555-2121<br />
Email:[email protected]
</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>
</div>


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

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

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

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Text falling apart with Screen Resolution

Is the picture just s'posed to sit under the text at the top? If so, remove the styling.

<img class="x" src="http://www.angelfire.com/linux/2130/Christie2.gif"> You may want to add some margins top and bottom of the image to create space. If so, don't add it to the HTML, attach it the x class in your styles. You've also got a closing </td> which shouldn't be there (I think there's a couple of other stray tags too).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Israel213
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2006-06-12
Posts: 13
Points: 0

Text falling apart with Screen Resolution

Ok, I'm not going to lie, I had a little help to get this far. Someone in another forum got mad and just re-wrote the page and posted it. However I'm trying to add just one last image and I'm stuck on lining up the height. I want to put it near the bottom of the main image. It's the one called "footer". Anyway, I poked at this a while and finally figured whatever I would come up with will probably be a coding disaster and I need to learn it right. Can anyone show me the correct way to line up the height on this image?

<!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: 30px;
  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 {
  line-height: 40px;
  width: 720px;
  height: 40px;
  text-align: center;
  }
#navigation ul,li {
  display: inline;
  }
#navigation li {
  border-left: 0px solid #d1d1d1;
  padding-left: 25px;
  }
#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;
  }
#footer { 
   margin: 0 650px; 
   height: 20px;
   width: 80px;
   top: 331px; 
   background: url("http://israel.clawz.com/mutatred.gif") no-repeat;
   }

</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–1212<br/>
Cell: (770) 555–2121<br/>
Email: 
</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 id="footer">
</div>
</div><!-- #container -->

</div><!--footer-->