Solved

css help, fine tuning

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Article by: Najam
Having new technologies does not mean they will completely replace old components.  Recently I had to create WCF that will be called by VB6 component.  Here I will describe what steps one should follow while doing so, please feel free to post any qu…
This article introduced a TextBox that supports transparent background.   Introduction TextBox is the most widely used control component in GUI design. Most GUI controls do not support transparent background and more or less do not have the…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

776 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