|
HTML - How To Vertically Align My Gallery Columns?
Hi there,
I have a question, in my photo gallery I have three columns: http://leilanimunter.com/photogallery.htm On a PC, the columns are aligned at the top in Firefox, but look all messed up in IE. On my Apple, it looks fine in Safari but they are not aligned properly in Firefox. I am just adding breaks at the bottom to move the other shorter columns up. Is there a code where I can vertically align these columns at the top so it will work on all browsers? Thanks for any help you can offer! Leilani Similar TutorialsHey, I want an image in the dead center of a frame. All I have so far is: <center><img src="images/banner_ani.gif"></center> I don't know how to vertically align the image. Could someone please fix it for me or tell me how. I tried googling everywhere but all I could find was stuff that involved CSS. Thanks Hi, I've got an image 25x25px which i'm trying to vertically align in a 35px high list element. The css attached to the image is: width: 25px; height: 25px; border: 0px; vertical-align:middle; and the css attached to the list element is: font-size: small; height: 35px; border-style: ridge; border-width: 0px 0px 2px 0px; I'm trying to find a way of getting the browser to vertically align through css. I'm not trying to use padding, etc on the image, because i'm worried that when a user enlarges the text, or its rendered by different brwosers, etc, the image will mis-align itself. I thought vertical align was the right attribute, because i thought it vertically aligned all inline elements. but when i've attached it to the image, nothing has happened. http://www.tendervendors.com/contact.php I'm trying to vertically align the little picture of a house, in the navigation bar. I'm greatful for any help you can give, Matthew Millar I have a table that is saved from Photoshop. It's a table with a load of cells inside. How can I vertically center the table? Not its content, I mean the actual table itself so it centers itself no matter the resolution of the screen it's being displayed on. Thanks, Simon I've been trying for 2 days to get my text to vertically-align middle in IE, but it just won't listen. I'm building the site www.acadianacomputerrepair.info; the title and menu items need to be aligned to the middle of their div containers, but they want to clip to the top. I'm setting the parent div's to display as tables and the child as a table-cell. It works great in firefox and perfect, even in IE, on a simple html test page, but I can't get it to work for the site, in IE. I don't know what else to try. Can someone help? Hey, well i know alot of people put myspace questions here, and not to be another one of those myspaces i have a question... my myspace url is myspace.com/cherylishot haha dont ask. But on the bottom table i cannot get my links to align left to right, not vertical and in that scroll box. Any help would be appreciated thanks alot! I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Hi experts, I'm trying to create a form whereby I need to insert more than 100 radio buttons for user to select. When I tried out my code which is as follows:- <td>Locations</td> <td><input type="radio" id="txtlocation" value="Admiralty" name="txtlocation"/>Admiralty and the list go on until the 100 radio buttons. The outcome is horrendous to say the least. I hope the experts here can share with me how to neathly align all the radio buttons into 3 columns with 22 rows. OK. Hope to hear the experts' view soon. Thank you. Hello, I would like to make my two column web page into 3 columns and dont know how to do this. It is a template and I cannot figure out where to put the <td>. My site is online and then I hope to delete this link if it is possible. Please no negative remarks as I am notlooking for visitors I just want help. please. ] Here is the code I want to put into the code but not sure where to put it to get the 3rd column. I hope someone will be kind enough to help . thanks. <td width="200"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <p> <a href="index.html">Home</a> </p> </td> </tr> </table> Hey guys been having a few problems finding resources on how to vertically align text. what it is is that i have a division i wish to display text in vertically... Any ideas? div{vertical-align: -50%} thats what i came up with but still no joy... Hello all, I need some help, and I'm hoping someone can assist me . I'm trying to create a html document - an offline webpage. Basically, I want parts of the page to remain static, which contain a logo and some navigation links, and the one part of the table to be a scrolling box. The reason is this: That one cell is going to contain some very large images - 1000 pixels wide by maybe 2000, 3000 high. So while the width can obviously fit on a standard monitor, the height will not. Now, the images themselves are pictures of long flowcharts. Therefore, it's fine for the user to scroll down to navigate the flowchart. But the static navigation links and the title should remain - well, static - while the user is able to scroll up and down that ONE cell containing the flowcharts. Here's a picture to clarify things. As you can see, the bolded cell is the one in question. (apologies for the shoddy drawing) If anyone solves that problem, I have one slightly tougher one for you to solve, but more on that later. Can anyone help me? :sad: Hai there, just a quick question - How do I center an image vertically (as in right in the middle, I don't want to have to mess around with each image to the exact pixel spacings) All I want to know is the code to put this: </A> <A HREF="http://rh.pretsell.co.uk/xlrstats/"> <IMG SRC="http://i28.servimg.com/u/f28/15/38/25/28/xlrsta16.png"> In the middle so it makes the forum look better Thank you! Hi, I'm absolute noob when it comes to building websites, so please be gentle. See, for example, this page of my website: http://home.planet.nl/~lever170/hk/hk.html The page is a frame with the photo's on the right and the BACK link on the left. I would like to vertically center the page with BACK so that the vertical line lines up with the thumbnails regardless of screen size. The code for the BACK page is as follows: Code: <html> <body style="background-color:#333333" link="white" alink="white" vlink="white"> <br> <br> <br> <br> <br> <br> <center> <table cellspacing="5" border="0" cellpadding="0"> <tr valign="top" align="left"> <td> <br><br><br><br> <a style="text-decoration:none" href="javascript: history.go(-1)">BACK</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </p> </td> <td bgcolor="#FFFFFF"><img src="http://home.planet.nl/~lever170/1pix.gif"><BR></td> </tr> </table> </center> </body> </html> How do I vertically center this? Good afternoon! Where has the sun gone I'm freezing! Is it possible to have a table with rowspan with the text in the rowspan to read vertically (like taking an entire sentence after its been typed and rotating it 90ccw)? An old chestnut this one, but I can't find reference to this particular technique when searching the forums. http://www.freemanpeer.com is the address and I'm using the technique found here (http://exanimo.com/examples/css/vert...ated-shim.html) to vertically center, however it's sticking fairly rigidly to the top of the browser. Any ideas anyone? Thanks in advance, Jez. Hi everyone, this is my first post. I am hoping to find someone who can help me. I need to make it so a table on my page is centered veritcally (the same way the center tag centers it horizontally) so that it will always be in the center of the page regardless of screen resolution or if the person resizes their browser window - is such a thing possible? If javascript is needed that is fine. Thanks Hello I have two tables in my JSP ; the first table has 3 columns, and should be displayed on top of the page and is used to display elements of a form. Another table should be displayed below that table, has dynamic number of columns. This page opens as a child window from main window The problem is that the tables are displayed beside each other if I have not specified width of table. If I do specify it (like I set it to 100%) the second table is not shown . Could you please help me and tell me how to have two tables displayed vertically inside my page ? Thank you so much Evrim how do i center the body of this page: www.discoveryfilmsuk.com/ i want to align to the middle of the page, vertically and horizontally How do I vertically move all of the text (ie Days:Hour:Min:Sec) in the 2nd row of the column that says "Test" to the top of the box? How do I vertically move all of the text (ie Days:Hour:Min:Sec) in the 2nd row of the column that says "Best Time since 2005" to the middle of the box? Thank you. <table border="1"> <tr> <th> </th> <th>Test</th> <th style="color:green">Best Time Since 2005</th> </tr> <tr> <th>Comp X</th> <th> <div id="cpcontainer"> <table><tr class='text' align='center'><td>Days :</td><td> Hour :</td><td>Min :</td><td>Sec</td> </tr><tr class=''text'' align=''center'' style='color:green'> <td>11 :</td><td> 5 :</td><td>0 :</td><td>0</td> </tr></table> </div> </th> <th> <div id="cpcontainer1"> <table><tr class='text' align='center'><td>Days :</td><td> Hour :</td><td>Min :</td><td>Sec</td> </tr><tr class=''text'' align=''center'' style='color:green'> <td>11 :</td><td> 5 :</td><td>0 :</td><td>0</td> </tr></table> </div> </th> </tr> </table> Hey there, I have some text in a table that i want to vertically align center, however nothing i try with html or css seems to work. This is my current code atm; Code: <table cellpadding="0">
<tr>
<td width="150" height="100" style="vertical-align:middle">
<img src='portals/default.jpg' > </td><td style="vertical-align:middle">
<h3><b><a href="/games/node/2">Welcome to the Halo Portal</a></b></h3><i><div style='font-size:0.9em; line-height: 0.3em;'>Posted by NightFox, on 15/03/09</div></i><br /><div style='line-height: 0.2em'><p>Welcome to the Halo Portal</p>
</div>Halo <td></tr>
</table>
I want it all to vertically aligned centrally so that the text will line up with the center of the thumbnail - attached is wat it looks like atm. If anyone has any ideas please let me know (html, css, or php i don't mind) Regards NightFox Hello Everyone! About 4-5 days ago I made my attempt to build my first webpage, I am using Dreamweaver cs4 my goal right now is to split my index page in half so I can have two columns, one side for a current video and the other for upcoming news. my site is www.canapictures.com and I will include a picture of what I am trying to achieve, thank you. The gray line in the middle is where I want it to split, and the box is where text would go, I want to line to be invisible if possible. |
|||||||