2. HTML/CSS Programming

Write the XHTML and CSS code necessary to recreate the following appearance onscreen, between but not including the thick black lines. No manual line breaks have been inserted into the text.

---

---

NOTE: Most of the XHTML code is given to you; the code given may not be modified. The only change you may make to the provided XHTML code is that you may add any number of div and span elements, possibly with id and/or class attributes, as targets for CSS styling. Write valid code that would pass the W3C validators. Assume that the given XHTML text would appear inside the body of the page.

Details about the desired appearance:

• Text on the page uses a sans-serif font. The area around the outside of the page has a bluish color of #0088EE.
• The central content area has a white background and a 3px-thick solid border using the color #005588. The content area is centered within the page and occupies 85% of the page width.
• The list of links appears without bullets displayed all in one line, centered on the page. Each link's text is bold, and the link has 1em of horizontal space between it and the other neighboring links.
• Each news story on the page has an image that hovers to the right of other content, which wraps around it as necessary. There is 1em blank space around stories on all sides. No two stories should "collide" together; each story should be large enough on the page to fit its content.

Mark up the text on the next page with your div/span tags. If a tag can't fit in the space provided, write it in the margins and draw an arrow to where it should be inserted. Write the CSS styles on the page after next.

  <img src="brunologo.png" alt="logo" />




  <ul id="links">
    <li><a href="home.html">HOME</a></li>
    <li><a href="vids/">VIDEOS</a></li>
    <li><a href="shirt.html">FUNNY SHIRTS</a></li>
    <li><a href="trailer.html">BRUNO MOVIE TRAILER</a></li>
    <li><a href="photos/">PHOTOS</a></li>
    <li><a href="http://dvdshop.com/">DVD SHOP</a></li>
  </ul>




  <img src="brunouniversal.jpg" alt="Bruno at Universal" />




  <h2>Universal Responds to Lawsuit</h2>




  <p>Movie studio Universal Pictures on Friday responded to a lawsuit filed...</p>




  <img src="paulaabdul.jpg" alt="Paula Abdul" />




  <h2>Paula Abdul Talks About Being in Bruno</h2>




  <p>Paula Abdul accepted an invite last year to receive an award as ...</p>




  <img src="eminem.jpg" alt="Eminem" />




  <h2>Eminem Admits He Was Involved</h2>




  <p>Three days after storming out of the MTV awards, Eminem admits to RapRadar...</p>

2. HTML/CSS Programming (writing space)

<div id="main">
    <img src="brunologo.png" alt="logo" />

    <div id="content">
        <ul id="links">
            <li><a href="home.html">HOME</a></li>
            <li><a href="vids/">VIDEOS</a></li>
            <li><a href="shirt.html">FUNNY SHIRTS</a></li>
            <li><a href="trailer.html">BRUNO MOVIE TRAILER</a></li>
            <li><a href="photos/">PHOTOS</a></li>
            <li><a href="http://dvdshop.com/">DVD SHOP</a></li>
        </ul>

        <div class="story">
            <img src="brunouniversal.jpg" alt="Bruno at Universal" />
            <h2>Universal Responds to Lawsuit</h2>
            <p>Movie studio Universal Pictures on Friday responded to a ...</p>
        </div>

        <div class="story">
            <img src="paulaabdul.jpg" alt="Paula Abdul" />
            <h2>Paula Abdul Talks About Being in Bruno</h2>
            <p>Paula Abdul accepted an invite last year to receive an ...</p>
        </div>

        <div class="story">
            <img src="eminem.jpg" alt="Eminem" />
            <h2>Eminem Admits He Was Involved</h2>
            <p>Three days after storming out of the MTV awards, Eminem ...</p>
        </div>
    </div>
</div>

body {
    background-color: #0088EE;
    font-family: sans-serif;
}

#main {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

#content {
    background-color: white;
    border: 3px solid #005588;
}

#links {
    list-style-type: none;
    padding: 0em;
    text-align: center;
}

#links li {
    display: inline;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}

.story {
    clear: right;
    overflow: hidden;
    margin: 1em;
}

.story h2 {
    margin-top: 0em;
}

.story img {
    float: right;
}