SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Navigation Bar Fade

    Hello

    I have just noticed that one or two of my lengthier pages have this quite ugly finish to the navigation bar at the side.

    http://www.ubereadoolische.com/features.html

    I was wondering if it was possible to either fade the bar into the background (currently black) or alternatively keep it there and scroll the page itself, if that makes sense.

    My CSS is very limited, but I have just bought The CSS3 Anthology which I will be cracking on with very soon.

    Thanks
    James

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    I am assuming you mean the left side bar.


    1) I would get rid of the height declaration in #navigation. it will cause trouble if your content is taller than the declared height
    2) Yeah you could fade it using a background image. you would create the image in an editor, make it as tall as you want.. let say 10px by 100px, and a gradient from the bg color of your sidebar to black.

    in your CSS you would target the element.. something sort of like this:

    Code:
    #navigation { 
    width: 180px;
    //* height: 884px;*/
    background-color: #3E3535;
    border-left: 3px solid #A62300;
    border-right: 3px solid #A62300;
    border-top: 3px solid #FFAE00;
    padding-bottom:100px; background: url(fadeToBlack.gif) 0 100% repeat-x #your #3E3535 ;
    }
    There are techniques which also allow you to create gradients directly in CSS, however they are a bit more convoluted, vary different from browser to browser and and are only supported by SOME the latest browsers. So will stick to the basics for now.


    that's one option.

    alternatively keep it there and scroll the page itself, if that makes sense.
    actually am confused by this. But you can use "position:fixed" instead of "position: absolute" to keep #navigation fixed on the screen, while everything else would scroll. so you may want to apply it to the header as well. in that case, you would need to figure out a way to calculate the height of your header. then code something like
    Code:
    #header{height:105px; /* I loathe using px here, but  for the brevity of this example*/
    
    #navigation {
    width: 180px;
    top:105px;
    bottom:0;
    background-color: #3E3535;
    border-left: 3px solid #A62300;
    border-right: 3px solid #A62300;
    border-top: 3px solid #FFAE00;
     position :fixed ;/* MAKE SURE THIS IS NOT OVERRIDEN LATER IN THE CODE*/
    }

    I know you are just starting with CSS but the problem here is the strategy is ALL WONG. you have used fixed sizes, based on pixels as well as absolute positioning and that just not the way a web-layout works. I would reconsider doing the whole thong over again, strategizing around flexible heights and positions for your design and and then using floats or b/g images to crate faux columns. This is a quick example of how to pull off this technique.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    					html, body, p{padding:0; margin:0;}
    					.pageWrap{margin:0 10%; background: silver}
    					.hed,.fut{min-height:100px; background: pink}
    					.cont {padding-left:100px}
    					.cont .inner {border-left:2px groove; display:inline-block; width: 100%;background: orange;  }
    					.cont {background: cyan; }
    					.nav{background: cyan; width:100px; float:left;margin-left:-102px;}
    					.main
    		</style>
    	</head>
    	<body>
    <div class="pageWrap">
    	<div class="hed">Header</div>
    	<div class="cont">
    		<div class="inner">
    			<div class="nav">
    				Navigation
    				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</div>
    			<div class="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.			</div>
    		</div>
    	</div>
    	<div class="fut">Foot</div>
    </div>
    	</body>
    </html>
    Incidentally... you also have some odd non HTML elements P4, p5??? that you should consider correcting.

    hope that helps

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or just add a absolute positioned div at the bottom with 100% height with the same style as your sidebar http://www.visibilityinherit.com/cod...ns-withcss.php

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just want to say thank you for the responses, I have been too busy on other projects to review it (plus Christmas etc) but will be taking a look in the next week.


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
  •