HTML - Coded Over A Vertical Line...don't Know How To Fix It.
The title says it all. I'm the webmaster for a basketball sim league. I'm an HTML-noob, but I have enough basic skill to sporadically update. While recently updating the website, I coded over a vertical line. In the process, the entire column shifted about a 1/8 an inch downward. I didn't make the template for the site, but someone else from the sim league did. Can someone please help me bring back the vertical line and realign the column? Thanks much in advance!! Here's a link to the website:
http://abca-basketball.com The column that I'm talking about is on the far right, and the missing vertical line that I'm talking about was in between the middle column and the one on the far right. Again, thanks alot in advance! Similar TutorialsHello can anybody help my with html about a vertical line with wat codeyo can make a vertical line for your website in html. Erwin Is there an easy way to make a vertical line? For example, some equivalent to <HR> ? Thank you. In this code below (and attached image) there is a vertical line that seperates the left column from the main content of the page. Can you please tell me where the vertical line is in this code and how I can shorten it? Thanks. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN"> <html><head> <title>test</title> <script src="java.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="styles.css"> <style type="text/css"> .test{background-color:#ffdead;} #header { width: 830px; margin-left: auto; margin-right: auto; margin-top: -15px; background-color: #ffdead; } #header_table { width: 75%; border-collapse: collapse; border: solid 1px; border-color: #b7b7b7; } .header_bar { padding: 0px; margin: 0px; border-bottom-style: solid; border-bottom-width: 10px; border-bottom-color: #b7b7b7; background-color: #800000; width: 150px; border-collapse: collapse; border-right-width: 0px; border-left-width: 0px; } .header_body { padding: 0px; margin: 0px; border-left-style: solid; border-left-width: 1px; border-left-color: #b7b7b7; border-right-style: solid; border-right-width: 1px; border-right-color: #b7b7b7; } </style> </head> <body bgcolor="#ffffff"> <table id="header_table" align='center' cellpadding='0' cellspacing='0'> <tr> <td class="header_bar" colspan='2'> </td> </tr> <tr> <td align='center' colspan='2'> <img src="imgi/img11.jpg" height="134" width="461"> <img src="imgi/topimg2.jpg" height="160" width="309"> </td> </tr> <tr> <td class='header_body' valign='top' width="200"> <form action="login.asp" method="post"> <table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" > <tr><td valign="top" class='header_bar' colspan='2'> </td></tr> <tr> <!-- SIDE MENU --> <% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %> <!-- MENU FOR LOGGED MEMBER ONLY --> <td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="profile.asp">My Profile</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="_purchase.asp">Purchase</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="newsletter.asp">Newsletters</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="members.asp">Member List</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="members_by_group.asp">Group Member List</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="file_cate.asp">File Repository</a></td> </tr><tr> <td width="15">º</td> <td><a href="login.asp?logout=True">Log Out</a></td> </tr> <!-- [ MENU FOR LOGGED MEMBER ONLY ] --> <% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%> <!-- INCLUDE LOGIN FORM --> <br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td> </tr><tr> <td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td> </tr><tr> <td> <br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br /> <input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a> </td> </tr> <tr> <td> <br /> <input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" /> <!-- [ INCLUDE LOGIN FORM ] --> <% End If %> </td> </tr> <tr> <td> <br /><br /> <img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br> <img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br> <% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %> <img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a> <% Else %> <img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br> <% End If %> <img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br> <img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br /> </a> <!-- [ SIDE MENU ] --> <br /><br /> </td> </tr> </table> </form> </td> <td class='header_body'> <!-- MAIN PAGE CONTENT --> I'm working with this web page code (below) and I'd like to seperate the two cells (or tables, I'm not sure). The one on the left holds the log-in and the links, and the one on the right contains the main text. I've attached an image and am showing the borders just to show you where the cells are. (I'm adding the lower half of the code to a reply, due to sixe limitations of this post). I'd like to seperate these two and run a vertical line between them. Can you help me with this? Code: <HTML> <HEAD> <Title></Title> <style type="text/css"> body {margin: 1px 100px; 0px 100px; padding: 1px;} </style> </HEAD> <BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> <TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0> <TR valign=middle height=10> <TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera2> </TD> </TR> <TR> <TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera4> </TD> </tr> <TR valign=top> <TD><!--<IMG src="/smusermanager/images/logo1.gif" height=150 width=159 border=0>--></TD> <TD valign=left width=795 height=1><IMG src="/images/topimg.jpg"> <IMG src="/images/topimg.jpg"></font></TD> </TR> <TR valign=top height=1> <TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD> </TR> </TABLE> <TABLE cellSpacing=0 valign=top cellPadding=0 height=100% width=100% border=0> <TR valign=top> <TD width=10%> <TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/images/clear.gif" height=20 width=160 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD><IMG src="/images/clear.gif" height=2 width=160 border=0></TD> </TR> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width=100% border=1> <TR> <TD><font class=tbody> <form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp"> <table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr> <tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr> <tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr> </td></tr></table></td></tr></table></td></tr></table></form> <div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"><a href="?action=login"> Home</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphon.gif">--><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;"> <a href="?action=forgotusername"> Contact Us</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphon.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div> </font> </TD> </TR> </TABLE> </TD> <TD width="1" height=100% background="/smusermanager/images/dot.gif"> <TABLE cellSpacing=0 valign=top cellPadding=0 width=1 border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD> </TR> <TR valign=top height=3> <TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=1 border=0></TD> </TR> </TABLE> </TD> <TD width=100%> <TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD> </TR> <TR valign=top height=3> <TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=11 border=0></TD> </TR> <TR> <TD valign=top><font class=tbody> Hiya, I have a simple table with no borders, two columns wide. The only part of the table I want to make visible is the central vertical line that separates the two columns (no other vertical lines showing, and no horizontal lines showing). If it's possible, how can I do this? Thanks, James 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. Are there any tips or tricks on how to go from a template made in a graphics program to a well coded website?.....because I can make great templates and slice them up and everything, but I can't seem to code them real well......all help is appreciated i am no html expert, but i have been coding my hyperlinks this way: <a href=http://www.example.com>Example</a> without parenthesis, someone pointed this out to me and said that is not the right way to code a hyperlink, they said you need to add parenthesis like this: <a href="http://www.example.com">Example</a> since the links have always worked just fine when i inserted a link on a page without parenthesis i figured everything is fine. if anyone can help me out and break things down and tell me what is the correct way i would appreciate it. and if coding it without parenthesis is the wrong way, then why does it still work when it is coded as such? thx in advance i am no html expert, but i have been coding my hyperlinks this way: <a href=http://www.example.com>Example</a> without parenthesis, someone pointed this out to me and said that is not the right way to code a hyperlink, they said you need to add parenthesis like this: <a href="http://www.example.com">Example</a> since the links have always worked just fine when i inserted a link on a page without parenthesis i figured everything is fine. if anyone can help me out and break things down and tell me what is the correct way i would appreciate it. and if coding it without parenthesis is the wrong way, then why does it still work when it is coded as such? thx in advance <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? have some html code which is putting some image buttons into a menu which goes across the top of the page. I want to change this too make them go down the page. I have a css file with the code that looks like this Code: Code: #nav_menu { /* background: transparent; */ background: #ddd; border: #dcdce9 solid thin; /* margin: 10em; */ position:absolute; top: 70px; left: 0px; padding: 0pt; right:0px; height: 51px; /* bottom:200px; */ } and the html code looks like this Code: Code: <ul id="globalnav"> <li><a href="index.php?here=home" class="" id="home">Home</a></li> <li><a href="index.php?here=daybook" id="daybook" class="">Day Book</a></li> <li><a href="index.php?here=wms" id="wms" class="">Work Management System</a> <ul> <li><a href="index.php?here=staff" id="staff" class="">Staff</a></li> <li><a href="index.php?here=shifts" id="shifts" class="">Work shifts</a></li> </ul> what part do i need to change to make it go vertically? 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 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? 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. 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 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? 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 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> 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 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> |