What steps can I take to resolve this CSS problem?

I'm trying to create a box around specific html elements, but the current code is causing each element to be enclosed individually. I don't want to use the html or body element as I have other elements that need to remain outside of the box.

h1, p {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

        </style>
        </head>
        <body>
            <p>this content should be inside the box</p>
            <h1>this content should be inside the box</h1>
            <h2> this content should not be inside the box</h2>
htmlcss

Answer №1

It is important to have a designated element to apply the border to. One option is to use the body tag in your CSS styling.

<style type="text/css">
body {
            width: 300px;
            padding: 50px;
            border: 20px solid #0088dd;
            text-align: center;}

</style>

However, it's worth noting that placing a border on the body tag may not be considered best practice.

An alternative approach would be to define a class for the styling:

<style type="text/css">
.boxme {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

    </style>
</header>
<body>
    <div class="boxme">
        <p>lol</p>
        <h1>Thanks for helping</h1>
    </div>
    <p>Other text</p>

Answer №2

Consider implementing something similar to this...

 <div class="custom-border">
       <p>haha</p>
       <h2>Appreciate the assistance</h2>
  </div>

.custom-border {
        width: 350px;
        padding: 60px;
        border: 25px solid #0099ee;
        text-align: center;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

htmlcssflexbox

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

Show the JSON information found on a specific website URL

I need help figuring out how to display a json file on a web address so that Swagger UI can recognize it. When I visit , I see json data and can save it as a .json file. However, I'm struggling to replicate this using html. Here's what I've ...

htmljsonswaggerswagger-ui

Displaying an Array in HTML using Angular

Just starting out with Angular and experimenting with data display from an array. The data in the array is: [Me, Three, Four] I attempted to loop through it for printing but encountered issues. Here's a snippet of how I'm currently handling it: ...

angularhtmlangular7

Access a webpage whose URL has been dynamically assigned using JavaScript

I have a website that consists of a single page and features four tabs. Whenever a tab is clicked, it displays the corresponding content in a div while hiding the other three divs along with their respective content. To ensure a smooth user experience, I u ...

javascripthtmlurl

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

htmlcssflexbox

Wave Filter in SVG

While attempting to create a fisheye-esque filter in my SVG, I came across this interesting codepen example: http://codepen.io/johanberonius/pen/RopjYW The effect works well, but I would like it to be a bit more pronounced. Unfortunately, I am unable to m ...

javascriptcsssvgfiltermapping

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

javascriptjqueryhtmlcss

Is it possible to fetch all the content contained within each set of <p> and </p> tags within a specific ID?

I've been trying to extract text between two specific <p> tags in HTML, but my code is only returning the text between a single tag. Here's what I have so far: > var myHTMLString = try String(contentsOf: myURL, encoding: .as ...

htmlswiftparsingtexttextview

Setting the background color for a div in Vue.js when importing HTML

Check out this HTML code snippet <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Getting Started: Serving Web Content< ...

htmlvue.js

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

javascriptjqueryhtmlcssimage

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

javascripthtmlbootstrap-5

When interacting with Chrome, the div gets automatically blurred upon being clicked

While working on the development of our website, we stumbled upon something peculiar. We have a set of divs displayed on the screen, resembling the layout of Pinterest. Upon clicking any of these divs, the content within that particular div is loaded into ...

jqueryhtmlcssgoogle-chrome

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

javascriptjavacssnpmwebpack

Customized link routing / Deep linking

I need some help. I am managing a standard website and I want to redirect custom URLs to specific pages when visitors access the site. For instance: - index.html should point to custom_index.cfm?custom_id=1&page_id=1&inc=index - about.html shou ...

javascriptjqueryhtmldeep-linking

Is the hover rotation feature not functioning properly?

I am trying to achieve a small rotation effect when I hover over my div. It works perfectly on another div, but for some reason it's not working on this one. Below is the code snippet: .more, .more:visited { color: #fff; min-width: 88px; heigh ...

htmlcss

Discover additional and subtract options

I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...

javascriptjqueryhtml

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

javascripthtmlangularjsfilterng-bind-html

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml

Ways to resolve the form submission issue on ASP.NET Core 3.1 with jQuery integration

I've been encountering issues and I'm looking to the community for help. A year or two ago, a web application was created using ASP.NET Core 3.1 with Razor Pages and C# code behind files. jQuery is also being utilized on the site. The problem li ...

c#htmljqueryasp.net-corerazor