In my website design using HTML/CSS, I am working on achieving a specific layout goal:
https://i.sstatic.net/6UUwK.png
My aim is to have a div of text positioned behind an image. Although I have successfully accomplished this on a laptop screen, I am facing challenges with overlap when resizing the screen. How can I make sure that this layout remains responsive?
Utilizing absolute positions and z-index can open up a world of possibilities.
In this particular demonstration, I harnessed the power of absolute positions and percentages to maintain responsiveness, while cleverly utilizing z-index to create overlapping effects with the lower div element.
Feel free to click on Full Page to see the magic in action. I hope you find this technique both informative and inspiring.
.background {
position: relative;
width: 100%;
height: 400px;
background: yellow;
}
.image {
position: absolute;
height: 350px;
width: 30%;
background: blue;
left: 15%;
z-index: 1;
}
.imagetext {
position: absolute;
left: 50%;
}
.text {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 0;
background: grey;
}<div class="background">
<div class="image"></div>
<div class="imagetext">Lorem ipsum dolor sit amet</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>Wouldn't it be better to separate the text into a new line on mobile and position it beneath the image?
Im working on a project with a similar layout to this https://i.sstatic.net/okRL1.png I am trying to achieve a chessboard effect in my grid layout, where the last element of one row has the same background color as the first element of the next row. I h ...
My experience with CSS selectors in selenium webdriver has been positive, but I am facing difficulty in locating the element within the following div. <div class="class1 class2" dd:btnfloatingstyle="top-right" dd:entitytexttype="resultval" id="_78891a3 ...
When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...
My html form allows users to upload images, but I'm encountering an issue where the uploaded image fails the "is_uploaded_file" check for some unknown reason. I'm puzzled as to why the upload is failing the is_uploaded_file check. Any ideas? He ...
I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...
After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...
I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...
I'm struggling with the front-end development side of things (HTML, CSS, etc.) and need help aligning buttons within a container. The container will include a heading and multiple buttons. Any assistance would be greatly appreciated! Thank you in adv ...
Is there a way to create an audio player with the album cover image serving as the background, while ensuring all control buttons are displayed on top of that same image? I attempted using the following code snippet: <audio controls = 'controls&ap ...
I am in search of a way to provide my users with various "feature" choices that will assist them in creating an HTML file for an email. I already have the code ready for each feature, but I want users to be able to select a feature (such as Hero Image Head ...
I've been working on implementing a styleswitcher for my website. I successfully created a dropdown menu and saved it in localstorage. However, I'm facing an issue when trying to use the localstorage information to trigger an alert() through if a ...
I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...
After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...
Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...
Is there a way to display the header only in a small size using the col-sm-* class of the div inside a container? It seems like the col-sm-* class is not working correctly and not floating them properly. <link href="https://maxcdn.bootstrapcdn.com/b ...
Our new website, powered by Wordpress, is up and running but some users are experiencing issues with displaying Swedish special characters. It seems to be happening specifically on Android devices, regardless of the browser being used. However, I have not ...
Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...
I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...
My requirement is to have a simple text link that triggers a browse-window opening. The idea is that when users click on certain words (such as 'upload an image'), a browser window appears allowing them to select and upload an image of their choo ...
I am trying to customize the appearance of the usage bar in my Google Chrome extension by utilizing the features of the HTML5 canvas. Currently, the bar consists of a basic DIV element: <div id="idUsgBar"></div> accompanied by this CSS stylin ...