...
PDA

How to centre an image

phillipsdj
08-29-2010, 04:15 PM
**Edit** Please ignore this, I just realised that my images are vastly different to the originals!

Hi all,

I am trying to build a web site for the first time and this is my first attempt with HTML and CSS. To try and get to grips with both languages/systems I have copied the source from one of the free templates provided by my host and replicated it manually whilst changing bits to make it more personal to me.

Unfortunately, when I have replaced their header image with my own something has gone wrong and it has shifted so far to the right that I can only see a tiny section of it. Would any of you mind taking a quick look at my code below and let me know if anything jumps out at you as being wrong?

<html>
<head>
<title>www.phillipsdj.co.uk</title>
<style type="text/css">

body, p, td{
font-family:Arial;
font-size: 10pt;
font-weight:normal;
colour:#000000;
margin:0px
}

blockquote, ol, ul{
margin: 0px 0px 0px 40px
padding: 0px;
}

h1{
font-family:Arial;
font-size: 22pt;
font-weight:normal;
colour:#000000;
margin:opx;
}

h2{
font-weight: normal;
font-size: 18pt;
margin: 0px
}

h3{
font-weight: normal;
font-size: 16pt
margin: 0px;
}

h4{
font-weight: normal;
font-size: 14pt;
margin: 0px;
}

pre{
margin:0px;
}

a{
colour:#738fac;
text-decoration: none;
}

a:hover{
colour:#738fac;
text-decoration: underline;
}

.menu td a{
font-family:Arial;
colour:#000000;
font-size: 10pt;
text-decoration: nonw;
font-weight:normal;
}

.menu td a:hover{
color:#738fac;
text-decoration:none;
}

</style>
</head>

<body style="background:url(header1.jpg) repeat-x; margin:0px>
<div id="maindiv1" align="left">
<div id="maindiv2" style="width:767px; position:relative ">
<table width="767" cellpadding="0" cellspacing="0" align="centre" border="0" align="center" border ="0" id="maintable"
style="position:relative; border-collapse:collapse">
<tbody>
<tr>
<td valign="top" style="background:#FFFFFF; padding:20px 20px 60px 20px ">
<table width="100%" height="266" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse" >
<tbody>
<tr>
<td valign="top" style="background-image: url(header1.jpg) no-repeat top right; padding-left:30px; padding-right:30px ">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1><b>www.phillipsdj.co.uk</b></h1>
<h1><b>&nbsp;&nbsp;&nbsp;&nbsp;also known as <i>Le Geek</i></b><h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp</p>
<p>
<table allign=left class="menu" cellpadding="0" border="0" style="border-collapse:collapse" meta="menu" metaid="My Website 2">
<tr><td style="padding-right:22px " align="left"><font colour="#738fac"><b>Home</b>,</font></td></tr></table>
</p>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse" >
<tbody>
<tr>
<td valign="top" style="padding-left:30px ">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="justify">Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here</p>
<p>&nbsp;</p>
<p>Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here Insert Text here</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table align="left" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse" >
<tbody>
<tr>
<td valign="top" style="background:#000000; padding:45px 18px ">
<h1><font colour="#FFFFFF"><b>Test</b></font></h1>
<h1><font colour="#FFFFFF"><b>&nbsp;Dave Test</b></font></h1>
<h1><font colour="#FFFFFF"><b>&nbsp;&nbsp;Kate Jack Jill</b></font></h1>
<h1><font colour="#FFFFFF"><b>Mwah!!</b></font></h1>
</td>
</tr>
</tbody>
</table><img src="/images/apples-and-water-lily/Sunflower2.jpg" align="right">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td valign="top" width="156" align="right" style="padding-right:32px; padding-left:15px ">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="/images/apples-and-water-lily/Sunflower2.jpg">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="right"><span style="font-size:8pt "><a href="#"><font colour="000000">Test Link 1</font></a></span></p>
<p>&nbsp;</p>
<p align="right"><span style="font-size:8pt "><a href="#"><font colour="000000">Test Link 2</font></a></span></p>
<p>&nbsp;</p>
<p align="right"><span style="font-size:8pt "><a href="#"><font colour="000000">Test Link 3</font></a></span></p>
<p>&nbsp;</p>
<p align="right"><span style="font-size:8pt "><a href="#"><font colour="000000">Test Link 4</font></a></span></p>
<p>&nbsp;</p>
<p align="right"><span style="font-size:8pt "><a href="#"><font colour="000000">Test Link 5</font></a></span></p>
<img width="166" height="1">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Many thanks in advance for any help you can provide. :D

Dave
Doctor_Varney
08-29-2010, 05:34 PM
Hi Philip

Further to what you have discovered about your images, I would strongly recommend not using the outmoded table layout method but instead look to CSS positioning for your formatting and centering requirements.

Dr. V
theo-savus
08-29-2010, 08:28 PM
you forgot to put a " at the
<body style="background:url(header1.jpg) repeat-x; margin:0px>

the corect code is
<body style="background:url(header1.jpg) repeat-x; margin:0px">

try using Dreamweaver CS5, it helps you spot this tinny mistakes
Major Payne
08-31-2010, 12:39 AM
When you have css like this:
blockquote, ol, ul{
margin: 0px 0px 0px 40px
padding: 0px;
}
There is no need to put dimensions units when the value is "0" (zero). Also, to eliminate a lot of unnecessary coding, use the universal selector at the very top of your CSS and you will not have to type in all those zero values for margins, paddings and borders:
[code}
* {
margin: 0;
padding: 0;
border: 0;
}

That will zero out everything and makes sure your styling takes over from square one.

Also, make sure you end all CSS lines with a ";". I don't care if it is unnecessary at the end of the LAST line. Get in the habit of automatically typing one and you will not have problems wondering why your CSS is not working at times.
Lerura
08-31-2010, 12:48 AM
There is no need to put dimensions units when the value is "0" (zero).

Yes there are:
if you are one of the few left using Frontpage, it will automatically remove any 0's without units, and hence change the coding:

blockquote, ol, ul{
margin: 0 0 0 40px
padding: 0;
}

to:

blockquote, ol, ul{
margin: 40px
padding: ;
}

so by adding "px" you can enable editing by FrontPage
Major Payne
08-31-2010, 12:58 AM
if you are one of the few left using Frontpage,If you are still using FrontPage, then you deserve all the misery you can encounter.

FrontPage is the world's WORSE web editor. Word, WordPad, Publisher and even the infamous FrontPage should NEVER be used for web pages. They guarantee that your web pages will NOT be cross-browser compatible because of all the Microsoft Schema code it adds. Only IE and Maxthon understand this code. Additionally, FrontPage requires server extensions be installed to work correctly.

I can provide you a dozen or more links to FREE web editors that would FAR SURPASS FronntPage.
Lerura
08-31-2010, 01:35 AM
If you are still using FrontPage, then you deserve all the misery you can encounter.

FrontPage is the world's WORSE web editor.

I agree!!

But for some reason???? there are still people using it.

Personally I am using Editpad, a notepad like editor with a lot of extra functions like: Search&Replace, Drag&Copy, Import other documents, and the best IMO: You can have multiple documents opened in the same editor.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum