I'm trying to make a div layout for a blog site I'm starting, but I've run into problems. I'm trying to put my background image in one div and then add other divs over the top which will contain the text of a page. I am also trying to center everything on the page and make it re-sizable, which is why I'm not just absolute positioning it.
At the moment, I have the background image and then the blocks of text further down the page.
Here is my code:
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <title>
- Oliver's Blog
- </title>
- <style type="text/css">
- body {background: #00A5DE;}
- div.content {z-position: 1; display: block; margin-left: auto; margin-right: auto; width: 700px; height: 750px; border: 1px solid #000000}
- div.nav {z-position: 2; relative; top: 200px; height: 475px; width: 195px; border: 1px solid #000000}
- div.blog {z-position: 2; relative; top: 200px; left: 250px; height: 375px; width: 475; border: 1px solid #000000}
- </style>
- </head>
- <body>
- <div class="content">
- <img src="Layout\blog_layout.png">
- <div class="nav">
- this is a piece of test writing
- </div>
- <div class="blog">
- This is another piece of test writing
- </div>
- </body>
- </html>