Solved

css help, fine tuning

Posted on 2014-07-26
3
117 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Extention Methods in C# 3.0 by Ivo Stoykov C# 3.0 offers extension methods. They allow extending existing classes without changing the class's source code or relying on inheritance. These are static methods invoked as instance method. This…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

707 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

13 Experts available now in Live!

Get 1:1 Help Now