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

Alan Albrecht
Alan Albrecht
3,105 Points
Posted by Alan Albrecht
Alan Albrecht
3,105 Points

Span element causing style issues, need help to resolve.

I am following up on the Lake Tahoe project, and I reversed the H1 and Span elements (to allow the span sub title to be below the main H! element. However when I added the down arrow it pushed the span element down the page. I think this is due to the span element being an inline element and the arrow img is not being pushed down onto its on line.

I have added some code snippets, Im not sure how to resolve this, and why would Guil have not just used an H2 heading for this why the span?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Lake Tahoe | More Info</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <header id="top" class="main-header">
    <h1>Lake Tahoe, California</h1>
    <span class="title">See what Lake Tahoe has to offer.</span>
    <img class="arrow" src="img/arrow.svg" alt="Down Arrow">
  </header>

.main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
}


.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  border-bottom: 2px solid;
  padding-bottom: 10px;
}

.arrow {
  width: 50px;
  margin-top: 150px;
}

2 Answers

Tommaso Poletti
Tommaso Poletti
5,205 Points
Tommaso Poletti
Tommaso Poletti
5,205 Points

If I understand your problem or that the span goes down.. for solve just delete the rule in .arrow --> margin-top:150px; and the problem is solved :)

Good Learning :)

Alan Albrecht
Alan Albrecht
3,105 Points
Alan Albrecht
Alan Albrecht
3,105 Points

Tommaso,

Thanks for your response however, that is actually incorrect. As I said in my post I believe the problem is that the <span> element is an inline element and not a block element so the arrow is going directly inline with the span element.

Thank you for your help, I do appreciate it this is becoming frustrating.