Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Edgar Mantes
Edgar Mantes
9,499 Points
Posted by Edgar Mantes
Edgar Mantes
9,499 Points

Relationship between display:, position: and their child elements

I'm trying to practice making a nav bar that is absolutely positioned to a container that is relatively positions. So the "nav" container has a "position: absolute" property and also a "display: flex" property. The default to the child elements should be inline-block but it is not showing that. I tried changing widths of the two elements in the nav container but it is not allowing me to do that also. Please help! here is the code: 

<body>
  <div id="nav">
    <p>image</p>
    <ul>
      <li>Sign Up</li>
      <li>Sign In</li>
    </ul>

</body>

body {
  position: relative;
  height: 100vh;
}

#nav {
  position: absolute;
  diplay: flex; 
  flex-direction: row;
  top: 0;
  left: 10%;
  right: 10%
}

ul {
  display: flex;
  list-style: none;
}

Here is a link to the codepen where my practice page is at: http://codepen.io/shootermantes/pen/NNjVVm?editors=1100

Shanae Cockrill
Shanae Cockrill
304 Points
Shanae Cockrill
Shanae Cockrill
304 Points

Correct me if i'm wrong but i think the issue is that the 'id' element. Try something like

nav p, #nav ul {

diplay: flex; border: 5px solid black; width: 80%; height: 200px;

Since you're applying this to multiple tags I would think about adding a class instead of an id. For example:

<body> <p class="nav">image</p> <ul class="nav"> <li>Sign Up</li> <li>Sign In</li> </ul> </body>

In this case the css should look something like this:

.nav { diplay: flex; border: 5px solid black; width: 80%; height: 200px;

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

am had a good read over the question a couple of times but still not exactly sure what you are trying to do to be honest. I forked your pen and have set it up simply to show the use of relative and absolute positions.

If you add your ul inside the nav element and display it flex that wont cause any problems :)

http://codepen.io/Craig-Watson/pen/NNgRbd?editors=1100

Craig

Edgar Mantes
Edgar Mantes
9,499 Points
Edgar Mantes
Edgar Mantes
9,499 Points

Hey Craig, Thank you for looking into this. Sorry if the question isn't very clear. What I was trying to do in this instance was take my #nav container and set is to an absolute position at the top of the page. Then I wanted to set the #nav container children to "display: flex" so that the child elements would behave like inline-blocks but with flexbox advantages. However, when I added the "display: flex" to the #nav container the child elements stayed as block elements. I also attempted to change the width of the child elements thinking that it needed that value to use flexbox on the child elements but it also did nothing for me. It stayed as a block element that took up the width of the #nav container.

I know that I am using both the CSS positioning to position the #nav container, then the flexbox model for the child elements and I have never done that before. Is it even possible to do or are they conflicting models that should never be used on the same page layout? Should I stay with one model per layout (i.e. box model, flexbox, grid layout), is that the normal practice for web developers, or do people mix it up sometimes?

I hope this clears up the question I had in mind. Sorry for the confusion and thanks for your time!