|
HTML - Image Alignment Not Centering
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 Similar TutorialsI 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 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> 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'm having trouble getting my image to line up right. Here's what I want out of it: I want that white textbox to be up by the links, but every time I try, it makes the link images jump all over the place. Here's the code: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Website Test</title> </head> <body style="background-image: url(http://www.freewebs.com/aquafloe/images/wariobg4co.gif);"> <img style="width: 755px; height: 120px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cbanner.png"><br> <a href="index.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Chome_norm.jpg"></a><br> <br> <a href="pics.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cpics_norm.jpg"></a><br> <span style="text-decoration: underline;"><br> <a href="videos.htm"><img style="border: 0px solid ; width: 150px; height: 36px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Cvideos_norm.jpg"></a></span><br> <br> <img style="width: 460px; height: 115px;" alt="" src="http://www.freewebs.com/aquafloe/images%5Ctextbox.png" hspace="200"><br> <br> <br> <br> <br> </body> </html> Is there any easy fix, or another way to get the same thing? Thanks. i know this question has probably been asked 10000 times, but, how do i align an image so that it will be in the center of the entire page (like dead center) -------|------- -------|------- -----img----- -------|------- -------|------- Hi. The pictues on my nav ber have shifted to the left about 40 px. How do I get them to be centerd? (The nav bar is basically the only thing I have on the page..) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title>Lithium Games</title>
<style type="text/css">
body {
background-color : #D0D0D0 ;
color : #000000;
text-align : center;
margin-top : 10px;
vertical-align : middle;
background-image: url("http://lithium-games.com/pic/BG.png");
background-attachment: fixed;
background-repeat: repeat-x;
}
#content {
width : 80%;
margin-right : auto;
margin-left : auto;
margin-top : 30px;
border : 2px solid #000000;
background-color : #ffffff;
padding : 5px;
text-align : center;
}
#nav {
width:240px;
height:33px;
margin:0px auto;
list-style-type:none;
}
#nav li {
margin:0 2px;
float:left;
display:inline;
}
#nav img {
float:left;
}
</style>
</head>
<body>
<div id="content">
<p>
<img src="http://lithium-games.com/pic/LG_Logo.gif" width="126" height="116" border="0"
ALT="">
<br />
<img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0"
ALT="">
<ul id ="nav">
<a href="http://google.com"
onmouseover="document.B1.src='http://lithium-games.com/pic/H_2.bmp'"
onmouseout="document.B1.src='http://lithium-games.com/pic/H_1.bmp'">
<img src="http://lithium-games.com/pic/H_1.bmp" width="80" height="33" border="0"
ALT="" name="B1" />
</a><a href="http://google.com"
onmouseover="document.B2.src='http://lithium-games.com/pic/G_2.bmp'"
onmouseout="document.B2.src='http://lithium-games.com/pic/G_1.bmp'">
<img src="http://lithium-games.com/pic/G_1.bmp" width="80" height="33" border="0"
ALT="" name="B2" />
</a><a href="http://google.com"
onmouseover="document.B3.src='http://lithium-games.com/pic/F_2.bmp'"
onmouseout="document.B3.src='http://lithium-games.com/pic/F_1.bmp'">
<img src="http://lithium-games.com/pic/F_1.bmp" width="80" height="33" border="0"
ALT="" name="B3" />
</a>
<img src="http://lithium-games.com/pic/Line.gif" width="400" height="2" border="0"
ALT="" style="position:relative; left:0px;
top:+100px;">
</ul>
</p>
</div>
</body>
</html>
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 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. 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;"> 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>
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"> Hi This is what i have: PHP Code: div id="wrapper"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="17%" ><img src="element.png" width="230" height="381" /></td> <td width="29%" align="left">middle</td> <td width="25%" align="left" background="backimg.png"><p>dfg</p></td> <td width="29%"></td> </tr> </table> </div> and this is what i get: Basically i have a table with 3 cells, the left (with the pink effect), the middle, and the right side. What i want is that image effect which is in left side of the page to be always aligned at top. should i create another <div> inside the <td> and put the image in the <div> ? is there a good way to do this ? Thanks Hello ladies and gentlemen. Im having trouble aligning some buttons i made with an a big image and small image of the like. They need to look like this... http://i217.photobucket.com/albums/c...wayne/main.jpg but currently are out of sync and all stuffed up. I was wondering what i could do to correct he problem and make it like the image above. Thanks in advance Hi all, I'm working on a personal website and I'm stuck on this one little piece of coding. I'm desperate, no one will help me one the forums! Here's my code: HTML: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>owr // home</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <span class="text"><strong>owr</strong> // home</span> <p class="text"><img src="images/block.png" width="20" height="18"></p> <p align=left><a href="index2.html"><img src="images/home.png" width="20" height="57" alt="Home"></a></p><p align=left><a href="music.html"><img src="images/music.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="pics.html"><img src="images/pics.png" width="20" height="35" alt="Pictures"></a></p> <p align=left><a href="vids.html"><img src="images/vids.png" width="20" height="35" alt="Videos"></a></p> <p align=left><a href="links.html"><img src="images/links.png" width="20" height="50" alt="Music"></a></p> <p align=left><a href="projects.html"><img src="images/projects.png" width="25" height="50" alt="Projects"></a></p> </body> </html> CSS: Code: @charset "utf-8";
.text {
font-family: MankSans-medium;
}
.content {
font-family:MankSans-medium;
font-size:14px;
}
.content2 {
font-family:MankSans-medium;
font-size:16px;
}
A:link {
text-decoration:none;
color:#000
}
A:active {
text-decoration:none;
color:#444
}
A:hover {
text-decoration:none;
color:#999;
}
Images: http://yfrog.com/bfblockfp http://yfrog.com/06homecsp http://yfrog.com/6glinkscp http://yfrog.com/0imusiclkp http://yfrog.com/2opicsdnp http://yfrog.com/63projectsp http://yfrog.com/mzvidsp I need to put content to the right of the image links, but I'm not sure how to separate the links from the content so I don't end up writing text under the pictures. I think I'm being clear but if you need me to expound, please let me know. But I really need some help with this. Thanks a bunch! Matt I have three images which I want horizontal on the bottom of my page. One aligned left, one aligned right, and one aligned center. I am having issues with aligning the center image, it is always just placing itself to the right of the aligned left image and not on the center of the page. If anyone could help me out with the code for an image centered between two others that would be great. I am having trouble aligning a photo dead-center in a div. Here's a simple breakdown to avoid confusion... <div class="div1"> <div class = "div2"><img src="image.jpg"></div> </div> What I am trying to do is get that image right in the middle of div 1, both vertically and horizontally. Just to give a bit more of an illustration, for argument's sake, let's go by a standard 800px wide and 600px high for div1. The image size could be 400px by 300px. Div2 could be 75% W&H of Div1. I've tried everything I know using CSS and HTML, but I am missing something. All help is appreciated. Thanks, Jake I am trying to create a page header that has an image on the left and text that should be centered, however the centering takes into consideration the image. I would like the centering to use the full width. Can this be done? http://www.toddcary.com/pvrc/test1/header.html Hi. I have a webpage with 3 frames. A top frame with the title, a bottom frame with the navbar and a frame in the middle for displaying content. I have an image that I would like to have centered in the main content frame. I can get it centered horizontally no problem but I cannot figure out how to center the image vertically in the frame. You can take a look at the page on my website at http://www.austinbooth.com/. Currently I have it horizontally centered and I just moved the image down one line from the top of the frame. It looks ok on my 15.4" laptop screen but on larger displays the image is too far to the top of the frame. Therefore I would like to center the image vertically as well. Does anyone know how I might do that? |
|||||||