Can someone help me figure out why my announcement is showing up in the wrong place on different browsers? Here's the code:
This is my HTML code: and this is my CSS code:
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}<div class="announce">
<div class="header>
<img src="img/logo.png">
</div>
</div>Adding bottom:0 to the .header class caused its height to increase towards the top instead of staying fixed at 130px. I hope this explanation clears things up for you. Thank you!
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>It is not possible to place nested divs independently; you must use separate elements instead. Take a look at the example below.
declare {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}<div class="declare">
This is a declaration
</div>
<div class="header">
<img src="img/logo.png">
</div>I have implemented the code based on the example image you provided. If needed, you can customize the height of the announce and header.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>To apply the margin to .header img, you need to follow these steps:
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>When styling customer initials within a circle, I sometimes encounter issues with font alignment, as seen in the image below where EW is not centered properly. In this code snippet, I am using border-radius to create circular shapes for displaying custome ...
Looking for a way to create a dynamic animation using JQuery and .css? This code will rotate letters left, then right, then left, then right again while moving up. $('.envelope').click(function() { $(this).find('.list') .animat ...
I have created a JavaScript function that displays a table when a user hovers over specific text on a website. Currently, the table's content is hardcoded with a few words for debugging purposes and it appears as expected. The HTML code for the cont ...
Currently, my code looks like this: <?php $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "password"; $mysql_database = "test_db"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Oops s ...
In today's world, we often use CSS modules or other methods to hide classes and IDs. However, there are times when we need to select elements using JS selectors, and that can be a bit tricky. Let's take an example. If we look at the home screen ...
Despite the abundance of resources on properly preloading fonts, I have yet to find a solution that works seamlessly on both Firefox and Chrome. My current method includes: <link rel="preload" href="URL" as="font" type=&qu ...
Looking for some assistance on how to create animations for shapes on a canvas, specifically having them bounce back after hitting the edge. I'm facing an issue where my ball has velocity but my other shapes do not. Here's the code I've been ...
class Index extends React.Component { state = {isLoading: false} onSubmit = (event) => { console.log('here we go'); event.preventDefault(); // this.checkEmailExistance(); }; render() { return ( ...
I have been working on designing two pages for a website. I am looking to use JavaScript to ensure that when a link on page 1 is clicked and the user transitions to page 2, the second tab button (btn) will have an id of "default" and receive the activate c ...
I am trying to incorporate two owl-carousel sliders on a single HTML page. For example, I want owl-carousel1 in row 1 and owl-carosoul2 in row 2. <div class="item"> <!-- Item Image --> <div cl ...
I'm encountering an issue with my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= ...
Currently, I am working on a project using React Material UI along with TypeScript. In one part of the application, there is a Material UI Table that includes a column of Material TextFields in each row. The goal is to highlight the entire table cell when ...
Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...
Is there a way to toggle the class of a button when it's clicked and revert it back to its original state when clicked again? $scope.like_btn = "icon ion-ios-heart"; $scope.like_btn2 = "icon ion-ios-heart assertive"; $scope.likepic=function() { e ...
I am working in TypeScript with an array of objects: array: [ { prop1: 'string1', prop2: this.createEmailLink('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfaaa2aea6a38faaa2aea6a3e1aca0a2">[email ...
Hey everyone! I'm facing an issue but my English isn't great. I'll do my best to explain it thoroughly, and if anything is unclear, please feel free to let me know! So here's the problem: today there's a block for users to upload p ...
Let's get straight to the point. Here is the code snippet that's causing me some issues: <p id="mainBlock"> <img src="/icons/128x128.png" id="icon"> <h3>App name</h3> <span id="version"></span> < ...
Whenever I try to submit a form by clicking on span id="ToolBarDownload", the form id="myformID" doesn't seem to get submitted. Can someone help me figure out what's wrong with my code? Any suggestions are greatly appreciated! Thanks! Also, just ...
I am looking to select the Store Pickup Available checkbox on the following page: http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1& ...
In the process of developing an ASP.NET MVC application with Bootstrap for view layout, I encountered a challenge specific to multiline Textareas and their width behavior. The target browser for this project is IE 10+ and my goal is to restrict the maximum ...