What I need is as:
1. the line height between blue lines is 5px.
2. the line height between blue, black and brown line is 20 px.
Please see the code I have tried. I couldn't figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass span{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Please help thanks in advance.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.span-blue{
line-height: 5px !important;
}
.span-other{
line-height: 20px !important;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;" class="span-blue">first
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span class="span-other">second efgh</span><br>
<span style="color:brown;" class="span-other">third
hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Here you go:
HTML:
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
#blue{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<div id="blue" style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz <br>abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Hopefully this is what you need. Inspect the elements to check if it is proper line height.
Thank you Yuri fro guiding me. Your answer helped me solve the issue. Still, I would like to post my resolved code with minimal changes. Please find the corrected code below. Thanks all.
Corrections done: Replaced span with div and added margin-bottom instead of line-height with new values.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass div {
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="divClass">
<div style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<div>second efgh</div><br>
<div style="color:brown;">third hijklmnopqrstuvwxyz</div>
</div>
</body>
</html>
Having line-height: 5px will make your text overlap, so I guess you want each line 5px far from each other. To do so, you need to make line-height 5px greater than font-size. The "line height between blue black and brown" is called margin (you can also use padding) and in order to work ,you have to set display: block to span tags
.divClass{
width: 100%;
height: auto;
font-size: 15px;
}
span { display: block; }
.blue{
color: blue;
line-height: 20px;
}
.brown { color: brown; }
.black, .brown, .blue {margin: 10px 0;}
<div class="divClass">
<span class="blue">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span>
<span class="black">second efgh</span>
<span class="brown">third hijklmnopqrstuvwxyz</span>
</div>
You have applied line-height: 5px; to .divclass span
You have to specify for which span you want this particular CSS
when there are multiple spans available in this div.
For this, you can use span:first-child or add class to that particular span.
I have used span:first-child here.
span:first-child{
line-height: 5px;
}
span{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
Hope this helps :)
Related
I am trying to achieve a result as in the image below.
I have done the border that goes around the div for the card but I don't know how can I put an icon or img on the top border and look interrupted also.
Html code for the Bootstrap 4 card that I am using.
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
Css code
.card-thin-body-v2 {
border: 1px dotted rgba($color: $white, $alpha: .15);
width: 74rem;
padding: 1rem .3rem 1rem 1rem;
margin: 15px 0px 15px 15px;
background-image: url('../../img/cartu-book.svg');
>h2 {
color: $white;
font-family: "adobe-caslon-pro";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0em;
margin-left: 1rem;
>img {
height: 50.66937255859375px;
width: 53.306663513183594px;
border-radius: 0px;
margin: 20px 5px -10px 0px;
}
}
>p {
font-family: "adobe-
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
<div class="row">
<div class="col">
<div class="card card-thin-v2 w-100 bg-dark-green">
<div class="card-body card-thin-body-v2">
<h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
<p class="card-text">text</p>
buttonr <i class="icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thank you!
Here you go...
Make two divs:
one without border (outer)
one with dashed border (inner)
To move the image up, set margin-top: -2%; to the image. Also, set padding-left: 2%; and padding-right: 2%; to interrupt the border and set the same background-color to the outer div and image (e.g. background-color: gray;), to make the image actually interrupt the dashed border.
#box {
position: absolute;
width: 90%;
height: 90%;
border-radius: 2vw;
background-color: gray;
margin-top: 2.5%;
}
#dashed {
width: 90%;
height: 90%;
border-width: 5px;
border-style: dashed;
border-radius: 2vw;
}
#image {
width: 10%;
margin-top: -2%;
padding-left: 2%;
padding-right: 2%;
background-color: gray;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<script src='javascript.js'></script>
</head>
<body>
<div class='container-fluid d-flex justify-content-center'>
<div class='d-flex align-items-center justify-content-center' id='box'>
<div class='d-flex align-items-start justify-content-center' id='dashed'>
<img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.