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:
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:
CODE
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.imageshack.us/i/badlayout.gif/Here is what it looks like in dreamweaver:
http://img29.imageshack.us/i/badlayout2.gif/Thanks in advance.
This post has been edited by TurkOrDie: 22 Oct, 2009 - 11:59 PM
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
