Solved

align selectbox top left in TD cell

Posted on 2006-11-14
9
1,434 Views
Last Modified: 2011-10-03
table.availabilityCalendar td.yearSelector
{
      width:200px;
      margin:0px;
      text-align:left;
      vertical-align:top;
      padding:0px;
      color:#888888;
      font-size:0.85em;
      font-family: "ITC officina sans book", helvetica, arial, sans-serif;
}

table.availabilityCalendar td select.yearSelection
{
      margin:0px;
      padding:0px;
      color:#888888;
      font-size:0.85em;
      font-family: "ITC officina sans book", helvetica, arial, sans-serif;
}

$html .= '<td class="dateSelector">'."\n";
$html .= '<select class="yearSelection" name="yearSelection" id="yearSelection" onchange="this.form.submit();">'."\n";

for ($i = 1; $i <= count($year_array); $i++)
{
      $current = ($year_array[$i-1] == $year) ? ' selected' : ' ';
$html .= '<option value="'.($year_array[$i-1]).'"'.$current.'>'.$year_array[$i-1].'</option>'."\n";
}

$html .= '</select>'."\n";
$html .= '</td>'."\n";
0
Comment
Question by:ellandrd
  • 4
  • 4
9 Comments
 
LVL 2

Expert Comment

by:eheimer
ID: 17941002
You have only posted the code for a single cell here.  That is not sufficient detail for anyone to determine a problem.  Your cell as laid out will be the exact same size as your select box.  However, the cell's size will be effected by the size of the table and the cells around it.  Post more of your code and we'll try to dissect it for you.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17941056
>>You have only posted the code for a single cell here.
>>That is not sufficient detail for anyone to determine a problem

this is more than enough! - im just wanting to align the select box to the top left of the TD so this is all you need - i only have 1 cell anyway.

>>Your cell as laid out will be the exact same size as your select box.

Mmmm on my page its of size 200px with my select box aligned left...

How can i align it vertically so its aligned top-left?
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 17941556
try
$html .= '<td class="dateSelector" valign="top">'."\n";

otherwise, if you want only the textbox aligned top left and the rest of the content in the cell to behave as per normail in the table cell, you could use positioning.

like this;

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

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
      </style>
</head>

<body>

<table style="width: 200px; height: 200px; border: 1px solid #000; position: relative;">
<tr>
<td>
<select name="point_value" id="pointValue" style="position: absolute; top: 0px; left: 0px;">
<option value="500">500 points -Very Difficult</option>
<option value="250">250 points - Difficult</option>
<option value="125">125 points - Moderate</option>
<option value="50">50 points - Easy</option>
</select>
blah blah blah blah blah
</td>
</tr>
</table>


</body>
</html>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17946079
glad my comment helped? why the 'B'? did you need more info or a more specific solution? should've asked if that was the case.. before awarding..
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 16

Author Comment

by:ellandrd
ID: 17946096
your solution was fine but i was hoping somebody would just got it working without using inline styling... as i didnt want to use style="" inside the TD tag and just wanted to use external CSS
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17946170
well you just need to ask mate :) you did not specify that in your question or your comment.

here you go:

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

<html>
<head>
     <title>Untitled</title>
     <style type="text/css">
          .availabilityCalendar{width: 200px; height: 200px; border: 1px solid #000; position: relative;}
          .availabilityCalendar .yearSelection{position: absolute; top: 0px; left: 0px;}
     </style>
</head>

<body>

<table class="availabilityCalendar">
<tr>
<td>
<select name="point_value" id="pointValue" class="yearSelection">
<option value="500">500 points -Very Difficult</option>
<option value="250">250 points - Difficult</option>
<option value="125">125 points - Moderate</option>
<option value="50">50 points - Easy</option>
</select>
blah blah blah blah blah
</td>
</tr>
</table>


</body>
</html>
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17946193
ive asked for your grade to be upgraded to A...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17947319
ok, your now a grade A...

ellandrd
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17947652
thanks
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now