?
Solved

css help, fine tuning

Posted on 2014-07-26
3
Medium Priority
?
145 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 13

Accepted Solution

by:
myderrick earned 2000 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 34

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article describes a simple method to resize a control at runtime.  It includes ready-to-use source code and a complete sample demonstration application.  We'll also talk about C# Extension Methods. Introduction In one of my applications…
We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

777 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