I Can't Get My Text (In A Div) to stay in place for the life of me! - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

I Can't Get My Text (In A Div) to stay in place for the life of me!

Div moves with screen resolution change

Preeminent

5:03 am on Jul 15, 2008 (gmt 0)

10+ Year Member

Hi All,
I have just started working with css and love it and hate it all at once! I have been working on a site that was mostly designed in photoshop-cut it up and rollovers added. Brought it into dreamweaver and I wanted to try my luck with some css. I have a "content/text" box as part of my photoshop layout and I am trying to position text in a div over this box. Well, with my personal screen resolution, it looks fine and then when you change resolution the div goes all haywire and moves to the left or right depending on what resolution you choose.
I've tried it both ways:absolute and relative and it didn't help. Im hoping someone can spot what I am doing wrong. Here is my css code:

<style type="text/css">
<!--
body {
background-image: url(backgroundgradient.gif);
background-repeat: repeat;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
font-size: small;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
color: #0000FF;
text-decoration: underline;
}

#content {
position: absolute;
left: 480px;
top: 240px;
width: 400px;
}

#headline {
position: absolute;
left: 535px;
top: 220px;
width: 200px;
}

#ad {
position: absolute;
left: 540px;
top: 570px;
width: 200px;
}

.style2 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #808080;
font-size: small;
}
.style4 {
font-size: large;
font-weight: bold;
color: #C4B6B7;
}
.style5 {color: #FFFFFF}
.style6 {
font-size: x-small;
color: #FFFFFF;
}
-->
</style>

"content", "ad", and "headline" is what is in question.

Thanks in advance!

Preeminent

11:39 pm on Jul 15, 2008 (gmt 0)

10+ Year Member

Is there anything else I can add to help?

webfoo

12:26 am on Jul 16, 2008 (gmt 0)

10+ Year Member

Is there anything else I can add to help?

the HTML - or relevant portions thereof.

Preeminent

12:43 am on Jul 16, 2008 (gmt 0)

10+ Year Member

<div id="headline">
<p class="style4">LETS FACE IT</p>
</div>

<div id="content">
<p><span class="style5">CONTENT TEXT IS WRITTEN HERE</span></p>
</div>

<div id="ad">
<p class="style6">Contact Us To See Your Ad Here.</p>
</div>
</BODY>
</HTML>

I obviously didnt post all the imageready/photoshop script and slices with this, but please let me know if that would help as well.

Preeminent

12:06 am on Jul 17, 2008 (gmt 0)

10+ Year Member

I have checked my page at w3. The css is perfect, but my html is off because it doesn't have a doctype. I did not realize this. I assume this is because of photoshop/imageready?
"No DOCTYPE found! Attempting validation with HTML 4.01 Transitional.

The DOCTYPE Declaration was not recognized or is missing."

Would this have anything to do with it?

webfoo

1:00 am on Jul 17, 2008 (gmt 0)

10+ Year Member

Well, try popping the doctype in there. I'm really at a loss for this one. Maybe someone else could help. Hint, hint, moderators.

kevindy

2:29 am on Jul 17, 2008 (gmt 0)

10+ Year Member

Here is my work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
body {
background-repeat: repeat;
background-color: #000000;
text-align: center;
}
#main {
text-align: left;
margin-right: auto;
margin-left: auto;
width: 1003px;
}
#all {
position: absolute;
width: 1003px;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
font-size: small;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
color: #0000FF;
text-decoration: underline;
}

#content {
width: 400px;
z-index: 0;
margin-right: auto;
margin-left: auto;
left: 301px;
top: 240px;
text-align: center;
position: absolute;
}

#headline {
position: absolute;
width: 200px;
z-index: 1;
margin-right: auto;
margin-left: auto;
left: 401px;
top: 200px;
text-align: center;
}

#ad {
position: absolute;
width: 200px;
z-index: 2;
color: #000000;
left: 401px;
top: 500px;
text-align: center;
}

.style2 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #808080;
font-size: small;
}
.style4 {
font-size: large;
font-weight: bold;
color: #C4B6B7;
}
.style5 {color: #FFFFFF}
.style6 {
font-size: x-small;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="main">
<div id="all">
<div id="headline">
<p class="style4">LETS FACE IT</p>
</div>

<div id="content">
<p><span class="style5">CONTENT TEXT IS WRITTEN HERE</span></p>
</div>

<div id="ad">
<p class="style6">Contact Us To See Your Ad Here.</p>
</div>
</div>
</div>
</body>
</html>

kevindy

2:36 am on Jul 17, 2008 (gmt 0)

10+ Year Member

The div goes all haywire and moves to the left or right depending on what resolution you choose.

Because the position of #content, #headline and #ad base on <body>.
[Mine is base on #all]

Preeminent

3:22 am on Jul 17, 2008 (gmt 0)

10+ Year Member

Kevindy!
I TRUELY appreciate the time you took to look this over for me. This worked! Thank You So Much! I am now going to really scan this over and look at all the elements that you added, so I can understand better.