|
|
|
|
|
|
|
|
|
|
|
Centering of Page Sections Tutorial (GL CS2)
Below are 3 separate identical table sections using sightly different methods in the CSS to try to get a page section to center on a browser page. Layout is done using GoLive CS2. The tables and notes are set for 100% width. Notes for sections are at top of each section and describe what part of the layout is different, etc.
|
Section 1 (This section is in a division with an id=wrapper2)
Note: For this section as well as this page header, the header, section 1 notes & table stays horizontally centered on the page.
- To get this effect:
- Use page source view
- Add a division to a section of body (or to all of the body if you want the whole page centered)
- At the beginning of the section you want always centered on the page in a browser
- add your division by typing in <div id="pagewrapper">
- (you can call the id something other than pagewrapper if you want for this page layout it was called wrapper2)
- At the end of the section you want always centered on the page in a browser
- close your division by typing in </div>
- Open the CSS editor (if you want this for all your site pages make changes to basic.css file)
- create an element style with the <#> symbol (label it something like #pagewrapper, must be same name as the division you made above)
- Use the graphical interface to add your attributes
- Text Properties - text-align: left; is what positions this sections' contents to the left (like Section 1 paragraph and above)
- Block Properties - width: 760px; is what determines the width of this section (if you do not use a width this method will not work)
- Margin and Padding Properties - margin: auto; is what makes it center on the page
- add any other attributes you want applied to the whole section
- If you know the code for the css you want to use, you can paste it into the CSS Editor in either the 'CSS Definitions' window or the 'Source' window
- Make sure that the code is all on one line, spaced and marked up properly otherwise it will not work
- Check in browser
Contents of external basic_centertest.css |
|
body {
text-align: center
}
#wrapper { text-align: left;
margin: auto;
width: 760px
}
#wrapper2 { text-align: left; width: 760px; margin: auto; }
|
- Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines
- Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
- The code can be pasted in as long as it is on one line, spaced and marked up properly.
|
Section 2 (This section is just placed on the page)
Note: This section of the page is done by just placing contents on the page body. The body css is not appling so the content stays to the left side of the page and the table expands to 100% of the page size instead of stopping at 760px as called for in the #wrapper division attributes. So the page content does not see any of the css
Contents of external basic_centertest.css |
|
body {
text-align: center
}
#wrapper { text-align: left;
margin: auto;
width: 760px
}
#wrapper2 { text-align: left; width: 760px; margin: auto; }
|
- Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines
- Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
- The code can be pasted in as long as it is on one line, spaced and marked up properly.
|
Section 3 (This section does use a division with id="wrapper" but that css does not work)
Note: This section of the page is done by placing the table inside of a division <div id="wrapper"> on the page body. The body css is not appling so the content stays to the left side of the page and the table expands to 100% of the page size instead of stopping at 760px as called for in the #wrapper division attributes. For some reason GL CS2 is not recognizing the external CSS of #wrapper with the code on separate lines and the css is not being applied to this section even though the division has the correct id="wrapper".
Contents of external basic_centertest.css |
|
body {
text-align: center
}
#wrapper { text-align: left;
margin: auto;
width: 760px
}
#wrapper2 { text-align: left; width: 760px; margin: auto; }
|
- Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines
- Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
- The code can be pasted in as long as it is on one line, spaced and marked up properly.
|