Am I on the right track with my code?

Is the code I've written sufficient to position text above an image? It resembles the orange "Ask Question" button on StackOverflow, but without being a clickable button or link. The text is surrounded by an orange color and it works fine, but I'm curious if the code looks elegant or not.

//css
    .date
    {
        float : left;
        width : 100px;
    }
//html   
<div class="date">
    <img src="orange.png">
    <div style="margin-top:-18px; margin-left:6px; color:#fff;">22.11.2012
    </div>
</div>

Ultimately, the text is positioned directly above (in the center) of the image.

cssimagehtmltext

Answer №1

It would be ideal to have something similar to this:

CSS:

.event-date {
    padding: 5px;
    background-color: orange;
    color: #fff;
}

HTML:

<span class="event-date">
    October 12, 2021
</span>

Either way, it's recommended to learn the basics of CSS. A quick search led me to a potential starting point such as this resource.

Answer №2

It appears to me that the code is a bit cluttered. An alternative approach would be to create an anchor styled like a button with the following CSS:

a{
padding: 7px;
background-color: orange;
text-decoration: none;
color: black;
font-family: helvetica;
}

a:hover{
background: grey;
}

Here is an example ​

Answer №3

Since your main concern revolves around the code's aesthetics, I suggest implementing the following:

// styling in CSS
.date {
    float: left;
    width: 100px;
}
.date div {
    margin-top: -18px;
    margin-left: 6px;
    color: #fff;
}

// structure in HTML
<div class="date">
    <img src="orange.png">
    <div>22.11.2012</div>
</div>

The negative top margin might not be needed if you can incorporate line-height:, but using this approach would likely give a more polished appearance. It's generally best to avoid inline CSS.

I hope this advice proves helpful!

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

Troubles with CSS in MUI Component Integration

How can I successfully implement a vertical timeline using Material UI in React? I've set it up, but the CSS isn't functioning as expected. Is there an error in my implementation? List of Dependencies: "@emotion/react": "^11.11.1& ...

cssmaterial-ui

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

The height and rows of a textarea element do not adjust properly to the content in FireFox

Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...

htmlcssfirefox

Adding npm packages to your Vue.js application

My Vue app is structured like this (auto created by vue init webpack myProject): index.html components/ -main.js -App.vue I am trying to include npm packages, such as https://github.com/ACollectionOfAtoms/atomic-bohr-model. Following the instructions, I ...

javascripthtmlnode.jsnpmvue.js

Collapse the Bootstrap Menu upon selecting a Link

I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is a single f.select impacting another f.select in the same form? (undesired)

I am facing an issue where adding a new HTML element like: <%= f.date_select :date, { id: "date-select"} %> is impacting my existing collection select: <%= f.collection_select :id, Customer.where(business_id: current_c ...

javascripthtmlruby-on-railsrubyajax

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

javascriptjqueryhtmlcssjquery-ui

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

javascripthtmlworkflowstylusroots-toolkit

Adjust the dimensions of a button in Jquery Mobile using a designated class

I am in the process of creating a Mobile App using Jquery Mobile, I'm aiming for a result like this: Unfortunately, what I end up with is this: I prefer not to utilize .ui-btn in my CSS, as I have already specified custom-btn. Here's the code s ...

jquerycsshtmljquery-mobile

angular2 utilize rxjs to search for threads based on user input

Hey there! I'm working on creating a mini forum inspired by stackoverflow and I'm currently in the process of adding a basic text filter for thread titles. I've recently delved into rxjs and pipes, and this is what I've come up with so ...

textfilterangularrxjs5angular2-pipe

Utilizing JavaScript to dynamically alter an image based on selected dropdown option

I am currently facing an issue with my code where the selected image is not changing when I choose an option from the dropdown list. There are a total of 5 images, but for some reason, they are not displaying correctly. Here is the snippet of my code; < ...

javascripthtml

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

How can I modify the content within a scoped `<style>` tag in Vue?

Is there a way to dynamically change the contents of a <style> block in my Vue component using Vue variables? Many commonly suggested solutions involve inline styles or accessing the .style property with JavaScript. However, I am looking for a metho ...

cssvue.js

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

jqueryhtmlautofill

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

jQuery "slide" animation without using <br>

I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the tri ...

javascriptjqueryhtmlcssjquery-ui

Adjust the size of an Angular component or directive based on the variable being passed in

I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...

javascripthtmlangulartypescript

Encountered a data retrieval issue while accessing my post.html.erb file

Unfortunately, I am unable to provide specific details about my issue as I am unsure of the exact cause. /db/migrate/XXXXXX_create_restaurants.rb ... t.string :restaurant_name t.string :restaurant_addr ... /app/controllers/restaurant.rb def post @res ...

htmlmysqlruby-on-rails

Tips for setting the textfield value in JSP using Javascript

I am in need of a way to create a random number that will be displayed in the textfield once the user clicks on the "Generate" button. Can someone guide me on how to assign the value of the "output variable" to the "randomNum" textfield? Sample HTML code: ...

javascripthtml