how can we do this.................need help

Question

Jessurider -10 Posting Whiz in Training

15 Years Ago

<html>
<head>
</head>
<body>
<br><br><br><br><br><br>
<form method="post" name="frm" action="search">
<table border=0 width="300" align="center" bgcolor="#CDDFFF">
<tr><td colspan=2 style="font-size:12pt;color:#00000;" align="center">
<font size=5>
Search Employee 
</font>
</td></tr>
<tr><td ><b> Employee Name</b></td>
<td>: <input  type="text" name="emp_name" id="emp_name">
</td></tr>
<tr><td ><b>Department</b></td>
<td>: <input  type="text" name="emp_dept" id="emp_dept">
</td></tr>
<tr><td ><b>Email</b></td>
<td>: <input  type="text" name="email" id="email">
</td></tr>
<tr><td colspan=2 align="center">
<input  type="submit" name="submit" value="Search"></td></tr>
</table>
</form>

<table width="30%" height="180"  border="0" align="rightcorner">
<tr>                                      
<td align="top" height="135" valign="top" bgcolor="#BDECFE">
<marquee height="150" align="left"  direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()" >
<a href="news.asp" class="more"><b>Faith InfoTech Academy for Professional Advancement starts operations at Technopark<b></a><br />
<br />
<a href="news.asp" class="morelink">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a><br />
<br />
<a href="news.asp" class="more">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a><br />
<br />
<a href="news.asp" class="morelink"><b>Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</b> <br>...</a><br />
<br />
<a href="news.asp" class="more">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a><br />
<br />
<a href="news.asp" class="morelink"><b>Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a><br />
<br />
</marquee></td>
</tr>
</table>


</body>
</html>

how can we put the two things side to side as shown in the attached(what we need)

user-interface web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

pics.zip (45.81 KB)

2 Contributors
1 Reply
134 Views
6 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by gogreen1

Dani AI

Generated 9 Months Ago

A simple, reliable way to put the search box and the news scroller side-by-side is to stop using tables for layout and use CSS layout instead. posted the original table-based form and a <marquee>, and showed a nested-table solution that works, but it is brittle, not semantic, and harder to make responsive or accessible. Use a simple container with CSS flexbox for the two columns, and use semantic HTML (labels, fieldset/legend) so screen readers and mobile browsers behave correctly.

A minimal structure:

<div class="two-column">
  <form class="search" aria-labelledby="search-title">
    <h2 id="search-title">Search Employee</h2>
    <label for="name">Name</label>
    <input id="name" name="name" type="text">
    <!-- more fields -->
  </form>

  <aside class="news" aria-labelledby="news-title">
    <h3 id="news-title">News</h3>
    <ul class="ticker">
      <li>News item 1</li>
      <li>News item 2</li>
      <!-- duplicate items if you want a continuous loop -->
    </ul>
  </aside>
</div>

And the key CSS (flex layout + simple CSS scroller, avoids deprecated <marquee>):

.two-column { display: flex; gap: 20px; align-items: flex-start; justify-content:center; }
.search { width: 320px; background:#CDDFFF; padding:12px; }
.news { width: 300px; height:180px; background:#BDECFE; overflow:hidden; }
.ticker { margin:0; padding:0; list-style:none; animation:scrollUp 12s linear infinite; }
@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

Notes and troubleshooting:

Avoid attributes like align="rightcorner" and layout tables; they are invalid or deprecated. Use CSS instead.
<marquee> is non-standard and not accessible — prefer CSS animation or a small JS scroller (<marquee> (non-standard)).
Use proper labels and fieldsets for accessibility (label element), and make the layout responsive with a media query to stack the columns on narrow screens. For a modern guide to layouts, see the Flexbox basics (Basic concepts of Flexbox).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gogreen1 -1 Junior Poster in Training · Answer 1 · 2011-05-12T14:57:31+00:00

<html>
<head>
</head>
<body>
<br><br><br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left" valign="top"><table border=0 width="300" align="right" bgcolor="#CDDFFF">
      <tr>
        <td colspan=2 style="font-size:12pt;color:#00000;" align="center"><font size=5> Search Employee </font></td>
      </tr>
      <tr>
        <td ><b> Employee Name</b></td>
        <td>:
          <input  type="text" name="emp_name" id="emp_name"></td>
      </tr>
      <tr>
        <td ><b>Department</b></td>
        <td>:
          <input  type="text" name="emp_dept" id="emp_dept"></td>
      </tr>
      <tr>
        <td ><b>Email</b></td>
        <td>:
          <input  type="text" name="email" id="email"></td>
      </tr>
      <tr>
        <td colspan=2 align="center"><input  type="submit" name="submit" value="Search"></td>
      </tr>
    </table></td>
    <td width="2%">&nbsp;</td>
    <td width="48%"><table width="100%" height="180"  border="0" align="rightcorner">
      <tr>
        <td align="top" height="135" valign="top" bgcolor="#BDECFE"><marquee height="150" align="left"  direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()" >
          <a href="news.asp" class="more">Faith InfoTech Academy for Professional Advancement starts operations at Technopark<b></a><br />
          <br />
          <a href="news.asp" class="morelink">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a><br />
          <br />
          <a href="news.asp" class="more">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a><br />
          <br />
          <a href="news.asp" class="morelink"><b>Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</b> <br>
            ...</a><br />
          <br />
          <a href="news.asp" class="more">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a><br />
          <br />
          <a href="news.asp" class="morelink"><b>Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a><br />
          <br />
        </marquee></td>
      </tr>
    </table></td>
  </tr>
</table>
<br><br><br>
</body>
</html>