Welcome to WebmasterWorld Guest from 54.167.157.247

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)

5+ 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!

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

5+ Year Member



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

5+ Year Member



Is there anything else I can add to help?

the HTML - or relevant portions thereof.

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

5+ Year Member



<!-- 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 Jul 17, 2008 (gmt 0)

5+ 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?

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

5+ 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.
2:29 am on Jul 17, 2008 (gmt 0)

5+ 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>

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

5+ 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]

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

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

Featured Threads

Hot Threads This Week

Hot Threads This Month