I need some advise on how to design a web site the way I want, my attempts
works partially but I'm pretty sure it can be done in a better way.
The layout I want is pretty simple, I want it to look like this:
-----------------
| |
| text |
| |
-----------------------
| |
| photo |
| |
-----------------------
| |
| text |
| |
-----------------
I want to have the text in the middle of the page, I want to have large
photos so they need to "stick out" on the sides of the text.
My idea for solution
<body>
<header>
</header>
<div id="main">
<h1>Test</h1>
<p>Etiam luctus ...</p>
<figure>
<img src="..." width="..." height="..." alt="..."></a>
<figcaption>...</figcaption>
</figure>
<p>Duis et turpis...</p>
</div>
</body>
and the CSS
body{
font-family: Times, "Times New Roman", serif;
}
h1, h2, h3, h4, h5, h6 {
margin:auto;
color: gray;
font-family: Helvetica,"Helvetica Neue", "sans-serif";
font-weight: bold;
}
#main p {
margin:auto;
margin-bottom: 1em;
min-width:20em;
max-width:40em;
}
figure{
margin:10px 0px;
text-align:center;
}
figure img{
padding:3px;
border: 1px solid #bbb;
}
figcaption { font-style: italic; }
I would appreciate some advise on how to improve this.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
