|
HTML - Help -shortening The Vertical Line
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 -->
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. 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! 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 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>
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. Hi, i have a drop down box in a table with a bunch of project names, but some of them are pretty long. The drop down is taking up all the screen space. Is there a way to shorten the box, so you click on the drop down, look at the full names, and when you've selected one it shows only part of it, say the first 10 letters? Thanks! 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 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 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? <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? 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? 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 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 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... 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 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>
|
|||||||