SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TechTimes #70 QuickTip

    Well, having the column trouble myself, I'm inclined to give the javascript solution I try, even though it won't work if js is browser-disabled.

    But as a newbie, I have a quick question. After viewing the tip and the example, there is no css definition for "leftcontent", "contentcontent", etc. - just for "left", "content", "right". Does this have to be defined - or if div id"leftcontent" a natural combination of both the left and content div definitions?

    Sorry if this seems silly - just trying to get things around the swirling brain.

    Artech8

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've just had a quick look at the article and I would assume that the id's leftcontent, contentcontent and rightcontent are just used by the javascript routine and do not need to be defined in CSS.

    Code:
    // Get natural heights
      var cHeight = xHeight("contentcontent");
      var lHeight = xHeight("leftcontent");
      var rHeight = xHeight("rightcontent");
    Paul

  3. #3
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I tried the method out (I'm only using two columns) but couldn't get it to work out. Fooled around with it for about three hours yesterday and am still confused - even after looking at the sample about a thousand times.

    Anybody with ideas or clarity on this, please help.

    Thanks,
    Artech8

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I just tried the tip out and it working within a minute.

    To turn it into two columns just take the centre content out of the html and set the left and right columns to 49%. You will have to change the original background color to match one of your columns for the odd 1% that's left. (It all does of course depend on how you want the columns to be etc.)

    I don't see what your problem is as everything seems straight forward. Probably best if you post your code and tell us what you are trying to do.

    Paul

  5. #5
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I've got it now, Paul. Thanks. It was that ceter column thing that was getting me. I've just got to play with the percentages now.

    Thanks for pointing out the obvious - I was going blind staring at it.

    Artech8

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you get stuck just post the code but I'm glad you sorted it out. (Best way to learn - trial and error.)

    Paul

  7. #7
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I was doing okay (and the trial and error are good for me), but I'm having problems with the "footer" part. Mine is actually called "copyright" and it either doesn't show at all using the method in the tip, or is at bottom of screen instead of columns. So, here's some html and the relevant css. Do I need to move the copyright div definition out of the external sheet and into the head?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>About Us</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="artechGrpInterior.css" rel="stylesheet" type="text/css">
    <script src ="x.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function P7_autoLayers() { //v1.4 by PVII
     var g,b,k,f,args=P7_autoLayers.arguments;a=parseInt(args[0]);if(isNaN(a))a=0;
     if(!document.p7setc){p7c=new Array();document.p7setc=true;for(var u=0;u<10;u++){
     p7c[u]=new Array();}}for(k=0;k<p7c[a].length;k++){if((g=MM_findObj(p7c[a][k]))!=null){
     b=(document.layers)?g:g.style;b.visibility="hidden";}}for(k=1;k<args.length;k++){
     if((g=MM_findObj(args[k]))!=null){b=(document.layers)?g:g.style;b.visibility="visible";f=false;
     for(var j=0;j<p7c[a].length;j++){if(args[k]==p7c[a][j]) {f=true;}}
     if(!f){p7c[a][p7c[a].length++]=args[k];}}}
    }
    //-->
    </script>
    <script language="JavaScript" type="text/JavaScript">
    function adjustLayout()
    {
    var lHeight = xHeight("blueText");
    var rHeight = xHeight("TextText");
    var maxHeight =
    	Math.max(lHeight, rHeight));
    	xHeight("Text", maxHeight);
    	xHeight("blue", maxheight);
    	xShow("copyright");
    }
    window.onload = function()
    {
      xAddEventListener(window, "resize",
        adjustLayout, false);
      adjustLayout();
    }
    </script>			
    </head>
    
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="artechLogo"></div>
    <div id="Text">
    	<div id="TextText">
      <p>a whole bunch o'text fills this area</p>
      <p class="top">back to top</p>
    </div></div>
    
    <div id="artechTagline"></div>
    <div id="leftImg"></div>
    <div id="blue"><div id="blueText"><img src="images/navigation/homeNav/transparent10px.gif">
    </div></div>
    	<div id="copyright">Copyright 2003. Artech Group, Inc.</div>
    <div id="navAbout">
    	... navigation items fill this area - no problem with them YET
    </div>	
    </body>
    </html>
    and the relvant css portions:
    Code:
    div#artechLogo {
    	background-image: url(images/navigation/intNav/logo.png);
    	position:absolute; left:0px; top:0px; width:240px; height:91px; z-index:1
    }	
    a#artechLogo img {width: 240px; height: 91px; border-width: 0; background: top left no-repeat;}
    div#artechTagline {
    	background: #003399;
    	position:absolute; left:0px; top:91px; width:240px; height:99px; z-index:2;
    	background-image: url(images/navigation/intNav/tagline.png);
    }	
    div#Text {
    	background: #EDEDED;
    	position: absolute; left:240px; top:50px; width:67%; min-width: 25%; height: auto;
    	border-top-width: 1px; border-top-style: solid; border-top-color: #000000;
    	padding-top: 15px; padding-bottom: 15px; z-index:3;
    }	
    div#leftImg {
    	background-image: url(images/backgrounds/globe_data_lo2.jpg);
    	position:absolute; left:0px; top:190px; width:240px; height:306px; z-index:4; background-color: #003399;
    }
    div#blue img {width: 240px; height: auto; border-width: 0; background: top left no-repeat;}	
    div#blue {
    	background-image: url(images/backgrounds/leftimg.gif); background-color: #003399;
    	position: absolute;
    	left:0px;
    	top: 496px;
    	margin: 0;
    	width: 240px; height: 100%; min-height: 5%;
    	z-index:9;
    }	
    div#copyright {
    	position:absolute; bottom:0px; width:100%; z-index:17;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #000000;
    	text-indent: 8px;
    	background-color: #FFFFFF; visibility: hidden;
    }
    I'm confusing myself.

    Artech8

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It shouldn't matter where you put the css.

    In the tech times script the footer is not placed absolutely but in your code you have placed it absolutely which is probably confusing the script. I would assume that the problem it's not showing lies somewhere else.

    Have you got a link to your page so that I can see what's happening as I couldn't get much sense from the partial code you posted.

    I'll keep looking anyway.

    Paul

  9. #9
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I tried taking out the positioning and it didn't show at all.

    I put a version here: http://artechgrp.com/test/aboutUs3.html

    Thanks for your help.

    Artech8

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've stripped your page down so you can see that the code works and I'll leave it up to you to build the page back again

    The columns must start in the same place otherwise the script puts them to the same length which means that they will only be aligned if they start in the same place. One column must be in the normal flow otherwise they won't take up any space. This is the problem you had with the footer, it was put at the very top of the page because the columns were absolutely positioned and therefore not in the normal flow.

    You will need to put all your left column images inside the left column otherwise they wont be included in the height. The footer goes at the end of the code and is not positioned but placed in the normal flow. The script shows the footer after it has calculated the maxHeight. Also there was in error in the script where you had maxheight instead of maxHeight (and a missing bracket).

    I've left the css in the head of the document just so you can see it but put it back externally when you've finished. You will need to add all your other styles back in etc.

    Sorry to leave you so much to do

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>About Us</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    p {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 15px;
     color: #000000;
     text-align: justify;
     padding-right: 30px; padding-left: 30px;
    }
    a {
     font-family: Helvetica, Arial, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #003399;
     line-height: 15px;
     text-decoration: none;
    }
    h1 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     color: #003399;
     line-height: 24px;
     padding-right: 30px; padding-left: 30px;
    }
    h2 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-style: italic;
     font-weight: bold;
     color: #003399;
     padding-right: 30px; padding-left: 30px;
    }
    div#artechLogo {
     background-image: url(http://artechgrp.com/test/images/nav...ntNav/logo.png);
     position:absolute; left:0px; top:0px; width:240px; height:91px; z-index:1
    } 
    a#artechLogo img {width: 240px; height: 91px; border-width: 0; background: top left no-repeat;}
    div#artechTagline {
     background: #003399;
     position:absolute; left:0px; top:91px; width:240px; height:99px; z-index:2;
     background-image: url(http://artechgrp.com/test/images/nav...av/tagline.png);
    } 
    div#Text {
     background: #EDEDED;
     margin-left:240px; width:67%; min-width: 25%; 
     border-top-width: 1px; border-top-style: solid; border-top-color: #000000;
    ; z-index:3;
    } 
    
    div#blue {
     
     background-image: url(http://artechgrp.com/test/images/bac...ds/leftimg.gif); background-color: #003399;
     float:left;
     left:0px;
     margin: 0;
     width: 240px; 
     z-index:9;
    } 
    #copyright {
     width:100%; z-index:17;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #000000;
     text-indent: 8px;
     background-color: red; visibility:hidden;
    }
    </style>
    <script src ="http://artechgrp.com/test/x.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function P7_autoLayers() { //v1.4 by PVII
     var g,b,k,f,args=P7_autoLayers.arguments;a=parseInt(args[0]);if(isNaN(a))a=0;
     if(!document.p7setc){p7c=new Array();document.p7setc=true;for(var u=0;u<10;u++){
     p7c[u]=new Array();}}for(k=0;k<p7c[a].length;k++){if((g=MM_findObj(p7c[a][k]))!=null){
     b=(document.layers)?g:g.style;b.visibility="hidden";}}for(k=1;k<args.length;k++){
     if((g=MM_findObj(args[k]))!=null){b=(document.layers)?g:g.style;b.visibility="visible";f=false;
     for(var j=0;j<p7c[a].length;j++){if(args[k]==p7c[a][j]) {f=true;}}
     if(!f){p7c[a][p7c[a].length++]=args[k];}}}
    }
    //-->
    </script>
    <script language="JavaScript" type="text/JavaScript">
    function adjustLayout()
    {
    var lHeight = xHeight("blueText");
    var rHeight = xHeight("TextText");
     
     var maxHeight =
    	Math.max(lHeight, Math.max(rHeight));
     xHeight("Text", maxHeight);
     xHeight("blue", maxHeight);
     xShow("copyright");
    alert(maxHeight +" " +lHeight  +" " +rHeight);
    }
    
    window.onload = function()
    {
      xAddEventListener(window, "resize",
    	adjustLayout, false);
      adjustLayout();
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="blue"> 
      <div id="blueText"> 
    	Blue text d
    	<p>&nbsp;</p>
      </div>
    </div>
    <div id="Text"> 
      <div id="TextText"> 
    	<p>Communication: On paper. On the screen. Words. Images. Ideas.</p>
    	<p>All targeted for action: Choosing. Believing. Contributing. Buying. Responding.</p>
    	<p>The Artech Group™ is in the business of business communication. Just 
    	  tell us what your need is, and weíll figure out the rest. Weíll solve your 
    	  communication problem, whatever what it takes. </p>
    	<h1>Philosophy</h1>
    	<h2>Who We Are & How We Do Business</h2>
    	<p class="boldtext">"Yes, we can."</p>
    	<p>These three words sum up the Artech Groupís business philosophyÖ <br>
    	  <span class="boldtext">"Yes we can </span>solve the problem."<br>
    	  <span class="boldtext">"Yes we can </span>meet your expectationsÖand exceed 
    	  them."<br>
    	  <span class="boldtext">"Yes we can </span>deliver when you need it."</p>
    	<p>Service is at the heart of our business. Itís a commitment that is our 
    	  unwavering focus and passion. A commitment to technology. A commitment to 
    	  maintain highly talented staff at every level. A commitment to deliver the 
    	  best product for every project, for every client.</p>
    	<p>Itís our job to solve communication problems. Tell us what your need is. 
    	  Weíll figure out the rest. Once you give it to the Artech Group™, 
    	  you donít have to worry about it.</p>
    	<p class="boldtext">ìYes, we can do that.î </p>
    	<p class="top">back to top </p>
    	<h1>Management & Creative Services</h1>
    	<p>Whether your communication is printed on paper or as pixels on a screen, 
    	  its success is determined by the quality of the foundational work: strategy, 
    	  project management, copy, design, and production. The Artech Group™ 
    	  brings together all the disciplines required for successful communication 
    	  with the convenience of one-stop shopping and the peace-of-mind of one sole 
    	  point of responsibility.</p>
    	<p><span class="boldtext">Branding.</span> Itís the most fundamental and most 
    	  important relationship you have with your customer. Who are you? What does 
    	  your company stand for? What does your product mean to your customers? What 
    	  do they think of when they think of your company? Itís all in your brand. 
    	  The Artech Group™ can help you craft your brand position for maximum 
    	  market advantage, from corporate and product identity, to product packaging 
    	  and advertising. So that you can be the #1 brand in your marketplace. </p>
    	<p><span class="boldtext">Project Management.</span> From initial strategy 
    	  through final delivery, Artech ensures that every detail of your project 
    	  is executed to meet and exceed expectations. </p>
    	<p><span class="boldtext">Copywriting.</span> Itís not just what you say, 
    	  itís how you say itÖand itís not said the same way in print as it is in 
    	  multimedia or on the Internet. Our professionals turn the phrases that get 
    	  the response you want. </p>
    	<p><span class="boldtext">Graphic Design.</span> A picture is worth a thousand 
    	  wordsÖgreat design is priceless. More than anything else, the look and feel 
    	  of your communication determines if the reader/viewer will stop. In any 
    	  medium and any format, Artech designs for maximum impact and results. </p>
    	<p><span class="boldtext">Prepress & Production.</span> Printing and digital 
    	  media are in a constant state of change and technological advancement. The 
    	  Artech Group™ maintains state-of-the-art capability for all digital 
    	  prepress and multimedia production ó on both the PC and Macintosh platforms 
    	  ó and makes continuous investments in new technology and training. The result 
    	  is the highest quality product and greatest production efficiencies for 
    	  our clients.</p>
    	<p class="top">back to top</p>
      </div>
    </div>
    <div id="copyright">Copyright 2003. Artech Group, Inc.</div>
    </body>
    </html>
    Good Luck
    Paul

  11. #11
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks for so much help. Still having issues there. I took the code you posted and put into a new file - only modified the paths to some images.

    Display is kind of okay in NS 7 (Mac) - the left and right columns go down the page, and the copyright appears, but the "red" background overlays the right column. Also gets a Javascript Error/alert (I guess that was the alert additive to the script.

    In IE 5.1 (Mac) - the left column doesn't extend and the copyright doesn't appear.

    I'm putting another test up. See it here http://artechgrp.com/test/paulorig.html

    I hope I'm not being a total idiot. I've been doing variations of this for about three hours and feel really slow.

    Thanks
    Artech8

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I haven't replied earlier - been busy.

    Yes take out the javascript alert line, I just put it in to check if the script was finding the right heights etc.

    I don' have access to a mac but I found that opera wasn't adjusting the left column either. I changed this line (below) and now it seems to display ok so maybe it will work on the mac now? It works ok on iE6, NN6.2, Moz 1.2 (see below for problems with Opera 6 & 7).


    Code:
    var maxHeight =
    	Math.max(lHeight, rHeight);
     maxHeight=maxHeight+25;
    I also noticed that Opera wasn't allowing enough room so I added 25px which seemed to make it work better but opera is also placing the footer a few pixels away from the bottom of the column. I'll have to play around with it some more as the tech times example seems to display ok in Opera with no problem. Which probably means the problem lies somewhere else.

    It might be worth you checking the tech times example in your mac versions to see if it does work ok otherwise we'll be wasting our effort.

    Hope this helps a bit and let me know if you have any success.

    Paul

  13. #13
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think this might be better suited for the javascript forum (even though it revolves around css)...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Hi Artech8,

    There are several different ways to do this. The following is a simplified version that gives the layout you're wanting. I noticed you had col1's width set to 240. Below, set col1's width with the variable 'col1Width'.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <style type="text/css"> 
    div#col1 {
      background:#039; visibility:hidden;
      position:absolute; margin:0; padding:10px;
    } 
    div#col2 {
      background:#ccc; visibility:hidden;
      position:absolute; margin:0; padding:10px;
    } 
    div#footer {
      background:#930; visibility:hidden;
      position:absolute; margin:0; padding:2px;
    } 
    </style> 
    <script src='x.js' type='text/javascript'></script> 
    <script type='text/JavaScript'> 
    var col1Width = 240;
    window.onload = function() { 
      xAddEventListener(window, 'resize', adjustLayout, false); 
      adjustLayout(); 
    } 
    function adjustLayout() { 
      // set col widths
      xWidth('col1', col1Width);
      xWidth('col2', xClientWidth() - col1Width);
      // set col heights
      var maxH = Math.max(xHeight('col1'), xHeight('col2')); 
      xHeight('col1', maxH); 
      xHeight('col2', maxH);
      // set col positions
      xMoveTo('col1', 0, 0);
      xMoveTo('col2', col1Width, 0);
      // set footer width and position
      xWidth('footer', xWidth('col1') + xWidth('col2'));
      xMoveTo('footer', 0, maxH);
      // show everything
      xShow('col1');
      xShow('col2');
      xShow('footer'); 
    } 
    </script> 
    </head> 
    <body> 
    
    <div id="col1">
      <h3>Column 1</h3>
    </div>
    
    <div id="col2">
      <h3>Column 2</h3>
    </div>
    
    <div id="footer">Footer</div>
    
    </body>
    </html>

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the above demo online.

    Here's a similar demo I wrote a few months ago.

    Here's a more complex example of the dynamic layout idea.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    Thanks for the excellent help, I'm sure Artech8 can accomplish his design now. (I've bookmarked your site as you have some interesting stuff there.)

    Quote Originally Posted by redux
    i think this might be better suited for the javascript forum (even though it revolves around css)...
    Yes you're right -Sorry for continuing the thread

    Paul

  17. #17
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul and Mike for your patient support. I'll take a look at this this morning.

  18. #18
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A bit off topic, but came up with this this morning. Only works for two and three column layouts without more involved editing (lots of comments in the source, three cols with not JS)

    Douglas
    Hello World

  19. #19
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Thanks! You were doing a fine job helping Artech8. I didn't mean to intrude, but I just thought I would suggest a little different solution - there are several different ways.

    Hi Douglas,
    Wow, that's very interesting... I don't completely understand how it works, I'll have to look at it more later.

  20. #20
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - a long day. Well, sticking with the original thought using Mike's script (with minor edits) and Paul's advice, here's where I am. I'm happy to say on my Mac this works in IE 5.1 and NS 7.02 - I'd appreciate feedback on any other browsers and platforms.

    http://artechgrp.com/test/aboutUsTALL.html

    I did find something causing this (apparently) to not work. When I tried to do preload images, the columns wouldn't extend. I began by stripping out everything I didn't really need and adding back in, and tweaking line by line. The preload thing really is strange - anyone had that before?

    And to Douglas - I'm going to try a version as your post showed, after I can see straight again.

    Thanks to all,
    Artech8

  21. #21
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Artech8
    And to Douglas - I'm going to try a version as your post showed, after I can see straight again.
    Looking at your page, (I didn't before) I think the best solution would just be this:

    Code:
    body { background: #fff url(image/bg.gif) repeat-y}
    Where bg.gif is a single row of pixels:

    http://www.neuance.net/es/bg.gif



    This is CSS, you have more power than you would have with just tables

    Douglas
    Hello World

  22. #22
    SitePoint Member Artech8's Avatar
    Join Date
    Jul 2003
    Location
    Baltimore, MD
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Douglas. I had a version with a div like that - don't even remember why I changed it now. It fills nicely.


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
  •