How do you control the space before Home?

Weston

Member
bsdiv.webp

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.webp

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">
 
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.
 
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.
 
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.
 
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.
 
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.
 
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.
 
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.
 
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! :)
 
Top Bottom