SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would I accomplish this

    I've been trying to figure out how to do this, but so far I haven't gotten anywhere. The only way I could make the vertical bar appear was to set the side of the border of one of the columns to solid. The problem with that is that if the border is defined for the shorter column, the bar wont go all the way to the bottom. This is what I'd like to have:
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well here it is anyways:


  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could modify this: http://www.pmob.co.uk/temp/2colmac.htm

    I am unsure of what you mean by your vertical bar, do you mean a bar inside
    a div, or for the overall site?

  4. #4
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am talking about the line vertical line that runs from the top horizontal line to the bottom one. That link you provided should get me started well.

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at the source, it appears that it's quite poorly done and isn't exactly what I'm looking for. I would like the footer to be just below the end of the lowest text in one of the columns instead of always at the bottom. Also, the line that runs from the header to the footer is a background images instead of a stylesheet element.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by champion
    Looking at the source, it appears that it's quite poorly done
    Classic comment. Just so you know, the author of that example, Paul O'Brien is recognised as being a leader in pushing the boundaries of CSS.

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see how using



    as a way to define the borders a cutting edge method. If that's what css pushed to the boundaries is, I'd prefer to see an example where it's far away.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The faux columns may not be cutting edge any more because it's been around for quite a while but it is a commonly-used method and I don't see what your problem is with it. If it works, why complain?
    As for whether this method is cutting edge or not, the point I was making is that its author probably knows more about CSS than any other person on this forum so to call his methods poor will likely remain purely an opinion held by you and not shared by anyone else.

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    The faux columns may not be cutting edge any more because it's been around for quite a while but it is a commonly-used method and I don't see what your problem is with it. If it works, why complain?
    As for whether this method is cutting edge or not, the point I was making is that its author probably knows more about CSS than any other person on this forum so to call his methods poor will likely remain purely an opinion held by you and not shared by anyone else.
    My problem is that it's a poor execution. Why use images when you don't have to? Why is the background image 5 pixels high? Why is it a jpeg? All of this leads to a sloppy design. I'm no saying that whoever did that page doesn't know css, just that there are better ways of accomplishing what I want.

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by champion
    My problem is that it's a poor execution. Why use images when you don't have to? Why is the background image 5 pixels high? Why is it a jpeg? All of this leads to a sloppy design.
    This technique was developed by Dan Cederholm of Simplebits, author of Bulletproof Web Design and first published on A List Apart. You're obviously inexperienced in CSS (otherwise you wouldn't be asking your question here), so I'm afraid that your assertion that this is 'poor execution' and 'sloppy design' is slightly uninformed and misguided.
    To answer your questions:
    1. Why use images when you don't have to?
    Why is using images a 'resort'? Using images is just as valid as any other technique. The thing is that CSS currently has limitations when it comes to creating columns of equal height cross browser. The alternatives require often convoluted workarounds which are purely targetted at IE which doesn't support display: table.
    2. Why is the background image 5 pixels high?
    Not quite sure what you're getting at here - are you saying it should be bigger or smaller? It's a repeating image, so it doesn't need to be huge, in fact the smaller it is, the less file size it takes up. But to create a 1px high image means that the browser has to output that image that many more times. I normally use repeating background images in the 10-20px range but really its height isn't a significant factor.
    3. Why is it a jpeg?
    It probably should be a GIF or PNG but the fact that one was used doesn't detract from the technique. But like the height of the image, it doesn't really matter. If you don't like it, change it. Pre-existing techniques don't have to be slavishly followed as long as the changes you make don't affect the technique working cross browser.
    Now, fair enough you don't like the faux columns technique, not everyone does, so in the spirit of helping you out, you should probably check out the rest of Paul's site - http://www.pmob.co.uk - which has numerous equal height examples which don't use faux columns as well as examples of a variety of other techniques.
    You might also want to look at the One True Layout.

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You can do it, with a lot of css code

    PS you can also use 1px x 1px bgr images repeat-y on one or more wrappers

    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	html,body{text-align:center;}
    	
    	* {margin:0;padding:0;}
    	
    	body{font-size:.75em;background:#eaeaea;margin-top:-1em;}
    	
    	div,p,a{font-size:1em;font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;color:#000000;text-align:left;}
    	
    	.au{margin:1em auto;width:49.1em;position:relative;}
    	
    	.wrx,.fo,.ch,.ci{border:.1em solid #000000;}
    	
    	.wrx,.fo{width:100%;}
    	
    	.wrx{
    	background:#d8d8d8;
    	margin-top:1em;
    	border-bottom:none;
    	}
    	head+body .wrx{overflow:hidden;}
    	
    	.l,.lx,.xl,.xlx,.lb,.lxb,.wrx,.fo{float:left;}
    	
    	.l{width:12.9em;}
    	.lx{width:31.7em;}
    	
    	.xl{background:#000000;width:1px;margin-left:1em;height:1.1em;overflow:hidden;}
    	
    	.lb,.lxb{
    	height:1em;
    	overflow:hidden;
    	border-top:1px solid #000000;
    	}
    	
    	.lb{width:13.1em;}
    	.lxb{width:31.9em;}
    	* html .lxb{width:31.8em;}
    	
    	.fo{
    	position:relative;
    	z-index:100;
    	background:#d8d8d8;
    	border-top:none;
    	}
    	
    	.mc,.mcx{margin:1em 0 0 1em;}
    	.mf{margin:0 0 0 1em;}
    	.mcx{margin-top:0;}
    	
    	.au p{padding:.5em .2em .5em .2em;}
    	
    	.wrx .l a,.wrx .lx a{padding:.5em .2em .5em .2em;display:block;}
    	.wrx .l a:hover,.wrx .lx a:hover{padding:20em 0 0 .2em;position:relative;}
    	
    	.ch{background:#fede57;}
    	.ci{background:#ccccfe;}
    	
    	head+body .wrx:after,head+body .fo:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	.ex,.exx{padding-bottom:32767px;margin-bottom:-32767px;}
    
    	</style>
    	<script type="text/javascript">
    	function is(){
    	agent = navigator.userAgent.toLowerCase();
    	this.o8 = (agent.indexOf("opera 8") != -1);
    	this.o = (agent.indexOf("opera") != -1);
    	}
    	var is = new is();
    	if (is.o8) //alert("Opera8") +
    	document.write('<style type="text/css">.wrx .xl:after{background:#000000;width:1px;border:none;left:0;}.xl{overflow:visibl  e;}.ex:after,.exx:after{content: ".";display:block;background:inherit;height:0;margin-bottom:-32767px;padding-top:32767px;border-left:1px solid #000000;border-right:1px solid #000000;left:-1px;position:relative;width:12.9em;}.exx:after{width:31.7em;}.ex,.exx,.xl{padd  ing-bottom:0;margin-bottom:0;}</style>');
    	if (is.o) //alert("Opera") +
    	document.write('<style type="text/css">	.lb{width:13.1em;}.lxb{width:31.8em;}</style>');
    	</script>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .l,* html .lb,* html .sp{display:inline;}
    	.au{width:48.9em;}.au{w\idth:49.1em;}
    	.lb{width:12.9em;}.lb{w\idth:13.1em;}
    	.lxb{width:31.7em;}.lxb{w\idth:31.9em;}
    	* html .lxb{width:31.7em;}* html .lxb{w\idth:31.8em;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="au">
    
    <div class="wrx">
    
    
    <div class="l mc ex ch">
    <a href="##">test b</a><!--  -->
    <p class="h">left</p>
    <br /><br /><br />
    </div>
    
    <div class="ex xl">&nbsp;</div>
    
    <div class="lx mc exx ci">
    <a href="##">middle</a><!--  -->
    <p>middle
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </p>
    </div>
    
    </div>
    
    <div class="fo">
    <div class="lb mcx"></div>
    <div class="xl"></div>
    <div class="lxb mcx"></div>
    </div>
    
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Jun 17, 2006 at 03:59.

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    You can do it, with a lot of css code
    Which is the reason some people prefer the simplicity of faux columns.


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
  •