How can I get a line, text and then a line in a straight line?
code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.
How to do so that they appear like
---------------------- About Me ---------------------
(^^dotted line above should actually be single line.)
Use this -
#about_me1 hr, #about_me1 h3{
display: inline-block;
vertical-align: middle;
}
Here's updated Fiddle
Try this and have a look to display:inline-block in style
<header id="about_me">
<div id="about_me1">
<hr size="5" align="left" color="black" style="display:inline-block;width:30%;">
<h3 style="display:inline;">About Me</h3>
<hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;">
</div>
</header>
Use only one element to show border, which will work in every resolution and reusable:
<header id="about_me">
<div id="about_me1">
<h3><span>About Me</span></h3>
</div>
</header>
#about_me1 {
border-top: 2px solid #FF0000;
position: relative;
margin-top:15px;
}
h3 {
position: absolute;
top: -18px;
text-align:center;
width:100%;
padding:0;
margin:0px;
}
h3 span {
background:#fff;
display: inline-block;
padding: 5px;
}
Demo
Related
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I have the following code:
<p><font size='5'><b>Loop Main</b></font><br><HR align='left' WIDTH='60%'></p>
The problem is that under Loop Main, I get some spacing and then the HR show up. Is there a way to get the
ruler right underneath the text without any spacing between them?
You should use css. And yes, you can acheive what you would like.
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
}
hr {
padding-top: 0;
margin-top:0;
}
<p class="main">Loop Main</p>
<hr>
If you would like the <hr> up even closer to the text, you will have to use positioning, like so:
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
}
hr {
padding-top: 0;
margin-top:0;
position: relative;
top: -4px;
}
<p class="main">Loop Main</p>
<hr>
Of course, probably even a better solution is just to put a border-bottom on the <p> like:
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
border-bottom: 1px solid gray;
}
<p class="main">Loop Main</p>
you could try something like
<HR align='left' Width='60%' style='margin-top: -3px;' />
or you could use css to change the line height property of the HTML <p> attribute
I am trying to put 2 lines of text next to an image, sort of like this
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
There's no such thing as float: center; You can choose either left, right, or none.
http://jsfiddle.net/vd7X8/1/
If you float: left; on the image it will do what you're after.
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.
Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}
<div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>
Hope it help
Here is a snippet using a svg so you can test it anywhere.
.img{
float: left;
margin-right:1rem;
}
<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
Check it. It is well defined css.
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
I know this is old post, but still wanted to say that not only float will do it, the <img> tag has a built-in attribute called align="left" which does that as well
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
I suggest using the old tables that works great. In terms of CSS it is just needed to add the vertical-align: top property.
<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/fypa0k4w/
I'm trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:
Line 1: 5,343 (right aligned)
Line 2: + (left aligned) 32 (right aligned) --- Note that the plus sign and bottom number are on the same line.
Line 3: ------ (horizontal line)
I've been fooling around with this for the last hour and have had very little luck.
I laid by HTML out like this:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>
A semantic approach
Here's a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here's the markup for an equation:
<span class="equation">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
That alone renders horizontally:
5,343
+
32
=
5,375
With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:
<span class="equation stacked">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
The following CSS does the magic:
.equation.stacked {
display: inline-block;
}
.equation.stacked .number {
display: block;
margin-left: 1em; /* space for the operator */
text-align: right;
}
.equation.stacked .operator {
float: left;
}
.equation.stacked .equals {
display: block;
height: 0;
border-bottom: solid 1px black;
overflow: hidden;
}
This renders like this:
Here's a JSBin you can explore: http://jsbin.com/afemaf/1/edit
Do you mean something like this?: http://jsfiddle.net/PkfAU/2/
What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.
.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).
HTML:
<div class="container">
<div class="first">5,343 </div>
<div class="second">
<div class="plus">+</div>
<div class="number">32</div>
</div>
<div class="third">
<div class="result">5,375</div>
</div>
</div>
CSS:
.container {
width:200px;
}
.first,
.second {
width:200px;
text-align:right;
display:table;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:200px;
text-align:right;
border-top:1px solid black;
}
I think this may be your best bet:
HTML:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="lowerNum">
<span class="operand">32</span>
<span class="sign">+</span>
</p>
<br class="clear" />
<p class="line"><hr></p>
</div>
CSS:
#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }
Here's a fiddle that shows this effect also:
http://jsfiddle.net/8CPar/
Here, you can contain the bottom line in a paragraph, then give the operator and operand a separate span container that you can float, giving you the desired effect. Then, you add a "clear break" which clears the float, making the horizontal break show correctly.
I hope this helps!
There are some fine examples here, but I went through with the effort of making a fiddle so might aswell post it.
You just need to ensure that widths and alignments are set correctly and it should work out.
My JSFiddle Example.
<div id="list">
<span class="item">5472</span>
<span class="operator">+</span><span class="item operand">32</span>
<hr class="divider"/>
<span class="result">5504</span>
</div>
With css
.list
{
width:50px;
}
span
{
display:block;
margin-left:20px;
font-family:"Lucida Console", Monaco, monospace;
width:50px;
}
.operator
{
float:left;
width:20px;
margin-left:0px;
}
.divider
{
clear:both;
width:40px;
margin-left:20px;
}
.operand
{
float:left;
width:50px;
}
I also created an example using pre, that uses pre formatted text, so it should still be precise.
Classics,
<html>
<head>
<style type="text/css">
.textbox
{
width: 100px;
}
.upperNum
{
text-align: right;
width: 100%;
}
.sign
{
float: left;
text-align: left;
}
.lowerNum
{
text-align: right;
}
.secondline
{
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="textbox">
<div class="upperNum">
5,343
</div>
<div class="secondline">
<div class="sign">
+
</div>
<div class="lowerNum">
32
</div>
</div>
<div>
<hr />
</div>
</div>
</body>
</html>
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)