To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text.
It's important to keep the height at 30px, even with two lines of content, so that the design remains consistent.
You can view a demo of this alignment issue here: http://jsfiddle.net/ydFy5/1/
Give this a try!
p.event_desc{
background: rgba(0,0,0,0.76);
padding:10px 5px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 16px;
margin: 0 4px 0 0;
width:93%;
}
Discover a new way to specify line-height:30px
Just like this:
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
Watch the demo live http://jsfiddle.net/ydFy5/10/
In my opinion, specifying the line height should solve the issue in your demonstration.
I was able to achieve success with your sample by including the line-height property in your code.
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
To add some extra space to your p tag, simply insert an empty img element like this:
<img style="height:38px;" align="middle"/>
(The height of the image will be added to the total height and margin of your p tag)
While my website functions properly on Internet Explorer, I encounter an issue when trying to open it on Firefox. Instead of opening the page, Firefox prompts me to download the file and opens the Download File dialog. This problem also occurs at times in ...
Need help linking the main.css file in my index.html <link rel="stylesheet" href="{% static 'assets/css/main.css' %}"/> I have also included {%load static%} Here is my file structure: signup/static/assets/css/main.css In settings.py S ...
I have a <div> that I dynamically populate with <input> and <a> elements using jQuery. It looks like this: The <div> gets filled when the addServicePanel() function is called: function addServicePanel() { var wrapper = $(".m ...
Let's say I have 56 entries in my database. To display them, I am using a FOR LOOP. My goal is to add a div element after every set of 10 records. <?php $totalRecords = 56; for($i=0; $i<$totalRecords; $i++){ e ...
Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...
Struggling to create a menu similar to this using bootstrap 4. Despite my efforts, I keep encountering various issues. Is there someone who can help me solve this problem? Remember, I am using bootstrap 4. Here is a demo: <!doctype html> <html ...
Despite my best efforts, I can't seem to figure this out. I've searched everywhere for a solution but no luck so far. Is there a way to automatically display the content from http://tympanus.net/Tutorials/CSS3ContentNavigator/index.html#slide-mai ...
Looking for a way to create a simple website with HTML buttons on my Raspberry Pi that can execute sudo commands. I attempted the following method: <?php if (isset($_POST['button'])) { exec('sudo reboot'); } ?> ...
I am currently facing an issue with a template that needs proper population. The store locator on my website lists pharmacies and displays their relevant information (phone number, address, hours of operation) along with three buttons (view store, view fl ...
Currently, I am working on creating a website for a friend using an exquisite premium Wordpress theme. Despite having paid for the theme, the designer is unwilling to assist with customization. You can view the site in progress at www.zerocarbonfood.co.uk ...
My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...
Is there a way to smoothly fade in edits to elements in CSS when hovered over? I am looking to change the border from solid to dotted, but want the transition to be gradual. How can this be achieved? UPDATE: To provide more context, here is the current c ...
I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...
I'm currently developing an innovative online operating system and I am in need of a functional taskbar for user convenience. The ideal taskbar would resemble the Windows taskbar, located at the bottom of the screen with various applications easily ac ...
I'm currently working on an email template using HTML, and I've run into a roadblock while trying to create a list based on Java code data. The challenge is that the length of the list varies each time. Here's what I tried: <span st ...
Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...
It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...
I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...
I have a form on a page with multiple text inputs In addition to the form, I have implemented Zend pagination to allow users to select results. However, when using Zend paginate, the user's form inputs are lost because it is not submitted. Since th ...
If a user enters either Yes or No in a specific field, I want to display additional fields that need to be filled based on their choice. <div class="col-6"> <label for="Renda Bruta">Demonstrativo do Ano</label> ...