www.webdeveloper.com
Results 1 to 12 of 12

Thread: Help with borders

  1. #1
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82

    Help with borders

    Hi guys,

    Borders seem to be a fairly simple thing, right? We that's a what I thought until I tried getting a border to span the length of a page! My site is setup with Wordpress and has two "sidebars". I have each sidebar with a border on the right or left to the main column of content. For the life of me I can't seem to get the borders to continue to the bottom of the page. Can someone help me out? Thanks for your help guys (and gals)!

    http://kwcycling.chrisdire.com

  2. #2
    Join Date
    Dec 2008
    Location
    The Real Upstate NY
    Posts
    10
    Just a guess and nothing more, but looking at your source it could have something to do with the amount of <li></li> you have on either side. I hope I am explaining this ok. For example you have 7 in your left column and only 5 in your right column. The border is only going to run the length of the div it is associated with. Now I have played with it a little and it may not be the proper way but it did extend the borders so that they are even. Here is the edited version of the source code. I do not suggest using this right off until you validate that my adjustments are correct.

    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" dir="ltr" lang="en-US">
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Kenny Williams Racing   &raquo; Home</title>
    
    <link rel="stylesheet" href="http://kwcycling.chrisdire.com/wp-content/themes/default/style.css" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="Kenny Williams Racing RSS Feed" href="http://kwcycling.chrisdire.com/feed/" />
    <link rel="pingback" href="http://kwcycling.chrisdire.com/xmlrpc.php" />
    
    <style type="text/css" media="screen">
    
    	#page { background: url("http://kwcycling.chrisdire.com/wp-content/themes/default/images/kwcycling_bgwide.jpg") repeat-y top; border: none; }
    
    </style>
    
    <meta name='NextGEN' content='0.99.1' />
    
    <style type="text/css" media="screen">@import "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/css/nggallery.css";</style>
    <script type="text/javascript"> var tb_pathToImage = "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/";</script>
    <style type="text/css" media="screen">@import "http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/thickbox.css";</style>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://kwcycling.chrisdire.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://kwcycling.chrisdire.com/wp-includes/wlwmanifest.xml" /> 
    <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
    <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/thickbox/thickbox-pack.js?ver=3.1.1'></script>
    <script type='text/javascript' src='http://kwcycling.chrisdire.com/wp-content/plugins/nextgen-gallery/admin/js/swfobject.js?ver=2.1'></script>
    <meta name="generator" content="WordPress 2.6.5" />
    
    </head>
    <body>
    <div id="page">
    
    
    <div id="header">
    	<div id="headerimg">
    	</div>
    </div>
    <hr />
    
    <div class="sidebarborder">
            <div id="sidebar_left">
              <div class="sidebar">
    
                <div id="leftimg"></div>
    
    		<ul style="width: 100&#37;; height: 100%;">
    			
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    			<li><h2>Author</h2>
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    			</li>
    			-->
    
    			
    			<div id="links"><li class="pagenav"><h2></h2><ul><li class="page_item page-item-9 current_page_item"><a href="http://kwcycling.chrisdire.com" title="Home">Home</a></li>
    <li class="page_item page-item-3"><a href="http://kwcycling.chrisdire.com/coaching/" title="Coaching">Coaching</a></li>
    <li class="page_item page-item-5"><a href="http://kwcycling.chrisdire.com/bike-fitting/" title="Bike Fitting">Bike Fitting</a></li>
    <li class="page_item page-item-2"><a href="http://kwcycling.chrisdire.com/about/" title="About">About</a></li>
    
    <li class="page_item page-item-6"><a href="http://kwcycling.chrisdire.com/testamonials/" title="Testamonials">Testamonials</a></li>
    <li class="page_item page-item-67"><a href="http://kwcycling.chrisdire.com/pictures/" title="Pictures">Pictures</a></li>
    <li class="page_item page-item-28"><a href="http://kwcycling.chrisdire.com/kennys-blog/" title="Kenny’s Blog">Kenny’s Blog</a></li>
    <li class="page_item page-item-7"><a href="http://kwcycling.chrisdire.com/contact/" title="Contact">Contact</a></li>
    </ul></li></div>
    
    
    			
    			<li>
    				<form method="get" id="searchform" action="http://kwcycling.chrisdire.com/">
    <label class="hidden" for="s">Search for:</label>
    
    <div><input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </div>
    </form>
    			</li>
    
    		</ul>
              </div>
    	</div>
    </div>
    
    	<div id="content" class="narrowcolumn">
    
    				<div class="post" id="post-9">
    		<!-- <h2>Home</h2> -->
    			<div class="entry">
    				<h2><em>Welcome</em></h2>
    <p><span class="text71Font1">You have reached the answer to your cycling goals. I can help you become the racer or cyclist you want to be. Kenny Williams Racing offers   affordable coaching, testing, and a fit that will not only improve your pedal stroke, but allow you to enjoy your time in the saddle.</span></p>
    <p><span class="text71Font1"> </span></p>
    <p><span class="text71Font1">-Kenny Williams</span></p>
    
    				
    			</div>
    		</div>
    			
    	</div>
    
    <div class="sidebarborder">
    	<div id="sidebar">
              <div class="sidebar">
    		<ul>
    			
    			
    <li><a href="http://www.rocket7.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/rocket7.gif" width="140" height="52" alt="Rocket 7 Cycling Shoes" /></a></li>
    <li><a href="http://www.1ratemtg.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/1st_rate_mortgage.gif" width="140" height="55" alt="First Rate Mortgage" /></a></li>
    
    <li><a href="http://www.northwestvelo.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/pazzovelo.gif" width="140" height="74" alt="First Rate Mortgage Cycling Team" /></a></li>
    <li><a href="http://www.clubzum.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/zum.gif" width="140" height="74" alt="Club Zum" /></a></li>
    <li><a href="http://www.smithoptics.com/"><img src="http://kwcycling.chrisdire.com/wp-content/themes/default/images/smith.gif" width="140" height="55" alt="Smith Optics" /></a></li>
    <li>&nbsp;</li>
    <br />
    					</ul>
              </div>
    	</div>
    
    </div>
    
    <hr />
    <div id="footer">
    
    <p>
    </p>
    
    </div>
    </div>
    
    <!-- Gorgeous design by Chris Di Re - http://www.chrisdire.com/ -->
    
    
    		</body>
    </html>
    What is in blue is what I added. Hope this helps out.

    Chris

  3. #3
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    Thanks much. That seemed to help a little bit, however I'd still like the borders/lines to span 100% of the page no matter how much content is on the page. Does anyone have any ideas on how I can do this? Maybe someone has a better way of getting this to be done?

  4. #4
    Join Date
    Dec 2008
    Location
    The Real Upstate NY
    Posts
    10
    I guess I may have misunderstood what you wanted done. I figured you wanted the 2 inner vertical borders to be a lined up together. When you say to the bottom of the page are you speaking about to the horizontal border?

  5. #5
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    Sorry, I guess I should have tried to be a little bit more clearer. Chris, yes that is exactly what I'm trying to get done. Because the "footer" is an image the vertical borders will stop a little bit before the horizontal line at the bottom. Do you have any ideas on how to make those vertical borders span the length of the page 100% of the time? Thanks again.

  6. #6
    Join Date
    Dec 2008
    Location
    The Real Upstate NY
    Posts
    10
    Let me play with it a bit and I will get back to you. I have an idea but will need to try some things to be sure it will work.

  7. #7
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    Thank you. I thought about putting the borders on the content column but there are some pages where the content doesn't stretch past the two sidebars. So then I was contemplating an expandable div on each of the sidebars so it would always expand down to the footer, but I'm not 100% sure as how to implement it. Maybe there's a way to set the padding or margin for the bottom of each sidebar to expand accordingly? Let me know what you come up with, I'm rather interested to know. This problem has me perplexed!

  8. #8
    Join Date
    Dec 2008
    Location
    The Real Upstate NY
    Posts
    10
    I know the feeling about troublesome problems. If you did these in CSS can you post the file so I can dig a little further?

  9. #9
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    Here you go, it's attached at it's quite big.
    Attached Files Attached Files

  10. #10
    Join Date
    Dec 2008
    Location
    The Real Upstate NY
    Posts
    10
    Ok here is what I have done but not tested. I added a height setting to the sidebar and sidebar_left sections. They are marked in red in the event it does not work. I couldn't test it because the computer that houses Dreamweaver is down for a bit so I am hoping this small change will help. If not please let me know because there are other things I can do once Dreamweaver is back up.
    Attached Files Attached Files

  11. #11
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    I've actually already tried doing this (several times, in fact) and it seems to do absolutely nothing. Very frustrating. Thanks for your input again.

  12. #12
    Join Date
    Sep 2007
    Location
    Seattle, Washington
    Posts
    82
    Does anyone have any ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles