Jump to content

How do I minimize the tab height in my blog ?


shek

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 ?

Link to comment
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;}

Link to comment
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..

Link to comment
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.

Link to comment
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..

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...