|
HTML - Image Alignment Problem
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 Similar TutorialsI'm working on a site which requires a art images to be display centred, and I've been using CSS as much as I can. The content is displayed in a centred div of fixed width, with another div inside it to carry the content. Code: #container {
width: 650px;
position: relative;
/*margin: 0 auto;*/
margin:0 auto;
margin-top: -15px;
margin-bottom: -15px;
padding: 0px;
border: 0px;
background-image:url("images/basiclayoutimages/basicbackground.jpg");
background-repeat: repeat-y;
background-color: #b6463a;
display:block;
z-index: 1;
}
#content {
width: 630px;
position: relative;
margin: 20px;
margin-bottom: 10px;
margin-top: 10px;
padding: none;
border: none;
background-image: url('images/basiclayoutimages/Page Top 2.jpg');
background-repeat: no-repeat;
background-color: transparent;
z-index: 0;
display: block;
}
In Firefox, Internet Explorer, Opera and Konqueror on Windows and Linux the images display perfectly. However, in Mac Firefox, the images are shifting well to the right and refusing to be centred at all. Are there any specific Mac issues with image layout? The css for the images is this: Code: img {
border: 2px solid #1D7155;
/*margin-left: 70px;*/
margin: 15px;
}
img.display {
position: relative;
margin: 0 auto;
text-align:center;
display: block;
}
I've tried setting the old html align=center, along with absolute positioning and a number of other things, to no avail. Are there any tricks I can use to get the thing working? Any tips greatly appreciated. [edit] I should mention that there is a fixed banner of menus across the top of page, absolutely positioned, so the art images are not the only objects on any given page. There is a caption and "previous" "next" links beneath the images too. Hi, I've run into a problem between the rendering of tables in Mozilla and IE, and was hoping you might be able to help me out. The page in question is this one. In Mozilla, the right side of the coin is correctly aligned with the logo, and, using the align="left" tag, I can put content at the top of the page. In IE, however, the coin is separated. If I simply align the image to the left, it lines up with the rest of the logo properly, however, it then doesn't allow for content in all of the blank space to the right of the logo, for 138 pixels of height. Do you have any suggestions on how I can fix this rendering problem? I've tried putting the site together where all parts of the background graphics are, instead of images, backgrounds to table cells, but I still ran into problems there, such as duplication of parts of the logo if the content is too large (which can change if different browsers have different text size). If you have any suggestions, I'd greatly appreciate them! Thanks! Jeremy 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>
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 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 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'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 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 Hi everyone. I'm new at this, so I apologize if this is a simple or redundant question. I'm trying to create a website where the front page is comprised of 5 rollover image links that, when properly aligned (in this case to the right), form one cohesive image. I have tried to individually align each with align="right" but instead of a column of images aligned to the right and directly on top of each other with no spaces, they are instead being organized like text. In other words, the first image is to the right, than the next two span across the page because there is enough room, then the following two do the same. The result is a scattered and disjointed image. I hope that makes sense. How can I get them to stack to the right with no spaces in between? thanks for any help. I've read all over various ways of making the image and the text align horizontally, yet somehow I can't get the darn thing to work in my website. I'm thinking it maybe because of DIV tags I have the following code: <div class="column1"> <div class="column2"><img src="images/logo_sm.png" border=0 height=97 align="bottom"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of </div> <div class="clear"></div> </div> The text is still aligning to the top of the image even though I've indicated bottom alignment. What am I doing wrong or what don't I know? Please help. thanks Navs Ok, so I hope there is a simple answer to this. I just haven't been able to figure it out. I have a basic form that has a dropdown menu. I am using an image as the submit button. The problem I am having is that the image does not align vertically properly next to the dropdown menu. Below is what my form looks like in the browser. Any ideas how to get this aligned correctly? Thanks for all help! i have uploaded my website. i m facing a problem. my website appears differently in different computers. its like changing alignment, table spreading so so. i used table to develop the site. how can i fix this problem. Can anyone help me? I've been putting my layout into html from photoshop and finally finished, thing is I was using Firefox to view it as I went along. Now when I view it in Internet Explorer, there is this small unexplained space on the right side of my header image that is screwing up the page, plus the table that I have the navigations links on the top left has way more spacing between rows than it does on Firefox. Here's the layout: http://www.ff12guide.com/ the two problems a 1) the empty space to the right of 'header_red.jpg' and 'top-2-shadow.jpg' at the top of the page 2) the links in the 'sections' area at the top-left (characters, combat, etc.) is much more spaced out than it is in Firefox, and does not look right I absolutely cannot figure out how to fix this and it's driving me nuts, anyone have an idea? Hi, I've finally created a 2 level CSS menu and I've positioned a DIV layer below it for the content. However, I would like to know how to shift the content DIV layer up, closer to the menu (horizontal one). Or is my coding for the menu causing a problem? Here's my site btw: Click I am practicing code from a file and I am having issues. Specifically, I the geogebra applet is supposed to be framed in the right side, where the "buttons" are the left. I can't figure out why the file is not on the right side in its own section. Any suggestions? I am attaching the code using a word document... I highlighted what I feel is the problem. Nick I'm really stuck here. This has worked in the past, but not it seems to not be working. It must be a really easy fix. HTML Code: <body style="font-family:Georgia;"> <div align="center"> <div id="content"> Lorem ipsum... </div> </div> </body> I want the "content" field to be center aligned, but it is still sitting there on the left. How do I fix this? Thanks! On my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help? Thanks, Kristen |
|||||||