PatternSkinCssCookbookCenterPageBorder < TWiki

---+!! PatternSkinCssCookbook Recipe: Center the page with a border

*This recipe shows how to put a border around the page, while centering the page horizontally.* The example on this page uses a gradient image as background - on top of a gray base color. You can choose to set no image of course.

<div class="twikiHelp">
This line loads the extra style definition:
<verbatim>
   * Set USERSTYLEURL = %ATTACHURL%/centerpageborder.css
</verbatim>
You can write this line in %TWIKIWEB%.TWikiPreferences, in WebPreferences, in your user topic or on a single page.
</div>

Add the dynamic variable link to the logo image to the topic text:
<verbatim>
<style type="text/css" media="all">
#patternScreen {
background-image:url("%ATTACHURLPATH%/gradient_page.gif");
background-repeat:repeat-x;
}
#patternPageShadow {
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
}
</style>
</verbatim>
<div class="twikiHelp">
%ICON{info}% If you don't write this overloading style in a template and use an external =.css= file, you need to set the image to the absolute url:
<pre>
&lt;style type="text/css" media="all">
#patternScreen {
background-image:url("%<nop>ATTACHURLPATH%/gradient_page.gif");
background-repeat:repeat-x;
}
&lt;/style>
</pre>
You can always write a =&lt;style>= in a topic - all current browsers support this - but the page won't validate as valid XHTML.
</div>

<style type="text/css" media="all">
#patternScreen {
background-image:url("%ATTACHURLPATH%/gradient_page.gif");
background-repeat:repeat-x;
}
#patternPageShadow {
background-image:url("%PUBURLPATH%/%TWIKIWEB%/PatternSkin/striped_pageshadow.gif");
}</style>

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
css	centerpageborder.css		manage	0.3 K	2005-10-14 - 16:55	UnknownUser	css to frame the page centered on the screen
gif	gradient_page.gif	r1	manage	3.8 K	2006-03-07 - 17:43	UnknownUser	background image

This topic: TWiki > PatternSkinCssCookbookCenterPageBorder
Topic revision: r2 - 2006-03-07 - TWikiContributor

Copyright © 1999-2025 by the contributing authors. All material from TWiki is the property of the contributing authors.
Questions, comments, or concerns? Contact GNHLUG.
All use of this site subject to our Legal Notice (includes Terms of Service).