Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one.
Here's the example I have in mind:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
I assume that the anchor tag would have a background: url(big-tile-1) set to top no-repeat; The big-tile itself will have fixed width and height. But I'm unsure how to style the h1 element. Any assistance would be greatly appreciated!
If you are looking to create a similar effect, you can try the following approach: Check out this JSFiddle Demo
Here is the CSS code:
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Alternatively, if you prefer having the image in the markup instead of as a background image, you can also achieve this by following this link: http://jsfiddle.net/UFUq5/3/
HTML
<a href="#">
city<br />
park
</a>
CSS
a {
display:block;
height:500px;
width:350px;
background-image:url(http://exampleimage.com);
background-color:blue;
background-size:350px 350px;
background-repeat:no-repeat;
padding-top:400px;
padding-left:50px;
box-sizing:border-box;
color:black;
text-decoration:none;
font-family:sans-serif;
font-size:22px;
border:15px solid #808080;
}
Essentially, the big-tile-1 class may not be necessary, but you have the option to implement a similar approach, like shown here: http://jsfiddle.net/RU23A/1/
To enhance this further: 1. Incorporate an image into the background URL 2. Modify the font style to match the specified font.
If you want to achieve this effect:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> city <br> library </h1>
</a>
then apply the following CSS:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green; //customize as desired
color: white;
padding: 10px;
font-family: Arial, sans-serif; //select your preferred font
font-size: 20px;
}
Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...
I've been exploring Spring Boot, Thymeleaf, and frontend development in general. Currently, I have a frontend table that displays a list of objects from the backend, along with a form to allow users to view properties of each item in the list. Howeve ...
Encountering an issue with jquery-2.1.4.js. Upon integrating a layerslider into my website, the script modified div classes. Attempted using older versions of the script without success. Currently have classes as follows: <a href="#" class="col-md-3 ...
I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...
Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...
Looking for a way to select all elements with the class .tab-pane except for those with the id #home. I attempted using .tab-pane:not#home{...}, but it proved unsuccessful. Any ideas on how to achieve this? Sample HTML <div id="home" class="tab-pan ...
It seems like a common issue with a straightforward solution. I have numerous CSS selectors scattered across various files, many of which may be unnecessary and a directory full of HTML files. My goal is to identify all redundant selectors in my CSS within ...
I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...
I am working on a project where I have a list of dates and I need to format them by adding div tags to separate the days, months, and years into different divisions. <div class="campaign">30/11/2016 - <a href="#" target="_blank">Dummy Text& ...
After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...
I am looking to showcase two span elements, one below the other. Take a look at my HTML code snippet <img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? que ...
In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...
I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...
Having two stacked div elements containing images, I want the div with id = "features3_HDS_image" to become visible when a user hovers over the div with id = "HDS_Blurb", and the div with id = "features3_FH_image" to be displayed when hovering over the div ...
In my code, a list is generated dynamically and each list item has a special id. I am trying to store each li "id" in one array. This is JavaScript code: var i = 0; $("ul#portfolio li").each(function(eval) { var idd = new Array(); idd[i] = $(this ...
It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...
Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...
I'm currently facing a challenge with a table on my webpage that displays data but isn't scrolling all the way to the bottom. This code was implemented by previous developers, and as someone who isn't well-versed in CSS, I'm struggling ...
I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...
Similar Question: How can I achieve this through AJAX? After my previous attempt at asking this question, where I was not clear enough, I am making another effort to be as specific as possible. To start with, I have my data encoded using the json_enc ...