I am struggling with text placement within a div. I'm working on positioning the image in the top right corner (which I've achieved) and centering the bottom text inside the box.
For reference, this is what I aim to accomplish: http://jsfiddle.net/Lucky500/Nq769/
I've created a div named .bottom_box and included the following code:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there a simpler or more appropriate approach to achieve this?
Here are some improvements:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
To achieve the desired layout, follow these steps:
Start with the following HTML structure:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Apply the CSS styles below:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demonstration purposes */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
If you have a floated image, make sure to clear the .bottom-box to avoid overlap.
You can add white space using the margin-left property on child elements.
Check out an example here: http://jsfiddle.net/audetwebdesign/3SjRG/
If you want to center the content of p and h1, use text-align: center. The alignment depends on whether you prefer ragged left or ragged right text block;
To center the content, it's recommended to utilize text-align:center and position: absolute
Check out this demo
We have a few options to consider.
Another approach is to set the box as relative and then position the text and image within it as absolute.
One approach could be to create a bordered container div for your box and use absolute positioning for the inner divs containing the image and text. Position the image in the top right corner with 'top:0; right:0;' and position the text using 'bottom:xx; left:yy;'. This method offers an alternative to what you have tried before. As long as it functions correctly, is versatile, and straightforward, it can be considered valid. Programming provides various solutions for the same problem.
As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...
Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...
To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...
Below is the HTML code snippet: <tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> <input type="checkbox" name="row-{{i}}-{{j}}" [ ...
Hey there! I'm having a little trouble with my background image in HTML. It's showing up multiple times in a row and despite searching online, I can't seem to find the right solution. Here is the code snippet from my file: <!DOCTYPE html& ...
I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...
Having an issue: I am working with a basic unordered list of truncated posts. Each post should expand when clicked using the .replaceWith method. However, I am facing a problem where clicking on any post returns the content of all posts in the list instead ...
I'm currently trying to find a specific element using selenium webdriver: <div class="lv-product__details"><div class="lv-product__details-head"><span class="lv-product__details-sku"> M40712 ...
While working in the Moodle platform (version 3.5.7) using the Atto editor in both Chrome and Firefox, I have been attempting to assign an ID to a specific row class called "span9". My main goal is to give this element a unique ID and then reference it wit ...
I am facing an issue with an animation that moves in one direction. I am looking to reverse the animation so it goes back to its original position: $('#right').click(function() { $('.container').removeClass('.move-left'). ...
Currently, I am working on a table that involves phone numbers, subscription status, and groups. However, I have encountered an issue where the incoming date is not aligning properly in my table. It seems to be a simple HTML problem, but I am struggling to ...
I'm working on customizing a QPushButton that has round corners: https://i.stack.imgur.com/g8zfs.png When the mouse hovers over the button, I want to change its style: https://i.stack.imgur.com/SDm79.png To achieve this, I utilized setStyleSheet f ...
My design features a left-side column aligned with container padding, while the right side column spans full width and touches the scroll. Check out the design below: https://i.sstatic.net/w8iCO.png I'm looking to achieve this design using Bootstrap ...
Essentially, I am using a loop called .each to go through some data. For each item in the data set, a span class is appended to the DOM. $('.selected_cont').append('<span class="' + classes + '"></span>'); The va ...
For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...
I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...
Here is the code I am working with: td { border: 1px solid #cecece; position: relative; padding: 80px 20px; } .hint { background: yellow; position: absolute; top: 0; bottom: 0; left: 100px; } <table style="width:800px"> <tr> ...
While attempting to create a dropdown box in Angular by following these examples, I am encountering inconsistent results. Below is the code I have used: HTML <button (click)="eqLocationDrop()" id="eqLocButton"><i class="fas fa-caret-down">< ...
I have integrated a jquery slider add-on into my project that updates a value in a Linux file whenever it is manipulated. The slider is connected to a text input box, which is set as readonly and therefore always blurred. The issue I am facing is that the ...
Currently, I am dealing with a two-column layout where both columns have a height of 100%. Everything seems to be working fine in that aspect. However, an issue arises when the content in the left column expands due to a dropdown menu being activated. Be ...