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

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Help with layout issue (HTML + CSS)

I need help with an issue i have. I can't seem to place the arrows to the left and right of the text "navigate". Here is my code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shaun Kelly | Web Design &amp; Developer</title>
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,300italic,400,400italic,900,900italic" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="topBar">
      <h1>Shaun kelly - Web Design &amp; Developer</h1>
    </div>

    <div id="slide1">
      <h1>Welcome,</h1>
      <p>Im Shaun, a self taught web design &amp; developer based in Birmingham, West Midlands. Thanks for taking the time to check out my portfolio! Feel free to browse through my work and explore my vision of simplicity. I am currently seeking employment as a Junior Web Design/Developer.</p>
    </div>


    <div id="bottomBar">

      <a href="#" class="arrow-prev"><img src="img/arrow-prev.png"></a>
      <h1>NAVIGATE</h1>
      <a href="#" class="arrow-next"><img src="img/arrow-next.png"></a>

    </div>

  </body>
</html>

html, body {
    margin: 0;
    background-color: #fff;
}

#topBar {
position: fixed;
top: 0;
width: 100%;
height: 90px;
border-bottom: solid #e6e6e6 1px;
background-color: #fff;
}

#topBar h1 {
    padding-left: 30px;
    color: #A4a4a4;
    font-family: "oswald";
}


#bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
border-top: solid #e6e6e6 1px;
text-align: center;
background-color: #fff;
display: inline-table;
}

#bottomBar h1 {
    font-family: "Oswald";
    font-size: 22px;
    color: #A4A4A4;
}

#slide1 {
    margin-top: 90px;
    margin-bottom: 70px;
    padding: 10px 30px;
    font-family: "Oswald";
}

#slide1 p {
    max-width: 600px;
    color: #898989;
    font-size: 22px;
}

2 Answers

Mario Mitchell
Mario Mitchell
18,789 Points

I believe it's because h1 is a block level element so it automatically is in it's own space.

Just add 'display:inline' to the h1 tag

You can see an example here -- http://jsfiddle.net/undergroundfx/4M6ts/

Another solution is to just use regular text or text in a span instead of the h1 tag

Shaun Kelly
Shaun Kelly
35,560 Points

Do you know how i would display content then once an arrow button is clicked display a different set of content rather than creating various pages?

nvcxnvkldsjaklfds
PLUS
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Hello Mr. Shaun,

The problem is with <h1> element you use. Because <h1> is a block level. It does take whole page width.

Check my code below. 

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shaun Kelly | Web Design &amp; Developer</title>
    <link href="style.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,300italic,400,400italic,900,900italic" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="topBar">
      <h1>Shaun kelly - Web Design &amp; Developer</h1>
    </div>

    <div id="slide1">
      <h1>Welcome,</h1>
      <p>Im Shaun, a self taught web design &amp; developer based in Birmingham, West Midlands. Thanks for taking the time to check out my portfolio! Feel free to browse through my work and explore my vision of simplicity. I am currently seeking employment as a Junior Web Design/Developer.</p>
    </div>


    <div id="bottomBar">
      <a href="#" class="arrow-prev"><img src="img/arrow-prev.png"></a>
      <a id="navigation">NAVIGATE</a>
      <a href="#" class="arrow-next"><img src="img/arrow-next.png"></a>

    </div>

  </body>
</html>

#topBar h1 {
    padding-left: 30px;
    color: #A4a4a4;
    font-family: "oswald";
}

#bottomBar #navigation{
   font-family: "Oswald";
    font-size: 22px;
    color: #A4A4A4;

}

#bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
border-top: solid #e6e6e6 1px;
text-align: center;
background-color: #fff;
display: inline-table;
}



#slide1 {
    margin-top: 90px;
    margin-bottom: 70px;
    padding: 10px 30px;
    font-family: "Oswald";
}

#slide1 p {
    max-width: 600px;
    color: #898989;
    font-size: 22px;
}

I hope it helps.

Regards

Karthikeyan Palaniswamy

Shaun Kelly
Shaun Kelly
35,560 Points

So when you create a h1 element it will take up the whole width of page? so its best to use the paragraph tag?

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Yes, <h1> and <p> do take the whole width of the page. Because both are block level elements.

So, you should use inline elements or you can make <h1> and <p> inline-block level element by using display property.

I hope i answered your question.