I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one?
<style type="text/css>
h1, p {
font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;
}
</style>
<h1>Hello</h1>
<p>World</p>
To achieve the desired styling as Harry suggested, enclose your elements in a wrapper and apply the styling to the wrapper. Here's an example:
div {
font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;
}<div>
<h1>Hello</h1>
<p>World</p>
</div>If you prefer not to change your markup, another option is to adjust the borders and border-radius for individual elements. For the h1 element, remove the bottom left and right borders and radius. Likewise, for the p element, remove the top left and right borders and radius. This will give you the desired look.
h1, p {
font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;
margin: 0;
padding: 10px 0;
}
h1 {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
p {
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
} <h1>Hello</h1>
<p>World</p>h1{
font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}<div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>Wrap both the tags in a container and apply the specified border style. Here is the code snippet to achieve this: CSS:
<style type="text/css">
h1{
font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}
</style>
HTML:
<div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>
If you cannot wrap a wrapper around it, here is another way to style it:
h1 {
font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
padding: 10px;
}
p {
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
padding: 10px;
}
When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...
I have implemented an AJAX call on a div with the class 'mydiv' as shown below: However, I am encountering difficulty in locating the parent div within the success section. <div class="mydiv"> <a href="/jewelry/asscher-cut-diamond- ...
https://jsfiddle.net/38h8acaq/ Is there a way to eliminate the white space on the left of the first tab and between the tabs and the content? Despite adding several margin:0px; lines to the CSS, none seem to be effective in removing the unwanted whitespac ...
I am currently facing an issue with my layout that involves three columns stacked to the left and four inner columns with three floated left and one floated right. This configuration is causing a problem where I cannot select any text on the page. Removing ...
I've created a beautiful Laravel project on my PC. The welcome.blade.php file in the project has a background image located in the: public/images/ directory. To display the images, I've used the following CSS: html, body { color: #f4f6f7; ...
I'm having trouble sending an email with HTML content because it's not displaying correctly in Microsoft Office Outlook when it comes to width. Any suggestions on how to fix this issue? <div style="width: 650px; border: 1px solid blue">hel ...
Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...
My Atom interface is showing the following errors: {Error running gjslint}(x4) {Error running selective}(x4) Upon checking the errors section, I found the following details: [Linter] Error running selective Error: ENOENT: no such file or directory, open ...
I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...
I've been working on responding to client-side requests with Node.JS. While searching, I came across a helpful article on calling functions on the server from client-side JavaScript in Node JS. However, I'm having trouble implementing it in my pr ...
I am having an issue retrieving the value of a radio button that is generated using jQuery. I suspect there may be some problems with event handling. Below is my code: HTML <div id="divOption1"></div> The jQuery script to generate t ...
Currently, I am displaying profile images using session like the following code snippet: <img src="<?php if (isset($_SESSION['userimage'])){ echo $_SESSION['userimage']; }?>" /> What are the advantages and disadvantages of ...
After downloading a sample CSS file, I noticed the following entry: #text-align: right; The comment beside the entry mentioned that this expression is specifically for justifying it in IE, while text-align: right; works for Safari and Chrome. My questi ...
My progress bar crafted with css, javascript and html looks great (left image). However, I'm facing a challenge in adding white color dividers to enhance the appearance of the progress bar as shown in the image on the right. Despite my various attemp ...
I seem to be stuck on a simple error that is causing me to spin my wheels. Take a look at the following jqm (version 1.3) view (in haml) #main-header{'data-role' => 'header'} #main-content{'data-role' => 'content ...
I'm in the process of cloning some form elements and I need to generate dynamic IDs for them so that I can access their content later on. However, I'm not well-versed in Jquery/Javascript and could use some guidance. Here's a snippet of my ...
Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...
I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...
Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...
Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...