HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attempted using the position : absolute CSS property.

Here is the code I have been working with:

div#quote-layer {
    background-color: rgba(255,255,255,0.25);
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding : 25px;
    width: 450px;
}

div#open-quote {position: absolute;
    left: 666px;
    top: 600px;
}

div#quote-layer p {
    text-align: center;
}

    <div id="quote-layer">
        <div id="open-quote">
            <img src="img/quotes.svg" width="100" height="100">
        </div>
        <p>
            This is where my amazing quote goes!
        </p>
    </div>

I am looking for a more effective way to implement this. Any suggestions would be greatly appreciated!

htmlcss

Answer №1

This is the method we use in CSS for achieving such tasks:

div#quote-layer {
    position: relative; // a crucial change to make
}

div#open-quote {
    position: absolute;
    left: -30px;
    top: -30px;
}

You have the flexibility to adjust the pixel values according to your requirements. Additionally, you have the option to eliminate the <div> wrapping the <img> and assign the id #open-quote directly to the <img> instead, as the div serves no purpose in this scenario. For a deeper understanding of these concepts, I would suggest reading this article:

Answer №2

In addition, I prefer utilizing the ::before selector for this purpose.

div#quote-layer {
    background-color: rgba(255,255,255,0.25);
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding : 25px;
    width: 450px;
}

div#quote-layer p {
    text-align: center;
}

div#quote-layer p::before {
    background-image: url("https://cdn2.iconfinder.com/data/icons/web-kit-2/64/web_quote-512.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px; 
    height: 20px;
    content:"";    
}
<div id="quote-layer">
  <p>
    This is my incredibly beautiful quote!
  </p>
</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

Using jQuery to create a nested table

I have a table that I would like to customize so that when a user clicks on a row, only the child table under that specific row is visible while the child tables under other rows are hidden. How can I achieve this using jQuery? <table class="mainTabl ...

jqueryhtmlhtml-table

Validation of Button Groups and Automatic Disabling after Initial Click with HTML, CSS, and JavaScript

Criteria: Upon clicking a button from the selection of four buttons, all other buttons should become disabled except for the Next button. An alert window must appear when the Next button is clicked without selecting any other buttons, preventing navigatio ...

javascripthtmlcss

Interactive Div that Adapts

Hello everyone, I'm new to this forum and seeking some assistance. I have a requirement where multiple div contents need to fade in and out dynamically. I found this jsfiddle example that works for 2 divs, but I want it to work for more, say 5 differ ...

javascriptjqueryhtml

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly... This is how it currently appears: https://i.sstatic.net/ZJUyT.png I need the tooltip to display above the white d ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Adjust the image size using CSS within the containing outer div

I am trying to adjust the width of an image using css within typo3. Unfortunately, I only have access to the outer div container which is the custom border of the content element. To make the change, I added the following line to my css file: .Bild-Starts ...

csstypo3

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

Include an extra hyperlink in the adaptive menu bar

I have successfully created a responsive Navigation bar. Now, I would like to add an "Account" link on the right side of the navigation. My initial thought was to insert a div into a ul element, but I realize that this may not be W3C compliant. <div c ...

javascriptjquerycssresponsive-designnavigation

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...

cssangularsass

Looking for an element that includes "== $0" right after the closing tag in HTML can be done using Xpath, CSS, or any other locators in Selenium with Python

a link to an image <div class=""><div>Mumbai, Maharashtra</div></div> Take a look at the above example for guidance. I attempted to use the code below but it failed to produce results: driver.find_element(By.XPATH,'//di ...

pythonhtmlseleniumselenium-webdriverweb-scraping

What is the best way to retrieve the data submitted in the Input field by using Ajax?

One feature I'm working on involves an input field within a form where users can update their name by clicking a button. The goal is to capture this change in the input field using Ajax and update it accordingly. Here's the HTML code snippet: & ...

jqueryhtmlruby-on-railsajaxcoffeescript

Subheaders that stay in place while scrolling through a table with a stationary header

My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they rea ...

javascripthtmlcsshtml-tablefixed-header-tables

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Align watermark content to the far left side

Having trouble getting my watermark to align properly on the left side of my website's main content. Here is how it currently looks: https://i.sstatic.net/Nfhh5.png The issue arises when I resize the screen or switch to mobile view, as the watermark ...

htmlcssreactjstypescriptbootstrap-4

Tips for eliminating additional white space within a bootstrap row

I'm having trouble removing the extra space on my website while using Bootstrap 5. I've tried various Bootstrap classes like pr-0, mr-0, p-auto, m-auto but none of them seem to work. I also attempted using CSS margin-right: 0; but that didn' ...

javascriptphpcssbootstrap-5

Working with jQuery: Retrieving the ID of an element that is generated dynamically

Looking for some guidance: I'm working on dynamically creating a table based on the response from an AJAX call. The table includes headers and rows, with new rows added using the "after" function. However, I'm facing an issue with accessing the ...

javascriptjqueryhtmlajax

Achieve full coverage of a table cell with jQuery by making a div span its entire

Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/ To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there ...

jqueryhtmlcssbackground-color

What technique is used in this CSS code to give each line of text a unique horizontal color gradient?

I stumbled upon a fascinating jsfiddle that can create color gradients on specific lines of text. Each line has a unique two-color gradient applied in a consistent pattern: Black to Red, Red to Black, Black to Blue, and Blue to Black. Despite its intrigui ...

css

Unable to get CSS First Child Pseudo Element to Work Properly

I'm having trouble with this code in CSS and would appreciate any help. I can't figure out why the margin-left won't apply to the first i element. Below is the CSS I'm using: header.site-header .right_side_menu i:first-child { marg ...

htmlcsscss-selectorspseudo-element

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

htmlcss

jqGrid is throwing an error: undefined is not recognized as a function

Currently, I am in the process of trying to display a basic grid on the screen. Following the instructions provided in the jqGrid wiki, I have linked and created scripts for the required files. One essential css file, jquery-ui-1.8.18.custom.css, was missi ...

javascriptjquerycssjqgrid