Q 8.8 On the same line CSS?


#1

I can't find in CSS the code for "on the same line"?


#2

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:


#3

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


#4

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


#5

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.


#6

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


#7

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


#8

@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:


#9

This topic is solved.