1

Alright, I am trying to make it so all of these items are centered into their own spaces. Attached is the current state as well as what it should look like...

HTML: 

<div class="fhNav" id="nav">
  <div class="homeBtn">
      <a href="https://www.factionhouse.org/"></a>
  </div>
  <div class="forumsBtn">
      <a href="https://www.factionhouse.org/forums"></a>
  </div>
  <div class="applyBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="mttBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="shopBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="supportBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
</div>

CSS:

.fhNav {
  width: 893px;
  height: 90px;
  background: url(../images/navBack.png);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-right: 10px;
  padding-bottom: 40px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.homeBtn{
  width: 169px;
  height: 67px;
  position: relative;
  margin-left: 12px;
  background: url("../images/navbtn/homebtn.png") no-repeat;
  background-repeat: no-repeat;
  margin-bottom: 22px;
  margin-top: 24px;
}

.homeBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.homeBtn a:hover{
  background: url(../images/navbtn/homebtnhover.png);
  background-repeat: no-repeat;
}

.forumsBtn{
  width: 150px;
  height: 67px;
  position: relative;
  margin-left: -6px;
  margin-right: 13px;
  background: url("../images/navbtn/forumsbtn.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 24px;
}

.forumsBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.forumsBtn a:hover{
  background: url(../images/navbtn/forumsbtnhover.png);
  background-repeat: no-repeat;
}

.applyBtn{
  width: 137px;
  height: 67px;
  position: relative;
  margin-left: 5px;
  margin-right: auto;
  background: url("../images/navbtn/applybutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 24px;
}

.applyBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.applyBtn a:hover{
  background: url(../images/navbtn/applybuttonhover.png);
  background-repeat: no-repeat;
}

.mttBtn{
  width: 195px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/mttbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.mttBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mttBtn a:hover{
  background: url(../images/navbtn/mttbuttonhover.png);
  background-repeat: no-repeat;
}

.shopBtn{
  width: 180px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/shopbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.shopBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.shopBtn a:hover{
  background: url(../images/navbtn/shopbuttonhover.png);
  background-repeat: no-repeat;
}

.supportBtn{
  width: 180px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/supportbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.supportBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.supportBtn a:hover{
  background: url(../images/navbtn/supportbuttonhover.png);
  background-repeat: no-repeat;
}

current

It should look (somewhat like) this...except obviously with the other tabs in it.

Edit: I have been messing with this for a few hours and I just can't figure it out...

Squallz
  • 59
  • 6

5 Answers5

1

try using % to make it easier to determine because its out of 100.

margin-left: 6%;

also padding only pushes the elements inside towards the center

or put them all into a div and in the parent div use 

 float: left;

to push the images aligned from left to right

Chris Hutchison
  • 601
  • 6
  • 20
  • What if I have them all in separate divs? – Squallz Apr 24 '17 at 01:44
  • yes but all of those divs seem to be inside one bigger parent div so set width of .fhNav in css then divide that by 6 to set the width of all the other divs then just put float:left; in .fhNav in css should work – Chris Hutchison Apr 24 '17 at 01:45
  • Hutchinson `.fhNav { width: 893px; height: 90px; background: url(../images/navBack.png); margin-left: auto; margin-right: auto; margin-bottom: 40px; padding-right: 10px; padding-bottom: 40px; background-repeat: no-repeat; display: flex; align-items: center; }` I am doing this to create the parent div and center it on the page already so how would I divide it and such? – Squallz Apr 24 '17 at 01:47
1

Hopefully this should help out. I've given all your buttons a common class, so you can add in styles that will apply to all of them. You can apply a common background to all of them that way. And I've given them all a percentage width so they should fit their parent div.

I'd also reconsider baking the text into the image and putting it directly into the HTML instead - easier to edit.

HTML:

<div class="fhNav" id="nav">
  <div class="btn homeBtn">
      <a href="#">Home</a>
  </div>
  <div class="btn forumsBtn">
      <a href="#">Forums</a>
  </div>
  <div class="btn applyBtn">
      <a href="#">Apply</a>
  </div>
  <div class="btn mttBtn">
      <a href="#">Meet the Team</a>
  </div>
  <div class="btn shopBtn">
      <a href="#">Shop</a>
  </div>
  <div class="btn supportBtn">
      <a href="#">Support</a>
  </div>
</div>

CSS will then look like this: 

.fhNav {
  width: 893px;
  height: 90px;
  background: crimson;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  text-align: center;
}

.btn {
  width: auto;
  height: 100%;
  border: 1px solid red;
  position: relative;
  width: 17%;
  vertical-align: text-top;
}

.btn a {
  display: block;
  color: #FFFFFF;
  font-family: Helvetica;
  text-decoration: none;
  position: relative;
  /* The top position and the transforms will ensure the a tag is vertically centred in it's parent div */
  top: 50%; 
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

I've made a Pen where you can see it working:

https://codepen.io/anon/pen/wdzvRZ

Hopefully that helps you a little bit. :)

Shib TPF
  • 21
  • 1
  • Hey thanks that does help a bit, but I want the image to change when I hover over it? How would I do that? – Squallz Apr 24 '17 at 02:09
  • @Squallz You should be able to add a `:hover` element to the `.btn` class in css like so: `.btn:hover { }` which should apply those styles to that class on hover – Shib TPF Apr 24 '17 at 02:18
  • That works, only problem now is that 1. the text isn't centered in the middle of the button and... 2. The background-color doesn't fill the div – Squallz Apr 24 '17 at 02:31
  • Apply `text-align: center;` to the div / the parent div and that should centre the text. The background-color will always fill the full div. The div you're applying it to mightn't be filling it's parent div fully, which could be why it's looking like it's not filling the div. – Shib TPF Apr 24 '17 at 02:39
  • Why is the "hover" part slightly lower than the actual tab itself? – Squallz Apr 24 '17 at 03:18
  • I can't see your code so I'm not sure - if you post a CodePen of it I could help you more. But it could possibly be because your div isn't the same height as it's parent? – Shib TPF Apr 24 '17 at 03:34
1

try using the % like 100% in the margin

Edisa Amador
  • 19
  • 5
1

I know this doesn't exactly answer your question but I think you'll find this approach simpler :)

View the snippet in Full Page, the little snippet container isn't big enough.

Instead of using background images for the buttons, I would suggest just nesting an <img ...> tag in your links. Why?

Because then the container, (in this case the li) will grow to match the image perfectly. Now you don't have to set the width and height of each button, they will grow according to the image size.

To enable the different image to show up on hover, I would use the css selector :hover to change the opacity of the image to and from 0 and 1. Additionally, the hover image should be positioned to absolute so it can appear in the same place as the non-hover image.

You'll have to mess with the css a little more but I would recommend this approach over setting the width and height of your button individually.

Best of luck

Edit:

Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :)

Sure,

  • The first thing I'm doing with this HTML structure is nesting a ul with li tags inside of a nav element. The nav tag doesn't do anything that a div doesn't--it just has a better semantic name. The same thing goes for the ul and li tags. I'm just using those because your links represent a an <unorderedl>ist with some <listi>tems.

  • the next item to address is the styling applied to the nav element. In particular, I apply three css properties:

    All in all, this just center's the nav.

  • the next set styles apply to any ul inside of a nav element. This works by using the element element selector out of the many possible css selectors. The style of styles:
    • list-style-type: none; removes the bullet points
    • background: url(...); sets the background image. we want to use a background image for this element because the background element should grow or shrink with the element. This is also what background-size: cover; does
    • padding: 11px; and margin: 0; sets the padding and margin. See the difference between the two here.
  • the set of css is simple, it adds a margin of 1px to the right of an li inside of ul inside of a nav. Your image seems to have a 1 px border, so I added this margin to match though I would recommend remove the white spaces in your background because changes in the order of your navigation will break the background image
  • the next set of styles apply to nav ul a which are the anchor tags inside of a ul inside of navs. The position is set to relative here so that you can use position: absolute the elements inside it.. This is a big "ah-ha" moment for users first learning css.
  • up next is the nav__img--hover and nav__image--normal style. The nav__image--hover uses absolute positioning to position it absolutely to the parent element. Notice that the nav__image--normal doesn't use absolute positioning. We want at just one of the elements positioned normally but we want the other to be positioned absolutely.
  • last but not least there is the :hover selectors that simply change the opacity of the elements to and from 0 and 1 making them completely visible and hidden. You might also be able to use the visibility instead but opacity works fine.

Anyway, that's it. Hope it works for you!

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  background: url(https://www.factionhouse.org/images/navBack.png);
  background-size: cover;
  padding: 11px;
}

nav ul li {
  margin-right: 1px;
}

nav ul a {
  display: flex;
  position: relative;
}

.nav__img--hover {
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
}

.nav__img--hover:hover {
  opacity: 1;
}

.nav__img--normal:hover {
  opacity: 0;
}
<nav>
  <ul>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/homebtn.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/homebtnhover.png">
      </a>
    </li>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/forumsbtn.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/forumsbtnhover.png">
      </a>
    </li>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/applybutton.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/applybuttonhover.png">
      </a>
    </li>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/mttbutton.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/mttbuttonhover.png">
      </a>
    </li>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/shopbutton.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/shopbuttonhover.png">
      </a>
    </li>
    <li>
      <a href="https://www.factionhouse.org">
        <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/supportbutton.png">
        <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/supportbuttonhover.png">
      </a>
    </li>
  </ul>
</nav>
Community
  • 1
  • 1
Rico Kahler
  • 17,616
  • 11
  • 59
  • 85
  • That worked `PERFECTLY`! words cannot describe how happy you just made me, sir. Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :) – Squallz Apr 24 '17 at 03:34
  • @Squallz sure give me a moment – Rico Kahler Apr 24 '17 at 03:38
  • Thank you much. :) – Squallz Apr 24 '17 at 03:44
  • @Squallz consider accepting the answer :). I live for rep lol – Rico Kahler Apr 24 '17 at 04:09
  • 1. How do I accept it? 2. How can I make it mobile friend? Is it too hard? – Squallz Apr 24 '17 at 04:45
  • *How can I make it mobile friend? Is it too hard?* unfortunately it would be hard to make mobile friendly but I would suggesting adding [`overflow: auto;`](https://css-tricks.com/almanac/properties/o/overflow/) to the `nav` styles and removing the `justify-content: center;`. this will at least make the nav bar scroll on smaller devices. If you wanted something like a hamburger menu, there would be a non-trival amount of work – Rico Kahler Apr 24 '17 at 04:53
  • Alright ;) thanks for the info. How can I make it so the active tab is selected? So if I'm on "Home", it will change the image? – Squallz Apr 24 '17 at 05:03
1

If you are using bootstrap, you can use directly class "container".

Ankush Verma
  • 103
  • 1
  • 1
  • 7