Created small project to practice what I've learned.

Question

Ok so here is what I'm working with. For the record this is a made up project just to practice, nothing more. It's kind of silly.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
            <link rel="stylesheet" href="css/main.css">
                <title>Take The Field</title>

    </head>

        <body>
            <header class="main-header">
                <h1>Take The Field</h1>
                <h3> You're Guide to MLB betting.</h3>
                    <p>Don't Just Play The Odds, Understand The Odds</p>
      </header> 
                <nav>
                          <li><a href="index.html">Home</a></li>
                    <li><a href="About.html">About</a></li>
                    <li><a href="Contact.html">Contact</a></li>
                </nav>


            <h1>What We Do And How We Do It</h1>

        <p>With over 35 years of experience in delivering strategic information, placing risk takers in the best position possible to WIN, we present to you "Take The Field" for your latest and up to date Major League Baseball statistics. As we all know, almost doesn't count unless your playing horseshoes, throwing hand grenades or attempting to swat flies so let's get it right the first time around. Playing the odds and Understanding what it is your playing are two different things. We will place you in the best position to maximize your opportunity and earnings potential. </p>



                         <footer>

            </footer>
        </body>


    </html>

body {
  background-color: rgba(247, 247, 247, .5);
  background-image:
}   

.main-header {
    background-color: rgba(255,215,0, .9);
    background-image:radial-gradient(circle at top);
    }

nav li{
  background-color:white;
  float:right;
  display:block;
  margin:5px;
  padding:5px;
}

.main-header, h1, h3 {
        text-align:center;
    color: red;
        font-size:2em;
}


h4 {
  text-align:center;
  font-size:1em;
}

p {
  font-style: normal;
  height:2em;
}

Questions:

How can I get the main-header background color to do a radial gradient style or does that only work when you have a background image?
I want my Navigation bar floated to the right as it is but inside the main-header?
How do I take the "what we do and how we do it" and place that on the "about" page? I cant seem to figure out how to link the about page... I continue to get an error message stating "page not found". Thoughts?
When adding a background image (baseball field) to the body of the page, what type of requirements do developers look for when selecting their images from the web? I feel like this is an easy task and maybe I am selecting a complicated image to display?

Sorry for the novel but I greatly appreciate who ever takes the time to help. Thank you!

Answer 1 · 2015-03-27T17:29:15Z

March 27, 2015 5:29pm

Lotsa things! I am still just a student learning myself, but here is what I think is the correct answer - hopefully I'll be corrected if I am wrong.

Good on you for taking the initiative to practice what you've learned! If you continue learning CSS, you'll find a few lessons on gradients on treehouse! Here is what a radial gradient looks like;

I'd also look at cleaning up your HTML. It is semantically correct, but some of the positioning of nested elements aren't visually in the correct place, which can be kind of confusing to read! http://www.w3schools.com/html/html_elements.asp

Question #1

.grad {
 background: radial-gradient(circle at top, 50, 50, 50, .5);
}

This would create a simple radial gradient with half opacity that extends to the bottom of the container. There's a lot you can do with gradients, so I recommend doing some reading. There is nothing wrong with a google search to find a good refresher!

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

Question #2

My solution to this would be to float the main header as well, breaking them both out of the document flow, and then resetting the document flow with a clear-fix in the following elements. This might look like this;

 .main-header {
   float: left;
}

then wrap your next set of content in a div, and apply the style;

.content-div {
  clear: both;
}

the above should return the rest of the content to a normal document flow, otherwise you'd have to float EVERYTHING in your document.

http://www.w3schools.com/css/css_float.asp

Question #3 I am confused by what you're asking in this question. If you want to add a whole other page to the site, you need to create a separate html document for a page, calling it something like about.html, and then on your index.html page, link to is using the following tags;

<h1><a href="about.html">What We Do and How we Do it</a></h1>

again, I'm not quite sure what you're asking here.

Question #4

This is a question that garners more questions, I think. What kind of image are you thinking about? Stock photography? if so I would say look for a resolution of an image that matches that of the screen you're designing for/container you're creating. If you want the image to take up the entire background at max screen width of 1920px x 1080px, then you're going to need to find a image of that size that you enjoy. You can always stretch it using certain background CSS properties, but in doing so you will lose a lot of quality stretching a smaller image to a larger size. I recommend having many styles, with many different images depending on screen sizes.

Here is a great site that features responsive web-design ideas which make use of multiple styles for multiple screen sizes;

http://responsivecss.net/

Hope all of that helped you out!

Welcome to the Treehouse Community

Looking to learn something new?

Ryan B.

Ryan B.

Created small project to practice what I've learned.

1 Answer

Garrett Levine

Garrett Levine

Ryan B.

Ryan B.