Is there a way to make sure that my submit button aligns perfectly with the text beneath it

I am new to coding and I need help aligning my submit button with the text "You can contact Armando through his freelance portfolio on Upwork by clicking...". Can anyone assist me with this?

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.profile-id {
  margin-left: 1075px;
  position: center;
}
<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<header>
  <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
</header>

<style>
  body {
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: 'Bungee Inline';
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
    background-repeat: no-repeat;
    background-position: center top, 100% 300px, 10% 870px;
    background-size: 100% 380px, 40%, 40%;
  }
</style>

<p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software
  development, Armando hopes to build NWDS and make a breakout appearence in the software scene.
  <br></br>
  @JadeCoder
</p>

<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can reach out to Armando via his freelance portfolio on Upwork by clicking
  <form action="https://www.upwake.com/fl/armandofrias" target="_blank">
    <input class="profile-id" type="submit" value="Here" />.</p>
</form>

javascriptjqueryhtmlcss

Answer №1

Give this a shot

<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
<span style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> Get in touch with Armando through his freelance profile on Upwork by clicking here </span><input class="profile-id" type="submit" value="Here" />.

Answer №2

Paragraphs and forms are considered Block Elements, which is why they display on separate lines.

My recommendation would be to use the following CSS:

p, form {
    display: inline-block;
}

Answer №3

One important thing to note is that you should avoid placing a "form" element inside a "p" element. Instead, consider using an "a" tag instead - 

<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;">
    To reach Armando via his freelance portfolio on Upwork, simply click
    <a href="https://www.upwork.com/fl/armandofrias" target="_blank">Here</a>
    <!--<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
        <input class="profile-id" type="submit" value="Here" />.
    </form>-->
</p>

Answer №4

Move the opening p tag inside the form tag

<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
    <p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> 
    You can reach out to Armando through his freelance portfolio on Upwork by clicking
    <input class="profile-id" type="submit" value="Here" />.</p>
</form>

Answer №5

Simply update your code with the following changes.

HTML

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

    <div class="topnav" id="myTopnav">
      <a href="#home">Home</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>

    <header>
      <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
    </header>

    <style>
      body {
        margin: 0;
        padding: 0;
        position: absolute;
        font-family: 'Bungee Inline';
        background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
        background-repeat: no-repeat;
        background-position: center top, 100% 300px, 10% 870px;
        background-size: 100% 380px, 40%, 40%;
      }
    </style>

    <p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS established its headquarters in sunny So-Flo. The company was founded with the goal of executing a variety of projects to build a strong and diverse portfolio for its founder: Armando F III. Drawing on knowledge from the FreeCodeCamp curriculum and a degree in software development, Armando aims to grow NWDS and make a significant impact in the software industry.
      <br></br>
      @JadeCoder
    </p>

    <p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> For inquiries, reach out to Armando through his freelance portfolio on Upwork by clicking
      <form action="https://www.upwork.com/fl/armandofrias" target="_blank">
        <input class="profile-id" type="submit" value="Here" />
    </form>.</p>

CSS

    .topnav {
      background-color: #333;
      overflow: hidden;
    }

    .topnav a {
      float: right;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 20px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav a.active {
      background-color: #4CAF50;
      color: white;
    }

    .profile-id {
      position: center;
    }

    form{
        display: inline;
    }

Answer №6

You seem to have mismatched elements here, but don't worry, I've fixed it for you. I have structured the text in a form that is HTML valid.

.topnav{
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
.profile-id{
  position: center;
}     
form {
  display: inline-block;
}
<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

   <div class="topnav" id="myTopnav">
    <a href="#home">Home</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    </div>

<header>
<p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
</header>

<style>
  body {
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: 'Bungee Inline';
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
    background-repeat: no-repeat;
    background-position: center top, 100% 300px, 10% 870px;
    background-size: 100% 380px, 40%, 40%;
  }
</style>

  <p style= "margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software development, Armando hopes to build NWDS and make a breakout appearence in the software scene. 
    <br></br>
    @JadeCoder
</p>

<div style= "margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;">
  <form action="https://www.upwork.com/fl/armandofrias" target="_blank">
    <label>You can contact Armando through his freelance portfolio on Upwork by clicking</label>
    <input class="profile-id" type="submit" value="Here">
    </form>
  </div>

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

Issues with Angular-Trix compatibility with Internet Explorer 10

I am currently using the Angular-trix rich text editor, which is functioning perfectly in all browsers including IE 11. However, I am encountering issues with it not working in IE10 or earlier versions. An error message that keeps appearing states: Una ...

htmlcssangularjsinternet-explorer-10angular-trix

Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...

javascripthtmljquerycss

Text about the three.js orthographic camera: "Exploring the

I'm trying to implement an orthographic camera overlay for a heads-up display on top of my main camera. I'm having trouble getting any text to show up, here's the code snippet: function setupHUD() { var width = window.innerWidth; var h ...

javascripttextthree.jsorthographic

Assign the output of an XQuery query to a variable in JavaScript

Hi, I'm facing an issue that involves using XQuery on XML data stored in a variable. Here is an example of the XML structure: <channel> <available>yes</available> <label>CNN</label> </channel> <channel> <a ...

javascriptxmlxquery

Trouble generating document with Firebase setDoc()

In my current project, I am successfully creating a new user with authentication and then using the generated UID to create a new document. Here is the code snippet: const currentUser = await auth.createUserWithEmailAndPassword(email, pass); consol ...

javascriptreactjsfirebasegoogle-cloud-firestorefirebase-authentication

Two dropdown menus opening simultaneously

Recently, I encountered an issue while using a dropdown menu within a div. Even though it was functioning properly, I noticed that when I included two dropdown menus on the same page, clicking on the first one would cause both the first and second dropdown ...

htmlcssdrop-down-menubootstrap-4

Sending a document through an ajax request from a bootstrap dialogue box

Trying to send a file to a server through a bootstrap modal using ajax. Here's the modal html: <div class="modal-body"> <div> <form class="form" role="form" id="attachform" enctype="multipart/form-data"> <input type="file" name= ...

javascriptphpjqueryajax

What is the reason for calling specific functions as "illegal invocations" in JavaScript?

Imagine this scenario: var q = document.querySelectorAll; q('body'); Suddenly, an "Illegal invocation" error pops up in Chrome. It's puzzling why this happens, especially considering that not all native code functions behave this way. Tak ...

javascriptinvocation

Although HTML and CSS files may be similar, the way in which styles are implemented can vary greatly from one

Working on a project locally, I noticed different styling on one element between two repositories. Despite the HTML, CSS, and JS files being identical according to WinMerge, there's an inconsistency with the bootstrap class card-img-overlay. The issue ...

htmlcssbootstrap-4

Using jQuery to create and access global variables

Here's the code snippet in question: var products = []; $(document).ready(function($){ $.fn.load_products = function(){ $.getJSON('/restaurant/get_products',function(data){ products = data[0]; a ...

jquery

Utilizing the :before pseudo-element in input fields

I'm looking to insert some additional content before the first input field in the provided HTML markup without making any changes to the existing structure. I want to achieve this using the :before pseudo-element. Although I've attempted to do s ...

htmlcss

CSS division nested within the center float division

In my attempt to design a 3-column home layout, I have successfully styled the center, left, and right sections. However, I am facing difficulty in placing two sliders within the middle class. My goal is to have slider1 positioned on top inside the middle ...

htmlcss

Encountering NotFoundHttpException with Jquery Ajax in Laravel 4

Hello everyone! I'm diving into the world of ajax and currently experimenting with sending form input to a controller through a route and then displaying it in a div. Unfortunately, I've hit a roadblock as I keep getting a NotFoundHttpException ...

javascriptphpjqueryajaxlaravel-4

Refine Your Search Findings

I have a code snippet that enables searching items from a dropdown menu with a search bar, but now I want to remove the dropdown and only keep the search functionality. How can I modify the code to separate the select feature from the independent search ...

javascriptjqueryhtmlcssangularjs

Performance of Nested Menus: A Technological Perspective

In an effort to condense a long stay, the marketing team is requesting our entire sitemap of 5000 pages be accessible through one menu. Despite a year of resistance, we have come to accept that this is inevitable and are now exploring potential technologie ...

javascriptreactjsmenu

Create a prototype class in NuxtJS Vue

What is the correct way to set a class to prototype in Vue NuxtJS? I have created a plugin Here is my nuxt.config.js file: plugins: [ { src: "~/plugins/global.js" }, ], The global.js file contains: import Vue from "vue"; import CustomStore from "dev ...

javascriptvue.jsnuxtjs

How to initiate a click event with JavaScript through C# in a WebBrowser control

Can the click function be triggered from a C# application? Below is the code that defines the function: $('#connectbtn').unbind('click').attr('disabled', false); $('#connectbtn').bind('click', ...

c#javascriptclickwebbrowser-control

Uh-oh! Trouble loading web app dependencies: 404 Error

Currently, I have a functional SailsJS boilerplate application. The next step I am trying to undertake involves integrating Angular-Material as a dependency in order to kickstart some UI development tasks. However... After installing angular-material usin ...

javascriptangularjssails.jsbower

Is the search feature in the Bootstrap 4 dual listbox plugin experiencing issues?

Using the filter option in Bootstrap 4 dual listbox, I noticed that when two results appear and I select the second option, the first option is automatically added to the list. https://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Boot ...

javascriptjqueryhtmlbootstrap-4bootstrap-duallistbox

Page not found: unique error on alternate route

My website has different paths and pages in hbs format, such as root, help, and 404. The problem arises when I navigate to localhost:3000/wrong, the site displays correctly, but when I try localhost:3000/help/wrong, the CSS is not applied to the 404 page b ...

cssnode.jsexpresshandlebars.js