Solved

css help, fine tuning

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

856 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