css help, fine tuning
No matter how hard I tried, I was not able to create gap between some controls shown on the image.
Question: Ho can I create a gap between the controls and alight the radio button captions with their radio buttons?
Please see the image.
Thank you.
Question: Ho can I create a gap between the controls and alight the radio button captions with their radio buttons?
Please see the image.
Thank you.
MasterPage:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>Title Here</title>
<link href="style/masterPage.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body class="body">
<form id="form1" runat="server">
<table border="0">
<tr id="firstRow">
<td>
<p>Main Content Here.
<!-- <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder> -->
</td>
<td>
<p>Side Content Here.
<!-- <asp:ContentPlaceHolder ID="ContentPlaceHolderSide" runat="server">
</asp:ContentPlaceHolder>-->
</td>
</tr>
<tr id="secondRow">
<td>
<span>Region:</span>
<asp:DropDownList ID="cboRegion" runat="server" Width="83" Height="15px">
<asp:ListItem Text="Region 1" Value="1" />
<asp:ListItem Text="Region 2" Value="2" />
<asp:ListItem Text="Region 3" Value="3" />
</asp:DropDownList>
<span>Year:</span>
<asp:DropDownList ID="cboYear" runat="server" Width="83" Height="15px">
<asp:ListItem Text="2013" Value="2013" />
<asp:ListItem Text="2014" Value="2014" />
</asp:DropDownList>
<span>Rollup:</span>
<asp:Panel ID="optRollup" Class="optRollup" runat="server" >
<asp:RadioButton ID="RadioButton1" name="Rollup" runat="server" Text="Monthly" GroupName="Rollup" />
<asp:RadioButton ID="RadioButton2" name="Rollup" Text="YTD" Checked="true" runat="server" GroupName="Rollup"/>
</asp:Panel>
<span>Location:</span>
<asp:Panel ID="Panel3" Class="Panel3" runat="server" >
<asp:RadioButton ID="RadioButton3" name="location" Text="N" runat="server" GroupName="Location" />
<asp:RadioButton ID="RadioButton4" name="location" Text="E" Checked="true" runat="server" GroupName="Location" />
<asp:RadioButton ID="RadioButton5" name="location" Text="S" runat="server" GroupName="Location" />
<asp:RadioButton ID="RadioButton6" name="location" Text="W" runat="server" GroupName="Location" />
</asp:Panel>
</td>
</tr>
<tr>
<td>
<panel type="radio" Name="opt" ID="btnOpt">
<table border="0" id="panel">
<tr class="bottonRow">
<td><asp:Button ID="btn1" class="btns" GroupName="cmdOpt" Name="opt" runat="server" Text="1"
TabIndex="1" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn3" class="btns" GroupName="cmdOpt" Name="opt" runat="server" Text="3" TabIndex="3" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn5" class="btns" GroupName="cmdOpt" Name="opt" runat="server" Text="5" TabIndex="5" onclick="btn1_Click" /></td>
<td rowspan="2" id="midButtons">
<asp:Label ID="midButtonsLabel" runat="server" Text=" "> Caption <br />
<span id="date"><br />DATE: 7/25/14</span> </asp:Label>
</td>
<td><asp:Button ID="btn7" GroupName="cmdOpt" Name="opt" runat="server" Text="7" TabIndex="7" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn9" GroupName="cmdOpt" Name="opt" runat="server" Text="9" TabIndex="9" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn11" GroupName="cmdOpt" Name="opt" runat="server" Text="11" TabIndex="11" onclick="btn1_Click" /></td>
</tr>
<tr>
<td><asp:Button ID="btn2" GroupName="cmdOpt" Name="opt" runat="server" Text="2" TabIndex="2" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn4" GroupName="cmdOpt" Name="opt" runat="server" Text="4" TabIndex="4" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn6" GroupName="cmdOpt" Name="opt" runat="server" Text="6" TabIndex="6" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn8" GroupName="cmdOpt" Name="opt" runat="server" Text="8" TabIndex="8" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn10" GroupName="cmdOpt" Name="opt" runat="server" Text="10" TabIndex="10" onclick="btn1_Click" /></td>
<td><asp:Button ID="btn12" GroupName="cmdOpt" Name="opt" runat="server" Text="12" TabIndex="12" onclick="btn1_Click" /></td>
</tr>
</table>
</panel>
</table>
<asp:Label ID="lblCmdOpt" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<br/><br/>
<h3>
<p id="nowActive">
Now Active
</p>
</h3>
</asp:Content>
Css:
.body {
background:rgb(64,64,64);
}
#nowActive
{
font: auto auto bold 12px arial;
text-align:center;
}
.leftForm, .rightForm {
width:412px;
min-height:20px;
float:left;
}
#firstRow
{
height:160px;
}
#secondRow, #cboRegion, #cboYear, #RadioButton1, #RadioButton2, #RadioButton3, #RadioButton4, #RadioButton5, #RadioButton6, #optRollup,#Panel3
{
height:15px;
display:inline-block;
font-family:Arial;
font-size:10px;
font-weight:bold;
margin:auto auto 0px auto;
}
#secondRow,
{
padding: auto auto 2px auto;
}
#optRollup,#Panel3
{
border:solid 1px white;
height:15px;
margin:auto auto 0px auto;
}
#cboRegion, #cboYear
{
background-color:LightBlue;
height:15px;
border:solid 1px white;
padding:auto auto 2px auto;
margin:5px auto auto auto;
}
#secondRow
{
color:White;
}
#btn1, #btn2, #btn3, #btn4, #btn5, #btn6, #btn7, #btn8, #btn9, #btn10, #btn11, #btn12
{
Height:30px;
Width:103px;
margin: 2px auto 2px auto;
}
#btn1, #btn2, #btn3, #btn4, #btn5, #btn6, #btn7, #btn8, #btn9, #btn10, #btn11, #btn12
{
background: #297cb3;
background-image: -webkit-linear-gradient(top, #297cb3, #47a1d9);
background-image: -moz-linear-gradient(top, #297cb3, #47a1d9);
background-image: -ms-linear-gradient(top, #297cb3, #47a1d9);
background-image: -o-linear-gradient(top, #297cb3, #47a1d9);
background-image: linear-gradient(to bottom, #297cb3, #47a1d9);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
-webkit-box-shadow: 1px 2px 4px #797999;
-moz-box-shadow: 1px 2px 4px #797999;
box-shadow: 1px 2px 4px #797999;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 7px;
border: solid #1f628d 0px;
text-decoration: none;
}
#btn1:hover, #btn2:hover, #btn3:hover, #btn4:hover, #btn5:hover, #btn6:hover, #btn7:hover, #btn8:hover, #btn9:hover, #btn10:hover, #btn11:hover, #btn12:hover
{
background: red;/*#7bb9e0;*/
background-image: -webkit-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -moz-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -ms-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: -o-linear-gradient(top, #7bb9e0, #4fa5db);
background-image: linear-gradient(to bottom, #7bb9e0, #4fa5db);
text-decoration: none;
}
.bottonRow
{
height:20px;
padding:15px auto 5px auto;
margin: 15px 1px 5px 1px;
}
#panel
{
display:inline-block;
}
#midButtonsLabel
{
width:200px;
}
#midButtons
{
background: #9cc24a;
background-image: -webkit-linear-gradient(top, #9cc24a, #709127);
background-image: -moz-linear-gradient(top, #9cc24a, #709127);
background-image: -ms-linear-gradient(top, #9cc24a, #709127);
background-image: -o-linear-gradient(top, #9cc24a, #709127);
background-image: linear-gradient(to bottom, #9cc24a, #709127);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 7px;
border: solid #586b2f 2px;
text-decoration: none;
text-align:center;
/* height:10px;
margin:2px auto 14px auto;*/
padding:0px 10x auto 1px;
}
#date
{
font-size:10px;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You may add the line-height to the CSS controlling the text as well. An alternative will be to add a padding to the bottom of the text CSS to puss it up a bit.
Good luck and thanks.
Good luck and thanks.
ASKER
I had Id="secondRow" in the <tr> but moved it to <td> below it. I added your code there.
Open in new window
The above changes, added the gap I wanted under the controls; but the alignment of the text is still the issue. Please see the attached image.
Here is some additional css that maybe utilized in the process:
Open in new window
Thank you,
Mike
css-alignment2.png