Positioning Dynamic buttons in a <div>

9,735 Recognized Expert Moderator Expert

I've created a ASP.NET control that displays a "book" of schedules.
It dynamically displays scheduling times and allows the user to page through the schedules. It also lets the user edit the schedule times if the user has permissions to edit schedules.

When the user is not editing, or the user is not allowed to edit, the buttons that let the user edit are not displayed. If the user is allowed to edit schedules but they are not editing a link allowing them to start editing is displayed...if they aren't allowed to edit then this link is not displayed.

I've been trying to come up with a CSS solution (which does not require server manipulation) that keeps the paging buttons at the bottom of the scheduling control but I have been unsuccessful.

Right now I'm setting the paging button section's margin property in my server code to move the buttons to the bottom of the page. The problem is that I have to keep changing the margin style in my server code according to whether or not the editing buttons were there.

I've also tried setting the paging button section's position style to relative and have moved it using the top style to position it. The problem is that now I'd have to keep changing the top style in my server code according to whether or not the editing buttons were there.

My goal is to remove as much style manipulation from the server code as possible. So, this solution isn't preferred either.

To simplify things I've been using the w3c schools try-it editor to play with the styles. If you copy the following code into it you can see something that sort of looks like my schedule control. The paging button section style is left empty because at this time I don't know what to set it to in order to move this section to the bottom of the control (containing div).

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<style type="text/css">

.buttonsSection

{

  text-align:right;

  background-color:yellow;

}

.dynamicStuffPlaceHolder

{

  height:100px;

  width:180px;

  float:left;

  border:solid 1px black;

  background-color:orange;

  text-align: center;

  margin:2px;
 
}

.dynamicEditingButtons

{

  float:right;

}
 
.pagingButtonsSection

{
 
}

.spacer

{

  clear:both;

}

.containingDiv

{

  border:solid 2px green;

}

</style>

</head>

<body>

<div class="containingDiv">

  <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>

  <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>

  <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>
 
  <div class="spacer"></div>
 
  <div class="dynamicStuffPlaceHolder">There is a bunch of dynamic <br /> stuff here.</div>

  <div class="buttonsSection">
 
    <a href="">dynamic link to start editing</a>
 
    <div class="dynamicEditingButtons"><div></div></div>
 
    <div class="pagingButtonsSection">

      <input type="button" value="<<" />

      <input type="button" value=">>" />

    </div>
 
    <div class="spacer"></div>

  </div>
 
</div>

</body>

</html>

Any recommendations would be greatly appreciated.

Thanks for your time,

-Frinny

Mar 26 '09 #1

Subscribe Reply

4436

hsriat

1,654

Recognized Expert Top Contributor

Use JavaScript to manipulate object.style.di splay.

Mar 27 '09 #2

Frinavale

9,735

Recognized Expert Moderator Expert

JavaScript would certainly work; but, seeing as I could just as easily set the style in server code, and setting it on the server requires less client side computing, I've decided to continue setting the margin style on the server.

Thanks for your help,

-Frinny

Mar 27 '09 #3

Similar topics

3381

XHTML user agent behavior regarding empty elements

by: Mikko Ohtamaa | last post by:

From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to <foo/>) From XHTML specification:

.NET Framework

2492

XSLT - selecting for <div> but not <table>

by: Philo | last post by:

How do I select all <div> tags except those which contain a <table> tag somewhere within them? Example XML: <********************** sample input ***********************> <txtSectionBody> <div> <span>

.NET Framework

84585

<div > inside <table> doesn't work - why not?

by: Paul Thompson | last post by:

When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?

Javascript

14453

Space between <p>...</p> and <div>...</div> blocks

by: Daniel Hansen | last post by:

I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a page, there is a huge gap (like 3/8 inch or 25 px) between them. This is driving me bananas. What the hey am I missing? dh...

HTML / CSS

16989

Positioning table elements with CSS <div> tags

by: Herbman | last post by:

Hi, I'm trying to position a <tr> ("row") element with CSS. The table itself is positioned with <div> tags. The problem is when I use <div> tags to position the rows within the table nothing happens. In the following example, I want to position two table rows relative to the table itself. Can anyone tell me what I am doing wrong? ...

HTML / CSS

5132

Help with <p> margins inside <div> please!

by: slim | last post by:

hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is pulling a name and placing it under the thumbnail (the text is

HTML / CSS

2659

Absolute positioning in a <div>?

by: Gustaf Liljegren | last post by:

Here's what I'm trying to achieve: 1. A <div>, centered on screen, 600px wide and 100px high, with a background-image (also 600 x 100). 2. Text (an <h1> element) positioned with precision inside the <div>, on the image. 3. A similar result in IE and FF... Here's some of the XHTML:

HTML / CSS

3794

<label><div></div></label> allowed?

by: Josef K. | last post by:

Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644" onclick="__doPostBack('SitesRadioButtonList_3','')" language="javascript" />

ASP.NET

10021

Dynamically adding function to <DIV > element

by: prino | last post by:

Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a...

Javascript

7435

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7947

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7461

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

6026

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5360

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

3470

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1921

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1046

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

747

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General