How do you control the space before Home?

[Weston]

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:



But the only code in Navigation before Home is:

<div class="bgnav">

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

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

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

 

[Paul B]

I'm not sure you'll be able to achieve that as it's the bottom border of the upper navigation tabs div.

 

[Weston]

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.

 

[Paul B]

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.

 

[Weston]

Thanks, I totally missed that somehow. Anyway I got it to work, I put a...

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

 

[Carlos]

I have a similar question, can I do this kind of padding for a div?

 

[Paul B]

I have a similar question, can I do this kind of padding for a div?

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.

 

[Weston]

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]

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.

 

[Paul B]

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?

 

[Carlos]

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?

www.mw2forums.com / www.mvc3forum.com - look at the bottom where it says 'CarlosX360 Network" look at the space between the outer border and the first letter "C."

 

[Paul B]

Change your css to this:

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

Change your css to this:

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