Place the p elements outside of the divs and align them accordingly

I have a div containing multiple p elements and I need to align buttons next to certain p elements. I want the buttons to be displayed only for specific p elements, which will be controlled using JavaScript. Normally, I would put each p element in a separate wrapper div along with its corresponding button. However, I need all the p elements inside the same div to have a background image around them. The buttons should not have this background and will be round. How can I align the buttons with the p elements without wrapping each p in a separate div? Should I use jQuery to retrieve the top position of each p element and pass it to the buttons?

JS fiddle: http://jsfiddle.net/bw22yht1/

HTML:

<body>
    <div class="content">
        <div class="p-wrapper">
            <!--there is a background image here-->
            <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            <p>lorem ipsum lorem ipsum</p>
            <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
            <p>lorem ipsum lorem ipsum</p>

        </div>
    </div>
</body>

CSS:

.content
{
    width:1100px;
    margin-top:60px;
    margin-left: 200px; 
}
.p-wrapper
{
    background-image:url('bg/old-paper-texture.jpg');
    background-size:cover;
    padding-top:15px;
    padding-left:25px;
    font-size:20pt;
    margin:0px 0px 10px;
    width:700px;
}

actual page: EDIT: An image that shows what I need:

javascriptjqueryhtmlcssalignment

Answer №1

Upon reviewing your page, it appears that a simple change in approach is needed

<div class="content">
        <ol class="p-wrapper">
            <!--there is a background image here-->
            <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum</li>

        </ol>
    </div>

By making this adjustment, you will achieve the desired outcome without the need for an additional span element, as automatic numbering will be enabled

EDIT: Refer to the code snippet below for customization:

HTML mostly remains the same, simply update <ol class="p-wrapper"> to <ol class="bible"> and incorporate buttons

<div class="content">
            <ol class="bible">
                <!--there is a background image here-->
                <li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
                <li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
                <li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>

            </ol>
        </div>

CSS styling includes:

.content
{
    width:1100px;
    margin-top:60px;
    margin-left: 200px;
    background:url('bg/old-paper-texture.jpg') repeat-y;
    background-size:700px; /* adjust based on .bible width */  
}
.bible
{
    padding-top:15px;
    padding-left:25px;
    font-size:20pt;
    margin:0px 0px 10px;
    width:700px;
    color: white;
    /*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*update according to button width */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}

Further adjustments can be made based on personal preferences, but this method will deliver the desired functionality

Answer №2

If you want to position a <div> with a white background that contains a <button> next to a <p> within the same parent <div>, you can achieve this by structuring your HTML like this:


  <div class="example">
      <p>Lorem ipsum dolor sit amet</p>
      <div class="side">
           <button>Click Me</button>
      </div>
   </div>

The default behavior of <div> elements is transparent, so having them within a common parent <div> will not hide the background of the container.

To align the button properly, use the following CSS:

CSS:

p {
  margin-right:150px;
}
.example {
  position:relative;
}
.side {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:150px;
  background:white;
}
.example button {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100px;
  height:30px;
  margin:auto;
}

See the Demo for a visual representation.

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

Having trouble disabling an HTML select menu using JQuery?

My HTML page includes multiple select menus that all have the shared class name .iconDropDownMenu. During generation with PHP, some of these select menus may be hidden by PHP adding an additional class. I attempted to disable only the hidden .iconDropDown ...

javascriptjqueryhtmljquery-ui-selectmenu

The paragraph element is refusing to align with the next paragraph element on the following line

The issue I'm facing is that the paragraph element is not displaying on a separate line from the other paragraph element. body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; backgr ...

htmlcss

I'm encountering a problem with handling errors in Express.js: A critical error has occurred while attempting to execute the _runMicro

Currently, I am utilizing the Blizzard API Battle.Net to fetch information regarding a character's name and the realm they inhabit. In certain cases, a user may request a character that does not exist, prompting Blizzard to return a 404 error response ...

javascriptnode.jshttpexpress

Rotating Points in Three.js

I'm currently experimenting with a particle system project and I would like to incorporate a slight delay in the rotation of my Points Object in three.js. At the moment, I am using D3.js linear scale which results in a 1:1 rotation. This means that if ...

javascriptd3.jsthree.jsrotation

The provided argument in Typescript does not match the required parameter type, which should be a string

Encountering a TypeScript error with the following code: if (this.$route?.query?.domainName) { this.setDomain(this.$route.query.domainName); } The code snippet above is causing the following error message: TypeScript - Argument of type 'string | ...

javascripttypescript

What is the best way to create a React filter utilizing the Autocomplete component from MaterialUI and incorporating state management?

I am currently in the process of creating a filter using the Autocomplete component from MaterialUI. As I select options from the dropdown menu, several things are happening: The Autocomplete automatically adds the selected options to the Chip Array. The ...

javascriptreactjsmaterial-uireact-props

Utilizing jQuery to load content into the parent of an iframe

I am encountering an issue with a form that submits to an iframe, which then processes a coldfusion page. The coldfusion page is responsible for adding attachments to an item in Oracle based on the form input. There is a div labeled 'testing' tha ...

jqueryajaxcoldfusion

Adding scripts to a PartialView in MVC using Jquery's append function

My issue is with a JavaScript function that appends a PartialView into a div. Everything seems to work correctly, except for the fact that the PartialView contains some scripts enclosed within <script></script> tags. As a result, when these dyn ...

javascriptjqueryasp.net-mvcrazorasp.net-mvc-partialview

jQuery rounded images slideshow

Currently, I am working on developing a jquery slider that showcases rounded images. Below is the HTML code: jQuery(document).ready(function($) { var $lis = $('ul').find('li'), length = $lis.length; $lis.each(function( ...

jqueryhtml

Tips on combining JSON array elements into a new JSON array using NodeJS

Is it possible to manipulate a JSON array with 100 objects? Each object contains key values for Job Number, Tax Amount, Line Total, and Line Total plus Tax. The task is to create a new JSON array with Job Number, Total Tax Amount, Sum of Tax Items, and Sum ...

javascriptnode.jsarraysjson

How can I incorporate day, month, and year input types in an HTML form?

https://i.sstatic.net/EmgJ4.png My goal is to gather input for day, month, and year individually, just like in the image. ...

htmlforms

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

Encountering an Unexpected Identifier Error in the JavaScript Console

const blogPosts = [{ title: "Dogs are just okay", author: "Jake", comments: ["Great Post", "You're awesome!"] }, { title: "Dogs are truly amazing", author: "Dog Lover" comments: ["<3", "Get lost, fool"] } ] I am aware ...

javascriptgoogle-chromeconsole

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

calling requestAnimationFrame from within a freshly created instance

I'm encountering an issue with executing an animation. Specifically, this problem arises within var ob1 = function() {};. Once triggered, the animation runs for a brief period before I receive the error message Uncaught RangeError: Maximum call stack ...

javascriptthree.jsrequestanimationframe

Guide to positioning a logo at the center of a bootstrap navbar

I need help positioning my logo on the navbar without stretching it. How can I make sure it overlaps or doesn't affect the size of the navbar? <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-togg ...

htmlbootstrap-4navbar

The functionality of AJAX is successful when tested on a local server, but encounters issues when deployed on a live

While the following code functions correctly on localhost, it fails to work on the live server. IMPORTANT UPDATE: There's only 1 issue remaining: Upon successful execution of this AJAX block: $(".FixedDiv").addClass("panel-danger"); setTimeout(c ...

javascriptphpjqueryajax

Unusual glitch spotted on website in real-time, unexpected large circle suddenly materializes on Safari and Internet Explorer

I came across a strange issue on a live site and I need to find a solution quickly. After clicking on the "get a quote" button, a random giant circle with only a border appears on my page when loading a form via ajax. This odd occurrence is visible on Int ...

jqueryhtml

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

javascripthtmlcssangulartypescript