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

Jesse Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Jesse Sawyer
Full Stack JavaScript Techdegree Student 13,227 Points
Posted by Jesse Sawyer
.a{fill-rule:evenodd;}techdegree
Jesse Sawyer
Full Stack JavaScript Techdegree Student 13,227 Points

How to move a <p> tag to the very top of a page. Very very top.

I'm trying to move the <p> tag to the very very top of the page. Does anyone have any suggestions.

1 Answer

Hanna Mchatton
Hanna Mchatton
10,279 Points
Hanna Mchatton
Hanna Mchatton
10,279 Points

There are a few ways of doing this depending on your markup and desired effect. Do you want it to remain at the top as in a fixed position? Is it a direct child of the body element, then you can use position: relative? Could you please post your markup and CSS, as well as a longer description of what behavior you would like your <p> element to have? This way we can know whether you need flex-box or CSS-grid and can give you the best solution.

Jesse Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Jesse Sawyer
Full Stack JavaScript Techdegree Student 13,227 Points
Jesse Sawyer
.a{fill-rule:evenodd;}techdegree
Jesse Sawyer
Full Stack JavaScript Techdegree Student 13,227 Points

Here's the HTML.

</head> <body>

<!--Header Section--> <header> <div id="info"> <ul> <li>416-999-9999</li> <li>4 Coxwell Avenue Toronto, ON M4l 3A7</li> <li>Follow Us On Social Media!</li> </ul>
</div>

  <div class="container">
    <div id="name">
        <h1>Studio 505</h1>
    </div>
    <nav>
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="contact.html">Services</a></li> 
         <li><a href="team.html">Team</a></li>
         <li><a href="gallery.html">Gallery</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
      </ul>  
    </nav>

   </div> 
  </header>

Here is the CSS

body{ font: 15px/1.5 Arial; padding: 0%; margin: 0%; }

.container{ width:80%; margin:auto; overflow:hidden; }

/* header */ header{ background:black; border-bottom: white; padding-top: 5px; min-height: 70px; }

info{

color: white; margin: 0 auto; padding: 10px; text-align: center; }

info li{

display: inline; padding: 111px; font-family: Arial, Helvetica, sans-serif; }

info ul{

border: none; }

name h1{

text-align: center; color:white; margin-top: 0px; padding: 0; }

header a{ color: white; text-decoration: none; text-transform: uppercase; font-size: 15px; }

header li{ display: inline; padding: 20px 20px; }

header ul{ border-bottom: 2px solid silver; padding-bottom: 10px; }

header nav{ text-align: center; border-bottom: 10px; height: 50px; }

I ended up changing everything around by creating a second list and making it inline. I wanted to post some information like phone number, address and social media icons above the h1 tag. Let me know if I should do something else.