|
HTML - Vertical Align
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> Similar TutorialsI 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, 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'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> 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 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, 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 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! 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 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 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;
}
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 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 Hello can anybody help my with html about a vertical line with wat codeyo can make a vertical line for your website in html. Erwin 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 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 Is there an easy way to make a vertical line? For example, some equivalent to <HR> ? Thank you. <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? 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? |
|||||||