6 Replies - 1197 Views - Last Post: 23 October 2009 - 07:01 AM

#1 TurkOrDie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-October 09

html and css layout - A lot of problems!

Posted 23 October 2009 - 12:26 AM

Ok i woke up one morning and decided i wanted to make a website, so i sat down at my computer and started learning Html and CSS (i assume thats all you need for a simple website). All was going fine and after a few days i thought i knew enough to make a simple webpage, it managed to get the layout sorted to some extent in Dreamweaver but then i tried it in internet explorer and Google chrome and the layout wasn't centered and the background didn't appear. I looked back at the Html and the CSS i wrote and i realized it was just a messy unorganized piece of rubbish. So i guess what I'm asking here is how can i make it neater and how can i resolve the problem of centering my layout in browsers and why on earth isn't the background showing?

my Html code:
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="main.css">
</head>

<body bgcolor="#003366">

<div class="main">
<img src="images\Bannerback.png" class="bannerback">
<img src="images\box1.png" class="box1">
<img src="images\box2.png" class="box2">
<img src="images\box3.png" class="box3">
<img src="images\box4.png" class="box4">
<img src="images\box5.png" class="box5">
<img src="images\divider.png" class="divider">
<img src="images\footer.png" width="908" height="48" class="footer">
<img src="images\header.png" class="header">
<img src="images\textbox.png" class="textbox">
</div>

<div class="textbox">
<p class="main">Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph
 Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph
  Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph
   Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph
	Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph Pararaph</p>
</div>

</body>
</html>




My Css:
body
{
background-image:url("images\background.png");
background-repeat:no-repeat;
background-position:center;
text-align:center;
margin:0 auto;
}


div.main
{
text-align:left;  
width:748px; 
margin:0 auto;
}

img.header
{
	Position:absolute;
	left: 140px;
	top: 206px;
	width: 903px;
}

img.bannerback
{
	Position:absolute;
	left: 140px;
	top: 15px;
	width: 903px;
}

img.divider
{
Position:absolute;
left: 580px;
top: 249px;
}

img.textbox
{
Position:absolute;
left: 644px;
top: 246px;
}

div.textbox
{
Position:absolute;
left: 667px;
top: 275px;
width: 340px;
}

img.footer
{
	Position:absolute;
	left: 140px;
	top: 1050px;
	width: 906px;
}

img.box1
{
Position:absolute;
left: 139px;
top: 254px;
}

img.box2
{
Position:absolute;
left: 140px;
top: 492px;
}

img.box3
{
Position:absolute;
left: 140px;
top: 729px;
}

img.box4
{
	Position:absolute;
	left: 359px;
	top: 730px;
	height: 202px;
}

img.box5
{
Position:absolute;
left: 138px;
top: 935px;
}

img.background
{
	Position:absolute;
	left: 137px;
	top: 2px;
	width: 907px;
	height: 1096px;
}body
{
background-image:url("images\background.png");
background-repeat:no-repeat;
background-position:center;
text-align:center;
margin:0 auto;
}


div.main
{
text-align:left;  
width:748px; 
margin:0 auto;
}

img.header
{
	Position:absolute;
	left: 140px;
	top: 206px;
	width: 903px;
}

img.bannerback
{
	Position:absolute;
	left: 140px;
	top: 15px;
	width: 903px;
}

img.divider
{
Position:absolute;
left: 580px;
top: 249px;
}

img.textbox
{
Position:absolute;
left: 644px;
top: 246px;
}

div.textbox
{
Position:absolute;
left: 667px;
top: 275px;
width: 340px;
}

img.footer
{
	Position:absolute;
	left: 140px;
	top: 1050px;
	width: 906px;
}

img.box1
{
Position:absolute;
left: 139px;
top: 254px;
}

img.box2
{
Position:absolute;
left: 140px;
top: 492px;
}

img.box3
{
Position:absolute;
left: 140px;
top: 729px;
}

img.box4
{
	Position:absolute;
	left: 359px;
	top: 730px;
	height: 202px;
}

img.box5
{
Position:absolute;
left: 138px;
top: 935px;
}

img.background
{
	Position:absolute;
	left: 137px;
	top: 2px;
	width: 907px;
	height: 1096px;
}



Here is what it looks like in a browser:
http://img26.imagesh.../badlayout.gif/

Here is what it looks like in dreamweaver:
http://img29.imagesh...badlayout2.gif/

Thanks in advance.

This post has been edited by TurkOrDie: 23 October 2009 - 12:59 AM


Is This A Good Question/Topic? 0
  • +

Replies To: html and css layout - A lot of problems!

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 01:09 AM

I'm not totally sure what the effect of the automatic margin on your body will be, but I suspect that's why your centering isn't working. Try just setting to body's margin and padding to 0. That will make it the full width of the browser, and so allow the automatic margin of your main div to fill the space properly.
Was This Post Helpful? 0
  • +
  • -

#3 TurkOrDie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-October 09

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 01:28 AM

View Postthehat, on 23 Oct, 2009 - 12:09 AM, said:

I'm not totally sure what the effect of the automatic margin on your body will be, but I suspect that's why your centering isn't working. Try just setting to body's margin and padding to 0. That will make it the full width of the browser, and so allow the automatic margin of your main div to fill the space properly.

Ok ill try that but i dont want the boxes to fill the page i just want it to be centered in the middle with a gap either side of it but ok ill try that thanks :)
Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 01:46 AM

That's the point of using automatic margins on the divs within the body tag. To get the centering right you have to specify two rules, margin:0 auto; and width. You also require that your parent element fills the entire width of the visible area.
Was This Post Helpful? 1
  • +
  • -

#5 TurkOrDie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-October 09

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 01:50 AM

View Postthehat, on 23 Oct, 2009 - 12:46 AM, said:

That's the point of using automatic margins on the divs within the body tag. To get the centering right you have to specify two rules, margin:0 auto; and width. You also require that your parent element fills the entire width of the visible area.

OK thank you. I'll try that now and i take it that the parent element is div.main ? (sorry im very new to all this)
Again thank you
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 04:46 AM

No, the div you're centering is main, and it's parent is the body.
Was This Post Helpful? 0
  • +
  • -

#7 TurkOrDie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-October 09

Re: html and css layout - A lot of problems!

Posted 23 October 2009 - 07:01 AM

oh ok thanks alot :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1