General question about CMSMS web site and forum

[EsquireX]

Hello,

This is mainly to westis but if anyone else can answer, please do.

I noticed on the CMSMS web site and the forum both have a drop shadow which I like and would like to add that same look to my own web site. Other than that I wanted to know how you center your web page so that no matter how wide the browser window is, the site is centered in the window and isn't stretched. I've been trying to figure that out for (at least) a good month now. I looked at the page source through firefox but couldn't figure it out. Maybe it's how you set it up in the CSS file (which I can't see)? I'm just guessing again.

I hope this is understandable.
Thank you.

[westis]

Hi EsquireX,

It's actually binarybee who did most of that design.

1. But to start with centering the page. You will have to wrap the entire page in a div. Set the width of that div to the number of pixels you want the content wide. On the CMSMS site it's 780px. Then set left and right margins to auto and it will center automatically.

For example, the CMSMS template looks like this (simplified, the part in the body):

Code: Select all

<div id="page">
   <div id="page_top">
      <div id="header">
            {cms_module module='EllNav' horizontal=1 toponly=1 cssid='topmenu'}
      </div>
   </div>
   
   <div id="page_middle">
   
      <div id="left_nav">
         <h1>Menu</h1>
         {cms_module module='EllNav' cssid='leftmenu' showtoplevel=0}
      </div>
   
      <div id="content">
         <div id="main">
            <h1>{title}</h1>
            {content}
         </div>
      </div>

   <!-- End of page_middle div -->
   </div>
   
   <div id="page_bottom">
      <div id="footer">
         {html_blob name="footer"}
      </div>
   </div>      

<!-- End of page div -->
</div>

Parts of the CSS looks like this:

Code: Select all

#page {
   width: 780px;
   margin: 10px auto 0 auto;
   padding: 0;
   background: url(uploads/images/page_bg.gif) repeat-y top;
   }

#page_top {
   background: url(uploads/images/page_top.gif) no-repeat top;
   }

#left_nav {
   width: 175px;
   float: left;
   border-right: 1px solid #ccc;
   padding: 0 1px 0 0;
   }

#content {
   margin: 0 0 0 176px;
   border-left: 1px solid #ccc;
   padding: 0 0 0 1px;
   line-height: 120%;
   background-color: #f5f5f5;  
   }

#page_bottom {
   clear: both;
   background: url(uploads/images/page_bottom.gif) no-repeat bottom;
   padding-bottom: 30px;
   }

Hope that explains the centering bit. There are plenty of good CSS template tutorials to read. Some of them can be found at:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://www.thenoodleincident.com/tutori ... boxes.html
http://css.maxdesign.com.au/floatutorial/
http://www.alistapart.com/topics/design/layout/


2. About the shadow. Those are gif images that are included in some of the divs (page_bg.gif etc in the CSS above). So basically they are background images in a div. If you have Firefox you can right-click on a part of a shadow image and select "Show background image" to see how that gif looks like.


About looking at the CSS file used. If you use Firefox (which I'd recommend if you're on Windows) you can download a web developer's pack, that includes a button to see the CSS of the current page. Otherwise you can look up the url of the CSS file in the source code of a page and paste that url in your address window to download the CSS file.

At some point we'll write an "About this site" page where we can describe what modules have been used, what template etc. I hope this answers your questions, but feel free to ask more!

/Daniel "westis"

[EsquireX]

Thank you so much for the info! I have been reading quite a bit on CSS, HTML and Javascript. Since this is pretty new to me there is a lot I don't think I'll understand unless I actually use it in some way

I have tried placing the entire body in a div and still nothing. I have no idea what the problem could be. I'll keep trying though.

When I decide to take break from the functioning aspect of the site I'll return to the look of it to work in those drop shadows.

Again, thank you for the information.