Welcome to WebmasterWorld Guest from 54.225.38.176

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

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


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!

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


Is there anything else I can add to help?
12:26 am on July 16, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


Is there anything else I can add to help?

the HTML - or relevant portions thereof.

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


<!-- End ImageReady Slices -->

<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.

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


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?

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

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


Well, try popping the doctype in there. I'm really at a loss for this one. Maybe someone else could help. Hint, hint, moderators.
2:29 am on July 17, 2008 (gmt 0)

New User

5+ Year Member

joined:Dec 1, 2006
posts:5
votes: 0


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>

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

New User

5+ Year Member

joined:Dec 1, 2006
posts:5
votes: 0


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]

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

Junior Member

5+ Year Member

joined:Dec 11, 2006
posts:57
votes: 0


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.