Hello friends,

 

I want  a seperate sidebar for my portfolio pages but as i am using php include for my sidebar how can i solve this

 

 

 

 

this is  what i want  but the sidebar used here is the one used in all pages it will ctaully be much shorter in length so..?

 

 

If the difference between the sidebar on the normal pages and on the portfolio page is small, you could use the same php "include" file.

 

On the portfolio page add an id to the body tag

<body id="portfolio">

 

In the php "include" file add an extra class for the div (let's call it #nav):-

<div id="nav" class="sidebar2">

 

and in your main stylesheet:-

#portfolio .sidebar2 { height: 540px; }

 

The height of 540px will only be applied to #nav on the portfolio page even though the same php "include" file is used on all pages. Note the space between #portfolio and .sidebar2 because the class isn't in the parent of sidebar2 (#nav) it's a class on the body tag.

 

If you have a completely different sidebar on the portfolio page you might have to have a different "include" file and different php link on the portfolio page.

If the difference between the sidebar on the normal pages and on the portfolio page is small, you could use the same php "include" file.

 

On the portfolio page add an id to the body tag

<body id="portfolio">

 

In the php "include" file add an extra class for the div (let's call it #nav):-

<div id="nav" class="sidebar2">

 

and in your main stylesheet:-

#portfolio .sidebar2 { height: 540px; }

 

The height of 540px will only be applied to #nav on the portfolio page even though the same php "include" file is used on all pages. Note the space between #portfolio and .sidebar2 because the class isn't in the parent of sidebar2 (#nav) it's a class on the body tag.

 

If you have a completely different sidebar on the portfolio page you might have to have a different "include" file and different php link on the portfolio page.

but my main problem is the background image of the sidebar which i need to shorten

I think you're using a single background image for the background of the menublock - you'll need to create a new smaller version of the same image to the new size. The method that Wickham has written above will work for this...you just need to create the image to go with the new CSS.

 

If it was me, I'd construct the menublock in a way that allows it to expand to fit different sizes using the same image(s) - this is more complicated in the CSS & perhaps more than I can explain simply in a short reply.

port_sidebar.inc.php

 

 

 

 

<div id="nav" class="sidebar2">


<div id="menuBlock"><!-- left side menu -->
<div class="box boxText firstBox">
<div><a href="chatroll.htm" target="_blank" onclick='showPopup(this.href);return(false);'><img src="../images/live%20support.gif" border="0" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
<div class="c10"></div>
</div>
<div class="applemenu">
<div class="silverheader"><a href="">Web Design</a></div>
<div class="submenu">
<a href="">Static Web Design</a><br />
<a href="">Dynamic Web Design</a><br />
<a href="">Ecommerce Webdesign</a><br />
<a href="">CMS Webdesign</a><br />
</div>
<div class="silverheader"><a href="">Graphic Design</a></div>
<div class="submenu"><strong><a href="">Logo Design</a></strong><br />
<a href="">Banner Design</a><br />
<a href="">Flyer Design</a><br />

<a href="">Brochure Design</a><br />
<a href="">label Design</a><br />
<a href="">Ebook Cover Design</a><br />

<a href="">Business Card design</a><br />
<a href="">Website template Design(Psd)</a><br />
<a href="">Website banner Design(Static)</a><br />

</div>

<div class="silverheader"><a href="http://www.webdesigncut.com/animations/">Animations</a></div>
<div class="submenu">
<a href="http://www.webdesigncut.com/animations/webbanneranimations/">Web banner animations</a><br />
<a href="http://www.webdesigncut.com/animations/3dlogoanimations/">3d logo animations</a><br />
<a href="http://www.webdesigncut.com/animations/webbanneranimations/">Web banner animations</a><br />
<a href="http://www.webdesigncut.com/animations/flashanimations/">Flash animations</a><br />
<a href="http://www.webdesigncut.com/animations/jqueryanimations/">Jquery animations</a><br />
<img src="http://i27.tinypic.com/sy7295.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div>

<div class="silverheader"><a href="#">Tutorials</a></div>
<div class="submenu">Some random content here<br /></div>
<div class="silverheader"><a href="http://www.webdesigncut.com/blog/">Latest Blog posts</a></div>
<div class="submenu">
<a href="http://www.webdesigncut.com/blog/2010/03/essential-checks-before-launching-your-website/">Essential checks before launching website</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/03/10-free-mobile-application-development-icon-sets/">Mobile Application development icons</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/03/20-superb-t-shirt-designs/">20 Superb T shirt designs</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/03/top-10-magazines-for-webdesigners3d-artists-and-photographers/">Magazines for webdesigners and 3d artists</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/03/discover-the-power-of-contentmanagement-system/">Discover the power of CMS</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/03/how-to-make-money-with-your-website/">How to make money from your website</a><br/>

<a href="http://www.webdesigncut.com/blog/2010/02/the-many-approaches-to-web-design/">Many approaches to webdesign</a><br/>
<a href="http://www.webdesigncut.com/blog/2010/02/banner-advertising-the-easiest-way-to-get-1000-visitors-a-day/">Banner Advertising Facts</a><br/>
</div>
<div class="silverheader"><a href="#">Get a Quick quote</a></div>
<div class="submenu">
<form name="quick_form" method="post" action="http://webdesigncut.com/sendmail.php" onsubmit="return form_validation()">
<table width="100%" border="0" cellpadding="5" cellspacing="0" align="center">
<tr>
<td align="center" valign="middle"><input name="name" type="text" class="form-white-text c11" id="name" value="name*" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input name="email" type="text" class="form-white-text c12" id="email" value="email*" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input name="phone" type="text" class="form-white-text c12" id="phone" value="phone*" /></td>
</tr>
<tr>
<td align="center" valign="middle"><select name="project" class="form-white-text c13">
<option value="project" selected="selected">project</option>
<option value="Identity Design">Web page design</option>
<option value="Brochure">Web development</option>
<option value="Ad Design">Internet marketing</option>
<option value="Poster & Banners">Website hosting</option>
<option value="Packaging">Graphic design</option>
<option value="Commercial Graphics">Banner design</option>
<option value="Illustrations">Brochure design</option>
<option value="Illustrations">Image retouching</option>
<option value="Illustrations">Flyers</option>
<option value="Illustrations">Animations</option>
</select></td>
</tr>
<tr>
<td align="center" valign="middle">
<textarea name="comments" cols="17" class="form-white-text c14">
</textarea></td>
</tr>
<tr>
<td align="center" valign="middle"><input name="Request a quote" type="submit" class="black-text" value="Request a quote" /></td>
</tr>
</table>
</form>
</div>
</div>
<br /></div>
</div>
<!-- left side menu end -->
</div>
<!-- content end -->

 

 

 

 

my css main

 

 

 

 

#portfolio .sidebar2 { height: 540px;
background-image : url('../images/sidebar2-bg.jpg');
background-repeat : no-repeat;  }

 

and i have addedbody id portfolio

 

 

 

 

and this iswhat i get

 

 

Was the <div id="nav"> there before? or have you added that in as well?

 

If it wasn't there before, you only need to apply the class="sidebar2" to the <div id="menublock">

 

The CSS should be ok as it is.