Q 8.8 On the same line CSS?

I can’t find in CSS the code for “on the same line”?

Hi @arcjumper93165,

I think the instructions want you to modify the same line as you were before.

Please post a link to the exercise if you still need help :slight_smile:

I code it current like this:

 <div class ="on_line">
         <p>About</p>
         <p> Work</p>
         <p>Team</p>
         <p>Contact</p>
       </div>

I want to define the class in CSS so that he take all on the same line. Is it right or do I make a general failure

Hi,

As Per Your Need You Need to Give the CSS to Your Class that would be Defined into the Div Tag right?
ok, So you need to Write a code like this,

<html>
	<head>
		<title>Demo page</title>
		
		<style>
			.on_line
			{
				// write your CSS here..
			}
		</style>
	</head>
	<body>
		<div class ="on_line">
			 <p>About</p>
			 <p> Work</p>
			 <p>Team</p>
			 <p>Contact</p>
       </div>
	</body>
</html>

Into Your Case You have defined a class but you need to Defined A CSS into Tag.

THANK YOU,
Divyesh Padamani

Maybe I have to provide the code of the header and also in css so that for you everything is clear what’s my problem
home.html.erb

  <div class="header">
      <div class ="on_line">
        <p>About</p>
        <p> Work</p>
        <p>Team</p>
        <p>Contact</p>
      </div>

pages.css.scss

.on_line {
  text-align: center;
  float: none;
}

what should I change in the css file that everything is on one line.

@arcjumper93165 I don’t believe that’s a good way to handle it, would you please post a link to the exercise?

https://www.codecademy.com/courses/learn-rails/projects/learn-rails_broadway

1 Like

@arcjumper93165 OK, the instructions say:

In app/views/pages/home.html.erb in the header, add four list items for About, Work, Team and Contact.

That means that inside <div class="header"> and it’s container <div class="container">, you’ll add your code. Since the instructions mention list items, it will probably be best if we use a list:

<div class="header">
  <div class="container">
    <!-- this is our code: -->
    <ul>
      <li>About</li>
      <li>Work</li>
      <li>Team</li>
      <li>Contact</li>
    </ul>
    <!-- end of our HTML code for this step -->
  </div>
</div>

Now, the next part of the instructions say this:

Write CSS in app/assets/stylesheets/pages.css.scss to display them on the same line.

So we’ll open up our stylesheet and make those list items display on the same line (I recommend taking the Learn HTML & CSS course if you don’t know how to do this).

The easiest way is to make all list items on the page display inline:

li {  display: inline; }

If you want, you could use a descendant selector like .header li or apply a class to each <li> you want displayed on the same line, such as .display-inline :slight_smile:

1 Like

This topic is solved.