Jump to content
shek

How do I minimize the tab height in my blog ?

Recommended Posts

Hello everyone,I've encountered a new problem, that is, in the tabs bar on my blog there is lot of empty space :). How do I remove it ?My blog : http://everything-underthe-sun.blogspot.com/See at the top, where home and privacy policy pages are embedded. I want that bar height to be reduced, so that the height is equal to the home and privacy button height. what and how to do ?

Edited by shek

Share this post


Link to post
Share on other sites

1) you need to adjust the height in http://everything-underthe-sun.blogspot.com/ page

.tabs-outer {background:#B6B3AD url(http://3.bp.blogspot.com/-a0Xkq2wsllA/Tcd8G0Va26I/AAAAAAAAAP4/uxLYXCU_4Cg/s1600/pagesBackground.png) repeat-x scroll 0 0;height:48px;overflow:hidden;position:relative;}

2) adjust margins inhttp://www.blogger.com/static/v1/widgets/1...ss_2_bundle.css

widget {margin:30px 0;}

Share this post


Link to post
Share on other sites

oh oh.. when I did exactly what you said me, it over covered the home and privacy buttons :)as shown in the below image,Untitled.jpgI want the buttons should also go up with the reduction in the bar size..

Share this post


Link to post
Share on other sites

that is due to the margin setting in widget {margin:30px 0;}you will have to reduce this to widget { margin:0px 0; }as the present margin will force it beyond the viewing area set by.tabs-outer {background:#B6B3AD url(http://3.bp.blogspot.com/-a0Xkq2wsllA/Tcd8G0Va26I/AAAAAAAAAP4/uxLYXCU_4Cg/s1600/pagesBackground.png) repeat-x scroll 0 0;height:48px;overflow:hidden;position:relative;}when the height is set below or equal to 30px.

Share this post


Link to post
Share on other sites

Amazing.. Worked like charm ! :)Thanks a lot..Can you please tell me where did you learn all this I too want to learn the advance thongs like this..

Share this post


Link to post
Share on other sites

If you want advance learning for thongs? you are definitely in the wrong forum. :) Once you know the in and outs, of producing a html page, and applying css to achieve the design you require, you can quickly spot the areas that need amending to achieve the desired result. The use of FireFox's addon firebug is a great asset in identifying problem areas, and you can adjust css code for a page, without psychically changing the original css file.With your page, all i had to do is identify the outer container with controls the height, then the inner child element that positions the links by selecting the elements using firebug, you can then identify the css class or id of this element and styles applied, it also tells you where these styles are applied i.e a specific css file, or inline in current web page itself.

Share this post


Link to post
Share on other sites

okay got it.. so only experience and experimenting can get me through the advance learning, right? :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...