Tips on aligning a button next to an image

I need help adjusting my code to display a button next to an image on my webpage. I want it to look like an image button in a loop where users can download, but I am struggling with CSS. Can anyone please modify my code to meet my requirements? Thank you in advance.

<section id="content" class="smPaddingTop60">
    <div class="content-wrap">
        <div class="container clearfix">
            <div class="nobottommargin">
                <div> 
                    <div class="pressImg col-xs-12 col-sm-6 col-md-3">
                        <img img-cache  ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
                    </div>
                    <button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
                        <a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
                    </button>
                    <hr>
                    <div class="imgContainer">
                        <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
                    </div>
                    <hr>
                    <div class="imgContainer">
                        <img img-cache  ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
                    </div>
                    <hr>
                    <div class="imgContainer">
                        <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
                    </div>
                </div>
            </div>
        </div>
    </div>

javascriptcsshtmlstyling

Answer №1

perhaps this is the solution?

.the-image-class + .the-button-class {
   display: block;
   margin-top: -20px; /* adjust button position 20 pixels above original */
}

Answer №2

Upon reviewing the output, it appears that the HTML formatting may not have been done correctly.

<section id="content" class="smPaddingTop60">
    <div class="content-wrap">
        <div class="container clearfix">
            <div class="row">
                <div class="pressImg col-xs-6 col-sm-6 col-md-6">
                    <img img-cache  ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 ">
                    <button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
                        <a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
                    </button>
                </div>
            </div>
            <hr />
            <div class="imgContainer">
                <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
            </div>
            <hr />
            <div class="imgContainer">
                <img img-cache  ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
            </div>
            <hr />
            <div class="imgContainer">
                <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
            </div>
        </div>
    </div>
</section>

Answer №3

Perhaps it could look something like this:

<section id="content" class="smPaddingTop60">
    <div class="content-wrap">
        <div class="container clearfix">
            <div class="nobottommargin">
                <div class="clearfix"> 
                    <div class="pressImg col-xs-12 col-sm-6 col-md-3">
                        <img img-cache  ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">

                    </div>
                    <button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
                        <a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
                    </button>
                   </div> 
                    <hr>
                    <div class="imgContainer">
                        <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">

                    </div>
                    <hr>
                    <div class="imgContainer">
                        <img img-cache  ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
                    </div>
                    <hr>
                    <div class="imgContainer">
                        <img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
                    </div>




            </div>
        </div>
    </div>
    </section>

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

I am completely baffled as to the origin of this mysterious stylesheet in my Wordpress PHP code

I have been encountering an issue while updating my website where the original stylesheet seems to be persistent despite my efforts to replace it. I replaced the style.css file in my bluehost control panel and removed any custom css settings, but the old s ...

phpcsswordpress

What methods are available to show varying text based on the selection in a drop down menu?

Consider this scenario: when the user selects "boy", the text "Tom" will be displayed below. Alternatively, if the user chooses "girl", the text "Ava" will appear. ...

html

When attempting to access the Angular app in Edge, it automatically redirects to open in IE 11 instead

I have encountered an issue with my angular 5 App. It works perfectly fine in Chrome and Firefox, but when I try to open it in Microsoft Edge on Windows 10, the application always opens in the IE 11 browser. There are no errors displayed on the console. W ...

javascriptangularinternet-explorer-11microsoft-edge

Updating the key within an array of objects

In my array of objects, I have the following data: arrayOfObject = [{'key1': [1,2]} , {'key2': [1,2,3]} , {'key3': [1,2,4]}] I know the name of the key that I want to replace in my array : var keyString = 'key1&apos ...

javascriptarrays

Read from input file using JavaScript and upload using XMLHttpRequest

Apologies for any language barriers. I am trying to upload my (.exe) file selected using an input file: <input type="file" id="myfile"> Here is how it should be read in Javascript: var myfile=''; var input = document.getElementById(&apos ...

javascriptajaxencodinguploadbase64

CSS3 Breakdown: Hover No Longer Responding

I am currently in the process of learning coding, but I have encountered a problem that I cannot seem to solve. Initially, I had set the color for the hover effect, but somehow it disappeared and now I am struggling to bring it back. Please review my cod ...

htmlcss

What is the best way to substitute a character in a string with a specific text?

Looking to create a function that automatically replaces characters in a string with specified values. For example: let word = 'apple'; replaceValues(word); function replaceValues(value) { //Need to replace the characters 'a', &apo ...

javascriptstringfunctionreplacesubstring

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

htmlcssangulartypescript

Guide on incorporating typed components into module federation in React

I've been encountering an issue with setting the type of a custom component exposed through Webpack module federation. Though I have successfully exposed and used the component, Typescript is flagging an error regarding its type. The situation invol ...

javascriptreactjstypescriptwebpackwebpack-module-federation

Accessing the API and binding it with the nginx proxy through Express gateway has encountered a problem. The server response indicates that it is unable

I am encountering an issue with my microservices servers connected to the express gateway. The gateway is functioning properly locally, but it is unable to access other API routes within the server. For example, when trying to access from the server, it r ...

javascriptnode.jsexpressnginxexpress-gateway

Once the data in the React context has been updated, the next step is to trigger a re-render of the

In my React application, I have implemented a system where certain components will display based on whether the user is logged in or not. To ensure this state is shared throughout the entire application, I created a context file called AuthProvider: import ...

javascriptnode.jsreactjsaxiosreact-context

Unable to locate the React Native variable named "NetworkStatus"

I have been working on implementing a code to test internet connectivity using react native NetInfo from '@react-native-community/netinfo'. Unfortunately, I keep running into an error that says "Can't find variable: connectionStatus&quo ...

javascriptreactjsreact-native

Tips for accessing the selected button in notification.confirm() within a PhoneGap app

Recently, I implemented the Phonegap notification.confirm in this way: navigator.notification.confirm( 'Do you wish to proceed?', function() { console.log("Function Called"); }, 'Game Over', 'Continu ...

javascriptcordova

How come every time I try to log in with an empty shopping cart, it returns an error involving the .map function?

I'm currently working on a React e-commerce project. As part of the process, when I select products and attempt to view them in the shopping cart, I encounter an issue. If the cart is populated with items, everything works smoothly. However, if I log ...

javascriptreactjsauthenticationreact-router

The error message "The script 'physi.js' cannot be accessed due to its origin being 'null'" is encountered

Recently, I attempted to experiment with the physi.js library. I diligently followed all the provided instructions: https://github.com/chandlerprall/Physijs/wiki/Basic-Setup To my dismay, an error message popped up: Uncaught SecurityError: Failed to con ...

javascriptthree.jsphysics-enginephysijs

What is the most efficient method to use JavaScript to conceal unnecessary options?

I'm working with an HTML select element that has multiple options, and I need to be able to hide and show specific options as needed. Here's an example of my HTML code: <select> <option value="0">A</option> <option value="1" ...

javascriptjqueryhtml

Ways to evaluate negative numbers in JavaScript

I need to validate latitude and longitude values within the range of -180 to 180. If a number falls outside of this range, an error should be displayed. Below is the code I have written for this validation: if((markerPoint[0] && parseInt(markerPoint[0] ...

javascript

What is the best way to utilize the react hook useEffect just once in my scenario?

After looking into it, I realized that my question may seem like a duplicate at first glance, but upon further inspection, I found that it is not. I have come across many questions with the same title but different cases. The issue I am facing is that I h ...

javascriptreactjsreduxreact-reduxreact-hooks

What is the method for extracting search parameters as an object from a URL that includes a hash symbol?

Currently, I am dealing with a URL structured in the following format: https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333" While I am familiar with fetching query strings from a standard URL, I am struggli ...

javascriptnode.jstypescripturlurl-routing

JavaScript isn't functioning properly after UserControl is loaded via Ajax

Thank you, Stilgar for helping me solve my issue. I created a javascript file and placed all my code in it. After adding this file to the UserControl and retrieving the UserControl's html, I used $("#DivID").html(UserControlHTML). Now everything is wo ...

javascriptasp.nethtmlajax