473,320 Members | 1,961 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
  1. <html>
  2. <head>
  3. <title>
  4. Oliver's Blog
  5. </title>
  6.  
  7. <style type="text/css">
  8.  
  9. body            {background: #00A5DE;}
  10. div.content        {z-position: 1; display: block; margin-left: auto; margin-right: auto; width: 700px; height: 750px; border: 1px solid #000000}
  11. div.nav            {z-position: 2; relative; top: 200px; height: 475px; width: 195px; border: 1px solid #000000}
  12. div.blog        {z-position: 2; relative; top: 200px; left: 250px; height: 375px; width: 475; border: 1px solid #000000}
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18.  
  19. <div class="content">
  20. <img src="Layout\blog_layout.png">
  21.  
  22. <div class="nav">
  23. this is a piece of test writing
  24. </div>
  25.  
  26. <div class="blog">
  27. This is another piece of test writing
  28. </div>
  29.  
  30. </body>
  31. </html>
  32.  
Thankyou for any help :)
Aug 29 '07 #1
5 3164
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>
  5.       Oliver's Blog
  6.     </title>
  7.     <style type="text/css">
  8.       body{background: #00A5DE;}
  9.       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}
  10.       div.nav{z-position: 2; relative; top: 200px; height: 475px; width: 195px; border: 1px solid #000000}
  11.       div.blog{z-position: 2; relative; top: 200px; left: 250px; height: 375px; width: 475; border: 1px solid #000000}
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div class="content">
  16.       <div class="nav">
  17.         this is a piece of test writing
  18.       </div>
  19.       <div class="blog">
  20.         This is another piece of test writing
  21.       </div>
  22.     </div>
  23.   </body>
  24.  </html>
  25.  
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
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
  1.       body{background: #00A5DE;}
  2.       div.content  {
  3.           margin:0 auto; 
  4.           width: 700px; 
  5.           height: 750px; 
  6.           border: 1px solid #000000;
  7.           background: #fff url(layout/blog_layout.png) no-repeat top center
  8.           }
  9.       div.nav{
  10.           top: 200px; 
  11.           height: 475px; 
  12.           width: 195px; 
  13.           border: 1px solid #000000
  14.           }
  15.       div.blog{
  16.           top: 200px; 
  17.           left: 250px; 
  18.           height: 375px; 
  19.           width: 475px; 
  20.           border: 1px solid #000000
  21.           }
Note the forward slash vs the one you used in the url.
Aug 30 '07 #4
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>
  7. Oliver's Blog
  8. </title>
  9.  
  10. <style type="text/css">
  11.  
  12. body {
  13.     background: #00A5DE; 
  14.     background-image: url('Layout/blog_layout.png');
  15.     background-repeat: no-repeat;
  16.     background-position: top center;
  17.     }
  18.  
  19. div.content{
  20.     margin-left: auto;
  21.     margin-right: auto;
  22.     width: 700px;
  23.     height: 750px;
  24.     border: 1px solid #000000;
  25.     }
  26.  
  27. div.nav     {
  28.     position: relative;
  29.     z-index: 1; 
  30.     height: 475px;
  31.     width: 195px; 
  32.     top: 245px;
  33.     border: 1px solid #000000;
  34.     }
  35.  
  36. div.blog {
  37.     position: relative;
  38.     z-index: 1;
  39.     height: 450px;
  40.     width: 467px;
  41.     top: 230px;
  42.     left: 226px;
  43.     border: 1px solid #000000;
  44.     }
  45.  
  46. </style>
  47. </head>
  48.  
  49. <body>
  50.  
  51. <div class="content">
  52.  
  53. <div class="blog">
  54. This is another piece of test writing
  55. </div>
  56.  
  57. <div class="nav">
  58. This is a piece of test writing
  59. </div>
  60.  
  61. </div>
  62.  
  63. </body>
  64. </html>
  65.  
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

Sign in to post your reply or Sign up for a free account.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
39
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
47
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.
20
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
10
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...
10
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...
3
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
5
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...
5
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...
53
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...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.