HTML - Vertical Alignment...

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

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?

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?

<div align="center">
<table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1">
<tr>
<td>
<a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td>
</tr>
</table>
</div>

-----

I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help?

Is there an easy way to make a vertical line?

For example, some equivalent to <HR> ?



Thank you.

I would like to have vertical scrolling in a table cell. The cell may be empty or may contain up to 2000 characters. If it does contain more than will fit in the horizontal space I'd like it to wrap and be visible, pushing the next row down so the cell displays the whole set of text within the cell area. Only then should the scrollbar show up.

If the user enters data, I'd like it to do the same thing. Wrap on word boundaries and stay visible rather than scrolling a single line horizontally.

Can I do this in html? Or, at worst, with a little CSS? Or, even worse, very simple javascript?

Hi All,

I've been trying to vertically align the span inside the div, but I have no idea why it's not working. Any clues?

HTML Code:

<!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>Untitled Page</title>

</head> 
<body onload="init()">  

    <div style="background-color: gray; width: 100%; height: 40px; text-align:right; vertical-align:middle"> 
        <span style="background-color: #CCCCCC; font-size: 9pt">Settings</span> 
    </div>

</body> 
</html>

Hello,

I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be.

I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus.

I can center align the flash like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
html,body { 
height:100%; 
width:100%; 
overflow:auto; 
} 

body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}
.style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#apDiv1 {
	position:absolute;
	width:324px;
	height:25px;
	z-index:1;
	left: 354px;
	top: 303px;
	background-color: #000000;
	visibility: hidden;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
  <DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">
        </script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
          <param name="movie" value="test.swf">
          <param name="quality" value="high">
          <embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
        </object>
        </noscript></P>
      </TD>
  </TR></TBODY></TABLE>
</BODY></HTML>

As you can see this source code will center align both ways horizontally and vertically.
I belive this is doing the job:

Code:

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">

Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie.
I can do this with the following code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body onLoad="window.document.test.focus();">
<center>
<table width="100%" height="100%" align="center">
<tr>
<td valign="middle" align="center">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed>
</object></noscript>
</center>
</td>
</tr>
</table>

</body>
</html>


The focus part works with this i believe:

<body onLoad="window.document.test.focus();">

where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error:

'window.document.test' is null or not an object

This page is right now on my site:

http://www.danandrei.ro

And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean.

My question is:

IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ?

Thank you.

I have had a look at this previous thread - but i still have an unwanted and unnecessary vertical scrollbar when using IE7.

Can anyone help me get rid of it - please

Even with a no-brain - one line page the scrollbar is displayed
Heres my page
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
     <title>Title Page</title>
  </head>

  <body style="overflow:hidden">
     <p>One line of text</p>
  </body>
</html>

I've had a browse through the forums and done a bit of googling - but I haven't found a solution

I need to align an image so it is in the dead center of my frame. This is because when the window is resized, the menu and header change size and go out of wack. I tried putting the image in a table, but i cant get anything to work. We arent allowed to use any CSS for the assignment, only pure HTML. The following is my code for my header:

<html>
<body background="images/backgrounds/header.png">

<table border="0" align="center" valign="center">
<tr>
<td><img src="images/banner2.png"></td>
</tr>
</table>


</body>
</html>

Thanks in advance...

hello,


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 have a vertical scrollbar in green colors and it can be viewed in IE 7 but when I look page in Firefox 3.0.15 it can not be viewed in green colors.
page: http://www.astrosport07.webs.com/
Can I do something that scrollbar to appear in green colors in "all" brawsers?

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

Hi

Comparing this code

<div style="border:1px solid black; width:120px;height:25px; padding-top:0px;">hello</div>

in Internet Explorer 9 and FireFox 4 shows, that the word 'hello' is not at the same vertical position.

Is there a method, to adjust this?

Thanks for your information.

Patrick