displaying css style in aspx page

Question

I have a apsx page and in that page I have two buttons called save and cancel, i need to display this with some css style, my script is

<table>
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </td>
</tr>

and my css script is

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

and am getting the style as

enter image description here

I have few more controls above these save and cancel buttons...the problems is this save and cancel buttons with the bar style comes right after the controls above them....

now these buttons are displaying at the center of the page and I need to display these save and cancel buttons with the bar style at the bottom of the page....how can I do this..

note:I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms......in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls...so the save and cancel button is at center, thats what am trying to display at the buttom

IrishChieftain · Accepted Answer · 2012-04-18 05:00:44Z

3

Here's the solution in JSFiddle:

http://jsfiddle.net/SX7n3/6/

For one, lose the table...

<div id="content">
    Hello World!
</div>

<div class="clear">&#160;</div>

<div class="bar">
    <div class="buttons">    
          <button type="button" id="submit">Submit</button>
          <button type="button" id="cancel">Cancel</button>
    </div>    
</div>    

.content
{
    min-height:800px;
    width: 100%;
}

.bar
{
    padding-top: 4px;
    border-width: 1px;
    border-color: #000;
    background-color: #ccc;
    height: 30px;
    border-style: solid;
}

.buttons
{
    float: right;        
}

.clear
{
    clear: both;
}

edited Apr 18, 2012 at 5:00

answered Apr 16, 2012 at 7:26

IrishChieftain

15.2k8 gold badges55 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

shanish Over a year ago

now also the bar is at the same center position,not at the bottom

IrishChieftain Over a year ago

Set a min-height: 800px; in the content div above your bar and put a div with clear:both; between content and bar divs

shanish Over a year ago

actually I have div tag before this save cancel button...is it possible to set the height of the div, so that it will fill the space and display the save cancel buttons when I run the application?

shanish Over a year ago

thanks alot Irish, your code is working fine, I have a doubt here, If use the min-length of div tag as <div id="content" style="min-height:210px;"></div>....this alone satisfied my requirement...here I set the height as 210px, if I run the same application in different systems will the alignment vary according to their monitor size

IrishChieftain Over a year ago

It's a trade off; you could use % values to fix it for a wide range of monitor sizes :)

Zaheer Ahmed · Accepted Answer · 2012-04-16 07:18:33Z

1

Your question is not clear, what I got you want to move buttons at bottom of page:

<div class="bottomBar">
<table>
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </td>
</tr>
</div>

and css

.bottomBar
{
float :bottom;
}

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

answered Apr 16, 2012 at 7:18

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

3 Comments

Zaheer Ahmed Over a year ago

@Shanish I think above code will solve your problem you can adjust further position by setting {margin-bottom : 100px}

shanish Over a year ago

actually I have div tag before this save cancel button...is it possible to set the height of the div, so that it will fill the space and display the save cancel buttons when I run the application?

Zaheer Ahmed Over a year ago

you can set div height to 98% and bar height to 2%

Istvan Szasz · Accepted Answer · 2012-04-16 07:20:44Z

1

Add those two lines to your .bar:

.bar
{
position:absolute;
bottom:0;
/* the rest of your code */
}

answered Apr 16, 2012 at 7:20

Istvan Szasz

1,56720 silver badges33 bronze badges

2 Comments

shanish Over a year ago

no if I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms......in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls...so the save and cancel button is at center, thats what am trying to display at the buttom

Istvan Szasz Over a year ago

you could use two different css classes, for example .bar wich is your original code, and a .footer_bar for the bar at the bottom of your page

Rohit Azad Malik · Accepted Answer · 2012-04-16 07:21:46Z

Hi now you can define table align right and two class create in css as like this Css

.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}

.save{width:100px;
height:20px;
background:green;
display: inline-block;}

.cancel{width:100px;
height:20px;
background:red;
display: inline-block;}

HTML

<table align="right">
<tr>
    <td align="right" class="bar">
        <table>
            <tr>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" class="save"/>
                </td>
                <td>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel"  class="cancel"/>
                </td>
            </tr>
        </table>
    </td>
    </tr>
</table>

Live demo http://jsfiddle.net/rohitazad/a9uym/

Collectives™ on Stack Overflow

displaying css style in aspx page

4 Answers 4

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related