1. 

   ehumbert
   

   offline

   Member

   Got a problem with a template built with the Affinity extension. Seems the banner area (occupied by a p7irm slide show) stretches across the screen with a max-width of 1600px. However, the wrapper area only uses about 1200 px of the same space. I cannot figure out how to enable the wrapper and below to expand to cover the same area as the banner area. Also, the footer region sizes itself to a different drummer also.

   http://www.ourbeautifulamerica.com/Templates/3column_new3.dwt

   Posted 5 years ago
2. 

   Sinclair
   

   offline

   Member

   Can you post an actual html page, the link you provided to the dwt appears as code in my browsers,it doesn't render as expected for me.

   There are some things that struck me as concerning looking at the 'code'....

   The max-width here...

   body {
   max-width: 1400px;
   margin: auto;
   }

   and unclosed comment....

   */.colums-wrapper {margin:0px;
   }

   HTH a bit

   Posted 5 years ago
3. 

   ehumbert
   

   offline

   Member

   Can you post an actual html page, the link you provided to the dwt appears as code in my browsers,it doesn't render as expected for me.
   There are some things that struck me as concerning looking at the 'code'....
   The max-width here...
   body {<br />
   max-width: 1400px;<br />
   margin: auto;<br />
   }
   and unclosed comment....
   */.colums-wrapper {margin:0px;<br />
   }
   HTH a bit

   Try http://www.ourbeautifulamerica.com/test2.htm

   Posted 5 years ago
4. 

   Sinclair
   

   offline

   Member

   There's quite a few errors on your page, how about creating a default page with no edits/additions to the css or markup, creating new stylesheets if you've edited them, maybe best done in a new folder, so that everything is created afresh, sans irm and so on, some of your css is affecting things and the affinity structure is compromised!

   Upload it post the url and let us know what you want from there, I'm not sure you need to edit the basic structure of the affinity page in order to do what you want.

   HTH

   Posted 5 years ago
5. 

   ehumbert
   

   offline

   Member

   There's quite a few errors on your page, how about creating a default page with no edits/additions to the css or markup, creating new stylesheets if you've edited them, maybe best done in a new folder, so that everything is created afresh, sans irm and so on, some of your css is affecting things and the affinity structure is compromised!
   Upload it post the url and let us know what you want from there, I'm not sure you need to edit the basic structure of the affinity page in order to do what you want.
   HTH

   Will do. Thanks for looking at this for me.

   Gene

   Posted 5 years ago
6. 

   ehumbert
   

   offline

   Member

   There's quite a few errors on your page, how about creating a default page with no edits/additions to the css or markup, creating new stylesheets if you've edited them, maybe best done in a new folder, so that everything is created afresh, sans irm and so on, some of your css is affecting things and the affinity structure is compromised!
   Upload it post the url and let us know what you want from there, I'm not sure you need to edit the basic structure of the affinity page in order to do what you want.
   HTH

   here ya go....

   What I need is for the image with the "floater" designation to be over the images of the slide show. Floating as it were above the slide show. It works in the original, but not in here. I need to figure out why.

   Gene
   http://www.ourbeautifulamerica.com/test.htm

   Posted 5 years ago
7. 

   Sinclair
   

   offline

   Member

   So, in the head of the page, where you have this.....

   <!--[if lte IE 7]>
   <style>
   body {min-width: 1020px;}
   .columns-wrapper, .menu-top-wrapper, .p7dmm-sub-wrapper {width: 980px;}
   #floater {
   position: absolute;
   z-index: 10000;
   left: 20px;
   top: 30px;
   opacity: .75;
   }
   #spacer {
   margin: 0px;
   padding-top: 1px;
   padding-right: 0px;
   padding-bottom: 1px;
   padding-left: 0px;
   width: 100%;
   opacity: .1;
   }

   </style>
   <![endif]-->

   Change that to.....

   <!--[if lte IE 7]>
   <style>
   body {min-width: 1020px;}
   .columns-wrapper, .menu-top-wrapper, .p7dmm-sub-wrapper {width: 980px;}
   </style>
   <![endif]-->
   <style type="text/css">
   #floater {
   position: absolute;
   z-index: 10000;
   left: 20px;
   top: 30px;
   opacity: .75;
   }
   #spacer {
   margin: 0px;
   padding-top: 1px;
   padding-right: 0px;
   padding-bottom: 1px;
   padding-left: 0px;
   width: 100%;
   opacity: .1;
   }
   </style>

   HTH

   Posted 5 years ago
8. 

   ehumbert
   

   offline

   Member

   So, in the head of the page, where you have this.....
   <!--[if lte IE 7]><br />
   <style><br />
   body {min-width: 1020px;}<br />
   .columns-wrapper, .menu-top-wrapper, .p7dmm-sub-wrapper {width: 980px;}<br />
   #floater {<br />
   position: absolute;<br />
   z-index: 10000;<br />
   left: 20px;<br />
   top: 30px;<br />
   opacity: .75;<br />
   }<br />
   #spacer {<br />
   margin: 0px;<br />
   padding-top: 1px;<br />
   padding-right: 0px;<br />
   padding-bottom: 1px;<br />
   padding-left: 0px;<br />
   width: 100%;<br />
   opacity: .1;<br />
   }
   </style><br />
   <![endif]-->
   Change that to.....
   <!--[if lte IE 7]><br />
   <style><br />
   body {min-width: 1020px;}<br />
   .columns-wrapper, .menu-top-wrapper, .p7dmm-sub-wrapper {width: 980px;}<br />
   </style><br />
   <![endif]--><br />
   <style type="text/css"><br />
   #floater {<br />
   position: absolute;<br />
   z-index: 10000;<br />
   left: 20px;<br />
   top: 30px;<br />
   opacity: .75;<br />
   }<br />
   #spacer {<br />
   margin: 0px;<br />
   padding-top: 1px;<br />
   padding-right: 0px;<br />
   padding-bottom: 1px;<br />
   padding-left: 0px;<br />
   width: 100%;<br />
   opacity: .1;<br />
   }<br />
   </style>
   HTH

   Beautiful! It works! Now, I can turn this into a template!

   Gene

   Posted 5 years ago

RSS feed for this topic

Reply

You must log in to post.