I attempted to include 3 divs in order to apply a top and bottom border image to my mainContent div, but unfortunately I was unable to get it to align correctly. Is there a straightforward way to adjust this code to incorporate the blue border at the top and bottom of the primary white section?
For reference, please visit:
You can view an example of the desired border effect here:
.............check out the live demo
If you want to add a border with CSS to your mainContent, you can use the following code:
#mainContent.grid_14 {
border-top:solid 10px;
border-bottom:solid 10px;
border-width:10px;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
}
View the live demo here.
For more information about creating image borders with CSS, check out this helpful link.
Not only can you implement these solutions, but you can also use the same background for both your #footer and #mainContent elements.
For example:
#footer {
background-image: url(img/img-blue-border.png);
background-color: #C39C5B;
background-repeat: repeat-x;
background-position: top;
text-align: left;
font-size: 11px;
padding: 15px 0;
}
#mainContent {
margin-top: 15px;
padding-bottom: 20px;
background-image: url(img/img-blue-border.png);
background-color: #fff;
background-position: top;
background-repeat: repeat-x;
}
See a live demonstration here.
To achieve the desired outcome, utilizing pseudo-classes :before and :after is essential. Check out the demo below for reference:
HTML
<div id="mainContent">
asfdasdfafafafaf
</div>
CSS
#mainContent {
background:white;
margin-top: 15px;
width:500px;
height:500px;
position:relative;
border:1px solid red;
}
#mainContent:before {
background:url(http://i.imgur.com/lPj6H.png) no-repeat 0 0;
position:absolute;
content:"";
width:500px;
height:7px;
top:-8px;
}
Follow this layout:
<div class="container">
<div class="line"></div>
<div class="box"></div>
<div class="line"></div>
</div>
// CSS
.container div {
clear:both;
}
.line {
width:100%;
margin:0;
padding:0;
height: //height of element;
background-image:url(image.jpg);
background-repeat:repeat-x;
}
There is an input box with a cross icon that clears the input when clicked. The icon is visible even when the box is empty, which may not make sense. It would be better to show the icon only when the user starts typing. How can I detect when the user start ...
After extensively searching this forum, I couldn't find a solution to my bootstrap issue. Here's the code for two forms on my page: <div class="row justify-content-md-center"> <div class="col-sm-6"> <f ...
My input field behaves like a chat box where users can enter text that gets displayed on the page. However, I've discovered that users can also include HTML tags in their inputs to manipulate the output. For example, entering <b>Hello</b> ...
I am struggling with a weather web API that is only showing old data when called in the code. However, when I enter the API URL directly into the browser, it displays the most up-to-date information for the current city. Can anyone help me troubleshoot why ...
Currently, I am working on developing a basic Google Chrome extension with 2 or 3 browser actions. I have been using Selenium IDE to capture the necessary steps in Firefox that I need for my project. However, I am unsure of how to translate these recorde ...
I am currently working on a web application that loads new pages without requiring the browser to reload. While some pages load perfectly fine, others are causing errors due to missing scripts. The code snippet below is used to load a new page: function lo ...
How can I determine the maximum number of pixels scrolled on a webpage? I attempted using window.pageXOffset, but it only gives the current scrolled amount. I require the total size at all times. ...
I am currently attempting to connect my Node.js API with my HTML pages. For the most part, everything is functioning correctly, but I have encountered some confusion along the way. Is there a more efficient method for redirecting an HTML page? Typically, ...
I am currently working on a Bootstrap 4 carousel and using Jquery to fetch and display images. The images are named from 1.jpg to 72.jpg. Everything seems to be working fine except that when I click on an image, the indicator thumbnails highlight the wrong ...
I want the text on my slider to smoothly fade in as it enters the view (my Elementor builder includes a carousel-type slider). To achieve this effect, I included the following code snippet in the header section of my page: <link rel="stylesheet" href ...
I am attempting to achieve a sliding effect for the gray panel. My goal is to have the entire div (with a gray background) slide out when clicking on "target 1", "target 2", or "target 3" before the other colored panels slide in. Subsequently, when the u ...
I have been attempting to integrate Bootstrap into my Angular project. Firstly, I used npm install --save bootstrap to add Bootstrap to my project. Following that, I installed jQuery as well. I then specified the path for Bootstrap. Displayed below is an ...
I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...
Is there a way to display two or more Bar charts together in a single html file using Bokeh? I have found examples of laying out figures like triangle, square from bokeh.plotting together on this page: However, I have not been able to find any examples s ...
I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...
I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...
Looking to incorporate the pagify.js plugin into my website by following the steps on Github. After downloading the repo, I tried opening the index page in Chrome for a preview, but encountered errors (see image). https://i.sstatic.net/WHOWS.png Need h ...
Ever since I switched to Angular 4, my CSS seems to have stopped working. While constructing the basic template for my app, I am encountering some challenges with CSS not being applied correctly to DIVS due to the generated Component DOM element of Angula ...
When hovering over each ul li element, a new element is added to the right side of the text. The alignment of the text is centered by default, but upon hover, the alignment changes when the new element is added. However, the issue is that the alignment s ...
Currently, I am utilizing the robust Kendo UI HTML Framework within my web application for its exceptional support of MVVM functionality. While I appreciate the convenience that Kendo offers with MVVM, I am in need of a solution that allows me to leverage ...