-
problems aligning
HI All,
I have the following in my markup and am having trouble aligning the checkboxes. Can anyone offer a solution thanks
Code:
<center>
<asp:Panel ID="Panel1" runat="server" Width="286px" >
<center>Languages spoken</center><br />
<div>
<asp:CheckBox ID="chkEnglish" runat="server" Text="English" TabIndex="11"/>
<asp:CheckBox ID="chkFrench" runat="server" Text="French" TabIndex="12" />
<asp:CheckBox ID="chkItalian" runat="server" Text="Italian" TabIndex="13" /></div>
<div>
<asp:CheckBox ID="chkSpanish" runat="server" Text="Spanish" TabIndex="14" />
<asp:CheckBox ID="chkGerman" runat="server" Text="German" TabIndex="15" />
<asp:CheckBox ID="chkDutch" runat="server" Text="Dutch" TabIndex="16" /></div>
<div>
<asp:CheckBox ID="chkRussian" runat="server" Text="Russian" TabIndex="17" />
<asp:CheckBox ID="chkArabic" runat="server" Text="Arabic" TabIndex="18" />
<asp:CheckBox ID="chkHindu" runat="server" Text="Hindu" TabIndex="19" /></div>
<div>
<asp:CheckBox ID="chkChinese" runat="server" Text="Chinese" TabIndex="20" />
<asp:CheckBox ID="chkJapanese" runat="server" Text="Japanese" TabIndex="21" />
<asp:CheckBox ID="chkPortugese" runat="server" Text="Portuguese" TabIndex="22" /></div>
<div>
<asp:CheckBox ID="chkOther" runat="server" Text="Other, please specify: " TabIndex="23" />
<asp:TextBox ID="txtOther" runat="server" TabIndex="24"></asp:TextBox></div>
</asp:Panel>
</center>
My <div> has a style class of:
Code:
div
{
width:100%;
border:none;
text-align:justify;
}
and the font used on the whole page is verdana
-
Re: problems aligning
How exactly do you want to align the checkboxes? All next to each other, on top of each other? Or do you want the checkboxes per <DIV> next to each other and the new DIV below that with again the checkboxes next to each other?
-
Re: problems aligning
I want them 3 wide horizontal and then on each line/div the boxes to line up. If I change the font type to courier new with a couple of strategically placed I can get them to line up, but this font isn't as nice as Verdana and I can see that Verdana is going to be needed.
-
Re: problems aligning
why not use a table?
Code:
<center>
<asp:Panel ID="Panel1" runat="server" Width="286px">
<center>
Languages spoken</center>
<br />
<table>
<tr>
<td>
<asp:CheckBox ID="chkEnglish" runat="server" Text="English" TabIndex="11" />
</td>
<td>
<asp:CheckBox ID="chkFrench" runat="server" Text="French" TabIndex="12" />
</td>
<td>
<asp:CheckBox ID="chkItalian" runat="server" Text="Italian" TabIndex="13" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkSpanish" runat="server" Text="Spanish" TabIndex="14" />
</td>
<td>
<asp:CheckBox ID="chkGerman" runat="server" Text="German" TabIndex="15" />
</td>
<td>
<asp:CheckBox ID="chkDutch" runat="server" Text="Dutch" TabIndex="16" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkRussian" runat="server" Text="Russian" TabIndex="17" />
</td>
<td>
<asp:CheckBox ID="chkArabic" runat="server" Text="Arabic" TabIndex="18" />
</td>
<td>
<asp:CheckBox ID="chkHindu" runat="server" Text="Hindu" TabIndex="19" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkChinese" runat="server" Text="Chinese" TabIndex="20" />
</td>
<td>
<asp:CheckBox ID="chkJapanese" runat="server" Text="Japanese" TabIndex="21" />
</td>
<td>
<asp:CheckBox ID="chkPortuguese" runat="server" Text="Portuguese" TabIndex="22" />
</td>
</tr>
</table>
<asp:CheckBox ID="chkOther" runat="server" Text="Other, please specify: " TabIndex="23" />
<asp:TextBox ID="txtOther" runat="server" TabIndex="24"></asp:TextBox>
</asp:Panel>
</center>
-
Re: problems aligning
Yes, that would be my ideal, but here the client for some obscure reason has said absolutely no tables are to be used. Because at least then the columns would expand to the longest and the others would just realign themselves.
-
Re: problems aligning
try this
style
Code:
<style type="text/css">
.left {
width: 33%;
float: left;
text-align: left;
}
.center {
text-align: center;
width: 286px;
}
</style>
html
Code:
<center>
<div class="center">
Languages spoken
<br />
<br />
<div class="left">
<asp:CheckBox ID="chkEnglish" runat="server" Text="English" TabIndex="11" />
</div>
<div class="left">
<asp:CheckBox ID="chkFrench" runat="server" Text="French" TabIndex="12" />
</div>
<div class="left">
<asp:CheckBox ID="chkItalian" runat="server" Text="Italian" TabIndex="13" />
</div>
<div class="left">
<asp:CheckBox ID="chkSpanish" runat="server" Text="Spanish" TabIndex="14" />
</div>
<div class="left">
<asp:CheckBox ID="chkGerman" runat="server" Text="German" TabIndex="15" />
</div>
<div class="left">
<asp:CheckBox ID="chkDutch" runat="server" Text="Dutch" TabIndex="16" />
</div>
<div class="left">
<asp:CheckBox ID="chkRussian" runat="server" Text="Russian" TabIndex="17" />
</div>
<div class="left">
<asp:CheckBox ID="chkArabic" runat="server" Text="Arabic" TabIndex="18" />
</div>
<div class="left">
<asp:CheckBox ID="chkHindu" runat="server" Text="Hindu" TabIndex="19" /></div>
<div class="left">
<asp:CheckBox ID="chkChinese" runat="server" Text="Chinese" TabIndex="20" />
</div>
<div class="left">
<asp:CheckBox ID="chkJapanese" runat="server" Text="Japanese" TabIndex="21" />
</div>
<div class="left">
<asp:CheckBox ID="chkPortugese" runat="server" Text="Portuguese" TabIndex="22" /></div>
<div>
<asp:CheckBox ID="chkOther" runat="server" Text="Other, please specify: " TabIndex="23" />
<asp:TextBox ID="txtOther" runat="server" TabIndex="24"></asp:TextBox></div>
</div>
</center>
