FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Alexis

@alexisgcn

@dadleatherwood you can use flexbox to center whatever you want

Jacob Leatherwood

@dadleatherwood

@alpox Made those changes. Now will you look at it?

Now they are stacked on top of one another, and have dots to the left of the nav bar.

Alexis

@alexisgcn

the header is the div father, and your nav is the son, your header tag must have display:flex; and your nav have properties display: flex;
align-items: center;
justify-content: center;

alpox

@alpox

@dadleatherwood stacked would be:

.header .btn {
  text-decoration: none;
  background: white;
  color: #58BD91;
  border-radius: 5px;
  font-size: 25px;
}

.nav ul {
  list-style-type: none;
}

<ul>
        <li><a href="#" class="btn" target="blank">About</a></li>
        <li><a href="#" class="btn" target="blank">Portfolio</a></li>
        <li><a href="#" class="btn" target="blank">Contact</a></li>
      </ul>

Alexis

@alexisgcn

@dadleatherwood do you like flexbox ?

alpox

@alpox

@alexisgcn Not sure if flexbox is ready to use yet. It depends on the browser compability requirement.

Alexis

@alexisgcn

you can use the prefix

alpox

@alpox

@alexisgcn That doesn't help for every browser. Compability for older browsers would still not be guaranteed.
The prefix only specifies the usage of experimental implementations of the browser engines but there are quite some which don't even have that

Milos Ratkovic

@Shadow032

@dadleatherwood just writte this under your .nav

.nav {
  background: white;
  padding: 30px 0;
  text-align: right;
}

Jacob Leatherwood

@dadleatherwood

@alpox Now, how would I get them side by side instead of on top of one another?

Milos Ratkovic

@Shadow032

@dadleatherwood delete height: 100%

alpox

@alpox

@dadleatherwood Ah you wanted them side by side anyway? Top to bottom told me something else :D

Jacob Leatherwood

@dadleatherwood

@alpox Yeah, I just wanted the spacing different.

Alexis

@alexisgcn

ok @dadleatherwood look this is my header on codepen, if it can help you good,

http://codepen.io/alexis-carmona/pen/KazRbb

alpox

@alpox

@dadleatherwood

.nav li {
  display: inline-block;
  padding: 0 10px;
}

Ah maybe i understood you wrong still

@dadleatherwood If you wanted to also align it vertically, you can do:

.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}

Milos Ratkovic

@Shadow032

hey guys, anybody here can help me with weather app ? this is my code pen http://codepen.io/Shadow032/pen/wgzqgz

Jacob Leatherwood

@dadleatherwood

@alpox Alright, we almost have it. Now, how can I bring the words down so they are more centered on the navbar?

alpox

@alpox

Be aware that your body also has some margin defined... you may want to remove it with

html, body {
  padding: 0;
  margin: 0;
}

Milos Ratkovic

@Shadow032

@dadleatherwood I have them centered just right with your code just do the padding thing

alpox

@alpox

@dadleatherwood Ah look at my last comment for that centering :-)

@dadleatherwood If you wanted to also align it vertically, you can do:

.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}

Jacob Leatherwood

@dadleatherwood

@alpox Thank you so much! I am sure it is a silly question, but I am very new.

CamperBot

@camperbot

dadleatherwood sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:cookie: 736 | @alpox |http://www.freecodecamp.com/alpox

alpox

@alpox

@dadleatherwood Its not, lot of people run into this :-)

Jacob Leatherwood

@dadleatherwood

@dadleatherwood Can you explain what position:relative did, and transform: translateY(-50%)?

alpox

@alpox

@dadleatherwood position: relative; goes sure that the element can be aligned relatively to its parent element through the top, bottom, left and right attributes, which would be ignored by the default positioning position: static;.

Jacob Leatherwood

@dadleatherwood

@alpox Thank you!

CamperBot

@camperbot

dadleatherwood sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:warning: dadleatherwood already gave alpox points

alpox

@alpox

So you can set top: 50%; which moves the elements upper most border/point to the middle (50%)

Since it was the upper most point which was used to align the element, the element would be too much down (As much as half the element)

Jacob Leatherwood

@dadleatherwood

@alpox Can you help with something else?

alpox

@alpox

So you use transform: translateY(-50%); Which moves the element up for half its own size

@dadleatherwood Guess i can

Patirck

@SomeRandom42

Hey? could someone help me? I am trying to do the Build a Random Quote Machine, but Looking at the JSON lessons. I am at a total loss on what to do . I tried re doing the lessons but understood none of it and just copied the input and did the lesson. But I did not learn anything.

Jacob Leatherwood

@dadleatherwood

@alpox I have my icons in the footer. How can I get them to the right of the page instead of below the 'About the Page' h1? I put them in seperate columns, but that did not do what I wanted.

alpox

@alpox

@SomeRandom42 Do you wanna use an API or not? It would maybe be easier without one for the beginning. So you can go with just a bit local javascript

Patirck

@SomeRandom42

@alpox I do not plan 2. My initial thought is to make an array with several quotes and use locl javascript. I am at a loss on how to use it here and would like ideas what to look uo\p

alpox

@alpox

@dadleatherwood Do you want the text to be totally right aligned or rather left aligned but on the right side?

@SomeRandom42 Yea thats the better way for the beginning i would say. Did you do the exercises about javascript objects?

Jacob Leatherwood

@dadleatherwood

@alpox Lets do right aligned to the far right of the page

alpox

@alpox

If you did them but not understand them, try to redo and try to understand what happens there. If you don't, just come here and ask (Maybe better in the HelpJavascript channel)

Patirck

@SomeRandom42

@alpox I did but I might need to go back and refresh (moved so I have not been coding for a month so I am hazy

alpox

@alpox

@dadleatherwood When you want the title to stay, put the rest of the footer into a new div which you can give an id to (or a class if you prefer)

@SomeRandom42 Well the outline is that you can have an object:

var obj = {
    someKey: "somevalue"
};

console.log(obj.someKey); // Logs somevalue

Where communities thrive

People

Repo info

Activity