CSS Div Layout

Hello!

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>

Thankyou for any help :)

Aug 29 '07 #1

Subscribe Post Reply

3155

phvfl

173

Expert 100+

Hi Oliver,

Welcome to TSDN...

Firstly have you declared the DOCTYPE for the document, if you don't then IE will go into quirks mode which can cause all sorts of problems with CSS.

Secondly it does not look like the content div is closed, this would cause a validation error.

If you are using a background it is generally better to put it in the styling as the background instead of in the HTML. Something like this:

Expand|Select|Wrap|Line Numbers

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

<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;background:#FFFFFF Layout\blog_layout.png no-repeat top center}

      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">

      <div class="nav">

        this is a piece of test writing

      </div>

      <div class="blog">

        This is another piece of test writing

      </div>

    </div>

  </body>

 </html>

The background rule is setting the background colour to white (the part not covered by the image, setting the background image to the URL of the image, setting no repeat on the image and positioning the image in the top centre of the content div. A good page for explanation of the background property is here

Aug 29 '07 #2

olivermccallion

Thankyou for your fantastic reply :) I knew I'd be doing things the hard way :P
Was wondering if you could help me with my other problem:
I'm trying to position the divs that contain my content now, but how can I do this without using absolute positioning? I want my page to be re-sizable in different sized browser windows and absolute positioning fixes the divs in place. Also when I set the positioning to relative and set the left-margin as 20% and the right-margin as 80% it works on my displays well in my maximised browser window but when i resize it the divs misalign themselves from the background image. What can I do?!
Thankyou :)

Aug 29 '07 #3

drhowarddrfine

7,435

Expert 4TB

here is no such thing as 'z-position' and all values must have a unit value such as 'width: 50px'. You probably wanted 'z-index'.

Absolute positioning does not fix anything into place. You can use relative positioning with percent, ems, or anything just as with any other method.

It is not necessary to use 'display:block' for divs since <div> is a block level element.

Much of your css is invalid. Here is a fixed version but it doesn't do what you want:

Expand|Select|Wrap|Line Numbers

 
      body{background: #00A5DE;}

      div.content  {

          margin:0 auto; 

          width: 700px; 

          height: 750px; 

          border: 1px solid #000000;

          background: #fff url(layout/blog_layout.png) no-repeat top center

          }

      div.nav{

          top: 200px; 

          height: 475px; 

          width: 195px; 

          border: 1px solid #000000

          }

      div.blog{

          top: 200px; 

          left: 250px; 

          height: 375px; 

          width: 475px; 

          border: 1px solid #000000

          }

Note the forward slash vs the one you used in the url.

Aug 30 '07 #4

olivermccallion

Thankyou so much for all your help. I've attempted to clean up my CSS and I've added a DOCTYPE etc. Last pestering question I promise.....
I've got my two div frames now, and they're positioned perfectly in a container which allows the windows to be scaled etc. But when they're both put into the container, the first one declared in the body 'pushes' the second one out of the container. I want them side by side, but nothing I seem to do gets them there. Here's my CSS:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
 
<html>

<head>

<title>

Oliver's Blog

</title>
 
<style type="text/css">
 
body {

    background: #00A5DE; 

    background-image: url('Layout/blog_layout.png');

    background-repeat: no-repeat;

    background-position: top center;

    }
 
div.content{

    margin-left: auto;

    margin-right: auto;

    width: 700px;

    height: 750px;

    border: 1px solid #000000;

    }
 
div.nav     {

    position: relative;

    z-index: 1; 

    height: 475px;

    width: 195px; 

    top: 245px;

    border: 1px solid #000000;

    }
 
div.blog {

    position: relative;

    z-index: 1;

    height: 450px;

    width: 467px;

    top: 230px;

    left: 226px;

    border: 1px solid #000000;

    }
 
</style>

</head>
 
<body>
 
<div class="content">
 
<div class="blog">

This is another piece of test writing

</div>
 
<div class="nav">

This is a piece of test writing

</div>
 
</div>
 
</body>

</html>

Aug 31 '07 #5

drhowarddrfine

7,435

Expert 4TB

When you position an element 'relative' it does not vacate the space it originally occupied and that space will not be filled in automatically.

Perhaps what you want to do can be accomplished by changing that to float:left on one and float:right on the other, removing position:relative.

Aug 31 '07 #6

by: Peter Diedrich | last post by:

The site design is pretty simple: ============================================ | Head | ============================================ | | ...

HTML / CSS

table-less layout & forms

by: Zak McGregor | last post by:

Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak

HTML / CSS

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

Alternative to Frames

by: Tammy | last post by:

What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy

HTML / CSS

PyQt layout question: QScrollView and QGridLayout?

by: Volker Lenhardt | last post by:

For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I try to layout my data output in a QScrollView as the central widget. I'd prefer to use QGridLayout, but cannot add it to the...

Python

How to make layout without tables (using div's)...

by: Luke | last post by:

Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...

HTML / CSS

Layout basics

by: Samuel Shulman | last post by:

I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman

ASP.NET

Frames vs Table layout

by: Jeff User | last post by:

Hi all I am writing program/framework to server a web site dynamically based on stored web page data with C#, .net1.1 What is the preferred means of controlling page layout, frames or...

C# / C Sharp

Layout Question.

by: Ed Sproull [MSFT] | last post by:

First I'm pretty new to ASP.NET and I'm having a simple problem. I have small website with a header, sidebar and the the content. I want my content to appear beside my sidebar which seems to be a...

ASP.NET

No TABLES in html. No hacks in CSS. Any layout possible, crossbrowser. Try it.

by: brave1979 | last post by:

Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...

HTML / CSS

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

Access Europe meeting on Wed 4 Oct - The future of Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

Energy Model code modification to account for year dependent interest rate

by: giovanniandrean | last post by:

The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...

Python

VBA Class Basics

by: NeoPa | last post by:

Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

Microsoft Access / VBA

Finding a record, and then saving a new record after the record has been amended.

by: nia12 | last post by:

Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Take a Database to the Next Level

by: GKJR | last post by:

Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

Microsoft Access / VBA

Applying ComboBox filters Sequentially

by: SueHopson | last post by:

Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

Microsoft Access / VBA

Similar topics