Question : Is this html markup flexible enough to accomodate various designs?

First thank you for your time.

I have attached Layout.gif (an advertisement layout) that shows what the html and css file should produce. To start this project I just want to make certain that the html is as flexible as possible so that when it is combined with other css files an entirely different advertisement can be generated.

My goal is to have the html file contain as little formatting instructions as possible. It is equally desirable to have the css file contain as much formatting as possible. This way if a new layout is desired all I would have to do is change the css file.

So the first question is: Is the proposed html file good enough? If not, please modify the existing html to accomplish these formatting constraints and tell my why you would mark it up the way you did?

The second question will deal with what should go in the css given the html markup. But I can't ask that question until I have finalized the html markup.

Again, thank you.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

           
           
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--  <!DOCTYPE html>  -->

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="Layout.css"
</head>

<body>
  <div class="OmsAdvertisements">
    <div class="OmsAdvertisement">
      <h3 class="OmsHeader">Header Text Centered</h3>
      <img class="OmsPicture" src="Picture.gif" width="169" height="191" />
      <h3 class="OmsDesc1">Picture Desc1</h3>
      <h3 class="OmsDesc2">Picture Desc2</h3>
      <h3 class="OmsDesc3">Picture Desc3</h3>
      <h3 class="OmsDesc4">Picture Desc4</h3>
      <h3 class="OmsTitle1">Title1 Centered</h3>
      <h3 class="OmsParagraph1">Paragraph1</h3>
      <h3 class="OmsTitle2">Title2 Centered</h3>
      <h3 class="OmsParagraph2">Paragraph2</h3>
    </div>
		
    <!-- Another OmsAdvertisement could go here. -->
  </div>

</body>
</html>

           
         

Attachments:

Layout.gif (23 KB) (File Type Details)

The design. What the html and css file should produce.

Picture.gif (2 KB) (File Type Details)

A generic picture to be used in the html file.

Answer : Is this html markup flexible enough to accomodate various designs?

While I do have several common layouts that I use, I never try to make them universal. CSS and HTML work together to make a page. CSS can't be used to fix fatal layout flaws.

The four basic layout methods are:
1. Plain HTML which is rarely used because there is no positioning.
2. HTML tables for positioning.
3. Divs with floats to position divs side by side.
4. Absolute positioning where inline or CSS styling is used both for the position and decoration of the divs.

Your layout above can be done with 2, 3, or 4. It would be best if you can do all three methods so you know how they work.