Css Circle and text inline - css

Hello i need to have a css circle and on right a text, inline.
I use this code
<div class="circlearancione">Disponibile</div>
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
But using this my text not have any space between circle and text. I try to use margin and padding but nothing change.
Also try to use
<div class="circlearancione"></div><p>Disponibile</p>
.circlearancione, p { display: inline; }
But with this not display the circle.
What's wrong?
Thanks

You can use :before pseudo-element for circle and Flexbox for vertical alignment.
.circlearancione {
display: flex;
align-items: center;
}
div:before {
content: '';
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div class="circlearancione">Disponibile</div>
You can also put your text in span and add it some margin-left.
.circlearancione {
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
line-height: 25px;
}
span {
margin-left: 30px;
}
<div class="circlearancione"><span>Disponibile</span></div>

You could use simple flex to achieve it. It promotes fluid, responsive, scalable and readable structure.
HTML
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
}
p { margin:0; }
.container {
display: flex;
align-items: center;
justify-content: center;
}
.circlearancione{
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
p { margin:0; }
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile1</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile2</p>
</div>
<div class="container">
<div class="circlearancione"></div>
<p>Disponibile3</p>
</div>

I can imagine something like this if you would like to avoid using flex.
.circlearancione {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 0;
background-color: red;
border-color: white;
border-radius: 50%;
border-width: 5px;
height: 25px;
width: 25px;
}
<div id="container">
<p>
<span class="circlearancione"></span>Disponibile
</p>
</div>

My suggestion would be to place a span within your div that will act like the circle
<div class="circlearancione"><span></span> Disponibile</div>
Here is a fiddle: https://jsfiddle.net/v5LLp7uf/

Related

How to maintain a circlur shape of element with dynamic content?

I'm trying to create a circle as an ::after pseudo element, which resizes automatically depending on its content.
.container {
display: flex;
flex-direction: row;
}
#dividerHost2 #left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
#dividerHost2 #right {
flex: 1 1 auto;
background-color: dodgerblue;
}
#dividerHost2 .divider {
background-color: white;
margin: 0px;
width: 6px;
font-weight: 800;
}
.divider.vertical {
--divider-color: transparent;
display: inline-flex;
width: 1px;
border-left: 1px solid rgb(var(--divider-color));
margin: 0px 2px 0px 2px;
overflow: show;
}
.divider.vertical.title::after {
flex: 0 0 auto;
align-self: center;
border-radius: 50%;
content: "OR";
padding: 9px 8px 11px 8px;
background-color: white;
color: black;
transform: translateX(-44%);
z-index: 10;
}
<div id="dividerHost2" class="container">
<div id="left" class="container" style="flex-direction: row;"></div>
<div id="divider3" class="divider vertical title"></div>
<div id="right" class="container" style="flex-direction: row;"></div>
</div>
That gives a pretty nice result so far:
JSFiddle https://jsfiddle.net/jsnbtmh3/
However, with longer text the circle turns into an oval:
How to make the circle auto resize depending on its content?
Here is a trick using radial-gradient. The idea is to keep the element full height and color it using circle closest-side which will always create a circle that will start from the center and expand to the closest sides (left and right one)
I simplified the code to keep only the relevant part:
.container {
display: flex;
flex-direction: row;
margin:10px;
}
.left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
.right {
flex: 1 1 auto;
background-color: dodgerblue;
}
.divider {
background-color: white;
width: 6px;
font-weight: 800;
display: flex;
justify-content: center;
}
.divider::after {
display: flex;
align-items: center;
flex: 0 0 auto;
content: attr(data-text);
padding: 0 8px;
background: radial-gradient(circle closest-side, white 98%, transparent 100%);
z-index: 10;
}
<div class="container">
<div class="left "></div>
<div class="divider" data-text="OR"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="longer"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="even longer"></div>
<div class="right "></div>
</div>
Don't put actual content in the pseudo-element especially as this is actually "content" rather than styling, rather use the pseudo-element to create a background circle using the padding/aspect ratio trick.
body {
text-align: center;
}
.divider {
margin: 3em;
display: inline-block;
position: relative;
padding: 1em;
font-weight: bold;
}
.divider:after {
content: "";
position: absolute;
width: 100%;
padding-top: 100%;
background: lightblue;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
<div class="divider">OR</div>
<div class="divider">LONG TEXT</div>

Text and images won't center on my page

I am making my first webpage and I have the elements I want- I can't seem to get them to center on the page. I have tried margin: auto, text-align: center, and lots of toher things. Nothing has worked.
I want the header, an image , and a button at the end of my page, to be a central spine down my page. Any suggestions would be appreciated.
Thanks
Here is my code:
HTML:
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>
CSS
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
align: center;
padding-left: 40px;
padding-right: 40px;
float: center;
max width: 100%;
text-align: center;
marrgin: 0 auto;
float: center;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-responsive {
margin: 0 auto;}
.img-resize {
max-width: 400px;
max-height: auto;}
you need to add the container text-align
<div class="container" style="text-align: center;">
the div that wraps your element is the responsible to align the element.
Define a class and call it for example .text-center and put inside it text-align: center,
once you want to center a text just give this class to the container element (parent element).
Hope this solve your issue.
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
.text-center {
text-align: center;
}
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
padding-left: 40px;
padding-right: 40px;
max width: 100%;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-resize {
max-width: 400px;
max-height: auto;}
<div class="container text-center">
<h1> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container text-center">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>
There are some mistake in your code, for example, you must use of max-width: 100%; no max width: 100%; or text-align: center; no align: center; value for float is left or right so float:center is wrong, and other mistakes.
see my code:
body {
margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff;
}
h1 {
background-color: yellow;
font-size: 300%;
border: 1px solid;
border-radius: 25px;
text-align: center;
padding-left: 40px;
padding-right: 40px;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
}
.row {
text-align: center;
}
.row img {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<div class="container">
<div class="row">
<a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="Ami laughing at her 26th Birthday">
</a>
</div>
</div>

Css solution for circle and line

I am looking for a css solution to the below image that is responsive.
I have the following html and css, but it isn't respnosive and I need the line to float alongside the circle.
<div class="col-xs-6 col-sm-2">
<div class="circle"> </div>
<div class="line"><img src="assets/line.png" class="black-line"></div>
</div>
.circle {
background-color:#fff;
border:2px solid #222;
height:50px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:50px;
float: left;
line-height: 50px;}
.line { line-height: 50px; text-align: center; float: left; padding: 0 8px;}
Here's a working responsive version of this:
.container {
border-bottom: 3px solid #111;
height: 1rem;
display: flex;
justify-content: space-between;
}
.circle {
display: inline-block;
background: #fff;
width: 2rem;
height: 2rem;
border: 2px solid #111;
border-radius: 2.5rem;
box-shadow: 0 0 0 0.5rem #fff;
}
#media (min-width: 768px) {
.container {
height: 2.5rem;
}
.circle {
width: 5rem;
height: 5rem;
}
}
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
Elements of this might not suit your needs, although with the information provided it's difficult to say. However, it should provide a solid starting point.
Here's my attempt on a responsive approach with flexbox. The crossing line has been done using a pseudoelement (no need to use markup for styling purpose)
The gap between a circle and the line has been done with the box-shadow property
<div class="circlesbox">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
CSS
.circlesbox {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.circlesbox:before {
content: "";
position: absolute;
zindex: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 3px;
width: 100%;
background: #000;
}
.circle {
position: relative;
z-index: 2;
border: 2px solid #222;
background: #fff;
box-shadow: 0 0 0 20px #fff;
width:50px;
height:50px;
border-radius:50%;
}
Final result

align inner div in vertical, horizontal center against the parent div without line breaking for the following span text element

If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}

Creating Nested Divs

I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>

Resources