Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    simple (?) padding/border issue

    Hello!

    I have a slight problem with my tumblr website. I'm tweaking a premade template and there's one thing i can't seem to get right.

    My menu box uses borders and padding. I am trying to eliminate the extra space under the links to make it the same as the space above the links.

    http://whlstrm.tumblr.com/

    The menu is at the top of the page.

    Since i haven't been able to figure it out myself i guess i really cant be sure of which code line that should be altered. So here's all code considering the menu links:

    /* Header Left-Aligned
    ********************************/

    Code:
    .links {
    	float: right;
    	margin-top: 10px;
    }
    
    .links ul {
    	margin-top: 10px;
    	padding: 0;
    	display: block;
    	float: right;	
    }
    
    .links li {
    	display: inline;
    	margin-left: 10px;
    	font-size: 16px;
    	text-transform: none;
    }
    
    .links li:first-child {
    	margin-left: 0px;
    }
    /* Header Centered
    ********************************/

    Code:
    .links {
    	margin-top: 0px;
    	text-align: center;
    	float: none;
    	border: 1px solid rgba(136, 136, 136, 0.4);
    }
    
    .links ul {
    	margin-top: 10px;
    	padding: 0;
    	display: block;	
    	text-align: center;
    	float: none;
    }
    
    .links li {
    	display: inline;
    	margin-left: 10px;
    	text-transform: none;	
    }
    
    .links li:first-child {
    	margin-left: 0px;	
    }
    /* Browser size break-points
    ********************************/

    Code:
    .links {
    	margin-top: 0px;
    	margin-bottom: 0px;
    	text-align: center;
    	float: none;
    	border-bottom: 1px solid rgba(136, 136, 136, 0.4);
    }
    
    .links ul {
    	margin-top: 10px;
    	padding: 0;
    	display: block;	
    	text-align: center;
    	float: none;
    }
    
    .links li {
    	display: inline;
    	margin-left: 16px;
    	font-size: 17px;
    	text-transform: none;	
    }
    The links:

    Code:
                    {block:IfShowNavigation}
    				<div class="links">
    					<ul>
    						<li><a href="/">Home</a></li>
                            {block:HasPages}
                            {block:Pages} 
    						<li><a href="{URL}">{Label}</a></li>
                            {/block:Pages} 
                            {/block:HasPages}
                            {block:AskEnabled} 
        					<li><a href="/ask">{AskLabel}</a></li>
    						{/block:AskEnabled}
                            {block:SubmissionsEnabled} 
    						<li><a href="/submit">{SubmitLabel}</a></li>
    						{/block:SubmissionsEnabled}
                            {block:IfShowArchiveNavigationLink}
                            <li><a href="/archive">Archive</a></li>
                            {/block:IfShowArchiveNavigationLink}
    					</ul>
    				</div>
    				{/block:IfShowNavigation}
    The theme is called 'Observer Theme' by Zack Sultan.

    I've been trying out different solutions for weeks now! I would be so happy if someone knew what the trouble was.

    All the best!
    /Manne

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    116
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi mannekaeng,

    Not quite sure if this will solve your problem but one thing that may help 'even' out the spacing where your top links are located ('home' & 'archive') is to eliminate the following .links ul {margin-top:10px} call out under your /*Header Centered*****/ section:
    Code:
    .links ul {
    	/*margin-top: 10px;*/
    	padding: 0;
    	display: block;	
    	text-align: center;
    	float: none;
    }
    What this did however was increase your padding from 10 to 18 above and below the link, so you may want to adjust the height of your box if your looking to make this smaller. But either way this appeared to 'balance' out the links in your top box. (i did not check how this affected the rest of the page)

    hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • Users who have thanked Brandnew for this post:

    mannekaeng (10-20-2013)

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brandnew View Post
    Hi mannekaeng,

    Not quite sure if this will solve your problem but one thing that may help 'even' out the spacing where your top links are located ('home' & 'archive') is to eliminate the following .links ul {margin-top:10px} call out under your /*Header Centered*****/ section:
    Code:
    .links ul {
    	/*margin-top: 10px;*/
    	padding: 0;
    	display: block;	
    	text-align: center;
    	float: none;
    }
    What this did however was increase your padding from 10 to 18 above and below the link, so you may want to adjust the height of your box if your looking to make this smaller. But either way this appeared to 'balance' out the links in your top box. (i did not check how this affected the rest of the page)

    hope this helps
    Thank you! This did even out the space. This might seam like a dumb question, but how do i make the box smaller?

    Tank you again!

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    116
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi mannekaeng,

    i know this is a premade template and that may be the cause for certain tags not to show up they way you'd like, as in this case. Normally when creating a webpage the following may help you to eliminate the built-in styles on web-browsers:
    Code:
    *{margin:0;padding:0;border:0}
    This eliminates all margins & paddings on the page.

    So for your page i added and modified the following. On the very top of your style section add:
    Code:
    *{margin:0;padding:0;border:0;} /*add this to the top of your style section */
    Under your /*Header Centered***/ style section:
    Code:
    .links {
    	/*margin-top: 0px;*/ /*Remove*/
    	text-align: center;
    	float: none;
    	border: 1px solid rgba(136, 136, 136, 0.4);
    }
    
    .links ul {
    	/*margin-top: 10px;
    	padding: 0;*/
    	display: block;	
    	text-align: center;
    	float: none;
    	margin:5px 0; /*margin added for top & bottom only...change accordingly*/
    }
    hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Tags for this Thread

    Posting Permissions

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