homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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+ Year Member



 
Msg#: 3698556 posted 5:03 am on Jul 15, 2008 (gmt 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!

 

Preeminent

5+ Year Member



 
Msg#: 3698556 posted 11:39 pm on Jul 15, 2008 (gmt 0)

Is there anything else I can add to help?

webfoo

5+ Year Member



 
Msg#: 3698556 posted 12:26 am on Jul 16, 2008 (gmt 0)

Is there anything else I can add to help?

the HTML - or relevant portions thereof.

Preeminent

5+ Year Member



 
Msg#: 3698556 posted 12:43 am on Jul 16, 2008 (gmt 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.

Preeminent

5+ Year Member



 
Msg#: 3698556 posted 12:06 am on Jul 17, 2008 (gmt 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?

webfoo

5+ Year Member



 
Msg#: 3698556 posted 1:00 am on Jul 17, 2008 (gmt 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.

kevindy

5+ Year Member



 
Msg#: 3698556 posted 2:29 am on Jul 17, 2008 (gmt 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>

kevindy

5+ Year Member



 
Msg#: 3698556 posted 2:36 am on Jul 17, 2008 (gmt 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]

Preeminent

5+ Year Member



 
Msg#: 3698556 posted 3:22 am on Jul 17, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved