SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Help with CSS-P

  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS-P

    http://www.plasmapages.com/jpma_css/...ss_GREY_2.html
    how do I get the thin testing 123 box that is on top over on the right?
    very frustrating....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
    	<title>CSS-P</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    	<style type="text/css">
    <!-- 
    body,html {
     text-align: center;
     height: 100%;
     margin: 0px 0px;
     padding: 0px 0px;
     width: 100%;
    /* background-image: url(backing.gif); */
     background-repeat: repeat-x;
     background-color: #e4e4e4;
     }
     
    #frame {
     width: 759px;
     padding: 0px 10px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 0px;
     margin-bottom: 0px;
     text-align: left;
     /*  background-image: url(stepGrey.gif); */
     background-repeat: repeat-y;
     }
      
    #contentcenter {
     width: 759px;
     padding: 0px;
     margin: 0px;
     }
      
    #contentheader {
     text-align: center;
     height: 100px;
     background-color: red;
     }
     
    #flash {
     text-align: center;
     height: 209px;
     background-color: yellow;
     }
     
    #contentmiddle {
     padding: 0px;
     margin: 0px;
     } 
      
    #contentfooter {
     text-align: center;
     height: 20px;
     }
      
    div.leftholder {
     float: left;
     padding: 0px;
     margin: 0px;
    }
    div.rightholder {
     float: left;
     padding: 0px;
     margin: 0px;
    }
    /*main content area*/
    #maincontent_container{
     width: 565px;
     height: 175px;
     padding: 6px 0px 11px 0px;
     position: absolute; /*set to absolute moves up*/
     margin: 0px auto;
     text-align: left;
     background-image: url(main_content_grey_middle.gif);
     }
    html > body #maincontent_container {
     /*for CSS2 browsers that get height right, unlike IE/Win*/
     height: auto;
     min-height: 175px;
    }
    #maincontent_top{
     width: 565px;
     margin: 0px;
     padding: 0;
     height: 8px;
     max-height: 8px;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     background-image: url(main_content_grey_top.gif);
     background-repeat: no-repeat;
     }
    #maincontent_middle{
     padding: 10px;
     text-align: left;
     }
    #maincontent_bottom{
     width: 565px;
     height: 13px;
     max-height: 13px;
     overflow: hidden;
     position: absolute;
     bottom: 0;
     left: 0;
     background-image: url(main_content_grey_bottom.gif);
     background-repeat: no-repeat;
     }
    /*end main content area*/ 
     
    /*right content sidebar*/
    #sideholder_container{
     width: 194px;
     height: 175px;
     padding: 6px 0px 11px 0px;
     position: absolute; /*set to absolute moves up*/
     margin: 0px auto;
     text-align: left;
     background-image: url(side_Grey_middle.gif);
     }
    html > body #sideholder_container {
     /*for CSS2 browsers that get height right, unlike IE/Win*/
     height: auto;
     min-height: 175px;
    }
    #sideholder_top{
     width: 194px;
     margin: 0px;
     padding: 0;
     height: 6px;
     max-height: 6px;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     background-image: url(side_Grey_top.gif);
     background-repeat: no-repeat;
     }
    #sideholder_middle{
     padding: 10px;
     text-align: left;
     }
    #sideholder_bottom{
     width: 194px;
     height: 11px;
     max-height: 11px;
     overflow: hidden;
     position: absolute;
     bottom: 0;
     left: 0;
     background-image: url(side_Grey_bottom.gif);
     background-repeat: no-repeat;
     }
    -->  
    	</style>
      </head>
    <body>
    <div id="frame">
     <div id="contentcenter">
      <div id="contentheader">
       <!--flash here-->
      </div>
      <div id="flash">
       <!--flash here-->
      </div>
    	<div id="contentmiddle">
       <div class="leftholder"><!--LEFT SIDE BAR-->
    	<div id="maincontent_container"> 
    		   <div id="maincontent_middle"> 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing  
    		  123...testing 123...testing 123...testing 123...testing 123...testing
    	123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing</div>
    		   <div id="maincontent_top"></div>
    		   <div id="maincontent_bottom"></div>
    		</div>
       </div>
       <div class="rightholder"><!--RIGHT SIDE BAR-->
    	<div id="sideholder_container"> 
    		   <div id="sideholder_middle">testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...</div>
    		   <div id="sideholder_top"></div>
    		   <div id="sideholder_bottom"></div>
    		</div>
       </div>
    	<br style="clear:both;" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    		 </div>
    	<div id="contentfooter">This is the footer</div>
     </div>
    </div>
      </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right:0 instead of left:0 ?

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This works for me
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>CSS-P</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
        <style type="text/css">
    <!--	
    	
    body,html {
    	text-align: center;
    	height: 100%;
    	margin: 0px 0px;
    	padding: 0px 0px;
    	width: 100%;
    /*	background-image: url(backing.gif);	*/
    	background-repeat: repeat-x;
    	background-color: #e4e4e4;
    	}
    	
    #frame {
    	width: 759px;
    	padding: 0px 10px;
    	margin: 0px auto;
    	text-align:	left;
     	background-image: url([url]http://www.plasmapages.com/jpma_css/stepGrey.gif[/url]);	
    	background-repeat: repeat-y;
            position: relative;
    	}
    		
    #contentcenter {
    	width: 759px;
    	padding: 0px;
    	margin: 0px;
    	}
    		
    #contentheader {
    	text-align: center;
    	height:	100px;
    	background-color: red;
    	}
    	
    #flash {
    	text-align: center;
    	height:	209px;
    	background-color: yellow;
    	}
    	
    #contentmiddle {
    	padding: 0px;
    	margin: 0px;
            position: relative;
    	}	
    		
    #contentfooter {
    	text-align: center;
    	height:	20px;
    	}
    		
    div.leftholder {
    	float: left;
    	padding: 0px;
    	margin: 0px;
    }
    div.rightholder {
    	
    	padding: 0px;
    	margin: 0px;
    		
    }
    /*main content area*/
    #maincontent_container{
    	width: 565px;
    	height:	175px;
    	padding: 6px 0px 11px 0px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	margin: 0px auto;
    	text-align: left;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/main_content_grey_middle.gif[/url]);
    	}
    html > body #maincontent_container {
    	/*for CSS2 browsers that get height right, unlike IE/Win*/
    	height: auto;
    	min-height: 175px;
    }
    #maincontent_top{
    	width: 565px;
    	margin: 0px;
    	padding: 0;
    	height: 8px;
    	max-height: 8px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	overflow: hidden;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/main_content_grey_top.gif[/url]);
    	background-repeat: no-repeat;
    	}
    #maincontent_middle{
    	padding: 10px;
    	text-align: left;
    	}
    #maincontent_bottom{
    	width: 565px;
    	height: 13px;
    	max-height: 13px;
    	overflow: hidden;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/main_content_grey_bottom.gif[/url]);
    	background-repeat: no-repeat;
    	}
    
    /*end main content area*/	
    	
    /*right content sidebar*/
    #sideholder_container{
    	width: 194px;
    	height:	175px;
    	padding: 6px 0px 11px 0px;
    	position: absolute; /*set to absolute moves up*/
    	right: 0;
    	margin: 0px auto;
    	text-align: left;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/side_Grey_middle.gif[/url]);
    	}
    html > body #sideholder_container {
    	/*for CSS2 browsers that get height right, unlike IE/Win*/
    	height: auto;
    	min-height: 175px;
    }
    #sideholder_top{
    	width: 194px;
    	margin: 0px;
    	padding: 0;
    	height: 6px;
    	max-height: 6px;
    	position: absolute;
    	top: 0;
    	left: 0;
    	overflow: hidden;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/side_Grey_top.gif[/url]);
    	background-repeat: no-repeat;
    	}
    #sideholder_middle{
    	padding: 10px;
    	text-align: left;
    	}
    #sideholder_bottom{
    	width: 194px;
    	height: 11px;
    	max-height: 11px;
    	overflow: hidden;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	background-image: url([url]http://www.plasmapages.com/jpma_css/side_Grey_bottom.gif[/url]);
    	background-repeat: no-repeat;
    	}
    
    -->				
        </style>
      </head>
    <body>
    <div id="frame">
    
    	<div id="contentcenter">
    		<div id="contentheader">
    			<!--flash here-->
    		</div>
    		<div id="flash">
    			<!--flash here-->
    		</div>
    		  <div id="contentmiddle">
    			<div class="leftholder"><!--LEFT SIDE BAR-->
    
    				<div id="maincontent_container"> 
           				<div id="maincontent_middle"> 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing
              123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing  
              123...testing 123...testing 123...testing 123...testing 123...testing
    		  123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing</div>
            			<div id="maincontent_top"></div>
            			<div id="maincontent_bottom"></div>
         			</div>
    			</div>
    			<div class="rightholder"><!--RIGHT SIDE BAR-->
    				<div id="sideholder_container"> 
           				<div id="sideholder_middle">testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...testing 123...testing 123...testing 
              123...testing 123...testing 123...</div>
    
            			<div id="sideholder_top"></div>
            			<div id="sideholder_bottom"></div>
         			</div>
    			</div>
    				<br style="clear:both;" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
          	  </div>
        <div id="contentfooter">This is the footer</div>
    	</div>
    </div>
      </body>
    </html>

  4. #4
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that seems close vg~ except is doesn't seem to notice body,html { } now ?
    background-color doesn't show up.

    plus
    where's the bottom border?
    and there's a gap at the top?

  5. #5
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yo vg~ you come up with anything - im dieing over here

    this is my latest: http://www.plasmapages.com/jpma_css/...ss_GREY_v.html


    ARG

    EDIT: only outstanding bug now is the footer, it's not at the bottom ?
    Last edited by Golgotha; Oct 21, 2003 at 13:02.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    These changes to the latest version of your code got the footer showing for me:
    Code:
    div.rightholder {
    	padding: 0px;
    	margin: 0px;
            width: 194px;
            position: absolute;
            right: 0;
            top: 0;
    }
    /*main content area*/
    #maincontent_container{
    	width: 565px;
    	height:	175px;
    	padding: 6px 0px 11px 0px;
    	position: relative; /*set to absolute moves up*/
    	/*margin: 0px auto;*/
    	text-align: left;
    	background-image: url(main_content_grey_middle.gif);
    	}

  7. #7
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is my latest: http://www.plasmapages.com/jpma_css/...ss_GREY_v.html

    works except for IE [img]images/smilies/frown.gif[/img]

    EDIT: I add width: 565px; to #maincontent_container{} and it appears to be happy

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Changed this from your latest:
    Code:
    /*main content area*/
    #maincontent_container{
    	width: 565px;
    	height:	175px;
    	padding: 6px 0px 8px 0px;
    	position: relative; /*set to absolute moves up*/
    	/*dummy rule for IE*/
    	left: -100px;
    	text-align: left;
    	background-image: url(http://www.plasmapages.com/jpma_css/...rey_middle.gif);
    	}
    html > body #maincontent_container {
    	/*for CSS2 browsers that get height right, unlike IE/Win*/
    	height: auto;
    	min-height: 175px;
    	/*real left rule*/
    	left: 0;
    }
    It works in IE6/Win, Mozilla, and Opera 7.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •