PDA

Click to See Complete Forum and Search --> : problem with absolute position

Doug03
07-20-2003, 02:40 PM
Hi All,

I have a problem and I am entirely new to CSS so I can't figure it out. What I want to do is get my home page positioned better on search engines with the help of CSS. My problem is that my home page is one large picture with a few links and no copy; thus the reason is won't work on a search engine. I heard about something called Z-order in CSS, and I'm not sure if it is that or absolute positioning. I want to put one full page on top of another. What I want to do is put some copy on the first page so that a search engine can read it, then my home page on top of that. I have it somewhat figured out, but not entirely. Here is the code so far:
<html>
<head>
<title>Z-order Example</title>
<style type="text/css">
<!--
div.one {position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 100%;
color: white;
background-color: blue;
z-index: 2;}
div.two {position: absolute;
top: 40px;
left: 0px;
height: 250px;
width: 100%;
background-color: yellow;
z-index: 3;}
-->
</style>
</head>
<body>
<div class="one">This is where I want my copy to go so search engines can read it..</div>
<div class="two">This yellow section is where I want my home page to go.</div>
</body>
</html>

What I want to do is have my home page take up the entire area of the yellow. Can anyone help? Thanks for your help!!!

Doug Atkins
David Harrison
07-20-2003, 05:50 PM
Change absolute to fixed, see what happens.
DaveSW
07-21-2003, 05:50 AM
an alternative method to achieve the same result would be to put

<div class="one" style="display:none;">
Doug03
07-21-2003, 06:37 AM
Sorry everyone...I should have shown the example. Here is a link:http://www.geocities.com/cyberartmaster/absolute.html
DaveSW
07-21-2003, 06:52 AM
Try this. It seems similar to what you want. my other method would be easier tho.

<html>
<head>
<title>Z-order Example</title>
<style type="text/css">
<!--
body{margin:0px;}
div.one {position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 100%;
color: white;
background-color: blue;
z-index: 2;}
div.two {position: absolute;
top: 20px;
left: 20px;
height: 250px;
width: 100%;
background-color: yellow;
z-index: 3;}
-->
</style>
</head>
<body>
<div class="one">This is where I want my copy to go so search engines can read it..</div>
<div class="two">This yellow section is where I want my home page to go.</div>
</body>
</html>
Doug03
07-21-2003, 07:02 AM
Thanks Davesw, that helps. I am getting closer. My major hang up now is what code do I use so that my homepage will take up the area in yellow?
DaveSW
07-21-2003, 07:06 AM
What do you mean exactly? you want your homepage to take up the yellow area. So do you want just to have the image inside it, the yellow bit fill the screen or what exactly?
Doug03
07-22-2003, 05:23 AM
OK, based on what you told me yesterday, if I want to have the yellow take up the entire screen, I simply write top: 0px: left: 0px. I gathered that. What I want is this. Suppose someone is on google and they click on a link to my site. I want them to see only this: http://www.geocities.com/cyberartmaster The hitch is that I want to write a page that search engines will see and the surfer won't, thus the absolute positioning. Do you understand what I'm tyryiong to do? Thanks!
DaveSW
07-22-2003, 06:21 AM
I think what you wnat would be better achieved using this


.main{position:absolute;
left:0px;
top:0px;
z-index:10;
width:100%;
}

<div style="display:none;">this content will not be displayed anywhere on the page, but when the search engine browses through it will read this first.</div>

<div class="main">This is your main page. All your content that you wish to be displayed goes here.</div>

Does this make sense?
The other way was simply to use absolute positioning and put them one on top of the other.
Doug03
07-23-2003, 05:45 AM
It sounds like it will work. I'll try it and check on search engine position in a few months, and I'll let you know what happens. Thanks again for your help.