Hello. I am a student pursuing my bachelor's of Science in the field of Web Design and Interactive Media, where we are currently learning to hand-code XHTML and using CSS. I have no troubles at all with the XHTML, however, the CSS aspect of it is giving me a heck of a time. I do understand the basics but I am having trouble positioning things on a page where I want them. This is my problem - I have four images that are aligned to the left, they each have a description that goes with them and I want to add that description to the right of each image, unfortunately, I am getting nowhere and fast! I have been studying the CSS rules through the W3C school site but it isn't working for me. Any help or advice would be greatly appreciated. Below is the code as I have it now (I last tried div.right but that didn't work either) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Adventures in Tuscany</title> <style type="text/css"> body {background-color: #339999; color:white; font-weight:bold; font-family: verdana, arial, sans-serif; text-align:left; } h1 {color: #ffff99; font-size:24px; text-align:center; } h2 {color: #ffff99; font-size:18 p {color:white; font-size:16px; } div.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } </style> </head> <body> <h1>Adventures in Tuscany</h1> <p>This is a short chronicle of my visit to Italy. Click on the thumbnails to see a larger view of each photograph. Enjoy!</p> <h2>Pozzarello</h2> <p><a href="window.html"><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" height="100" /></a></p> <div class="right"> <p>The house we stayed in was called Pozzarello and it was built around the year 1200 as the home of the gardner who tended the grounds of the adjacent castle. The thick walls kept us nice and cool inside, despite the blistering mid-day heat. This is the view from our bedroom window.</p></div> <h2>On the Road</h2></p> <p><a href="countryside.html"><img src="thumbnails/countryside_100.jpg" alt="scenery on the way to Montalcino" width="75" height="100" /></a> <p>This is the scene on the way to Montalcino (all roads lead to Montalcino!). It looks a lot like the scene on the way to Sienna, and the scene on the way to the grocery store. We were surrounded by beautiful countryside for most of our travels.</p> <h2>Sienna</h2> <p><a href="sienna.html"><img src="thumbnails/alley_100.jpg" alt="image of alley" width="75" height="100" /></a> <a href="duomo.html"><img src="thumbnails/cathedral_100.jpg" alt="image of Duomo" width="75" height="100" /></a></p> <p>The closest city to our villa was Sienna, about 30 minutes away. We spent many days exploring the steep and crooked streets, sampling the local cuisine at outdoor restaurants, and stopping in the dark and echoey Duomo to escape the sun.</p> </body> </html>
Okay, I figured out how to get the text beside the image by using the class tag so please disregard this question. Please feel free to leave any advice pertaining to CSS, I need all the help I can get
try this.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Adventures in Tuscany</title> <style type="text/css"> body {background-color: #339999; color:white; font-weight:bold; font-family: verdana, arial, sans-serif; text-align:left; } h1 {color: #ffff99; font-size:24px; text-align:center; } h2 {color: #ffff99; font-size:18 p {color:white; font-size:16px; } div.right { float:left; width:300px; background-color:#b0e0e6; } </style> </head> <body> <div style="margin:auto;width:800px"> <div style="float:left;width:300px"> <h1>Adventures in Tuscany</h1> <p>This is a short chronicle of my visit to Italy. Click on the thumbnails to see a larger view of each photograph. Enjoy!</p> <h2>Pozzarello</h2> <p><a href="window.html"><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" height="100" /></a></p> </div> <div class="right"> <p>The house we stayed in was called Pozzarello and it was built around the year 1200 as the home of the gardner who tended the grounds of the adjacent castle. The thick walls kept us nice and cool inside, despite the blistering mid-day heat. This is the view from our bedroom window.</p></div> <h2>On the Road</h2></p> <p><a href="countryside.html"><img src="thumbnails/countryside_100.jpg" alt="scenery on the way to Montalcino" width="75" height="100" /></a> <p>This is the scene on the way to Montalcino (all roads lead to Montalcino!). It looks a lot like the scene on the way to Sienna, and the scene on the way to the grocery store. We were surrounded by beautiful countryside for most of our travels.</p> <h2>Sienna</h2> <p><a href="sienna.html"><img src="thumbnails/alley_100.jpg" alt="image of alley" width="75" height="100" /></a> <a href="duomo.html"><img src="thumbnails/cathedral_100.jpg" alt="image of Duomo" width="75" height="100" /></a></p> <p>The closest city to our villa was Sienna, about 30 minutes away. We spent many days exploring the steep and crooked streets, sampling the local cuisine at outdoor restaurants, and stopping in the dark and echoey Duomo to escape the sun.</p> </div> </div> </body> </html> Code (markup): I hope it works
Let's get the markup right first. A gallery is a list. It should be marked up as such. A div is an aggregating element. It is for grouping a structural region, or division. It should not be used for other than that structural purpose. An image, contextually, is a substitute for text; the alternative text assigned to the alt attribute, so your use of p is correct. The descriptive text, or caption belongs in the same paragraph. For layout, we float the link containing the image. We want the list item to enclose the float, so we set a new block formatting context for it by setting {overflow: hidden;}. See enclosing float elements. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> /*<![CDATA[*/ #gallery li { overflow: hidden; /*causes li to enclose its float element(s)*/ } #gallery a { float: left; } #gallery a img { border: 1px dotted gray; display: block; /*because I wanted the image space reserved even though I don't have access*/ margin-right: 5px; } /*]]>*/ </style> </head> <body> <h1>Adventures in Tuscany</h1> <p>This is a short chronicle of my visit to Italy. Click on the thumbnails to see a larger view of each photograph. Enjoy!</p> <ul id="gallery"> <li> <h2>Pozzarello</h2> <p><a href="window.html"><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" height="100" /></a> The house we stayed in was called Pozzarello and it was built around the year 1200 as the home of the gardner who tended the grounds of the adjacent castle. The thick walls kept us nice and cool inside, despite the blistering mid-day heat. This is the view from our bedroom window.</p> </li> <li> <h2>On the Road</h2> <p><a href="countryside.html"><img src= "thumbnails/countryside_100.jpg" alt="scenery on the way to Montalcino" width="75" height="100" /></a> This is the scene on the way to Montalcino (all roads lead to Montalcino!). It looks a lot like the scene on the way to Sienna, and the scene on the way to the grocery store. We were surrounded by beautiful countryside for most of our travels.</p> </li> <li> <h2>Sienna</h2> <p><a href="sienna.html"><img src="thumbnails/alley_100.jpg" alt="image of alley" width="75" height="100" /></a> <a href="duomo.html"><img src= "thumbnails/cathedral_100.jpg" alt="image of Duomo" width="75" height="100" /></a> The closest city to our villa was Sienna, about 30 minutes away. We spent many days exploring the steep and crooked streets, sampling the local cuisine at outdoor restaurants, and stopping in the dark and echoey Duomo to escape the sun.</p> </li> </ul> </body> </html> Code (markup): Since you're starting out, let me add something about formatting. Your source should be easy to read. You need to be able to find what you're looking for, to understand what you found, and to edit it. For this reason, html should have nested block elements indented two spaces, that's spaces; no tabs. Sibling block elements should be separated by a blank line. In the css, each selector belongs on its own line, and its properties should be indented, each on its own line. Group css selectors contextually. No matter how good you get, there's going to be editing or debugging, so make it easy on the next guy six months down the road; it may be you. cheers, gary