|
HTML - Horizontal Image Alignment
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. Similar TutorialsHi 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? 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? 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----- -------|------- -------|------- 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. 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 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 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 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 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'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 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! On the website: www.jsbseafoods.20m.com Have the following problems: Browser Issues: 1.) When viewed with Microsoft Internet Explorer it is aligned to the left instead of centred, top of the company name is missing, company jpg and gif images missing? 2.) When viewed with Firefox company name is missing? 3.) When viewed with Chrome sometimes when you scroll down the page and then up, top part of the company name is missing? Other Issues2: *SOLVED* 4.) On the Homepage "/div>" appears at the bottom of the page, I cant find where this is in the html code to remove? *SOLVED* 5.) On the Location page in Firefox and Chrome the page has an un-necessary space below the google map, on Internet Explorer the page is cut short. It would be greatly appreciated if you could help with these issues, I have been looking through the html and css code and cant find the problems. Thanks James I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover How do I make two links next to each other? Here's the site: http://celticsinsider.webs.com Where it says "Submit An Article", I would like a couple links next to it. Here's my html code and css code: Code: *{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-color:#030303;
}
body{
width:869px;
padding:0 65px;
margin:0 auto;
height:100%;
position:relative;
}
html > body{
height:auto;
min-height:100%;
}
#top{
width:869px;
height:70px;
background-image:url(images/menu_bg2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#menu{
width:869px;
height:70px;
background-image:url(images/top_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#menu ul{
background-image:url(images/menu_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:42px;
width:768px;
margin:0 auto;
}
#menu li{
height:34px;
float:left;
list-style-type:none;
padding:8px 9px 0 13px;
}
#menu li a{
display:block;
height:34px;
float:left;
}
.but1{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but1.jpg);
}
.but2{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but2.jpg);
}
.but3{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but3.jpg);
}
.but4{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but4.jpg);
}
.but5{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but5.jpg);
}
.but6{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but6.jpg);
}
.but7{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but7.jpg);
}
.but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover{background-position:bottom left}
#active{
background-position:bottom left
}
#header{
width:869px;
background-image:url(images/photo.jpg);
background-position:top left;
background-repeat:no-repeat;
}
.home{
padding:240px 0 0 0
}
.gallery{
width:852px;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
padding:13px 0 8px 17px;
background-color:#0F0F0F;
overflow:hidden
}
.gallery div{
float:left;
margin:0 5px 0 0;
}
.gallery div p{
display:block;
background-color:#1F1F1F;
border-bottom:1px solid #383838;
line-height:16px;
text-align:center;
width:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#5E5E5E
}
#wrapper{
width:869px;
padding:6px 0 90px 0;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#9A9A9A;
}
.style1{
margin:8px 0 0 0;
}
#content{
width:869px;
background-color:#090909;
overflow:hidden;
padding:0 0 28px 0;
background-image:url(images/wrapper_bg.gif);
background-position:bottom left;
background-repeat:no-repeat
}
.title{
padding:11px 0 0 0;
height:26px;
margin:0 0 8px 0;
background-image:url(images/title_bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#left{
width:442px;
float:left;
padding:0 24px 0 17px
}
#left div{
padding:15px 0 0 0;
width:221px;
float:left;
}
#left p{
width:192px;
padding:13px 0 0 0
}
.more{
display:block;
color:#AE2A00;
text-decoration:underline;
margin:2px 0 0 0
}
.mo visited{text-decoration:underline}
.mo hover{text-decoration:none}
.block{
width:368px;
padding:12px 0 10px 1px;
overflow:hidden
}
.block img{
float:left;
border:1px solid #383838;
margin:0 11px 0 0
}
.block span{
background-color:#000000;
line-height:14px;
color:#29705B;
padding:0 15px 0 5px;
margin:2px 0 8px 0;
display:block;
float:left;
}
.block p{
float:left;
width:200px;
}
#footer{
width:869px;
position:absolute;
bottom:0px;
height:77px;
background-color:#0F0F0F;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Tahoma, sans-serif;
color:#9A9A9A;
font-size:10px;
}
#footer ul{
width:768px;
height:13px;
background-image:url(images/bot_bg.gif);
background-position:top left;
background-repeat:no-repeat;
width:768px;
height:13px;
margin:20px auto 15px auto;
text-align:center
}
#footer ul li{
display:inline;
}
#footer ul li a{
color:#9A9A9A;
text-decoration:none;
margin:0 9px;
}
#footer ul li a:visited{text-decoration:none}
#footer ul li a:hover{text-decoration:underline}
#footer p{
width:869px;
text-align:center;
font-size:11px;
}
#footer p a{
color:#CE3200;
text-decoration:none
}
#footer p a:visited{text-decoration:none}
#footer p a:hover{text-decoration:underline}
#about{
width:412px;
float:left;
padding:0 21px 0 17px;
}
.pic{
margin:17px 15px 18px 15px;
border:1px solid #383838
}
#about p{
width:375px;
margin:0 0 15px 15px
}
#history{
width:404px;
float:left
}
#history p{
width:375px;
padding:18px 0 0 0
}
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#090909;
color:#fff;
border-bottom: 1px solid #090909;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
|
|||||||