Is there a way to implement borders using images in CSS/HTML that does not involve CSS3?
I am working with three border tiles: left, right, and bottom. I want them to repeat-x/y to the left, right, and bottom of my content container.
I attempted to use div containers around my content container, but I struggled with setting the properties correctly...
Is this the most effective approach?
Here is an example of the HTML structure to use: ( see explanation below )
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="bot"></div>
</div>
And here is the CSS code to include:
.container {
position: relative;
padding: 5px; // adjust according to border image size
}
.container .left {
position: absolute;
left: 0;
top: 0;
background: url(border_left.jpg) repeat-y;
width: 5px;
height: 100%;
}
.container .right {
position: absolute;
right: 0;
top: 0;
background: url(border_right.jpg) repeat-y;
width: 5px;
height: 100%;
}
.container .bot {
position: absolute;
left: 0;
bottom: 0;
background: url(border_bot.jpg) repeat-x;
width: 100%;
height: 5px;
}
The concept behind this code is as follows:
To see a visual representation, check out this jsFiddle which uses background colors instead of images.
Note that the borders may overlap at the corners, which can be resolved by creating additional corner images to position in those areas.
One idea is to add a repeating background to the bottom of the container, add bottom padding, set the position to relative, and use :after and :before to add borders on the sides :) Unfortunately, I don't have time to write out the code right now :(
I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...
During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...
Currently, I am in the process of learning nodejs and I am looking to dynamically change the content within my HTML without having to completely re-render the entire page every time I make a post. Below is the snippet of code I am currently working with: ...
Currently, I'm working on a project for a client that involves showcasing their YouTube videos on a webpage. I've come up with a creative solution using z-index to place the YouTube iframes inside images of televisions. However, I've encount ...
Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...
Upon retrieving HTML content from an API, I am faced with the task of processing it. Here is a snippet of the data: [ { id: 1, content: '{html...}' }, { id: 2, content: '{html...}' } ] A ...
Looking for ways to incorporate audio into your GWT app? I am considering creating a simple game, but it seems like there hasn't been much progress on direct audio support within GWT. This is likely due to the lack of underlying browser support, but I ...
My json file contains a wealth of information. Here is a snippet: { "ListProductsResponse": { "Products": [{ "VatAmount": 0, "VatFormat": "Percent", "Bonus": { "AdditionalValue": 0, ...
I am currently working on a website project for one of my college courses and I have encountered an issue with the button heights in my slide show not matching up. I'm seeking advice or tips on how to align both buttons to have the same height. Can an ...
Whenever I click the button, it always redirects to just story.php, ignoring all other details. I attempted using JavaScript but I found that utilizing form action is the closest method for me to accomplish this: <form action='./story.php?u=$id&a ...
Despite attempting the solutions provided in previous threads, none of them have been successful for me. Can someone please lend a hand with this issue? https://i.stack.imgur.com/sGRsn.png ...
Looking to make some elements on a website more flexible with media rules. I want a toolbar to open when clicking an element, allowing me to change CSS styles for specific media rules. Initially thought about using inline style, but it turns out media rul ...
I am experiencing an issue with my jquery stock ticker. It displays the latest stocks including Company Name, stock price, and percentage changed. The stock price can be in GBP, USD, or YEN, but the current ticker does not indicate the currency. I attemp ...
Recently, I delved into working with three.js and webgl for a personal project. My goal was to develop a wardrobe model based on user input. You can check out the project at this link: Initially, the rendering speed was fast and smooth without Materials a ...
I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...
My latest creation is a static advert ticker positioned at the bottom of the window. It's contained within an <iframe> for easy placement on other websites. I added a <span> around the <iframe> to keep it fixed at the bottom of the s ...
I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...
I created a template form based on various guides, but they are not working as expected. I have defined two models: export class User { constructor(public userId?: UserId, public firstName?: String, public lastName?: String, ...
I've been searching through various resources for a solution to the issue I'm facing. My goal is to iterate through a JSON object and extract all the ids and corresponding dates from each top_worst section. The structure of the JSON data is as fo ...