How do I get text to stay in relation to the page

Brendaw · #1 August 15th, 2008, 11:30 PM

This may seem very basic but I am just learning all this stuff. I have text that
I want to stay centered within my background image. When I resize the window it moves over my image. Is there a way to make it stay centered when i resize the window?

drhowarddrfine · #2 August 15th, 2008, 11:42 PM

It is easy but the fix depends on how you wrote it so we need to see the markup.

Brendaw · #3 August 15th, 2008, 11:50 PM

This is my css/html for the page. I am new at this and am still learning so if you can explain what I need to do that would be very helpful. If I am doing it all wrong please let me know. Thanks

Expand|Select|Wrap|Line Numbers

 @charset "UTF-8";

#Blog {

    position: absolute;

    top: 59%;

    right: 58%; z-index:2; font:Georgia, "Times New Roman", Times, serif;

    font-size: 21px;

}

#BG {z-index: 1;}

#Classes {

    position: absolute;

    top: 68%;

    right: 52%;

    z-index:2;

    font-size: 22px;

}

#Gallery {

    position: absolute;

    top: 59%;

    right: 39%;

    z-index:2;

    height: 35px;

    font-size: 22px;

}

#AboutUs {

    position: absolute;

    top:68%;

    right: 34%;

    z-index:2;

    height: 35px;

    font-size: 22px;

}
 
#Mail {

    position: absolute;

    top: 76%;

    right: 40%;

    z-index:2;

    height: 35px;

    font-size: 22px;

}

#.width {width:100%; min-width:600px;}

#.height {height:100%; min-width:532px;}
 
<!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>Untitled Document</title>

<link href="website templates/untitled.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

body {

}

-->

</style></head>
 
<body>

<div id="BG"><img src="website templates/background.jpg" width="100%" height="100%"/>

  <div id="Blog"><a href=""><img src="website templates/flowerlink.gif">Blog</a></div>

<div id="Classes"><img src="website templates/flowerlink.gif">Classes/Calendar</div>

<div id="Gallery"><img src="website templates/flowerlink.gif">Photo Gallery</div>

<div id="AboutUs"><img src="website templates/flowerlink.gif">About Us</div>

<div id="Mail"><img src="website templates/flowerlink.gif">Join Our Mailing List</div>
 
</div>

</body>
 
</html>

David Laakso · #4 August 17th, 2008, 11:08 PM

You'll have far better luck if you structure the page using floats rather than absolute positioning. Start with a layout that is known to be stable, robust, and cross-browser reliable. Here are some [1].

Code to compliant browsers-- Opera, Safari, Firefox. Make frequent check-backs to IE/6 and IE/7.

[1]
http://blog.html.it/layoutgala/

What is Bytes?

Popular Articles