Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to centre an image

    **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?

    Code:
    <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.

    Dave
    Last edited by phillipsdj; 08-29-2010 at 05:21 PM.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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
    Last edited by Doctor_Varney; 08-29-2010 at 05:47 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    you forgot to put a " at the
    Code:
    <body style="background:url(header1.jpg) repeat-x; margin:0px>
    the corect code is
    Code:
    <body style="background:url(header1.jpg) repeat-x; margin:0px">
    try using Dreamweaver CS5, it helps you spot this tinny mistakes

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    When you have css like this:
    Code:
    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.
    ☠ ☠RON☠ ☠

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    901
    Thanks
    0
    Thanked 118 Times in 117 Posts
    Quote Originally Posted by Major Payne View Post
    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

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    901
    Thanks
    0
    Thanked 118 Times in 117 Posts
    Quote Originally Posted by Major Payne View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •