|
HTML - This Should Be Simple - Centering Image Containers In A Horizontal Row
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. Similar TutorialsHi. 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? I'm trying to create a page where there is a centered background image, and two div's, one on the left and one on the right, all aligned properly. I tested it by syncing it to my website, and I -think- it displays correctly. However it definitely does not display correctly in Dreamweaver, as in Dreamweaver my central background image is slanted to the left for some reason. Can someone please check my code to make sure it has this layout? (Background image centered, with one section on left and one on right, two sections has same size and same distance from background image) But in Dreamweaver it shows up like this, so I'm worried it might not display correctly on computers with different resolutions: Code: <!DOCTYPE HTML>
<html>
<head>
<!-- Create container type object containing background image with interactive image links layered on top. -->
<!-- Objects are centered on screen. Sub-image positions are relative to container -->
<style>
#container {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/mainmenu.png");
background-position:center;
}
#container img {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
}
<!-- the three buttons -->
#image1 {top: 225px}
#image2 {top: 300px}
#image3 {top: 375px}
</style>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<br>
<br>
<div id="wrap">
<div id="left"><a href="ContactInfo.html" style="color:#000">Profile</a></div>
<div id="right">Upcoming works</div>
<div id="container">
<a href="song1.html"><img src="pictures/button-hualuowuyuan.png" alt="song1" id="image1" /></a>
<a href="song2.html"><img src="pictures/button-river.png" alt="song2" id="image2" /></a>
<a href="song3.html"><img src="pictures/button-snow.png" alt="song3" id="image3" /></a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
body {
margin:10px;
padding:10px;
background-image: url(pictures/audigrandpiano.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
img.center{
display: block; margin-left: auto; margin-right: auto;
}
#wrap {
position:relative;
min-height:100%;
}
#left {
float:left;
width:300px;
height:500px;
text-align:center;
}
#right {
float:right;
width:300px;
height:500px;
text-align:center;
}
Really appreciate it 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. 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 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. 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 Hi all Normally in a style sheet I would use "background-repeat: repeat-x" but I was wondering if it is possible to do without CSS? 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>
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"> 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;"> 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 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. 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. 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, 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 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 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. |
|||||||