• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How do you control the space before Home?

#1
bsdiv.png

I'v been changing the default navbar a bit as you can see but I can't figure out how to control the space between the edge and the Home button. I want to drop a red border over the bottom to cover up the middle line... like so:

bsdiv2.png

But the only code in Navigation before Home is:

PHP:
<div class="bgnav">

<xen:edithint template="navigation.css" />

<div id="navigation" class="pageWidth">
    <div class="pageContent">
        <nav>

<div class="navTabs">
    <ul class="publicTabs">
 

Brogan

XenForo moderator
Staff member
#2
I'm not sure you'll be able to achieve that as it's the bottom border of the upper navigation tabs div.
 
#3
Perhaps not, I'm sorta blindly stomping through this but I figured I could cover it up in the same way the Active Tab does it.

EDIT: Well I'd have to create a new empty button... that's why I want to remove that space so I can fill it with an empty tab then drop the border on it.
 

Brogan

XenForo moderator
Staff member
#4
Well you can remove that gap altogether by getting rid of the 25px padding so the home tab will be right up against the edge then.
 
#5
Thanks, I totally missed that somehow. Anyway I got it to work, I put a...
PHP:
<li class="navTab" style="width: 25px; border-bottom: 1px solid @primaryDark; height: @headerTabHeight"></li>
Right above <!-- home --> in the Navigation template.

EDIT: Thanks for the move, I didn't realize I had posted in the wrong place.
 

Brogan

XenForo moderator
Staff member
#7
I have a similar question, can I do this kind of padding for a div? :confused:
A div is just a section or block of content so you can style it how you like.
Just use <div class="my_style>My content</div> and create the css class .my_style with the attributes you want.
 
#8
If it's a specific div (i.e. you only need to alter one) you can just do on the spot alterations using a style="xxxx".

For example <div class="pageContent" style="padding: 10px;"> would override whatever padding .pageContent might have had but the rest of it's CSS attributes will still shine though.
 

Carlos

Well-known member
#9
The reason why I asked about it is because even though that I got the div working, the distance between the line and the content is about as close as you can get to 'hugging.'

So, I wanted to make some space between the line and the content within the div.

I will try Weston's solution.
 

Brogan

XenForo moderator
Staff member
#10
I'm not entirely sure what you mean.
Can you post a link and a mockup of what it is you're trying to achieve?
 

Brogan

XenForo moderator
Staff member
#12
Change your css to this:
Code:
.mw2f_footer_links {
    border: 1px solid #295909;
    color: #FF9705;
    padding: 0 4px;
}
That will add 4px padding to the left and right of the div and no padding to top or bottom.

Padding is applied in this order: top, right, bottom left, so if you do padding: 2px 10px 5px 8px for example, that will be 2px top, 10px right, 5px bottom, 8px left.

If you do it as 2 values then it is top/bottom together and left/right together.
 

Carlos

Well-known member
#13
Change your css to this:
Code:
.mw2f_footer_links {
    border: 1px solid #295909;
    color: #FF9705;
    padding: 0 4px;
}
That will add 4px padding to the left and right of the div and no padding to top or bottom.

Padding is applied in this order: top, right, bottom left, so if you do padding: 2px 10px 5px 8px for example, that will be 2px top, 10px right, 5px bottom, 8px left.

If you do it as 2 values then it is top/bottom together and left/right together.
Thank you sir! :)