Hi.

Does anyone know how to override page centering?

I have a project in the works that I want to override page centering on, just for a few objects.

What I need is a project that is centered as per normal, but at the top of the page I need about 5 objects to have relative horizontal positioning.

I basically need objects within the top 5cm of my project to have 'relative horizontal positioning' and the rest below to be centered. The 5cm area at the top will be the same on all pages and I want the objects to adjust to a uses screen width, but the rest of the project below this area needs to stay centered, this area will be 880 wide.

I know you can't use 'relative horizontal positioning' and set your project to center at the same time.

I can have 'center project' un-set, then group the body of my web page (except for the top that I want relative) and set it with 'relative horizontal positioning', and this works fine until I have to ungroup this area to change products images and other things. Also this page will be a template so I have allot of 'include objects' and when I group includes on one page they can be altered or disappear from another page.

Any ideas?

I haven't published the project yet.

Thanks,
Tonga.

This may work: Put all the below-5cm objects into separate pages, and place those pages in a centered i-frame on the main page containing your banner.

If that is not practical, here is another thought: It is possible to disable horizontal page centering on a page by placing an extra </div> on a page -- this closes off the horizontally centered block.

So how about some code like this in your horizontally centered page? :

1. At the start (send 'To Back'):
</div> (closes off the horizontal centering)

2. Later, after the bannner items:
<div id="centered"> (restarts horizontal centering)

I don't know whether the banner items would screw up the calculations that SS does on the centering, but if it did, it might be possible to also override the CSS that SS creates that controls the width of the centered div.

This code idea assumes you are using a 2.90 series SS version.

I haven't tried any of this, so it's all just theory. I'll leave the practical part to you ....

Thanks for the quick response, I'll have ago now and see what happens.

Thanks,
Tonga.

Hi Bruceee.

I'm using v2 270f, it dosn't seem to work.

Can I add style= code to an object, like an image? I know an object dosn't have a direct div style when 'page center' is applied, it uses CSS.

If so I was wondering if the style= applied would override the CSS.

Tonga.

I've just taken a look at the centering code generated by SS2.70f and it is the same as SS2.90 -- just laid out differently.

Watch out for the Z-order. You will need to keep your </div> code "To Back" ahead of the banner objects, then the banner objects, then the re-centering code.

You could try adding the style code to an object, and I think it may override the CSS -- after all the "C" there means "Cascading". I don't know enough about CSS to be sure about which way the cascade runs.

Hi Bruce.

I can get the </div> to stop centering everything below it, but it seems to leave my objects with positioning probs.

Everything sits to the left, it's as if they have no position allocated to them.

When I re-add the centering div, it doesn’t keep everything centered.

Maybe I’m not doing it right.

cheers.

Tonga.

Having just actually tried this (always helps!) I can see there are extra divs in the code object itself which will upset the flow of the code.

I tried putting CSS positioning off for the code object(s) which removes that, but that introduces a vertical gap in the page.

Hmmmm, it's getting late here, another day tomorrow....

Bruce, I must congratulate you for thinking outside the box on this solution.

The vertical gap in the page is being caused by the original SS generated centered CSS code. It specifies a height of 100%, so even if you terminate it early with an extra </div> tag, it will still have a height of 100%.

So instead of terminating the original SS centering div block, why not just move it below the desired objects with relative positioning?

Start by making sure all your objects are in the correct z-order on the page; i.e., all the relative positioned objects are at the top of the z-order using the To Back button.

Use the Page Editor to turn on Page Centering and open the View Code window. Place the View Code window into HTML mode by clicking the "Show the header text" button and locate the CSS code for the #centered id name. Highlight and copy the line containing the #centered CSS code. (The line will start with #centered and end with a close brace character "}").

Open a code object and in the code window, begin a div block to contain the new centering CSS code:

<div style="">

Position the cursor between the quote characters and paste the copied text. Now delete the #centered text and the brace characters from the pasted code so only the actual CSS code remains.

There is one more step. The centering CSS code uses a position attribute of "relative". This unfortunately will shift the left margin of the centered div block relative to the position of any objects ahead of it; i.e., your objects with relative positioning turned on. This means you will need to adjust the left margin on the pasted CSS code. In the pasted CSS code, you will see a width attribute with a value that SS has determined to be the page width for your centered page. Somewhere in the pasted CSS code, locate a semi-colon (it does not matter which one) and after it enter: "left:-width_value" (without the quotes) replacing width_value with the value used for the width attribute. Yes, that is a minus sign before the value; you need to adjust the left margin back toward 0 to make up for the shift caused by the relative positioning. Be sure to terminate the value with a semi-colon or an error will occur. This value may not be the true left margin you need, so you may need to preview and tweak it a bit.

When you are done, your code object should look something like:

quote:

<div style="position:relative;width:386px;height:100%
;left:-386px;margin:0px auto 0 auto;text-align:left;padding-left:1px;cursor:default">

Use the To Back positioning button to place the added code object so it is positioned just after your objects with relative positioning. You can use the View Code window to confirm this.

Be sure to turn OFF page centering after you are done. You may want to add an extra code object with just a closing </div> tag in it and position this code object To Front. This will properly terminate the added div block with the centering CSS code, but the browser will close it when it reaches the end of the page body so it really is not necessary. But if you are concerned with page validation, you will need to add it.

Hi Larry.
Thanks for the help, talking about thinking outside the square!

I tried what you said, but not working yet, I think a </div> is closing out the centerpage style to early. I copied the code below after I previewed the page and viewed the source, I named my pasted code object 'code1':

<div id="Ocode1" style="position:absolute;z-index:3;visibility:visible; left:630px;top:91px;width:70px;height:17px;">
<div id="Gcode4" class="dfltc">
<div style="position:relative;width:1260px;height:100%;left:-440px;margin:0px auto 0 auto;text-align:left;padding-left:1px;cursor:default"></div>
</div>

Is the div above(at the bottom of the code) closing out the centerpage style?

Cheers,
Tonga.

Oops, I goofed! One more step - After the code object is positioned on the page (the one you have posted code for), open the Open Editor to the Transformations tab and check the "No CSS Positioning" option. This code object must not be wrapped in the normal CSS poistioning code.

Hi Larry.
Thanks for getting back to me.
I can't quite crack the solution yet so I'm going to keep playing with it.
I checked the 'no css' box but still no go. There doesn't seem to be any </div> closing out the center instruction till the end of the page now, so I don't know what I'm missing, it all looks ok to me.

Maybe I should stay with a normal page layout for now and get tricky when I get experienced.

Thanks again

If you can, post a test page to iHostVM and give us the link. It may be just a problem with the z-order of the objects; looking at the HTML will help determine this.

Hi larry.

Here's the link below for a test page I did, everything below the blue box is meant to be centered.

http://www.develop.eclops.com/...-page-centering.html.

Thanks,
Tonga.

One of these days I'm going to learn to stop testing with Firefox.

There seems to be a major difference between the way FF and IE handles absolute positioning inside a relative container. Using the IE8 developer tools, I see that the relative div block is always being fixed to the page's (0,0) co-ordinates and the absolute div blocks inside the container are being fixed to the page and not relative to the container they are in. Firefox handles this correctly.

So back to square 1.

Have you tried using an i-frame? Move your centered objects to a separate page, then include it on the desired page with the relative objects using an i-frame. If you use relative positioning on the i-frame, you should be able to keep it centered on the page; so as it moves, its contents will appear to stay centered also.

Hi Larry .

Yeah Bruce mentioned using an i-frame, but I wanted to avoid this because i'm going to list products and services plus discriptions, and i-frames aren't really search engine friendly. So I might just stick to more of a standard layout.

Thanks for all your help, I feel you can learn so much just by having a go at a problem, so thanks again.

Cheers,
Tonga.