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

Dylan Carter
Dylan Carter
4,780 Points

how to get my navigation to do this in css?

http://imgur.com/f0xM1Fs

what can i do to give it a navigation like this? here is the code i have so far..

main.css

body {
    background-color:gray;
}

header {
 background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
  /* For Fx 3.6 to 15 */
background: -moz-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C ) ;
  /* Standard syntax */
  background: linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C ); 

  width:100%;

  height: 145px;

  border-bottom: 4px solid black;
  border-top: 4px solid black;
  clear: both;
}

h1 {
    width:55%;
    float:left;
    font-size: 3.25rem;
    margin-left: 6%;
    margin-top: 37px;   
}

header h1 table {


  display: flex;
  justify-content: flex-end;
    float:right;
    font-size: 30px;
    border: 2px solid black;
}

header h1 table tr  {
    width: 40px;
    display: inline;
    padding: 0 10px;
}
'''

Index.html
 '''
<!DOCTYPE html>
<html>
  <head>
    <title>Make money from cell phones</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body> 
    <header>
      <h1>Website title!
         <table>
            <tr><td>option 1</td></tr>
            <tr><td>option 2</td></tr>
            <tr><td>option 3</td></tr>
            <tr><td>option 4</td></tr>
            <tr><td>option 5</td></tr>
        </table> 
     </h1>  
    </header>
  </body>
 </html>

'''


its gotten a little messy

1 Answer

Oliver Sewell
Oliver Sewell
16,183 Points

Hi! , i recommend you to display your navigation using the <ul> - unordered list and <li> - list item tags also your <h1> should be closed after your h1 text e.g. <h1> website title </h1>

     <h1> Website Title! </h1>
           <ul>
               <li>option 1</li>
               <li>option 2</li>
               <li>option 3</li>
               <li>option 4</li>
               <li>option 5</li>
            </ul>

Now by default your li items are displayed block you can get them to be displayed inline or inline-block so they appear on the same line as in your image.

     li {
        display: inline-block;
     }

Now you can position where you want your navigation (ul - unordered list) with many different techniques floats/grids/flexbox - treehouse has some great courses.

     ul {
        float: right;
     }

I hope this helps :)! i recommend you to follow the 'how to make a website course' with nick if your new to front-end development

Dylan Carter
Dylan Carter
4,780 Points

thanks. this got it going in the right direction.

Dylan Carter
Dylan Carter
4,780 Points

thanks. this got it going in the right direction.