|
HTML - Vertical Align Image?
I need to apologize beforehand for asking help with such a aimple process. I'm doing a site exclusively in HTML. It looks pretty good for my first attempt, but I can't find data ANYWHERE online to vertically align images. The site is frames, the top frame just displays an image, I need the image to self-center to accommodate other screen resolutions. Perhaps I need to align the text(that isn't there), and then align the image to it? Thanks in advance, Tom
Similar Tutorialshello, maybe this can not be done but..... i have managed to align the text on the lft and on the right in the same cell but, the text will not align to the top of the cell it seems that the use of the <p> in the line is preventing the text from sitting at the top of the cell can anyone help me with this? can i achive the same thing a different way? one cell, same line, text left and text right both at the top of the cell thanks sophia here is the example code..... http://www.freewebs.com/forumcode/ here is the code (note: everything is inline at this stage) <html> <head> <title> left and right but billy space on top >.< </title> </head> <body bgcolor="#FFFFFF"> <center> <table width="200" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="5"> <tr> <td style="text-align: center;" bgcolor="#DDDFFF" height="125" width="125"> <img src="image.jpg" border="0" alt="image" height="85" width="125"> </td> <td valign="top" bgcolor="#DDDFFF"> NOTE: this valign does nto set the text to the top <div style="width:200px;"> <p style="width:100px;float:left;text-align:left;vertical-align:top;">Left</p> <p style="width:100px;float:left;text-align:right;vertical-align:top;">Right</p> <div align="justify">this text sits underneath the above text<br>this text sits below the above text</div> </div> </td> </tr> </table> </center> </body> </html> I get this error message when trying to validate my page in 4.01 transitional. What html code can I use to get a vertical alignment with my tables. Error Line 18, column 79: there is no attribute "VALIGN" . ... cellspacing=10 align="center" valign="top"> Thanks i'm having no luck vertically aligning the text in the MIDDLE within the <td>. Notice how it is aligned TOP in the rollover state. See code below, please help. --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript free td link</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> #cell { width:278px; height:25px; } #cell2 { width:278px; height:25px; } a#roll { display:block; width:278px; height:25px; background:#FFFFFF; text-align:left; text-decoration:none; font-family:arial; font-size:14px; color:#FF0000; } a#roll:hover { background:#FF0000; color:#FFFFFF; } </style> </head> <body> <table border="0" cellpadding="1" cellspacing="0"> <tr> <td id="cell"><a id="roll"href="http://www.google.com"> HOME</a></td> </tr> <tr> <td id="cell2"><a id="roll"href="http://www.google.com"> ABOUT</a></td> </tr> </table> </body> </html> Hey! I have a small problem and to be honest, I don't believe there is a solution to it. I have made a table with a certain height. Now I want to put an image into this table first, aligned at the top, then I want to have a piece op text under this picture, but aligned at the very bottom of the table. It might look something like this: HTML Code: <table width="300" height="300" border="1"> <tr> <td> <img src="Foto.jpg" width="40" height="40"> <br> Text </td> </tr> </table> But I really want the text not 1 line below the image, but aligned seperately at the bottom. By the way, the position of the text has to be independant from the height of the table. I have tries everything, from css and style to span and div, but nothing worked. Maybe this is because, i think, vertical-align is not yet recognised officially. Hopefully someone can come up with a solution! Thank you, Laurens, Hi, is the css property vertical-align: middle supposed to work ? Because it doesn't on my website... maybe something is wrong... check this url http://aishazeijpveld.com/s/Onbepalen/02 (the image) thanks I just need my image I floated left in the first paragraph and right in my last paragraph to align at the top of the paragraph with my text. My vertical-align isn't working because it is block style (my guess). Here is my code: <style type= "text/css"> body {background-image:url('images/BG.gif');} h1 { font-size:26pt; font-family: 'Arial'; text-align:center; color:#ff00ff; } p { font-size:12pt; font-family: 'Arial'; text-align:justify; color:#000000; margin-right:20px; } strong {color:#0000ff;} /* ID's for Images */ #ITT { Height:150px; Width:800px; } #Morning { float:left; margin-right:20px; margin-bottom:20px; vertical-align:text-top;} #Erie { float:right; margin-top:20px; margin-left:20px; vertical-align:text-top; } </style> <img id = "ITT" src = "images/ITTLogo1.jpg" alt = "Logo" /> <h1>asdfkljsadl;f</h1> <p> <img id = "Morning" src = "images/MorningDew.jpg" alt="Morning Dew"/> Paragraph 1 </p> <p> Paragraph 2 </p> <p> <img id = "Erie" src = "images/ErieIsland1.jpg" alt="Erie Island"/> Paragraph 3 </p> </body> </html> Thanks in advance! Hello all. My problem is that I cannot vertical align a link directly after a textfield. Safari shows below example just fine, every other browser has "Text" a little lower than "Label:". I have tried many approaches but none have worked. Maybe someone here has the solution. I'd appreciate it a lot. HTML Code: <table border="1" >
<tr>
<td align="right" >Label:</td>
<td align="left" >
<input name="textfield" type="text" />
<a href="" >Text</a>
</td>
</tr>
</table>
Thanks, sdii Can someone please tell me how to center an iframe vertically on a page. I am feeling really stupid right now that I can't get it. I've tried a few different things and it's not budging!!!! Please help - thanks! Hi, I have problem with XHTML CSS vertical align middle. It works with Firefox but not with IE6. Many people has IE6 still so I need to get it to work. HTML Code: <div style="height: 128px;">text</div> How would I middle vertical align the text? HTML Code: <div id="table_small"><div id="table_vm">Special Offer</div></div> HTML Code: #table_small
{
background-image: url('images/table.jpg');
width: 128px;
height: 22px;
border: 1px solid #5a5a5a;
font-family: Verdana;
font-size: 10px;
color: #e0e0e0;
text-align: center;
display: table;
}
#table_vm
{
display: table-cell;
vertical-align: middle;
}
Hi All As the thread title suggests, I'm trying to vertical-align the text in a submit button - see attached. The html and css I'm using is below. I've tried wrapping spans around the value and altering the padding (which looks better but makes the onclick outline appear half-way up the button). Help would be very much appreciated. Thanks, Steve The html is Code: print("<input class='mybtn' SIZE='5' type='submit' name='storedatabase' value='Store Database'>");
The CSS is Code: .mybtn
{
width: 120px;
height: 21px;
border-style: outset;
border-color: red;
font-size: 12px;
color: #000000;
background-color: rgb(250, 240, 230);
border: 1px 1px 1px 1px;
outline: 10px;
text-align: center;
}
Hi I want to put this the firefox button on my page <a href="http://www.mozilla.com/en-US/firefox/"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a> this image displays horizontally I want it to display vertical how do I do that? Thank you FSY The code below attempts to do the following... Create a div with 2 'lines' in it each consisting of a piece of text and and a clickable img. HTML Code: <div> <div id="A"> <a><img src="http://localhost/plus.gif" onclick="DoSomething()"></a> <span>text related to image</span> </div> <div id="B"> <a><img src="http://localhost/min.gif" onclick="DoSomething2()></a> <span>text related to image</span> </div> </div> My problem is that the images are too high in relation to their line of text. If I use margin-top on the img it lowers the entire div (divs 'A' and 'B' that is), down. How do I lower just the image (or alternatively bring the span text up)? the above HTML layout is not a necessity, I just need it to achieve the visual layout I'm going for, I don't care how. Thanks. hello, im kinda a noobie here, i cant align my image! I need it to be centered, but i cant seem to find how. How would you do this? I'm having trouble trying to align an image to the top and right. If I just use <img src="" align=right> it goes right as far as I want it, but for some reason the image falls below the text line and appears odd. If I use <img src="" align=top> it goes with the text line like it should, but then it's not to the right like it should be. Isn't there some way to combine the two? <img src="" align=right align=top> doesn't work. Thanks in advance. I have a list of items and I want to display image on the right side of one list item. How can i do it? For example: <ul> <li>Coffee</li> <li>Tea</li> </ul> I want to display a rectangle figure on the right side of 'Coffee' text. I have a logo image and a table (being used as a nav.) I want the table to be centered vertically on the right side of the logo. Here is what I have so far: css: HTML Code: body .logo {position:absolute;
}
table {width: 65%;
margin: 20px auto 0px auto;
border-bottom: 3px solid #3399cc;
}
html: HTML Code: <div> <div id="Drafting & Design Logo" class="logo"> <img src="menu/Logo.png" height="155" width="139"> </div> <div> <table> <tr> <td width=18.3%><a href="#" id="drafting" target="_new" /></td> <td width=25%><a href="#" id="programming" target="_new" /></td> <td width=18.3%><a href="#" id="resume" target="_new" /></td> <td width=18.3%><a href="#" id="contact" target="_new" /></td> </tr> </table> </div> </div> I want the entire thing centered in 65% of the browser window. Right now the image off to the left and the table is centered. When I change the margins on the image it doesn't do what I would like it to. Also, the reason I don't add it to the table is because I want to have a line under the nav bar stopping at the logo. Any help would be greatly appreciated. I have my Introduction with the title and all. Then i want my href links on the left side of the picture. However i can't seem to be able to do it.(this is a type of autobiographical site for web design, i am making it as a joke to the current assignment. HOWEVER my teacher isn't able to assist me with this...) Ok here is my code <html> <head> <title>A web site about nothing but video games</title> </head> <body> <h1 align="Center">Chairman of the world</h1> <h4 align="center">This is a site dedicated to Chairman Tide Oo</h4> <hr noshade="1"> <center> <img align="middle" src="http://www.dimensionsguide.com/wp-content/uploads/2009/11/Orange.jpg"> </center> <a href="_" >Link 1</a> <p>Yes and yes</p> <a href="_">Link 2</a> <p>Why not </p> <a href="_">Link 3</a> <p>Why yes </p> <a href="_">Link 4</a> <p>Ye...no?</p> <a href="_">Link 5</a> <p>YES!</p> <hr noshade="1"> </body> </html> Thank you~ Hi All, if there a way of adding two images with a title in the middle. For example "Image" This is a example "Image2" With both images flush against the borders. Because at the moment mine looks daft lol!! The RightTopImage needs to be obviously Top right of the webpage, and then there will be an image to the left of the webpage with the title in the middle... I cant figure out the structure of CSS Html HTML Code: <div class="page">
This will be where the Left Image will be.
<div class="header">
<div class="title">
"Text as an example......"
</div>
</div>
<div class="RightTopImage">
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
Css HTML Code: .RightTopImage
{
background-image:url(../Images/RightTopSmoke.gif);
background-repeat: no-repeat;
background-position: top right;
width: 292px;
height: 222px;
}
.page
{
width: 100%;
background-color: #fff;
margin: 0px;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
I havent added the left image yet, but if any one can help me or maybe have a code snippet i could use it would be highly appreciated. P.s this will be in the site master. Thank you. Quick update. Am i right in saying this is how you define a title with two images and a text area. .Query { background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top right; Text Details go here background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top left; } hmmmmm i just have a cell where i want to align the contents to the upper left and stay there .. simple right i've tried html and css styles but can't get safari and IE to display the same thing.. surely this is easy..i've even validated the html.. it works in safari but not in IE - i've tried using CSS styles but can't seem to find the attribute to "stick it in the top left corner" - valign does the trick in safari too but doesn't work in IE.. what have i gotta do - thanks for your helps.. sandy HTML Code: <?xml version="1.0" encoding="utf-8"?>
<!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>
<title>Annyx Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="text.css" />
<script language="JavaScript" 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>
<style type="text/css">
<!--
-->
</style>
</head>
<body onload="MM_preloadImages('button_news_on.jpg','button_stuff_on.jpg','button_contact_on.jpg','button_location_on.jpg')">
<table width="807" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="40"> </td>
</tr>
</table>
<table width="807" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="main" height="28" colspan="3"><img src="frame_top.jpg" width="807" height="28" alt="bollocks"/></td>
</tr>
<tr>
<td width="31" rowspan="2"><img src="frame_left.jpg" width="31" height="657" alt="bollocks"/></td>
<td width="746" height="73"style="vertical-align: top;"><img src="logo.jpg" width="370" height="73" alt="bollocks"/><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','button_news_on.jpg',1)"><img src="button_news_off.jpg" name="news" width="79" height="73" border="0" id="news" alt="bollocks"/></a><a href="stuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('stuff','','button_stuff_on.jpg',1)"><img src="button_stuff_off.jpg" name="stuff" width="72" height="73" border="0" id="stuff" alt="bollocks"/></a><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('location','','button_location_on.jpg',1)"><img src="button_location_off.jpg" name="location" width="107" height="73" border="0" id="location" alt="bollocks"/></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','button_contact_on.jpg',1)"><img src="button_contact_off.jpg" name="contact" width="117" height="73" border="0" id="contact" alt="bollocks"/></a></td>
<td width="31" rowspan="2"><img src="frame_right.jpg" width="31" height="657" alt="bollocks"/></td>
</tr>
<tr>
<td valign="top"><div id="pagetitle"><img src="title_stuff_sub.jpg" width="118" height="50" alt="bollocks"/><img src="title_chickens.jpg" width="584" height="50" alt="bollocks"/></div></td>
</tr>
<tr>
<td colspan="3"><img src="frame_bottom.jpg" width="807" height="27" alt="bollocks"/></td>
</tr>
</table>
</body>
</html>
With the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James |
|||||||