I am trying to create a tube module for a tree grid. I want to keep the tube as one block and have each column as an element within the block. I would like to apply an offset to the tube so the tube below has an indent, but I'm running into an issue with the column borders lining up. How do I apply an offset to the first column of the block without applying it to the whole tube.
Here is the HTML:
<div class="m-tube">
<div class="m-tube__column">
<span class="m-tube__column--icon"></span>
<div class="m-tube__text">Lorem Ipsum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Tempus Fugit</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Fac Ut Gaudeum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Lorem Ipsum Dolor Sit Amet</div>
</div>
<div class="m-tube__column m-tube__column--no-border">
<div class="m-tube__text">Caveat Emptor</div>
</div>
</div>
<div class="m-tube">
<div class="m-tube__column">
<span class="m-tube__column--icon"></span>
<div class="m-tube__text">Lorem Ipsum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Tempus Fugit</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Fac Ut Gaudeum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Lorem Ipsum Dolor Sit Amet</div>
</div>
<div class="m-tube__column m-tube__column--no-border">
<div class="m-tube__text">Caveat Emptor</div>
</div>
</div>
And here is the SCSS:
.m-tube {
border: 1px solid silver;
border-radius: 3rem;
width: auto;
height: 3.5rem;
display: table;
&:hover {
background-color: lightblue;
}
&--no-end-cap {
border-radius: 3rem 0 0 3rem;
border-right: 0;
}
&__column {
border-right: 1px solid silver;
padding: 0 0.5rem;
height: 100%;
display: inline-table;
//vertical-align: middle;
&--no-border {
border-right: 0;
}
&--icon {
background-color: red;
height: 1.5rem;
width: 1.5rem;
}
}
&__text {
line-height: 3.4rem;
color: #01527a;
font-size: 1.1rem;
font-family: Helvetica, Arial, sans-serif;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
Related
This containers are arranged using nested flexbox. When I added an unordered list with zero padding, it got outside the child container. Not only that it also goes outside the parent container.
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
Picture of the mentioned problem: https://prnt.sc/plgv0y
If you want to help me debug this view this codepen link:
https://codepen.io/bishant-bhattarai/pen/qBBqqYE
Since this was a small project I didn't add any comments, sorry for inconvineince.
This is probably due to the default value of the CSS property list-style-position.
You can try and change that like this:
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
ul {
list-style-position: inside;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
cf. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
I am trying to develop a page footer in angular 6. I am using angular material and not using bootstrap.
Can anyone help to change this code into the angular material syntax?
I want to convert this footer into the full responsive Material UI design.
If possible then can I make this footer as responsive as well?
.app-footer {
margin-top: 2em;
text-align: center;
vertical-align:middle;
min-height: 100%
}
.app-footer-link {
line-height: 1.5em;
}
.app-footer-link p {
margin: 0;
}
.row/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
}
.firstrow/*:after*/ {
display: flex;
/*content: "";
display: table;
clear: both;*/
padding-top: 20px;
}
.column {
flex: 25%;
/*width:20%;*/
float:left;
font-size:12px;
}
.headingcolumn {
flex: 25%;
/*width:20%;*/
float:left;
font-size:18px;
/*line-height:12px;*/
}
.maincolumnleft {
flex: 50%;
/*width: 50%;*/
float: left;
}
.maincolumnright {
/*flex: 50%;*/
width: 50%;
float: right;
}
.fullcolumn {
width: 100%;
/*flex:100%;*/
font-size: 12px;
text-align: center;
vertical-align: middle;
}
.heading{
font-size:18px;
}
#media screen and (max-width: 600px) {
.column {
/*flex:100%;*/
width: 100%;
}
.headingcolumn {
/*flex: 100%;*/
width: 100%;
}
.maincolumnleft {
/*flex: 100%;*/
width: 100%;
}
.maincolumnright {
/*flex: 100%;*/
width: 100%;
}
}
------------footer.component.html---------------------------
<footer class="app-footer">
<div class="app-footer-link">
<div class="firstrow">
<div class="headingcolumn"></div>
<div class="headingcolumn">B</div>
<div class="headingcolumn">S</div>
<div class="headingcolumn">About Us</div>
<div class="headingcolumn">C Service</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">New Acc</div>
<div class="column">New Acc</div>
<div class="column">About</div>
<div class="column">Help</div>
</div>
<div class="row">
<div class="column"></div>
<div class="column">Cat</div>
<div class="column">St</div>
<div class="column">Sit</div>
<div class="column">Contact Us</div>
</div>
<div class="row">
<div class="fullcolumn">
<span class="heading">Follow:</span>
</div>
</div>
<div class="row">
<div class="fullcolumn">
Copyright © {{getYear()}}
</div>
</div>
</div>
</footer>
Updated
footer{
background: tomato;
display: flex;
flex-direction: column;
flex-wrap: wrap; /*flex items will wrap onto multiple lines, from top to bottom.*/
padding: 20px;
}
.section-top{
background: yellow;
display: flex;
justify-content: center; /*items are centered along the line*/
padding: 20px 0;
}
.section-bottom{
background: blue;
text-align: center;
padding: 15px 0;
}
.col{
margin: 0 15px;
width: 25% /*optional*/
}
#media all and (max-width: 600px){ /*style if screen size is <600px*/
.section-top{
flex-direction: column;
}
.col{
text-align: center;
width: 100%;
margin: 0
}
}
<footer>
<section class="section-top">
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
<div>Line 3</div>
</div>
<div class="col">
<h3>Title</h3>
<div>Line 2</div>
</div>
</section>
<section class="section-bottom">
<div>Follow</div>
<div>Copy right</div>
</section>
</footer>
I want an image to be 'inside' a box delimited by max_width and max_height.
Instead the image goes over/under the text below.
Should work also in IE10 and above.
.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img
max-height: 90%;
max-width: 90%;
}
.text {
color: red;
font-size: 14px;
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>
I think you should inherit the max-width and max-height value for img from it's div container. Please review if this is what you are looking for:
.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img{
max-height: inherit;
max-width: inherit;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>
Even though you set max-width or max-height you need to have a specified width or height property here.
.image {
margin: 0 0.75rem 0 0;
}
.image img {
max-height: 9.75rem;
max-width: 14.625rem;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350" />
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>
.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img {
display:block;
max-height: 9.75rem;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>
I'm trying to visualise simple commands and their arguments in HTML. Desired output:
Actual output:
The code I used:
html {
background-color: #222;
}
div.script {
display: table-cell;
vertical-align: top;
}
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
div.script-command p.name {
text-align: center;
font-size: 15pt;
}
div.script-command div.arguments {
padding: 0.5 em;
text-align: center;
}
div.script-command div.arguments .argument {
font-family: "Courier new", consolas;
color: black;
font-size:11pt;
background-color: #CCC;
border: 1px solid white;
padding: 3pt;
margin: 2pt;
display: inline-block;
}
<div class="script">
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">xxx
</span>
</div>
</div>
<div class="script-command">
<p class="name">aaa
</p>
<hr>
<div class="arguments">
</div>
</div>
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">gfdgf
</span>
<span class="argument">1000
</span>
<span class="argument">5
</span>
</div>
</div>
<div class="script-command">
<p class="name">dd\;
</p>
<hr>
<div class="arguments">
</div>
</div>
</div>
The wrong alignment happens when the .arguments div is empty. Why does it happen? How do I fix it?
Use vertical-align: top; on your inline-block elements.
You need to set the vertical-alignment of the inline-block element.
If you want to glance at the spec,
This shorthand property specifies how an inline-level box is aligned within the line. Values are the same as for its longhand properties, see below.
Since you have the baseline set as default/not specifically set, it will style to the lowest line, and hence by setting it to top will align the inline-block elements to the top line.
html {
background-color: #222;
}
div.script {
display: table-cell;
vertical-align: top;
}
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
vertical-align: top;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
div.script-command p.name {
text-align: center;
font-size: 15pt;
}
div.script-command div.arguments {
padding: 0.5 em;
text-align: center;
}
div.script-command div.arguments .argument {
font-family: "Courier new", consolas;
color: black;
font-size:11pt;
background-color: #CCC;
border: 1px solid white;
padding: 3pt;
margin: 2pt;
display: inline-block;
}
<div class="script">
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">xxx
</span>
</div>
</div>
<div class="script-command">
<p class="name">aaa
</p>
<hr>
<div class="arguments">
</div>
</div>
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">gfdgf
</span>
<span class="argument">1000
</span>
<span class="argument">5
</span>
</div>
</div>
<div class="script-command">
<p class="name">dd\;
</p>
<hr>
<div class="arguments">
</div>
</div>
</div>
checkout this fix
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
vertical-align:top;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
http://jsfiddle.net/jrpq1xe7/
How could I float columns around a youtube video iframe?
This is the HTML code:
<div id="content">
<div class="column">
<div class="column_header">Lorem ipsum</div>
Lorem ipsum dolor sit amet...
<br/><br/>
</div>
<div class="column">
<div class="column_header">Proin lacus ex</div>
Proin lacus ex...
</div>
<div class="column">
<div class="column_header">Duis lacus lectus</div>
Duis lacus lectus...
</div>
<div class="ytvid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2rGGw0cJjYg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
And the CSS:
#content{
clear: both;
background-color: #FFFFFF;
padding: 20px;
padding-top: 0;
border-top: 20px solid #58AB27;
overflow: hidden;
}
.column{
position: relative;
float: left;
max-width: 30%;
min-width: 300px;
margin: 0;
padding: 15px;
}
.column_header{
font-size: 150%;
line-height: 2em;
}
The length of the content of the columns may change. Now for example I get something like this:
I would like the youtube iframe to take the empty space under the column 1 and column 2. So I would like to get something like this:
Or (by changing the column content) something like this:
Maybe this is your answer: Live example on the jsFiddle
#container {
margin: 0 auto;
width: 600px;
}
#right {
float: right;
width: 40%;
background: yellow;
}
#left {
float: left;
width: 60%;
background: red;
}
.col {
float:left;
width: 50%;
}
.col-video {
float: left;
width: 100%;
height: 50px;
background: pink;
}
.purple {
background-color: purple;
height: 150px;
}
.blue {
background-color: blue;
height: 100px;
}
.green {
background-color: green;
height: 250px;
width: 100%;
}
<div id="container">
<div id="left">
<div class="col purple">
col1
</div>
<div class="col blue">
col1
</div>
<div class="col-video">
col-video
</div>
</div>
<div id="right">
<div class="col green">
col2
</div>
</div>
</div>
You can provide above views with two different ways:
Create a div and put col 1, col 2 and "youtube frame div" into the
div.
Set position of the container elements as absolute and also, set left and top
values for each div.