Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    please help this old school tables man with css :-(

    I have been using tables for years and have recently been trying to teach myself site structure with css, which i have previously only used for decoration.

    I have already found myself bodging things with tables and going back to old habits someone please help me

    for some reason im loosing my inside right border also nothing seems to be at the size i set it and my padding also seems to be going crazy if any one can help I would be very very pleased you can see my bodge up at http://www.actioncomputing.co.uk/index-css-rebuild.html.

    here is my code as well. I never have these problems using my old tables :-(

    first html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>Untitled Document</title>
    <link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="48" valign="top" background="images/actioncomputing_02repeat_16.jpg"><img src="images/actioncomputing_02.jpg" width="47" height="767"></td>
        <td width="922" valign="top" ><div class="contentcontainer">
    <div class="Topleftmenu"></div>
    <div class="topmenuright"></div>
    <div class="menumiddle"></div>
    <div class="menubottomimage"></div>
    <div class="menubottomright"></div>
    <div class="Flashtop"><img src="images/flashback.jpg"></div>
    <div class="containerpage">
    <div class="insideleftborder"><img src="images/sidegradients.jpg" width="9" height="219"></div>
    <div class="insiderightborder"></div>
    <div class="leftcontent">
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom">
      <p>d df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg</p>
      <p>&nbsp;</p>
    </div>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom">d df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg</div><p>&nbsp;</p>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom">d df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg</div><p>&nbsp;</p>
    </div> 
    <div class="rightcontent">
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">d df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf<hr> 
    sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf <hr>sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df gsdf sg  dgsd sg sdsdg sds s gsgdgs d sd df </div>
    </div>
    
    
    </div></td>
        <td width="48" valign="top" background="images/actioncomputing2_07rep_17.jpg"><img src="images/actioncomputing2_07.jpg" width="47" height="767"></td>
      </tr>
    </table>
    
    </body>
    </html>
    and secondly css page

    Code:
    @charset "utf-8";
    
    html{height: 100%;
    min-height: 100%;}
    body { margin:0px;
    text-align:center;
    background-image:url(images/actioncomputing_01try.jpg);
    height: 100%;
    min-height: 100%;}
    td{height: 100%;
    min-height: 100%;}
    
    hr {
    margin-top:5px;
    margin-bottom:5px;
    width: 100%;
    height: 2px;
    color: blue;
    }
    
    .Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; text-align: left; background-color:#FFFFFF; }
    .contentcontainer{width:906px; float:left;}
    .Leftcolumn{width:47px; height:100%; float:left; background-color:#993300; background-image:url(images/actioncomputing_02repeat_16.jpg); }
    .Rightcolumn{width:47px; height:100%; float:right; background-color:#993300; background-image:url(images/actioncomputing2_07rep_17.jpg); }
    .Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
    .topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
    .menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
    .containerpage{ width:906px; height:800px; float:left; background-color:#ffffff;}
    .menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
    .menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
    .Flashtop{width:622px; height:98px; float:right;}
    .insideleftborder{width:9px; height:105%;  background-color:#6DA7E6; float:left;}
    .insiderightborder{width:9px; height:105%; background-color:#6DA7E6; float:right;}
    .leftcontent{margin-left:20px; width:590px; height:200px; float:left; }
    .rightcontent{width:253px; height:253px; float:right;}
    .rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
    .rightcontent-bottom{width:253px;  background-color:#AAC7E7; padding-left:10px; padding-right:10px;   }
    .leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
    .leftcontent-bottom{width:590px; padding-left:10px; padding-right:20px;  background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; }
    Last edited by gmnightingale; 11-25-2009 at 11:30 AM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forum!

    You've have [CODE] at the beginning and end of your code snippets so they aren't getting displayed properly. Please edit your post with a closing tag of [/CODE] at the end of each code block to make things easier to read for starters.

    Also, for the CSS I recommend a universal reset like this:
    Code:
    * {margin:0;padding:0;border:0;}
    This gets rid of browser default padding, margins, and borders for all elements on the page which makes cross-browser development of CSS much easier. And one more tip for the moment, develop/debug using Firefox and then tweak and hack the display to work in Internet Explorer. If you aren't already doing this it's important to start and it will save you many headaches.

    Oh, and download Firebug to use with Firefox. It's absolutely amazing. Anyway, more to come once I can read your code.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gmnightingale,
    The biggest mistake I see is trying to fit two elements that add up to a greater width than the container your putting them in. Have a look at how the box model works - padding and margin are included in total width.

    I've never understood the logic behind slicing up an image and then just putting it all back together again. Just leaving it whole and using it as a background makes a lot more sense in most cases.

    Have a look at this to get you a start
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container-out {
    	width: 1016px;
    	margin: 0 auto;
    	background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top;
    }
    #container-in {
    	width: 969px;
    	background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) no-repeat left top;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #header {
    	height: 150px;
    	width: 894px;
    	margin: 0 0 0 61px;
    	background: #f00;
    }
    #containerpage {
    	width: 894px;
    	margin: 0 0 0 61px;
    	background: #fff;
    	overflow: auto;
    }	
    .leftcontent-tops{
    	width: 590px; 
    	height: 41px; 
    	float: left;
    	background: url(http://www.actioncomputing.co.uk/images/sectiontop.jpg); 
    }
    .leftcontent-bottom{
    	width: 550px; 
    	float: left; 
    	padding: 10px 20px;
    	background:url(http://www.actioncomputing.co.uk/images/sectionback.jpg) no-repeat; 
    }
    .rightcontent-tops{
    	height:41px; 
    	margin: 0 0 0 590px;
    	background: #0f0;
    }
    .rightcontent-bottom{
    	margin: 0 0 0 590px;
    	background-color:#AAC7E7; 
    	padding: 10px;
    }
    </style>
    </head>
    <body>
        <div id="container-out">
        	<div id="container-in">
            	<div id="header">
    			<!--end header--></div>
                    <div id="containerpage">
                        <div class="leftcontent-tops"></div>
                            <div class="leftcontent-bottom">
                                <p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                            </div>    
                        <div class="leftcontent-tops"></div>
                            <div class="leftcontent-bottom">
                                <p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                            </div>
                    <div class="rightcontent-tops"></div>
                        <div class="rightcontent-bottom">
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                    </div>
                    <div class="rightcontent-tops"></div>
                        <div class="rightcontent-bottom">
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                    </div>
    			<!--end containerpage--></div>
        	<!--end container-in--></div>
        <!--end container-out--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    gmnightingale (11-25-2009)

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    its because i intend to use certain parts of the images as flash anim's all these things have never been a problem to me using tables I have always been able to achieve what i want without a problem its the whole cross over thats doing me in :-)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by gmnightingale View Post
    its because i intend to use certain parts of the images as flash anim's all these things have never been a problem to me using tables I have always been able to achieve what i want without a problem its the whole cross over thats doing me in :-)
    I've no doubt there's a learning curve. I'm lucky, I started out with CSS/XHTML and never learned tables.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Right thank you once again for the code you sent it showed me a route round,

    But, I am still having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?

    you can see what i mean by visiting

    www.actioncomputing.co.uk/index-css-rebuild.html

    and my code is below.

    All help is once again very appreciated.

    CSS
    Code:
    @charset "utf-8";
    
    * {margin: 0; padding: 0; border: 0; outline: 0;}
    html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
    hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
    
    
    .header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
    .Container{margin-left: auto; margin-right: auto; width:1000px; height:100%; min-height:100%; text-align: left; background-color:#FFFFFF;}
    .Containerleftborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-x left top;  }
    .Containerrightborder{width:1000px; height:100%; min-height:100%; background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) no-repeat right top; }
    .content1container{width:906px; margin: 0 0 0 47px; height:100%; min-height:100%; background-color:#ffffff; position:relative; }
    .contentleft{width:590px; height:100%; min-height:100%;  background:#ffffff; float:left; margin-left:15px;  }
    .contentright{width:291px; height:100%; min-height:100%; background:#ffffff; float:right;}
    .leftcontent-tops{width:590px; height:41px; background-image:url(images/sectiontop.jpg); float:left;}
    .leftcontent-bottom{width:560px; padding-left:10px; padding-right:20px;  background-image:url(images/sectionback.jpg); background-repeat:no-repeat; float:left; margin-bottom:20px; }
    .rightcontent-tops{width:253px; height:41px; background-image:url(images/sectiontop.jpg); float:right; }
    .rightcontent-bottom{width:233px;  background-color:#AAC7E7; padding-left:10px; padding-right:10px; float:right; margin-bottom:20px;  }
    
    .insideleftborder{width:9px; height:100%; min-height:100%;  background-color:#6DA7E6; position:absolute; top:0px; left:0px;}
    .insiderightborder{width:9px; height:100%; min-height:100%;  background-color:#6DA7E6; position:absolute; top:0px; left:897px;}
    
    .Topleftmenu{ background-image:url(images/actioncomputing_03.jpg); width:274px; height:40px; float:left; }
    .topmenuright{background-image:url(images/actioncomputing_04.jpg); width:632px; height:40px; float:left;}
    .menumiddle{background-image:url(images/actioncomputing_06.jpg); clear:both; width:906px; height:84px; float:left;}
    .menubottomimage{background-image: url(images/newcssbottommenuleft.jpg); width:284px; height:141px; float:left;}
    .menubottomright{background-image: url(images/newcssbottommenuright.jpg); width:622px; height:40px; float:left;}
    
    #centralisemenu{ text-align:center;}
    
    	 a.menu:link {color: White; text-decoration:none; font-weight:bolder; font-size:20px !important }
         a.menu:hover {color: Black !important ; text-decoration: underline; font-weight:bolder;  font-size:20px !important  }
    	 a.menu:link {color: White; text-decoration:none; font-weight:bolder;  font-size:20px !important }
    	 a.menu:visited {color: White; text-decoration:none; font-weight:bolder;  font-size:20px !important }




    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="Container">
    <div class="Containerleftborder">
    <div class="Containerrightborder">
    
    
    <div class="header">
    <div class="Topleftmenu">
    <p style="text-align:center; padding-top:7px;">
    <a class="menu" href="#">Home &#124;</a> <a class="menu"  href="#">Contact &#124;</a> <a class="menu"  href="#">About &#124;</a></p>
    
    </div>
    <div class="topmenuright"></div>
    <div class="menumiddle"></div>
    <div class="menubottomimage"></div>
    <div class="menubottomright"></div>
    <div class="Flashtop"><img src="images/flashback.jpg"></div></div>
    
    
    
    <div class="content1container">
    <div class="contentleft">
    <div class="insideleftborder"></div>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom"><p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>  </p>
    </div>
    <div class="leftcontent-tops"></div>
    <div class="leftcontent-bottom"><p>
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p></div></p>
    </div>
    <div class="contentright">
    <div class="insiderightborder"></div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
              duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="rightcontent-tops"></div>
    <div class="rightcontent-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by gmnightingale View Post
    Right thank you once again for the code you sent it showed me a route round,

    But, I am still having some serious vertical problems, my main containers just stop and dont go all the way to the bottom of the page?

    you can see what i mean by visiting

    www.actioncomputing.co.uk/index-css-rebuild.html
    Yes, that's what they are supposed to do when you specify the heights like that. height:100%; can be misleading, it often doesn't do what you expect it to. You just have to realize what it is 100% of.
    If you put a height of 100% on your body, then .Containerrightborder will be the full height of the viewport when it loads. If content is longer than the viewport, .Containerrightborder still ends at the height of the viewport.

    In that original code I gave you, I did not address this issue because your shadow .jpg's do not lend themselves well to repeating but that is how you fix this problem. You may need to think about doing some photoshopping on your border shadow images after you try this fix -
    Code:
    @charset "utf-8";
    
    * {margin: 0; padding: 0; border: 0; outline: 0;}
    html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
    hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
    
    
    .header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
    .Container {
    margin: 0 auto; 
    width:1000px;
    text-align: left; 
    background:#FFFFFF;
    }
    .Containerleftborder{
    width:1000px; 
    background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-y left;  
    }
    .Containerrightborder{
    width:1000px;
    background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) repeat-y right; 
    overflow: auto; /*to clear the floats*/
    }
    .content1container{
    width:906px; 
    margin: 0 0 0 47px;
    overflow: auto;
    background:#fff; 
    position:relative; 
    }
    .contentleft{width:590px; height:100%; min-height:100%;  background:#ffffff; float:left; margin-left:15px;  }
    .contentright{width:291px
    The secret is overflow:auto; Here is a site that explains how that clears your floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    you can see what i mean by visiting

    www.actioncomputing.co.uk/index-css-rebuild.html

    and my code is below.

    All help is once again very appreciated.
    Don't end up in divitis! There are more tags other tags than <div> and <p>, so use them also in their context to make your document semantic.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Don't end up in divitis! There are more tags other tags than <div> and <p>, so use them also in their context to make your document semantic.
    what exactly are you saying and in what part of my document would you use different tags for example?

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Yes, that's what they are supposed to do when you specify the heights like that. height:100%; can be misleading, it often doesn't do what you expect it to. You just have to realize what it is 100% of.
    If you put a height of 100% on your body, then .Containerrightborder will be the full height of the viewport when it loads. If content is longer than the viewport, .Containerrightborder still ends at the height of the viewport.

    In that original code I gave you, I did not address this issue because your shadow .jpg's do not lend themselves well to repeating but that is how you fix this problem. You may need to think about doing some photoshopping on your border shadow images after you try this fix -
    Code:
    @charset "utf-8";
    
    * {margin: 0; padding: 0; border: 0; outline: 0;}
    html, body {font:Tahoma; font-size:14px; background: #FC6 url(http://www.actioncomputing.co.uk/images/actioncomputing_01try.jpg) repeat-x; height:100%; min-height:100%;}
    hr {margin-top:5px; margin-bottom:5px; width: 100%; height: 2px; color: blue;}
    
    
    .header {height: 265px; width: 906px; margin: 0 0 0 47px; background: #f00;}
    .Container {
    margin: 0 auto; 
    width:1000px;
    text-align: left; 
    background:#FFFFFF;
    }
    .Containerleftborder{
    width:1000px; 
    background: url(http://www.actioncomputing.co.uk/images/actioncomputing_02.jpg) repeat-y left;  
    }
    .Containerrightborder{
    width:1000px;
    background: url(http://www.actioncomputing.co.uk/images/actioncomputing2_07.jpg) repeat-y right; 
    overflow: auto; /*to clear the floats*/
    }
    .content1container{
    width:906px; 
    margin: 0 0 0 47px;
    overflow: auto;
    background:#fff; 
    position:relative; 
    }
    .contentleft{width:590px; height:100%; min-height:100%;  background:#ffffff; float:left; margin-left:15px;  }
    .contentright{width:291px
    The secret is overflow:auto; Here is a site that explains how that clears your floats.
    So basically i should stop trying to use things at 100% i read somewhere that if you set the html and body tag to "min-height:100%" that it should work oh well nevermind so just use overflow auto from now on? as for the repeating graphic in the tables I used for the site I had that graphic we are using as a image and the cell had a repeating background that followed on after the image that matched in perfectly. any idea how i can achieve this in css or am I just going to have to bodge a really long graphic to fit?

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by gmnightingale View Post
    what exactly are you saying and in what part of my document would you use different tags for example?
    Say, your
    Code:
    <div class="insideleftborder"></div>
    can be completely removed, if you make a single image having dimensions 906X1 px, with a small(8px wide?) blue edges, and applied it as the background of your content1container.

    Take a look at the faux column approach

    Also, I think you may combine sectiontop.jpg and sectionback.jpg into a single one and apply it as the background of a single div/p with some top-padding.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Yeah i see your point, the left hand blue border is going to fade from white so its not so sharp I just have not put the graphic in the container yet, And some of the sections are not finished and are just put in there as they are going to be flash anims so I thought I would have to slice it all up. I would really appreciate your input when I get it all done to save me time on future projects :-) thank you for your input

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Don't make a long graphic. That's a waste of bandwidth on short pages and on long pages you'll be right back where you started.

    Instead make an image that is 1px high by the required width and tile it vertically. Use a PNG image type with opacity so that you aren't fighting to keep your top-to-bottom gradient while still trying to keep your side-to-side gradient flowing to the page bottom. This image should only contain the left and right shadow effects (and the blank space in the middle, of course).

    Making this single image will also let you re-work the Containerleftborder and Containerleftborder <div> elements. There is no good reason to use two divs to create one background effect. This is an example of "divitis" that abduraooft was talking about.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Actually, in looking at your page again I really see 3 backgrounds that are in play:

    1) a pattern background (horizontal lines)
    2) a gradient that runs horizontally across the page top that darkens the pattern background
    3) a gradient that runs on either side of the content box

    I would actually create these three backgrounds separately and apply them as follows:

    html -> horizontal gradient at page top - repeat-x only
    body -> horizontal lines image pattern - repeat
    container -> vertical side gradients - repeat-y only

    And yes, you can actually apply a background to the <html> element.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Don't make a long graphic. That's a waste of bandwidth on short pages and on long pages you'll be right back where you started.

    Instead make an image that is 1px high by the required width and tile it vertically. Use a PNG image type with opacity so that you aren't fighting to keep your top-to-bottom gradient while still trying to keep your side-to-side gradient flowing to the page bottom. This image should only contain the left and right shadow effects (and the blank space in the middle, of course).

    Making this single image will also let you re-work the Containerleftborder and Containerleftborder <div> elements. There is no good reason to use two divs to create one background effect. This is an example of "divitis" that abduraooft was talking about.
    Think I will go with the png idea! the thought had crossed my mind but to be 100% honest I already had the graphics and was being a bit lazy. Thanks for your input I think its amazing that people put there time into helping others If only the world was like a forum ;-)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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