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
Related
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>
I have an alert field that I want to show the number of messages.
I want to place the num div like this:
above on the right of the image.
how can I do this?
#num{
font-size:10px;
min-width:10px;
text-align: center;
border:1px solid black;
padding:0px;
}
T<span id=num>0</span>
jsfiddle:
https://jsfiddle.net/x6sehmyo/
thank you!
You can use <sup> - HTML Superscript Element
sup {
border: 1px solid black;
padding: 0 2px;
}
T <sup>0</sup>
Something like this:
HTML:
<br><br>
T<span id=num>0</span>
CSS
#num{
font-size:10px;
min-width:10px;
text-align: center;
border:1px solid black;
padding:0px;
position:relative;
top:-10px;
}
FIDDLE
https://jsfiddle.net/disinfor/x6sehmyo/2/
You may have to adjust the top property to fit your needs
You could use the <sup> element.
<p>
T<sup class="msg-count">0</sup>
</p>
.msg-count {
padding: 0;
min-width: 10px;
font-size: 10px;
border: 1px solid #000;
}
Demo JSFiddle
I have the code:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
http://jsfiddle.net/TKQzT/
So I end up with two rectangles with letters in them.
I was wanting them to display as squares instead. So currently they're rectangles taller than they are wide.
Does anyone know how to style them so they'll come out as perfect squares?
You'll have to set the display to inline-block, so that you can specify an explicit width and height:
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
Here's the fiddle: http://jsfiddle.net/TKQzT/13/
As letters are higher than wider, you'll have to set the with/height of the box manually.
It's not going to be exact without giving them an equal width and height, but try:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
and if you're using inline just so you can line up the div's side by side then I recommend using float and having the div's not inline. This way you can give them a explicit width and height.
div {
border: 4px solid Brown;
padding:2px 5px;
margin:1px;
float:left
}
See demo here: http://jsbin.com/ojumay/edit#html,live
The better way i know to do it is to fix height and width, while using inline-block display to be able to do it.
Try this :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e