CSS Absolute Positioning Question . . . I think?

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Absolute Positioning Question . . . I think?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS Absolute Positioning Question . . . I think?

Page: [1]


Mike_R Posts: 124 Joined: 1/15/2003 Status: offline	CSS Absolute Positioning Question . . . I think? - 9/27/2003 20:20:38 When it comes to CSS, I know little more than what I've picked up in a couple of brief tutorials. I'm not quite ready to go there for my entire site yet, but I would like to incorporate one facet of CSS to solve a dilemma. Currently, I have my page content very far down the page. You have to get by my inordinate number of header images and left menu bar before the content appears. This, as I understand it, is not good for the SE spiders and getting indexed. So, what I would like to do is use some absolute positioning (please tell me if I'm using the wrong term here) to move the code for the content up in the page's code, but have it appear where it currently does when rendered. Is there a way to do this? Thanks Mike R


Boo Posts: 136 Joined: 9/20/2002 Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/28/2003 4:44:22 use a <div> to position the search text (in reply to Mike_R)


Mike_R Posts: 124 Joined: 1/15/2003 Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/28/2003 9:21:38 Thanks, Boo. Forgive my ignorance, but how do you do that? I know DIV tags apply an effect to an entire section of code, but how would I use DIV to mark several lines of text and have them show up at a certain place on the page? Mike R (in reply to Boo)

Donkey

Posts: 3864
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

RE: CSS Absolute Positioning Question . . . I think? - 9/28/2003 13:41:35

This is how I would do it, but there are CSS experts in this forum who may come up with a better way.
First create a div class on your style sheet and position it where you want the content to appear by specifying the "top", "left" and "width" attributes. e.g.

.content1 {
position: absolute; 
left: 2%; 
top: 85%;
width: 96%;
}

I used percentages but you can use pixels, ems, etc.
By making the "left" 2% and "width" 96% you will centralise the block of content 2% in from the left and 2% in from the right.
Then you move your content to the top of your html page (or wherever you want it for the SE spiders) but enclose it within the div e.g.

<div class="content1"> your content goes in here including formatting tags </div>

The content will always appear where you want it regardless of where it appears on your html page.

_____________________________

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Mike_R)


Mike_R Posts: 124 Joined: 1/15/2003 Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/30/2003 0:06:52 Donkey, thanks for the coding tips. I gave it a try and it works perfectly as long as the screen size is 1024 x 768. But when I try it in different size browsers, the contents shift right into my right sidebar. Is there a way to avoid that? Also, I placed my contents in a table. Is that the best way, or is it better to use boxes? I've never used them before. Mike < Message edited by Mike_R -- 9/30/2003 12:08:07 AM > (in reply to Donkey)


Donkey Posts: 3864 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/30/2003 12:40:01 I don't know the answer I'm afraid Mike. I assume that you have your content positioned by tables and the tables are then inside the div. Could it be to do with the percentages i.e. do all your table column percentage widths add up to 100%? I'm not sure but it may be that if the div is 98% wide then the column widths should be recalculated so that they add up to 98%. I am still very much a beginner in CSS and I hope one of the experts will come in with a definitive answer to this. On my test site I haven't used tables at all for positioning just divs and lists. I check in IE/Opera/Mozilla & Netscape and my content stays in the right position on most screen sizes, unless you go really small - then everything can look a bit strange. I understand that the "correct" procedure is to use tables only for the presentation of tabular data and that CSS should be used for positioning. I'm sorry that I can't help further but I'm sure someone will come back with the answer. Peter _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to Mike_R)


bobby Posts: 11394 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/30/2003 13:57:10 Percentages are all relative... if you're using % to postion an element you need to make sure all elements are using %... otherwise in different screen rez or window sizes the look might skew... IOW - if you have a table that has a 200px column and a 800px column, and a layer (aka <div>) that is positioned at 20% left... the actual size of 20% will change based on the screen width, but 200 px is static... Also, if you place a table, set to 100% width, into a layer set to 300px wide, the table will only be 300px wide... the % is relative to it's parent element... so 100% wide is referring to the layer that contains it... CSS can be complicated at first, but with a little persistence and T&E you'll get the hang of it... _____________________________ If con is the opposite of pro, is Congress the opposite of progress? (in reply to Mike_R)


Mike_R Posts: 124 Joined: 1/15/2003 Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 9/30/2003 14:56:08 Bobby, thanks for the advice. I think part of the problem is that I'm adding one CSS element to an essentially table-based layout. To give you a rough idea, I have a 770px wide table that is centered in the browser window and has 4 columns: 171px, 445px, 4px, and 150px. The 445px column is my "content column" and is where I am trying to absolutely position my content. But my content isn't centered on the page. When the content is absolutely positioned, however, it seems to want to "auto-center." This is, I think, what's throwing it off. I am probably going to have to redesign this layout, right? Mike < Message edited by Mike_R -- 9/30/2003 3:25:39 PM > (in reply to bobby)


Donkey Posts: 3864 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 10/1/2003 4:20:56 Following Bobby's advice, I would try converting the table sizes into percentages. i.e table width 100% column widths 22%, 58%, 1%, & 19%. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to Mike_R)


bobby Posts: 11394 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 10/1/2003 13:16:13 That should help, but you still may run into issues with the table, since it's position is not absolute... make sure to check it out in as many browser / screen rez combinations as you can... just to make sure it works... I'm thinking it still may skew a bit, but maybe not enough to be of concern. _____________________________ If con is the opposite of pro, is Congress the opposite of progress? (in reply to Mike_R)


Mike_R Posts: 124 Joined: 1/15/2003 Status: offline	RE: CSS Absolute Positioning Question . . . I think? - 10/2/2003 13:32:20 Guys, thanks. I had to do some tweaking, but I got it to work pretty well. I used the following code in my style sheet: .content1 { position: absolute; left: -220px; top: 216px; width: 440px; } This got it to center and stay pretty consistent with my centered table as long as the resolution is 800 x 600 or better. When the window gets smaller than that, it overlaps pretty badly. I'm not that concerned, however, because those viewing my site at 640 x 480 are probably less that 3% of my customers. Incidentally, this CSS thing is pretty cool. I can't wait to try and learn more. That means of course that you haven't heard the last of me! Again, I appreciate the help. Mike R (in reply to bobby)