Should buttons be wrapped based on the text of the link?

I'm struggling to include buttons in my design but I can't seem to achieve the desired outcome.

The image below illustrates what I am attempting to create but have been unsuccessful in replicating:

https://i.sstatic.net/CnYLV.png

However, the current result I am getting looks like this:

https://i.sstatic.net/OpvlM.png

Update: I have included more CSS code that is being utilized for clarity on my question.

Thank you all for your assistance.

  

 .img-banner{
margin-left:auto;
margin-right:auto;
display:inline;
}

body{
position:relative;
background-color:white;
margin: 0;
padding: 0;
}

ul{
list-style:none;
}

a{
color: white;
text-decoration: none;
font-family: Sherwood !important;
}

.navbar-buttons{
padding-top:20px;
padding-right:20px;
text-align:right;
list-style:none;
margin:0 auto;
<!---background-image: url(./img/Banner.jpg);--->
width:100%;
}

#wrapper {
width: 940px;
height:100%;
margin: 0 auto;
 }

 #banner-wrapper{
display:block;
padding:0;
margin-left:auto;
margin-right:auto;
background:#FFF;
background-image: url(./img/Banner.jpg);
height:14.6%;
padding-bottom:44px;
}

img.no-border{border: 0;}

.img-banner{
margin-left:auto;
margin-right:auto;
display:block;
}

#sidebarleft{
width: 30%;
padding-top: 58px;
padding-right: 20px;
display:inline;
float:left;
}

#sidebarleft ul.menu{
list-style:none;
padding:0;
margin:10px 0 10px 15px;
}

.leftbuttons{
background-image: url(./img/Button_1.jpg);
background-repeat:no-repeat;
padding:20px 20px;
}

.leftbuttons a{
color:grey;
vertical-align:center;
}

.aligntext{
vertical-align:center;
text-align:left;
}

#sidebarright{
float:right;
width: 30%;
padding: 0; marign:0;
padding-top: 20px;
}

img.buttonUlti{
float:right;
padding-top:20px;
padding-bottom:15px;
border-radius:18px;
}

.shiftRes{
margin-left:27px;
padding-top:40px;
}
<div id="wrapper">

<!-- banner-wrap starts here -->
<div id="banner-wrapper">
<!-- Menu Tabs -->

<ul>
<li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>Support</span></a></li>

</ul>
</div>

    <div id="sidebarleft">
      <h2>Departments</h2>
      <ul class="menu">
        <li class="leftbuttons"><a class="aligntext" href="Blah.cfm">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm?">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm">BLAH</a>
        </li>
        <li class="leftbuttons"><a href="Blah.cfm">Room</a>
        </li>
      </ul>
    </div>
</div>

htmlcss

Answer №1

One simple solution is to utilize an unordered list.

HTML

 <div class="container">
   <ul>
     <li>Claims</li>
     <li>Credentialing</li>
     <li>Customer Service</li>
     <li>Data Management</li>
     <li>Decision Support</li>
     <li>DNA Comittee</li>
   </ul>
 </div>

 CSS

 ul { list-style: none; }
 li { border: 1px solid black; width: 150px; padding: 5px;}

https://jsfiddle.net/8dn3q303/

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

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

javascripthtmlangularjs

The React Material UI table is having trouble stretching to fill the space

Currently, I am experimenting with developing my own virtualization technique using a different approach than react-virtualized. However, I am encountering difficulties when it comes to styling. I have come across an issue where the material table in the ...

cssreactjsmaterial-ui

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

Updating the text box's font color to its original black shade

I have a form that includes dynamic text boxes fetching data from the backend. When a user clicks on a text box, the color of the text changes. Upon form submission, a confirmation message is displayed and I want the text box color to revert back to black. ...

jqueryhtmlajax

Encircle a particular row in a table with a border

I'm having trouble creating a border around only the top row of my table. Right now, the border is only displayed around the outside of the entire table. I also want to add a border specifically to the first row that contains 'Team, Correct Picks ...

phphtmlcsshtml-tableborder

What is the reason behind the body element's background styling impacting the entire screen?

Why does styling the background of the body element affect the entire screen instead of just the body itself? For example, consider this CSS rule: body { width: 700px; height:200px; border: 5px dotted red; background-color: blue; } While the ...

htmlcssbackground

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

After submitting the form, I must only deactivate the checkbox that has been selected

Here is the HTML code I am working with: I have multiple checkboxes designed as buttons to select a room, but it's quite annoying when they all get selected at once. $("form").submit(function() { $('.seat input:checkbox').prop("disable ...

javascripthtmljquerynode.jsexpress

Utilizing Bootstrap 5 Grid to blend fixed and dynamic width elements within a single row

I am currently working on developing a grid system for my Blazor application that features small fixed-size columns with one large column. Instead of dividing the grid into 12 columns using col-xs-*, I have opted to set custom widths without using the col ...

htmlcssbootstrap-5

The Enchanted URL Folder Name

Spent two painstaking hours dealing with this issue. It's incredibly frustrating. Struggling to load css files in PHP pages when the URL contains a folder named "adsq" Comparing two identical pages, only differing in the folder name: One works perf ...

phpcssdirectory

Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence: red blue green purple black This is my current progress: <script type="text/javascript"> $(function() { ...

jquerycsssortingcolors

Creating an HTML form that adjusts its size and layout based

Struggling to make my HTML Form responsive - it displays well on desktops, but not on mobile devices or tablets. Want to take a look at the code? Here's the link: JSFiddle I've attempted removing overflow: hidden and white-space: nowrap; from t ...

htmlcssformsresponsivebootstrap-5

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

What could be causing my select tags to appear incorrectly in Firefox and IE?

With the help of Jquery, my goal is to dynamically populate a select field when it is in focus, even if it already has a value. Once populated, I want to retain the previous value if it exists as an option in the newly populated field. Although this works ...

javascriptjqueryhtmlinternet-explorerfirefox

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like: Implementing a CSS reset Refi ...

htmlcssframeworksfrontend

Retrieve the full directory path that has been chosen in an HTML form

I am facing a similar issue in my web application where I am using PHP, HTML, and JavaScript. What I want is to be able to select a folder and obtain the full path of that folder for backing up data. For example, when a user enters backup.php, they should ...

javascriptphpjqueryhtml

What changes can I make to the script in order to display every element from a MySQL query using PHP, MySQL, JavaScript,

Enhanced Multiple Dropdown Selection Using Ajax In the following scenario, we have a webpage featuring a multiple dropdown selection that interacts with a MySQL database. By choosing options in the dropdowns labeled site, menu, and category (categ), a que ...

javascriptphphtmlmysqlajax

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

jqueryhtmlangularjsag-grid

LESS — transforming data URIs with a painting mixin

Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...

javascriptnode.jscsslessdata-uri