Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this:

https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "below the blue line" like this:

https://i.stack.imgur.com/JcDAu.png Below is a snippet of my HTML code:

  <div class="module form-module">
    <div class="flex-container">
      <article class="article">
        <table>
          <tr>
            <td>
              <button>Configurations</button>
            </td>
            <td>
              <button>Create User </button>
            </td>
            <td>
              <button>Update User</button>
            </td>
            <td>
              <button>Create Group</button>
            </td>
            <td>
              <button>Update Group</button>
            </td>
          </tr>
        </table>
      </article>
    </div>
  </div>

You can view my CSS code in this plunker: https://plnkr.co/edit/sCcBBFfWRiCwGz8hs8oR?p=catalogue

If you have any suggestions on how to fix this issue, please let me know!

Answer №1

CSS modifications:

.form-module {
    border-bottom: 5px solid #33b5e5;
    position: relative;
    background: #ffffff;
    width: 100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    align: right;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

table {
  border-spacing:0px;
}

td {
  padding:0px;
}

Explanation of Changes:

The blue line serves as a border and was initially set at the top of the button's parent container instead of the bottom, hence the first modification.

Adjusted the padding to eliminate space between buttons and container edges, that's the second change, set it to 0px.

Both the table and button had a 1px border which was separating them from the container edges, hence the third adjustment to set those borders to 0px.

Additional tip:

If you're not already using it, utilizing browser inspector can be beneficial in understanding CSS behavior. Consider Bootstrap for a quicker solution without starting from scratch. It could save you a significant amount of time.

Best wishes.

In case needed, here's the complete updated CSS:

body {
  background: #e9e9e9;
  color: #666666;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table {
  border-spacing:0px;
}

td {
  padding:0px;
}

.pen-title {
  padding: 50px 0;
  text-align: center;
  letter-spacing: 2px;
}

/* Additional styling goes here */


UPDATE: You specified that the buttons should be positioned outside and above the form-module, necessitating a change in the HTML structure rather than just the CSS. We've removed the flex-container div nested inside the form-module div and relocated it after this container is closed. Since the buttons were styled based on .form-module properties, we created a new class "buttons". This ensures form-module and buttons have distinct style properties since they are in separate containers now.

To comprehend how blocks function within containers, reference: http://www.w3schools.com/html/html_blocks.asp

Updated HTML:

<div class="flex-container buttons">
  <article class="article">
    <table>
      <tr>
        <td>
          <button>Configurations</button>
        </td>
        <td>
          <button>Create User </button>
        </td>
        <td>
          <button>Update User</button>
        </td>
        <td>
          <button>Create Group</button>
        </td>
        <td>
          <button>Update Group</button>
        </td>
      </tr>
    </table>
  </article>
</div>
 <div class="module form-module">
 </div>

Revised CSS:

body {
  background: #e9e9e9;
  color: #666666;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.buttons table {
  /* Styling details */
}

.buttons td {
  /* Styling details */
}

.buttons input {
  /* Styling details */
}

/* More styles go here */

Complete revised CSS:

body {
  background: #e9e9e9;
  color: #666666;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.buttons table {
  /* Updated table styling */
}

.buttons td {
  /* Updated cell styling */
}

.buttons input {
  /* Adjusted input styling */
}

/* Other CSS rules continued... */

Answer №2

Perhaps consider using a 'list' HTML element like ul or li instead of a 'table'.

Check out the plunker here

Updated HTML:

<div class="module form-module">
    <div class="flex-container">
      <article class="article">
        <ul>
            <li>
              <button>Configurations</button>
            </li>
            <li>
              <button>Create User </button>
            </li>
            <li>
              <button>Update User</button>
            </li>
         </ul>
      </article>
    </div>
  </div>

Include the following CSS for styling:

ul{
  list-style-type:none;
  width:500px;
}

li{
  width:33%;
  text-align:center;
  float:left;
  border-bottom:2px solid #33b5e5;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to activate the remember password feature when using an AJAX login system?

I've developed a web application with a basic login box, utilizing jQuery AJAX for the login process. However, I'm facing an issue with prompting the browser to remember the password. How can I trigger the "Do you want the browser to remember th ...

Enabling element overlap using jQuery

I have implemented jQuery to animate a navbar button on one of my web pages. However, the animation causes the div below it to be displaced and disrupts the layout. Is there a way to allow the button to animate without affecting the position or layout of t ...

Is it possible to utilize a separate, standalone stylesheet for media queries?

My understanding of media queries evolved when I discovered them yesterday during my research on creating mobile-optimized pages. I learned that a media query refers to a stylesheet that complements and supersedes the current one, which differed from what ...

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

Guide to efficiently utilizing flex to horizontally position two elements next to each other in a Material UI and ReactJS environment

I have successfully achieved side-by-side components of two cards from Material-UI. However, I am facing an issue when expanding one of the cards. The problem is that Card 1 automatically expands to match the size of Card 2 when Card 2 is expanded, even th ...

Ensures that two divs have the same dimensions

Currently, I have a line of sections set up like this: I am attempting to ensure that the second div matches the height of the first one, despite the fact that their heights are determined by the size of the pictures which may vary. Do you have any sugges ...

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Currently working on a small app, but encountering an error with routerLink in the console. I am new to angular and seeking help. ✘ [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'. Here is ...

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

Replacing a div with another div can be achieved in a single swap

My goal is to swap one div with another div upon clicking using the provided code. It functions properly for a single instance. However, the issue arises when the class appears multiple times, causing all instances to change due to sharing the same class n ...

Setting the `setCustomValidity()` method for dynamically inserted HTML elements Explanation on how to use

I am dynamically adding elements to my view and setting their attributes using the jQuery attr function as demonstrated in the code snippet below: var input = $("<input type='text' name='"+inputFieldName+"' '>"); input.attr( ...

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

I am struggling to implement the display: flex style on the parent <div> containing my <span> However, since the <span> is dynamically generated by the ng-template of the ngx-datatable-column, I'm finding it challenging to apply thi ...

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Having some trouble. For example: $(document).ready(function () { $("#btnSend").click(function () { var noti_p = { url: "Pusher_Controller.ashx", data: "&appname=" + $("#selt1").val() + "&title=" + $("#title"). ...

Creating a custom transition rule in Stylus: A step-by-step guide

I need help creating a generic transition rule in Stylus. My current function is only working in specific cases, where it returns a string 'all ease-in-out 0.2s' instead of a proper CSS rule. This approach is not effective when trying to use it i ...

Is It Possible to Create Flash Content Without Using a SWF File?

Is there a way to embed Flash directly in HTML, rather than linking to an external SWF file? I am looking to send an HTML form via email for the recipient to fill out by opening it in a browser. The final step would involve copying the result to their clip ...

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

Universal compatibility for web displays

I've been conducting testing on a website across Chrome, Firefox, and Internet Explorer, utilizing the CSS code snippet below: #foot_links1, #foot_links2, #foot_links3 { position: absolute; margin-top: 55px; margin-top: 14em; color: # ...