Can someone please tell me how I can have the text inside a css styles circle so it comes up down instead of sequential.
Here is the jsfiddle https://jsfiddle.net/zhxysyrz/
Here is the code
<title>Page Title</title>
<style>
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
}
</style>
<body>
<span class='roundFormat'>7 Apr</span>
</body>
</html>
So inside the circle instead of having 7 Apr in sequence how can I make it stacked like below without increasing the circle size.
7
APR
Thanks
Edit: This is the format i want !http://imgur.com/a/aNg33
You can use display: table and disply: table-cell to vertically align the text in the circle and a br so the text drops to the second line.
Here's a solution https://codepen.io/anon/pen/aWxbmx
HTML
<div class='roundFormat'>
<div class='roundFormatWrap'>7<br>apr</div>
</div>
CSS
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
display: table;
}
.roundFormatWrap {
display: table-cell;
vertical-align: middle;
line-height: 14px;
}
<title>Page Title</title>
<style>
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
word-wrap: break-word;
}
.roundFormat>span:first-child {
display: block;
line-height: 40px;
}
.roundFormat>span:not(:first-child) {
display: block;
line-height: 0px;
}
}
</style>
<body>
<span class='roundFormat'><span>7</span><span>apr</span></span>
</body>
Related
You can check the outcome here in this link. At the bottom of the page, on the extreme right, there is a circle with an image of a tshirt. The image is not vertically centered properly.
The css of the anchor tag is this:-
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
//line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
The HTML is this:-
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>
How can I center it? For the time being, I am using inline css for the img, which I will later remove to css file.
I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image changes sizes or other common situations
.dfa-tshirt {
background: #2c4762;
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
width: 44px; height: 44px;
}
a img {
width: 35px; height: 35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
EDIT: Non-flex solution --
I can't really plan for every scenario you may have, but to answer your question and support most browsers, I would also recommend just moving the actual styling to the image only:
a img {
width: 30px; height: 30px;
padding: 5px;
border-radius: 50%;
background: #2c4762;
}
<a href="https://disabilityloverstshirtbuilders.com/">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
Use this:
img { vertical-align: middle; }
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
img {
vertical-align: middle;
width:35px;
height:35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png">
</a>
The images parent needs to be displayed inline-block
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: inline-block;
}
The inline style should just be
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
I have just checked you site url, you can add two lines for the class as bellow.
display: table;
float: right;
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: table;
float: right;
}
Img tag
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
Not sure what's going on here. I re-seized the image to match the width of the div but somehow it still doesn't align with it. I uploaded the issue to codepen here. Tried to play around with the margins but its still doesn't change the behavior.
.propertyOverview.mapView {
height: 430px;
width: 600px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
https://codepen.io/insivika/pen/PEzxPK
As I understand it, I guess you are trying to stretch the image to take up whole width of container. Here is the problem:
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="">
</div>
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
You have given a class to parent container of the image and targeting it in CSS.
Instead do this. Remove the extra container div
<div class="propertyOverview mapView">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="" class="propertyImage">
</div>
Update your CSS like this.
.propertyOverview .mapViewPic {
width: 600px;
border-radius: 5px 5px 0 0;
}
Issue is #
.propertyOverview.mapView {
height: 430px;
width: 600px;
}
Where width is 600px and the image width is 360px. Thats why the extra space.
.propertyOverview.mapView {
height: 430px;
width: 360px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
.quickFact1,
.quickFact2,
.quickFact3,
.like {
display: inline-block;
margin-left: 20px;
font-family: 'Lato', sans-serif;
}
.like {
margin-left: 110px;
font-size: 23px;
color: #cccccc;
}
.like:hover,
.like:active {
color: #FF3366;
}
<div class="propertyOverview mapView">
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" alt="sample_Property_Map1" alt="">
</div>
<div class="quickDetails">
<p>5689 Main Ave</p>
<p>Los Angeles, CA 90019</p>
<p class="priceDetail">$556,000</p>
</div>
<div class="quickFacts">
<div class="quickFact1">2 br</div>
<div class="quickFact2">2 bth</div>
<div class="quickFact3">4,000 SF</div>
<div class="like"><i class="fa fa-thumbs-up"></i></div>
</div>
</div>
Aligning an image is same as aligning a text....
If you want your image to be centrally aligned with any div tag as you mentioned then their may be two possibilities that either align it relative to the div tag or you align both div and image together
If you want both div and image to be centrally aligned
use
.propertyImage.mapViewPic {
text-align : center;
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
div{
text-align: center;
}
This will align both of your div and image centrally taking into note that the image is not a child element of the div tag you mentioned, otherwise the image will be aligned with relative to the the div tag
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mm {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
height: 100vh;
text-align: center;
}
</style>
</head>
<body>
<div class="mm"> <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/1250833953592952166.png"/> </div>
</body>
</html>
You can check this link
.propertyImage.mapViewPic {
display: flex;
align-items: center;
justify-content: center;
}
You can also set text-align: center; for img tag
**if you want full image of div **
.propertyImage.mapViewPic {
overflow:hidden;
}
.propertyImage.mapViewPic img {
width:100%;
}
That's the code: https://codepen.io/vendettashakur/pen/rmLYBN
I want to know how can I move the image with the case upper.
body {
background: #333;
}
.wrapper {
padding: -10px;
margin: 10px;
margin-right: 900px;
text-align: center;
}
.treasure {
color: #fff;
display: inline-block;
max-width: 400px;
text-align: center;
padding: 70px;
margin: 20px;
font-size: 25px;
font-weight: bold;
}
.block {
padding: 4px;
background: #7c4dff;;
border-radius: 2px;
margin-left: 4px;
}
.subcase {
color: white;
display: inline-block;
max-width: 2000px;
text-align: center;
font-size: 15px;
font-weight: bold;
padding: -20px;
margin: -76px;
vertical-align: text-top;
}
.treasureimage {
display: inline-block;
max-width: 2000px;
padding: 10px;
vertical-align: text-top;
}
<div class="wrapper">
<p class="treasure">
Treasure Chest
<span class="block">
$1
</span></p>
<br>
<p class="subcase">
10% chance of getting a top-grade game</p>
<br>
<img class="treasureimage">
<img src="https://gamedrop.win/img/cases/case_blue.png" alt="case" style="width:200px;height:128px"> </img>
The image has to be perfectly arranged to look nice. That's all. I tried with padding, margin etc and nothing works for me.
If you are expecting the image to be moved after the text "Treasure Chest" then in your html move the <img> tag after first <p> tag
I am learning HTML,CSS and JAVAScript and I recently wrote a very simple code. It showed everything and was working fine until I added the div class "mainLeft". After that it doesn't show anything except for the code before that class. Can you kindly assist?
Below is the HTML and CSS code;
CSS Code
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
first of all, I don't see any div with the class 'mainLeft'. You only have texts in those divs so the reason you can't see anything is because you have this css on your h definitions.
color: white;
Thank you Everyone. I solved it.
I had forgottent to add background-color attribute in CSS.
I am having a small issue with some html code. I am trying to create a sample document for sparkle release notes, so I created some highlighted boxes containing either "fixed","added" or "improved", and then on the right should go the release notes. What instead happens is that the 'something' word gets pushed onto a new line like a new item but without the dot at the beginning. Is there a way to push it up on the same line as the box??
This is what I have so far:
Index.html
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Release Notes</title>
<body>
<ul>
<li><span class='fixed-square'>Fixed</span>Something</li>
<li><span class='added-square'>Added</span></li>
<li><span class='improved-square' >Improved</span></li>
</ul>
</body>
style.css
.fixed-square {
background-color: #0f0;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.added-square {
background-color: red;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
body {
font-family: Verdana;
font-size: 10pt;
}
Thank you in advance!
EDIT:
Thank you very much to all of you, for the quick answer. To recap I went from this:
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
to this:
.improved-square {
background-color: blue;
color: white;
display: inline-block; <----------
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
change display: block on display: inline-block
Use display: inline-block; instead of display: block;.
Swap out the display:block for display:inline-block
JSFiddle
.fixed-square {
background-color: #0f0;
color: white;
display: block; // this is actually sending something in second line try adding display: inline-block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
Please see this link Demo
You have to add in css like
ul li
{
display:inline;
float : left;
margin :5px;
}
use inline-block
[spam link removed]