Section 11.1. A close look at the elixirs XHTML

11.1. A close look at the elixirs XHTML Alice sure has asked for a tall order, hasn't she? She wants us to take the existing lounge XHTML and make it look like the handout menu. Hmmm... that looks challenging, but we do have CSS on our side, so let's give it a try. But, before we jump right into styling, let's get an overview of the existing XHTML. Here's just the XHTML snippet for the elixir specials; you'll find it in "lounge.html" in the "chapter11/lounge" folder: <h2>Weekly Elixir Specials</h2>The elixir specials section begins with an <h2> heading. <p>We have three elixirs, each with the same structure.<img src="images/yellow.gif" alt="Lemon Breeze Elixir" />Each elixir has an image in a <p> element.... </p> <h3>Lemon Breeze</h3> <p>a name, in an <h3> heading... The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night....and a description, also in a paragraph. </p> <p> <img src="images/chai.gif" alt="Chai Chiller Elixir" /> </p> <h3>Chai Chiller</h3>And this structure is repeated for each elixir. <p> Not your traditional chai, this elixir mixes maté with chai spices and adds an extra chocolate kick for a caffeinated taste sensation on ice. </p> <p> <img src="images/black.gif" alt="Black Brain Brew Elixir" /> </p> <h3>Black Brain Brew</h3> <p> Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. Your brain will thank you for the boost. </p> <p> Join us any evening for these and all our other wonderfulAnd, finally, at the bottom, there is another paragraph, with some text and a link to the real elixirs page. <a href="beverages/elixir.html" title="Head First Lounge Elixirs">elixirs</a>. </p> This looks tough, guys. There are a lot of style changes we've got to make, and the elixirs style doesn't really match the rest of the page. Jim: Come on, Frank, you know we can just create a class or two and then style all the elixir elements separately from the rest of the page. Frank: That's true. Maybe this isn't so bad. I'm sure there is a simple property to make text align to the center And we know how to handle the colored text. Jim: Wait a sec, what about that border around everything? Frank: Piece of cake. We just learned how to make borders. Remember, every element can have one. Joe: Hmm, I don't think so. If you look at the XHTML, this is a bunch of <h2>, <h3>, and <p> elements. If we put separate borders on every element, they'll just look like separate boxes. Frank: You're right, Joe. What we need is an element to nest all these other elements inside, so we can put a border on that. Then we'll have one border around everything in the elixirs section of the page. Jim: Well, I see why you get paid the big bucks, Frank. Could we nest the elixir stuff inside a <p> element, or a <blockquote>? Frank: We can't use <p> because <p> can't contain other block elements, and the headings and paragraphs are obviously block elements. I don't think we'd want to do that anyway; paragraphs are for text. Joe: And <blockquote>'s not right either, because this is an elixir menu, not a quote. Frank: Actually, I think we're on the right track. I've been reading a certain book on HTML & CSS and I'm just up to a section on a new element called <div >. I think it might be the tool we need. Joe: <div> what's that? It sounds like it's for math. Frank: That's not far off, because a <div> lets you divide your page into logical sections or groupings. Jim: Hey, that sounds like exactly what we need! Frank: Yup. Let me show you guys how to divide a page into logical sections, and then I'll show you what I know about <div>...