Struggling to position two buttons next to each other

I've tried adding display: inline-block; and using list-style: none; but nothing seems to work. Any help would be greatly appreciated.

Here is the HTML code:

<nav class="navbar navbar-light" style="background-color: white; position: fixed; top: 0; width: 
100%; height: 70px;">

<a href="index.html">
<h3 id="title" style="color: #0099ff;">
Student Sources
</h3>
</a>

<a href="stuff.html">
<button id="stuff" style="margin-right: 900px; display:inline-block;">
Articles/Presentations
</button>
</a>

<a href="aboutus.html">
<button id="aboutus" style="display:inline-block; float:right;">
About Us
</button>
</a>

<!-- Navbar content -->
</nav>

And here is the corresponding CSS:

.navbar navbar-expand-lg navbar-light bg-light{
    background-color: blue;
    color: blue;
}

#topics{

}
a, a:hover, a:focus {
    text-decoration: none;
}

#title{
    transition-duration: .1s;
}
#title:hover {
    text-decoration: underline;
    text-decoration-color: #FFAE00;
}

#stuff {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    color: #0097CF;
    border-style: none;
    margin-right: 800px;
    margin-bottom: 0px; 
    color: #0091AE;
    transition-duration: .1s;
}

#stuff:hover {
    border-style: solid;
    border-color: #FFAE00;
}

#aboutus {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    color: #0097CF;
    border-style: none;
    margin-right: 800px;
    margin-bottom: 0px; 
    color: #0091AE;
    transition-duration: .1s;
}

#aboutus:hover {
    border-style: solid;
    border-color: #FFAE00;
}

If someone automatically assumes this question has been answered before, it can be quite frustrating. I have searched for solutions, but so far nothing has resolved the issue.

htmlcssbootstrap-4

Answer №1

Your links are currently not visible. Make sure you have properly connected the necessary Bootstrap components in your code. Below is the modified version of your code:

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href = "index.html"><h3 id = "title" style="color: #0099ff;">Student Sources</h3</a>
<a href = "stuff.html">
<button id = "stuff" style=" display:inline-block;">Articles/Presentations</button>
</a>
<a href = "aboutus.html"><button id = "aboutus" style="display:inline-block;">About Us</button>
</a>

<!-- Navbar content -->
</nav>

In this modification, I have removed only the margin-right: 900px; and float: right properties.

CSS:

.navbar navbar-expand-lg navbar-light bg-light{

background-color: blue;
color: blue;
}

#topics{

}
a, a:hover, a:focus {
text-decoration: none;
}


#title{
transition-duration: .1s;
}
#title:hover{
text-decoration: underline;
text-decoration-color: #FFAE00;

}

#stuff{

padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
color: #0097CF;
border-style: none;
margin-bottom: 0px; 
color: #0091AE;
transition-duration: .1s;
}

#stuff:hover{


border-style: solid;
border-color:  #FFAE00;
}

In this CSS update, I have removed only the margin-right: 800px; from the #stuff element.

For a live demonstration, you can refer to this fiddle link: https://jsfiddle.net/tp43gkvn/2/

Answer №2

Buttons have the property of display: inline-block, while a elements do not. Furthermore, there is an excessive margin-right: 800px; on the buttons causing them not to align properly side by side.

There are also numerous duplicate properties within the code. It's recommended to transfer all inline styles to a CSS file for better organization.

Answer №3

Did you know that using the wrap function combines two buttons within a single <div></div> element and assigns the div a class name, such as buttonsWrapper?

Here is an example of an HTML template for this setup:

<nav class="navbar navbar-light" style="background-color: white; position: fixed; top: 0; width: 
100%; height: 70px; ">

<a href="index.html">
<h3 id="title" style="color: #0099ff;">
Student Sources
</h3>
</a>
<div class="buttonsWrapper">
<button id="stuff">
<a href="stuff.html">Articles/Presentations</a>
</button>

<button id="aboutus">
<a href="aboutus.html">About Us</a>
</button>
</div><!--.buttonsWrapper-->

<!-- Navbar content -->
</nav>

In your CSS, target the buttonsWrapper class and set it to display:flex like so:

.buttonsWrapper{
display:flex;
justify-content:space-around; /*This will space them equally in respect to the parent element width. Then you can use margin to adjust them to your liking*/
}

I hope this explanation helps! Remember, avoid wrapping a button inside an anchor tag <a href="#"></a>, as it is not considered good semantic practice. Instead, wrap an anchor tag within a button element tag.

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 is the process of transforming a PSD file into a responsive HTML file?

I have a PSD file with multiple images that I need to display on my responsive website. The challenge is that when the images are displayed inside the webpage, their position needs to be set to absolute in order to maintain layout integrity. However, when ...

csshtml

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Currently, I am utilizing node js, socket io, and express to develop a multiplayer web game. To begin, the server initiates and listens on port 2000. Upon visiting localhost:2000, the file lobby.html is transmitted using: //app.js const express = require ...

javascripthtmlnode.jsexpresssocket.io

Exploring the methods of connecting with data-checked and data-unchecked attributes in Angular

Utilizing a toggle switch, I am able to determine what text to display in the div by utilizing html attributes such as data-checked and data-unchecked. In addition, I have an Angular pipe that translates all texts on the website based on the selected lang ...

htmlangulartypescriptproperty-binding

Input the latest data into the Bootstrap form

Implementing the bootstrap4 framework in my web application, I have a table displaying various values. Each row includes an edit button at the end of the row (last column). The requirement is that when this edit button is clicked, a form should pop up with ...

javascripthtmlcssbootstrap-4

Making sure that the div elements are stacked vertically once the top div expands in size

I am dealing with a situation where I have two divs that showcase a list of elements for the user to interact with via a search bar. This is followed by a "Done" button to finalize their selection. <div class="dropdown col" id="dropdown-s ...

htmlbootstrap-5

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...

javascriptjqueryhtmlcss

Ensuring responsive design: Forcing Bootstrap 3 / Knockout Navbar to collapse on mobile site view

While working on a website, I incorporated Knockout.js and added a click event to a href in the navbar. The issue is that the navbar doesn't automatically close when using it on a mobile device after the click event triggers. Is there a way to ensure ...

cssknockout.jstwitter-bootstrap-3

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

Expandable rows within an Angular Material table (mat-table) feature a distinct gap, even when rows are collapsed

I recently integrated an Angular Material table into my website, following the examples provided on the official Angular page (link to the examples). I wanted the table rows to be expandable similar to the "Table with expandable rows" example on the Angula ...

htmlcssangularangular-materialangular-material-table

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

What is the process of transferring data from an HTML form to Firebase Realtime Database in Django using Pyrebase?

Currently, I'm facing an issue with transferring data from a form to the Firebase realtime database. Here's my view function. I made some changes by adding a user token, but unfortunately, it hasn't resolved the problem yet. The information ...

pythonhtmldjangofirebasefirebase-realtime-database

Display the collapsible panel and modify the class of the other panel

I am trying to implement a collapse panel with a button and adjust the class of another panel so that it fits within the width of the page. Here is the code snippet I have been working on: button // first attempt $('#signup').on('click&a ...

jqueryhtmlcssbootstrap-4

Having trouble establishing a connection with a remote SQL Server using PHP. Getting the error message "Unable to establish connection."

I'm attempting to transfer data from a PHP form to a remote SQL Server database. Upon clicking the submit button, I encounter the following errors: Error: mysqli_query() expects parameter 1 to be mysqli, resource given in C:\wamp64\www&bs ...

phphtmlmysqlsql-serversqlsrv

Prevent anchor jumping caused by popstate event in Safari

This situation is really testing my patience. When navigating within the same page using anchors, the browser automatically takes you back/forward to the location of that link in your history when popstate is triggered. One might think that you could prev ...

javascriptjqueryhtmlsafarihtml5-history

Having trouble with centering my div in HTML and CSS

Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...

jqueryhtmlcss

Tips for splitting words in a responsive Bootstrap table

Here is the code snippet I am struggling with: <table id="table" class="dataTable table table-hover table-md table-responsive" cellspacing="0" role="grid"> <thead> <tr> ...

htmlcssbootstrap-4

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

phpjquerycsswordpress

Adjust the text in Bootstrap to collapse on command

I'm currently utilizing Bootstrap collapse in my project. I am attempting to implement a basic jQuery script that changes an icon once a user clicks on one of the collapses. Since there are multiple collapses on the page, I believe I need to use the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering an error in Selenium Python when using the second iteration of find_elements_by_xpath

I'm currently navigating through my college website dashboard to find all relevant subjects. I am utilizing selenium for this task. Due to the slowness of the site, I implement a waiting period. WebDriverWait(driver, 20).until(EC.element_to_be_clickab ...

pythonhtmlselenium