HTML - Centering Text With Floating Image

Im trying to center and justifty text on my website and really stuggling with it. Any help is appreicated!!

Thanks Dave

I don't know if this should really go in the css forum or here, but here it is. The page in question is at the following link:

http://www.sikaband.com/archives/new/index.html

and the css file being referenced is:

http://www.sikaband.com/archives/new/blackstyle.css

Viewing the page in Firefox, the links in the navigation bar are centered the way they ought to be. Safari for some reason shunts the text off to the right a good ways. When I put a visible border on the div in question, I can see that the div itself is aligned properly, it's just the text inside that's off. I'm confused.

Hi.

I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this?

Thanks.

I have a web page that I had to convert from a .psd file to an html and I'm not able to center a submit button and the text field next to it. I've tried various alignments but I'm also limited by what I can do because when you convert from .psd to html the entire page is one form. I don't have an external link but I'm able to provide html if necessary. Can someone please take a look at my code and offer some suggestions?

Thank you

Doug

Hi all
i have been trying to center a group of four images using html.
the code is:
PHP Code:
<img src="tennis.jpeg"align="center"width="100" height="100" title="Equipment needed for playing tennis." >
    <img src="snooker.jpeg"align="center" width="100" height="100" title="Snooker table within a snooker club where you play the sport ">
     <img src="Golf.jpeg" "align="center"width="100" height="100 title="The Famous last hole on the old corse St Andrews">
     <img src="Badminton.jpeg"align="center" width="100" height="100" title="Equipment needed for playing Badminton"> 


some how its not quite right any ideas where im going wrong?

TI AV.

Gaz.

I have the following HTML:

<table id="TextArea1">
<tr>
<td valign=top><img src="Images/AllProducts.jpg" alt="All Products" align=center></td>
</tr>

The image is placed at the top left corner of the table using the:

valign=top

Then, I want to center the image horizontally within the table using:

align=center

But, this markup is ignored. I have tried all the values for "align" and:

align=right

is the only one that works.

What do I need to do to get this to work?

Thanks.

I tried every code I could find, but warning, I'm still new to HTML. This is my table code for now. I need the first row image to be centered. When i view it in a browser it is aligned to the left

<table style="width: 635px; height: 900px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 600px; height: 600px;" colspan="6"><img alt="" src="breakfast1.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb1.JPG" /></td>
<td><img alt="" src="bthumb2.JPG" /></td>
<td><img alt="" src="bthumb3.JPG" /></td>
<td><img alt="" src="bthumb4.JPG" /></td>
<td><img alt="" src="bthumb5.JPG" /></td>
<td><img alt="" src="bthumb6.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb7.JPG" /></td>
<td><img alt="" src="bthumb8.JPG" /></td>
<td><img alt="" src="bthumb9.JPG" /></td>
<td><img alt="" src="bthumb10.JPG" /></td>
<td><img alt="" src="bthumb11.JPG" /></td>
<td><img alt="" src="bthumb12.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb13.JPG" /></td>
</tr>
</tbody>
</table>

I would like to center three button images under an image. In the old day we would put our text into the image and create a two-row table, with the top row having one cell three columns wide and the bottom row having three cells.

I have tried making my image with three uls with background images under them, but of course I can't force the full image to show since my content doesn't take up the full space.

I am currently putting things in a table, just to make the full image show, but I feel like I'm still doing things old-school. Is there a newer, spiffier way to do this?

table {
width:780px;
font-size:125%;
padding:0;
overflow:hidden;
}
td {
width:254px;
height:60px;
background-repeat:no-repeat;
background-position:top left;
background-image:url(images/navbackground2.png);
padding:0 0 0 20px;
}

Also my images won't justify. The space between the cells seems predetermined no matter what I futz with and there's a space to the right of the last image that I don't want.

Finally, is there a way to put all three background statements into one code? (I know that's a CSS question, but I don't want to cross-post.)


Elisabeth

http://www.cubedspacedesigns.com/imagegallery/
This page has a row of scrolling thumbnails along the bottom. Each thumbnail, when clicked on, changes the main image.
My problem is that I can't get the main image to centre. The image itself is in a div called #image, and that is inside a container box called #imagebox. For some reason my #image div automatically takes on the width of its parent, #imagebox. What I want it to do is to take on the width of the new image and get centred inside its parent.

I seem to be having trouble. I centered the main image fine but when it comes to centering the background image (http://www.leeryan.fan-sites.org/trylayout/back.png), i can't seem to work out what to do.

http://www.leeryan.fan-sites.org/trylayout/header.php

If anyone can help me out i would appreciate it...I hope i have posted this in the correct place...This is all the coding i have that seem to be to do with the back.png don't know if that helps, i'm not very good with this sort of thing.

Code:

<body topmargin=0 leftmargin=0 background="back.png">

Hello folks,

I'm trying out some different background images sized 800 x 600, but I'm having trouble getting them to center on the page!

The graphic is hugging the right hand side of the screen at a low resolution, and is off center, slightly to the right at a higher res.

Here is a url to show you what is happening: http://www.magicalwonders.com/test/

The code is very basic:

Code:

<body bgcolor="#000000">
<div align="center"><img src="images/background.jpg" alt="background" width="800" height="600">
</div>

Not sure what I'm missing out?

Any advice would be appreciated.

Many thanks,

Myles

I'm trying to create a button image in HTML. and I would like the the button to be 100 pixels left of the center of the page and 150 pixels from the top. I need it to work with different resolutions.

This is what I tried which doesn't work.

<img src="Banner/edv_banner.png" style="position:absoulte; top:130px; center:10;">

I created a table and on one side is an image and the other side words.

I would like to center the image vertically and horizontally within the <td> tag. Right now the image is on the top of the area it's in
This code I'm using now is....

<img src="http://www.elevatingyourbusiness.com/images/6 Step Process201x178.jpg" width="201" height="178" alt="6 Step Process Photo" />

For a better picture of how "lopsided" the picture/words look you can go to www.ElevatingYourBusiness.com It's the graphic under the title starting "World-Class Management "

I'm open to any other suggestions you might have that will make this particular area look eye pleasing.

Thanks in advance.

What is the best method to center a single (hover over) image link in the absolute center of a browser page? I know there must be something very easy that's going over my head.

Is it easiest via CSS, or html? or neither, or both???

here's my code so far

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>keep your eyes open</title>
<style type="text/css">

<!--

#centerDIV {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}


body {
	background-color: #333333;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>



<body onload="MM_preloadImages('Images/eyesopen.png')">

<div id="centerDIV">

<a href="mailto:info@kyeonyc.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eyes_closed','','Images/eyesopen.png',1)"><img src="Images/eyesclosed.png" alt="eyes open" name="eyes_closed" width="249" height="247" border="0" class="imageCenter" id="eyes_closed" /></a></div>


</body>
</html>