I know this is an old question, but I wanted to know what is the best way to put text into a border of a div tag. This is what I have
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
<div class='componentWrapper'>Text inside div </div>
I want to add a title into the border of the div tag. I know one option is to use fieldsets but I prefer not to go with this approach. Another approach is the put a box and move it up and set the background color, but I think this fails when you set a different background color on the page.
What is the best solution for this?
I would suggest something like that, using position:absolute:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 15px 10px 10px;
width: 95%;
}
.componentWrapper .header {
position:absolute;
margin-top:-25px;
margin-left:10px;
color:white;
background:cadetblue;
border-radius:10px;
padding:2px 10px;
}
<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>
Related
Have a rather simple spoiler code for my website. It has sort of large border radii, which is fine when the element is expanded, but not so much when shrunk. Is there some way I can make the bottom border radii just go to 0px when its shrunk, or is that just not a thing with CSS?
And I would, yes, like it to be a CSS solution. It's no real problem for me to have to shrink the border radius, but y'know, might as well try to not if its possible.
I am not sure how to make the javascript my code uses work on stackoverflow (it just gives me errors), so here is a screenshot of what it looks like expanded.
.panel {
background-color: #F9F9F9;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family:arial;
}
.panel>h3 {
font-size:14px;
background-color:#820D1A;
color:#ededed;
border-bottom:1px solid #000;
text-align:left;
padding:4px;
padding-left:20px;
margin:0px;
border-radius: 21px 21px 0px 0px;
}
.panel>div {
padding:4px;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display:none">(PARAM2)</div>
</div>
.panel {
background-color: #820D1A;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family: arial;
}
.panel>h3 {
font-size:14px;
color:#ededed;
text-align:left;
padding-left:20px;
margin:5px;
}
.panel>div {
padding:4px;
background-color: #FFF;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display: none">(PARAM2)</div>
</div>
Does this look closer to what you are trying to achieve? There were two padding rules on the h3 and I was wondering why you have a background on there as well? Would this not work with your Javascript?
Eh, after messing around I came to the answer that no, it isn't possible. I just resolved to decrease the top border radii by 5 pixels (making them 17px) so that it'd look normal open or closed.
Thank you to everyone who put forth some help, though~
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
I would like to create a header that spans over 1 or two lines vertically. I would like to align these headers via the bottom line. I have created a jsfiddle page to demonstrate this:
http://jsfiddle.net/S35Db/
HTML:
<h3>ABC</h3><h3>DEF JEH</h3>
CSS:
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
What I would like to do is align the ABC to the JEH. How do I go about doing this? Do I need to create container around the header?
Thanks
CSS :
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
.bottom {
line-height:65px;
}
HTML :
<h3 class="bottom">ABC</h3>
<h3>DEF JEH</h3>
Try this I think ie. what you need.
Yes you need to keep one container around it. Also remove float element and apply table-cell property like below.
div{display:table;height:3em;}
h3 {
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
border: 1px solid grey;
height: 100%;
vertical-align: bottom;
display:table-cell;
}
DEMO
you can provide line-height to your first header.
Fiddle
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
Edit: Here is my CSS:
#index-03 {
position: absolute;
border: .1px solid #900;
border-width: .1px;
border-style: solid;
border-color: #900;
left: 0px;
top: 102px;
width: 900px;
height: 27px;
}
<div id="index-03"
style="background-color:limegreen; width:300px; height:75px;">
</div>
Just add in: border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
You can either set
border-bottom: none;
or
border-bottom: 0;
One sets the border-style to none.
One sets the border-width to 0px.
div {
border: 3px solid #900;
background-color: limegreen;
width: 28vw;
height: 10vw;
margin: 1vw;
text-align: center;
float: left;
}
.stylenone {
border-bottom: none;
}
.widthzero {
border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>
border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>
Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-color is not the same as the background-color.
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.
Update (following the comments on the question:
Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
width:auto;