|
HTML - Vertical Alignment Problem
Hi all,
Newbie here. So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment. I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window". This is the table instantiation: <table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise. Has anyone encountered this before and can you help? The site is http://www.thechapelstudios.co.uk Similar TutorialsI am hoping that someone may have a solution for me - in one of my table columns I have 3 images (logos that link to sites) and I have set them with a vertical top alignment - so that when the page goes long - the logos stay at the top - this works perfectly in all browsers, except (of course) IE... would anyone know how to fix this? My site can be viewed at http://bebywebtest.9k.com/history.html ... if you click open the collapsible menus - you can see the logos - start to center themselves down the page - instead of staying at the top... <br /> </td> <td width="5" rowspan="3"> </td> <td width="380" height="179" bordercolor="#000066" bgcolor="#FFFFFF"><div align="center"><a href="http://www.israelbonds.ca"><img src="Images/header-march-2006.gif" alt="bonds" name="israelbonds" width="256" height="100" border="0" valign="top" id="israelbonds" /></a></div></td> </tr> SO - if anyone has any suggestions on how to remedy this fiasco - I would be most grateful! Thanks. Hello, I'm trying to program a couple unordered lists into my web page and I encountering a problem. I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one. Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm Here's the code for the bottom two cells with the lists in them: Code: <tr> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Elegant dining room</li> <li>Fireside lounge</li> <li>Library and computer room</li> <li>Craft room & country kitchen</li> </ul> </td> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Wellness and exercise spa</li> <li>Beauty salon</li> <li>Theater and multi-purpose room</li> </ul> </td> </tr> Does anyone know why they refuse to be aligned with the top of the cells? Is there a way to align something in the dead centre of the page? here is my code so far. Code: <html>
<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #BFE4FF;
}
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="2">
<img src="images/logo_01.jpg" width="136" height="117" alt=""></td>
<td rowspan="9">
<img src="images/spacer_03.jpg" width="30" height="600" alt=""></td>
<td>
<img src="images/spacer_04.jpg" width="611" height="20" alt=""></td>
<td rowspan="9">
<img src="images/spacer_04-05.jpg" width="23" height="600" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="7"><iframe name="iframe1" src="home.html" width=611 height=557 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></iframe></td>
<td>
<img src="images/spacer.gif" width="1" height="97" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_01.jpg" width="136" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td>
<a href="home.html" target="iframe1"><img src="images/button_home.jpg" width="136" height="46" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td>
<a href="srchpat.html" target="iframe1"><img src="images/button_srchpat.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td>
<a href="newpat.html" target="iframe1"><img src="images/button_newpat.jpg" width="136" height="48" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td>
<a href="help.html" target="iframe1"><img src="images/button_help.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/spacer_2.jpg" width="136" height="252" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="229" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_05.jpg" width="611" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
</table>
</body>
</html>
I have managed to centre the page horizontally but i would like to also have the page vertically centred Thanks Trying to get my main content to centre in the middle of the page (vertically). Having problems... Can move the content from the top (with margin) but cannot work out how to get the whole thing to constantly float in the middle /centre. Any help hugely appreciated. thx Hey guys! I seriously need your help!! I have searched everywhere and tried everything, but can't seem to get this to work. Basically I have a DIV tag with one line of text in it. The text needs to be in the middle of the DIV, vertical and horizontal. Now, it looks fine, except in IE, which makes me sad. Does anyone know a way to fix this? You can see the site here (please don't judge me, its not finished!) http://www.juicenothing.com/index.php It's the Lady Gaga text in the header part. Thanks! Jared I am having trouble aligning input fields to the bottom of the cell. Here is the link: It looks correct in Firefox, but not in Internet Explorer. Please compare the link in both browsers. http://www.sandmanmedia.net/draft/chrisbaran.html I think it was Pegasus who gave me this code for vertical alignment: Code: <div style="vertical-align: middle;"> But it doesn't work for what I'm tryin' to use it with.. I'm tryin' to vertically align some google adsense advertisements on an image. I got the ads to show up on the image correctly, thanks to the people here.. but I can't get'em to align vertically for some reason. Are there any alternatives for vertically aligning something?? Hello to all Forum members. It's my first post here. I have a problem on my site using FF 2.0 and opera. When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too. I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok. This is driving me nuts, any help will be apreciated. PS: in ie6 everyting seems to be ok. PS2: I also noticed this bug on some sites: eg. home.pl when you click on menulink "Praca" it will move horizontaly too. eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too. Anybody? Best Regards! I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? 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, 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 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 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'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! 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;
}
Something in this page is causing a vertical white line on the right hand side of the main table. Can anyone help me figure this out? www.massagelaunch.com Thanks. 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 |
|||||||