Solved

css help, fine tuning

Posted on 2014-07-26
3
119 Views
Last Modified: 2014-07-27
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.

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>


        
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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>        

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
              <span>Rollup:</span>
        <asp:Panel ID="optRollup" Class="optRollup" runat="server"  >&nbsp;&nbsp;
         <asp:RadioButton ID="RadioButton1" name="Rollup" runat="server" Text="Monthly"  GroupName="Rollup" />&nbsp;&nbsp;&nbsp;
         <asp:RadioButton ID="RadioButton2"  name="Rollup" Text="YTD" Checked="true" runat="server" GroupName="Rollup"/>&nbsp;&nbsp;&nbsp;
        </asp:Panel>
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<span>Location:</span>
<asp:Panel ID="Panel3" Class="Panel3" runat="server"  >&nbsp;&nbsp;&nbsp;

             <asp:RadioButton ID="RadioButton3"  name="location" Text="N" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton4" name="location" Text="E" Checked="true" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton5" name="location" Text="S" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton6" name="location" Text="W" runat="server"   GroupName="Location" />&nbsp;&nbsp;&nbsp;
        </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=" ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Caption                                                                                                                                                                                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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;   
}

Open in new window

css-alignment.png
0
Comment
Question by:Mike Eghtebas
  • 2
3 Comments
 
LVL 13

Accepted Solution

by:
myderrick earned 500 total points
ID: 40222250
Hi,

A quick solution and hopefully it works, is to give the css containing the radio button or control a line-height equal to the height of the div. For example:

.control_container {height: 20px; line-height: 20px}

Try it and let's see how it goes.

Good luck.

MD
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 40222778
Hi Derrick,

I had Id="secondRow" in the <tr> but moved it to <td> below it.  I added your code there.


#secondRow
{
    padding: 5px auto 0px auto;
    height: 15px; 
    line-height: 20px
    margin:15px auto 0px auto;
}
.
.
<tr>
        <td id="secondRow">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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>        

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
              <span class="spanId">Rollup:</span>
        <asp:Panel ID="optRollup" Class="optRollup" runat="server"  >&nbsp;&nbsp;
         <asp:RadioButton ID="RadioButton1" name="Rollup" runat="server" Text="Monthly"  GroupName="Rollup" />&nbsp;&nbsp;&nbsp;
         <asp:RadioButton ID="RadioButton2"  name="Rollup" Text="YTD" Checked="true" runat="server" GroupName="Rollup"/>&nbsp;&nbsp;&nbsp;
        </asp:Panel>
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<span class="spanId">Location:</span>
<asp:Panel ID="Panel3" Class="Panel3" runat="server"  >&nbsp;&nbsp;&nbsp;

             <asp:RadioButton ID="RadioButton3"  name="location" Text="N" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton4" name="location" Text="E" Checked="true" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton5" name="location" Text="S" runat="server" GroupName="Location" />&nbsp;&nbsp;&nbsp;
            <asp:RadioButton ID="RadioButton6" name="location" Text="W" runat="server"   GroupName="Location" />&nbsp;&nbsp;&nbsp;
        </asp:Panel>

        </td>
        </tr>

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:
. spanId
{
 padding  : 0px auto 8px auto;
 color:Red;
 
}
#optRollup,#Panel3
{
     border:solid 1px white;
     height:15px;
      margin:auto auto 0px auto;
     /* padding  : 0px auto 8px auto;*/
}

Open in new window


Thank you,

Mike
css-alignment2.png
0
 
LVL 13

Expert Comment

by:myderrick
ID: 40222912
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Data Saving(2) 2 41
Events in static methods 3 50
XML & .net 5 41
Is setting this variable making a duplicate in memory 4 30
Introduction Although it is an old technology, serial ports are still being used by many hardware manufacturers. If you develop applications in C#, Microsoft .NET framework has SerialPort class to communicate with the serial ports.  I needed to…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Hi friends,  in this video  I'll show you how new windows 10 user can learn the using of windows 10. Thank you.

920 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