[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS tune-up

Posted on 2014-07-17
10
Medium Priority
?
251 Views
Last Modified: 2014-07-17
The attached image shows the problem I have with my CSS.

Question 1: How to add White border and transparent background for the tow panels on the image.  
Question2: How to realign the buttons as indicated on the same image.

Thank you.

<style type="text/css">
body {
	text-align:center;
}
.clear {
	clear:both;
}
#form-wrapper {
	width:1050px;
	min-height:100px;
	overflow:hidden;
}
.leftForm {
	width:412px;
	min-height:200px;
	background-color:#cccccc;
    float:left;
    top: 0;
}
.gap {
	width:8px;
	min-height:200px;
	background-color:#999999;
    float:left;
    top: 0;
}
.rightForm {
	width:412px;
	min-height:200px;
	background-color:#cccccc;
    float:left;
    top: 0;
}	
.annual 
{
	width:180px;
	min-height:300px;
	background-color:yellow;
   float:left;
    top: 0;
}
.leftButton {
	width:319px;
	min-height: 60px;
	left:0px;
	background-color:#cc22cc;
	float:left; 
}
.rightButton {
	width:319px;
	min-height: 60px;
	background-color:#cc22cc;
	float:left; 
}
.middleButton {
	width:200px;
	min-height: 60px;
	background-color:#ff0000;
	float:left; 
}
.empty {
	width:220px;
	min-height: 80px;
	background-color:blue;
	float:left; 
}
.controls {
	width:319px;
	min-height: 20px;
	background-color:green;
	float:left;
     text-align: left;
    }
    .controls2 {
	width:200px;
	min-height: 20px;
	background-color:yellow;
	float:left;
	text-align: left;
    }
    .Panel3,  .optRollup {
display:inline-block;
}
      .controls3 {
	width:319px;
	min-height: 20px;
	background-color:green;
	float:left;
	text-align: left;
    }
    
.CriteriaCaptionsLeft{
	width:120px;
	min-height: 20px;
	float:left; 
     background-color: gray;
     text-align: left;
}

.CriteriaGeneral, .CriteriaDefault, .CriteriaSide, .CriteriaRight, .CriteriaLeft  {
	width:75px;
	min-height: 20px;
	float:left; 
     background-color: yellow;
     text-align: left;
}
</style>
</head>
<body>
<div id="form-wrapper">
<form id="form1" runat="server">
	<div class="leftForm">     leftForm     </div>
    
        <div class="gap">  2 - gap  </div>

 	<div class="rightForm">  rightForm </div>
 
       <div class="gap">    4a   </div>

       <div class="annual">  4 - annual   </div>

	<br />

      <div class="controls">
        &nbsp&nbsp&nbsp&nbsp<asp:Label 
            ID="Label4" runat="server" Text="Region:" 
            style="font-family: Arial; font-size: small" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboRegion" runat="server" Width="83">

        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
        <asp:Label ID="Label5" runat="server" Text="Data Year:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboYear" runat="server"  Width="83">

        </asp:DropDownList>
        </div>
        
        <div class="controls2">&nbsp&nbsp&nbsp
              <asp:Label ID="Label6" runat="server" Text="Rollup:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="optRollup" Class="optRollup" runat="server" Width="135" BorderColor="white">
            <asp:RadioButton ID="RadioButton1" Text="Monthly" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton2"  Text="YTD" runat="server" 
                style="font-family: Arial; font-size: small" />
        </asp:Panel>
        </div>

        <div class="controls3">&nbsp&nbsp&nbsp
                    <asp:Label ID="Label7" runat="server" Text="Location:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="Panel3" Class="Panel3" runat="server" >
            <asp:RadioButton ID="RadioButton3" Text="A" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton4"  Text=" B" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton5" Text="C" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton6"  Text="D" runat="server" 
                style="font-family: Arial; font-size: small" />
            
        </asp:Panel><br />
        </div>
    
	<div class="leftButton">
                    <asp:Panel ID="Panel1" runat="server">
                     <asp:Button ID="Button1" Name="opt" runat="server" Text="1" Height="30px" 
                            Width="103px" TabIndex="1" />
                     <asp:Button ID="Button2" Name="opt" runat="server" Text="3" Height="30px" 
                            Width="103px" TabIndex="3" />
                     <asp:Button ID="Button3" Name="opt" runat="server" Text="5" Height="30px" 
                            Width="103px" TabIndex="5" /><br />
                     <asp:Button ID="Button4" Name="opt" runat="server" Text="2" Height="30px" 
                            Width="103px" TabIndex="2" />
                     <asp:Button ID="Button5" Name="opt" runat="server" Text="4" Height="30px" 
                            Width="103px" TabIndex="4" />
                     <asp:Button ID="Button6" Name="opt" runat="server" Text="6" Height="30px" 
                            Width="103px" TabIndex="6" />
                 </asp:Panel>
    </div>
	<div class="middleButton right">
         <img src="images/Button.png" width="200px" height="60px" />
    </div>
 	<div class="rightButton right">
                <asp:Panel ID="Panel2" runat="server">
                     <asp:Button ID="Button7" runat="server" Text="7" Height="30px" 
                         Width="103px" TabIndex="7" />
                     <asp:Button ID="Button8" runat="server" Text="9" Height="30px" 
                         Width="103px" TabIndex="9" />
                     <asp:Button ID="Button9" runat="server" Text="11" Height="30px" 
                         Width="103px" TabIndex="11" /><br />
                     <asp:Button ID="Button10" runat="server" Text="8" Height="30px" 
                         Width="103px" TabIndex="8" />
                     <asp:Button ID="Button11" runat="server" Text="10" Height="30px" 
                         Width="103px" TabIndex="10" />
                     <asp:Button ID="Button12" runat="server" Text="12" Height="30px" 
                         Width="103px" TabIndex="12" />
                 </asp:Panel>   
    </div>
  <div class="empty">
  empty
   </div>
<br />
<br />
<div class="CriteriaCaptionsLeft">
    <asp:Label ID="Label1" runat="server" Text="Criterial type:"></asp:Label><br />
    <asp:Label ID="Label2" runat="server" Text="Region ID"></asp:Label><br />
    <asp:Label name="MetricLeft" ID="Label3" runat="server" Text="Metric ID, Left"></asp:Label><br />
    <asp:Label ID="YYYY" runat="server" Text="YYYY"></asp:Label>
</div>
<div class="CriteriaLeft">      
    <asp:TextBox ID="criterialtype_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="metricId_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="regionId_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="yYYYRight_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaRight">      
        <asp:TextBox ID="criterialtype_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="metricId_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="regionId_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="yYYYRight_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaSide">      
         <asp:TextBox ID="criterialtype_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="metricId_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="regionId_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="yYYYRight_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaGeneral">      
            <asp:TextBox ID="criterialtype_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="metricId_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="regionId_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="yYYYRight_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaDefault">      
            <asp:TextBox ID="criterialtype_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="metricId_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="regionId_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="yYYYRight_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    </form>
</div><!--end of main-wrapper-->
</body>
</html>

Open in new window

CCS-Help.png
0
Comment
Question by:Mike Eghtebas
  • 5
  • 5
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40203333
Can you post the rendered HTML - makes it easier to debug
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203341
The submitted code is the html I have except very beginning:
<!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 id="Head1" runat="server">
    <title></title>

Open in new window


I will do more cleaning up and resubmit it.

Thanks,

Mike
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203344
From the browser do View Source and post the HTML from there.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203364
I see, here you are.
index.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203370
Try an hard refresh in your browser - the page looks how you want it to look when I test the code.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203383
You must be using firefox. It works okay with firefox but not with chrome or explorer.

I wonder why it doesn't work with explorer? BTW, any suggestion on the white panel border and transparent background?

Thanks,

Mike
0
 
LVL 58

Expert Comment

by:Gary
ID: 40203387
Same for me in IE11 and Chrome
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40203395
Add to the new class you added optrollout,panel3 this css

border:2px solid #fff

When you say transparent do you mean white? Because a transparent background would be yellow and green there
If so add this css as well
background: #fff;
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203399
Thanks, I will try it now. Yes I need transparent to take whatever color html body has. The green and yellow will change,

Mike
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40203424
Thank you for your good help.

background: transparent; works okay.

Also, the realignment problem is corrected now.

Thanks again,

Mike
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

825 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