|
HTML - Centering And Image - Absolute
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>
Similar TutorialsWas wondering how I'd place an image at the very top of the page so there's no white space (this site has it's logo pretty high up there). At the moment i get about .5cm white using just a standard <img> tag. Anyway, I'd appreciate some help. Thanks, Cam I'm new here so forgive me if I've posted in the wrong place. I'm working with HTML. My goal is to use an image as a link but I also need to use absolute positioning for the image as well. Is there a code that combines absolute positioning of an image where the image is also a link? I've attempted to combine : <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="---THE URL OF MY HOSTED IMAGE---"> with: <p align="center"><a href="---the URL of the link---" class="fw_link_page"></p> But I simply don't know how to do this. Any assistance would be greatly appreciated. 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 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 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. 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. 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 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. 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'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 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, all...this is my first time on the site. I am a newb when it comes to HTML etc...I won't lie. I know just about nothing when it comes to websites. I'm a graphic designer, and i created a background for my website I'm trying to: (A) Stop the tiling of my background image... (B) Center the image I bought some books on HTML and they're pretty good. I don't have any trouble following them. I started reading about STYLE SHEETS and it seems this is the way to go. I've read about EXTERNAL, INTERNAL, INLINE and I would like to use the EXTERNAL method...but I don't know how to: (A) Make a link to my style sheet for the background image to be centered (B) Writing the style sheet, so that it centers and doesn't tile my image... Pllease, any help that you could give me, would be GREATLY appreciated. Thank you. http://www.cahoonzcreationz.com Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. 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? How do I go about centering an image in a table cell so it is centered in both IE and Firefox? Right now, when I use "center" tags, it will be centered in Firefox, but will be up against the left side in IE. Any help is appreciated! Hello, I have a question from the sample images that I've illustrated. How can I create a HTML page based on image above? I not good in HTML or CSS. I'm just a gfx designer. Can someone show me some basic code for this. Thanks in advanced. I have this code: Code: <body> <div style="width: 150px; height:150px; border:1 solid red; float: left">111</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">222</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">333</div> </body> What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page. It must also fulfill this criteria: 1) Be on the same line 2) Be fixed-size 3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop 4) Work for any number of boxes (rules out editing of margins to hack it visually) You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it. Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip |
|||||||