Drop_shadow bottom.gif isnt wide enough for my page.

[duplay]

How can I expand the drop-shadow.gif to make it fit my pages? I have my pages set for a fixed width of 760 i think.


Thanks

[attachment deleted by admin]

[Dr.CSS]

how wide do you need it to be? that img is 780px wide if it's the same one i'm thinking of...

    div#pagewrapper {
        margin: 0 auto;
        width:780px;
        padding: 0px;
        text-align: left;
    }
    #pagetop{width:780px;height:30px;background: url(uploads/images/page_top.gif)}
    #container {width:780px;
position: relative;
argin: 0;
    }
#pagebottom{width:780px;height:30px;background: url(uploads/images/page_bottom.gif)}
    .shade{;width:780px;background: url(uploads/images/page_bg.gif)repeat-y}
   

[duplay]

I currentl have the page width set for 760 (is that a issue?) Also, for the life of me, I can find the right spots in the template to insert the shadowtop and shadowbg divs. Any idea where they need to go? The bottom one went fine, but the top and middle didnt show up. Also, will the fact I have a flash header be a problem with using drop shadows?

Thanks- here is my template info






Stark Portage Area Computer Consortium - {title}

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}












   
   
      Skip to navigation
      Skip to content
   
   

   





 
 
 

 
 
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
 
 


 
 

     
     
        Navigation
        {cms_module module='menumanager' template='cssmenu-accessible.tpl'}       
     
     
     


     
     
        {title}
        {content}


       


^ Top

       
            {cms_selflink dir="previous"}

            {cms_selflink dir="next"}
       


     
     
 


 
 


 
 
      {global_content name='footer'}
 
 

[Dr.CSS]

have you seen mine...

http://mit-computers.com/index.php/shadow

template, part of it anyways... i don't think the flash will matter... look at my first post for the CSS used on these divs...







   
   
      Skip to navigation
      {cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}
   
   

   


 
 
          {cms_selflink dir="start"}
 
 
 


 
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
 
 


 
 

     
     
        Navigation
        {cms_module module='menumanager' collapse='1'}
     
     
     


     
     
        {title}
        {content}


       


{cms_selflink anchorlink='main' dir='anchor' text='^ Top'}

       
            {cms_selflink dir="previous"}

            {cms_selflink dir="next"}
       


     
     
 


 
 


 
 
      {global_content name='footer'}
 
 

[duplay]

Mark,

1. Did you add the css items to the layout stylesheet, or did you create a new stylesheet and add all of them to it?

2. What is the code: you added above? I am not sure what the class is. I have not added that code before.

[Dr.CSS]

copied the original CSS and template and changed those parts in the first post..

the class is so i didn't have to mess with the original so much, i was going to use the original one but decided to make a new one, template and CSS that is :.
you can just change the CSS for the one you are using if you don't want any original CSS as they are, i'm doing this on a clean install so i can refferance it to help with others problems, got to keep a clean install some where for "i just installed this great CMSMS, how do i ..."

class is used in the CSS as .shade  you will see it in the above post, copied here also....


    div#pagewrapper {
        margin: 0 auto;
        width:780px;  not min/max
        padding: 0px;
        text-align: left;
    }

    #pagetop{width:780px;height:30px;background: url(uploads/images/page_top.gif)}  new div for the top img.

    #container {width:780px; not a % , this is redundant as the .shade handles the size any way
  position: relative; could just be put in the .shade call as i've done below
  argin: 0;  can/should be deleted DUH 
    }
    .shade{position:relative;width:780px;background: url(uploads/images/page_bg.gif)repeat-y}

#pagebottom{width:780px;height:30px;background: url(uploads/images/page_bottom.gif)} new div for the bottom img.

[duplay]

Mark,

I am getting closer i guess! Take a look:

http://moodle.sparcc.org/test/index.php

I temporarly removed my flash header, b/c it seemed to mess things up a bit.

to me, the page looks thinner then it should, and my footer has shifted. Below is my layout stylesheet AND TEMPLATE

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */

    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        width:780px;
        padding: 0;
        text-align: left;
    }
  div#pagetop{width:780px;height:30px;background: url(uploads/images/page_top.gif)}

div#container {width:780px;
  position: relative;
    }

div#pagebottom{width:780px;height:30px;background: url(uploads/images/page_bottom.gif)}
.shade{position:relative;width:780px;background: url(uploads/images/page_bg.gif)repeat-y}
   
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #385C72;         
            text-align: left;
        }
        div#header h1 a {
            background:  url(uploads/images/logo1.gif) no-repeat 0 12px;
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
        }
    /* END HEADER */
   
    /* CONTENT */
        div#content {

        }
       
        /* MAIN */
            div#main {

            }
        /* END MAIN */
       
        /* SUB */
            div#sub {
               
            }
        /* END SUB */
       
    /* END CONTENT */
   
    div#page_bottom {
  clear: both;
  background: url(uploads/images/page_bottom.gif) no-repeat bottom;
  padding-bottom: 30px;
  }
    /* FOOTER */
        div#footer {

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 15px;
            text-align: center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
  padding: 1em 0;
  text-align: left;
  font-size: 90%;
  margin: 0 1em;
  border-bottom: 1px dotted #000;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }
HERE IS MY TEMPLATE:






CMS Made Simple Demo - {title}

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}








   
   
      Skip to navigation
      Skip to content
   
   

   

 


 
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
 
 


 


 

     
     
        Navigation
        {cms_module module='menumanager' collapse='1'}
     
     
     


     
     


        {title}
        {content}



       


^ Top

       
            {cms_selflink dir="previous"}

            {cms_selflink dir="next"}
       


     
     

 


 
 


 
 
      {global_content name='footer'}
 
 

[Dr.CSS]

nope that's how big it should be... but i did forget a couple other things... sorry    you can lose the border on the pagewrapper and these 2 things :.

    /* FOOTER */
        div#footer {margin: 0 10px;  brings the footer in to the new page size

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 15px;
            text-align: center;
        }
    /* END FOOTER */
.............


/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
        position: relative;
        margin: 0 13px;  keeps the menu inside and pushes the words in...
        padding: 0;
        text-align: left;
    }