I have a DIV that contains text which is transformed, but the text goes outside the DIV (blue). How can I have the text rotate, but wrap and stay inside the box?
<div style="display: flex; background-color: lightblue; align-items: center; margin: 6in 1in 1in;">
<span style="transform: rotate(90deg); font-size: 12pt; text-align: center;">Blessings to you my Sister as you celebrate this milestone. Love and light, Eva </span>
</div>
Try CSS writing-mode. It makes it so that only the text changes instead of the whole element.
<div
style="
display: flex;
background-color: lightblue;
align-items: center;
justify-content: center;
margin: 1in 1in 1in;
"
>
<span
style="writing-mode: vertical-rl; font-size: 12pt; text-align: center;"
>Blessings to you my Sister as you celebrate this milestone. Love and
light, Eva
</span>
</div>
<div class="box">
<div class="text">
<p>Blessings to you my Sister
as you celebrate this milestone.
Love and light, Eva </p>
</div>
</div>
<style>
body {
background-color: yellow;
display: flex;
}
.box {
background-color: lightblue;
margin: 4in;
transform: rotate(90deg);
align-items: center;
}
</style>
Related
I would like to create this layout:
I can get most of the way using flexbox and align-self: baseline:
<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
<div style="font-size: 24pt">Ferry to Brookfield</div>
<div style="font-size: 96pt; align-self: baseline">3</div>
<div style="font-size: 9pt; align-self: baseline">min</div>
</div>
This looks like (JSFiddle):
From here, I can't figure out how to add the text "leave in" so that its baseline aligns with the text "3 min". Here's an attempt (JSFiddle).
How can I create this layout in CSS?
Try this...
<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
<div style="display: flex; flex-direction: row;justify-content: space-between">
<div>
<h1 style="font-size: 24pt;font-weight:300;margin-bottom:47px">Ferry to Brookfield</h1>
<div style="font-size: 9pt; text-align: right;">leave in</div>
</div>
<div style="font-size: 96pt">3<span style="font-size:9pt">min</span></div>
</div>
</div>
you can do this with absolute positioning and pseudo elements:
.wrapper{
background-color: #fce5cdff;
display: flex;
height: 4.35cm;
font-size: 24pt;
}
span{
font-size: 96pt;
line-height: 96pt;
position: relative;
margin-left: 2pt;
}
span::before {
content: "leave in";
position: absolute;
font-size: 10pt;
bottom: 6pt;
left: -6ch;
}
span::after {
content: "min";
position: absolute;
font-size: 10pt;
bottom: 6pt;
right: -3ch;
}
<div class="wrapper">
Ferry to Brookfield <span>3</span>
</div>
I have mat dialog box in Angular project and I want to make 1 row at the top and 3 row at the bottom just like the picture below but some reason I can't make it work. Also I don't want horizontal scroll bar and trying to hide it by playing with the width but I'm not sure why it's still there. Any suggestion
HTML
<div mat-dialog-content class="dialog-container">
<div class="column">
<div class="header">Tops</div>
</div>
<div class="parent">
<div class="left">
<div class="sub-header">Left</div>
<div style="background-color: darkblue;">
<div></div>
</div>
</div>
<div class="center">
<div class="sub-header">Center</div>
</div>
<div class="right">
<div class="sub-header">Right</div>
</div>
</div>
</div>
CSS
.dialog-container{
width: 1000px;
height:1000px;
overflow-x:hidden;
}
.header{
position: relative;
font-size: 20px;
text-align: center;
font-family: 'Raleway';
}
.button{
margin-top: 15px;
align-items: center;
}
.clickable {
cursor: pointer;
}
.parent {
display: flex;
overflow: hidden;
}
.column{
display: flex;
flex-direction: column;
background-color: blue;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px ;
background-color: blue;
}
.center{
width: 300px;
background-color: red;
}
.header{
font-size: 30px;
font-family: "Raleway-ExtraLight";
padding: 30px;
}
.sub-header{
font-size: 20px;
margin-top: 25px;
font-weight: bold;
}
Right now it look like this
The final design I want to achieve
I'm not sure how many columns or rows will be needed to achieve it like the final design but I playing around for now. Any suggestion will be really helpful.
You could use mat-grid. You just have to define your row and cols and that's it.
You will have 4 cols and 4rows. Your buttons at the bottom will go in the mat-dialog-actions div made for this.
Here is how you could do with mat-grid-list : Demo on StackBlitz
If the demo is nto working, here the code so you can try it :
html:
<mat-grid-list cols="18" rowHeight="1:3">
<mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
<mat-grid-tile [colspan]="7">
<input type="text" placeholder="blablabla" />
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
<mat-grid-tile [rowspan]="5">=></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>
css:
mat-grid-tile {
background: lightblue;
}
Css is just here to show the blocks ;)
I've rows with two flex divs inside each one. In one div i show an image and inside the other there is text. I don't understand why some divs shows correctly but in others the text overflows.
If i reload the page this bug disappears but if i delete cache it comes again.
Any ideas? Thanks in advance.
.box {
position: relative;
}
.image-box-right, .image-box-left {
width: 50%;
}
.image-box-left {
float: left;
}
.image-box-right {
float: right;
}
.title {
font-size: 0.95em;
}
.text-box-right, .text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
.text-box-left {
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-right" src="img/image1.jpg">
<div class="text-box-left dark">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-left" src="img/image2.jpg">
<div class="text-box-right">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
I don't think you need inline-block:
.notes-text-box-right, .notes-text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
You wrote two displaysettings in one CSS rule:
.notes-text-box-right, .notes-text-box-left {
[...]
display: flex;
[...]
display: inline-block;
[...]
}
The second one overwrites the first one, so you better erase that.
For a personal project with Angular, Angular Material and Flex-Layout I am trying to achieve a similar layout used by Bring! App:
Having images of different size (not all squared) I would like to center them proportionally and allow some text under them.
I have the following template and scss styles:
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/milk.png" alt="Latte" />
</div>
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
//---------------------------------------------------
.cards-container {
flex-wrap: wrap;
.item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px 0;
img {
width: 40%; // TODO: how to scale?
height: 40%;
}
.text-container {
display: flex;
flex-direction: column;
.item-name {
display: inline-block;
font-size: 1.1em;
}
.description {
width: 99%;
font-size: 0.8em;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
However the images do not scale down to keep the proportions with the others images, especially if narrow and long.
It all seems to look fine but it looks like your HTML code is missing the .text-container div and class.
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
should be
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
Now for the text-overflow: ellipsis; this doesn't work on multi-lines unless you implement some JavaScript or something.
If there is any change to your code, I'd make the images a background-image instead. There could be other ways without this, but it's what I use to make sure the container is responsive with the image always responsive and centred.
For Example: https://codepen.io/StudioKonKon/pen/wRjOzr (Includes SCSS)
.image {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
}
.image-mela {
background-image: url("https://via.placeholder.com/150x175");
}
.image-latte {
background-image: url("https://via.placeholder.com/200x50");
}
.image-long {
background-image: url("https://via.placeholder.com/50x100");
}
.cards-container {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cards-container .item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px;
padding: 0.5em;
box-sizing: border-box;
overflow: hidden;
}
.cards-container .item-card .image {
display: block;
margin: auto;
width: 40%;
height: 40%;
}
.cards-container .item-card .text-container {
display: flex;
flex-direction: column;
}
.cards-container .item-card .text-container .item-name {
display: inline-block;
font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards-container .item-card .text-container .description {
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image image-mela">Mela</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
<div class="item-card">
<div class="image image-latte">Latte</div>
<div class="text-container">
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
<div class="item-card">
<div class="image image-long">Long Image</div>
<div class="text-container">
<span class="item-name">Long Image Text</span>
<span class="description">must be hidden if long text</span>
</div>
</div>
</div>
Have you tried:
img {
width: 40%;
height: auto;
}
It should leave the image proportions consistent.
It is simple. I think it will solve the problem. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>item</title>
<style type="text/css" media="screen">
.item-single{
width: 100px;
background-color: #e7e7e7;
height: 100px;
text-align: center;
}
.item-single span{
display: block;
border: 1px solid #000; /* just to show the alignment */
}
.item-single img{
width: 50%; /* you can scale it down using width */
border:1px solid #000; /* just to show the alignment */
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="item-single">
<img src="http://sugamparajuli.com.np/wp-content/uploads/2019/01/banana.png">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</body>
</html>
This is the result.
item-image
I´m trying to learn HTML/CSS and find that when I add
display: -webkit-flex; to the CSS, the last div in the nav is pushed to the next line. When I disable flex box by simply deleting the line the div jumps back up to the (inline-block) nav. I'm currently testing in safari
The page looks as it should in Firefox, though not in Safari, any suggestions as to why?
Here's the code:
<body>
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="leftMenu">
Home
</div>
<div class="centerMenu">
<div>
Beginner
</div>
<div>
Advanced
</div>
<div>
Tips
</div>
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>
</body>
This is the all the CSS I've written, there is also a CSS reset section that I haven't included.
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
display: inline-block;
border-bottom: solid .1em;
display: -webkit-flex;
}
.leftMenu,
.rightMenu {
background-color: #454ed6;
height: 2em;
padding-top: 1em;
width: 17.5%;
-webkit-justify-content: space-around;
}
.leftMenu {
float: left;
}
.rightMenu {
float: right;
}
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
-webkit-flex-direction: column;
-webkit-justify-content: space-around;
}
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
So the main container in your case is nav element; and you have to define display:flex property for nav element. And your navigation HTML structure is not in proper format.
Check the Demo and here is your modified CSS Code.
nav{display: -webkit-flex;
display: -webkit-box; /*for older safari version*/
display: flex;}
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
border-bottom: solid .1em;
justify-content: space-around;
/*display: inline-block;
display: -webkit-flex;*/
}
.leftMenu,
.rightMenu {
background-color: #fbfbfb;
height: 2em;
padding-top: 1em;
width: 17.5%;
/*-webkit-justify-content: space-around;*/
}
/*.leftMenu {
float: left;
}
.rightMenu {
float: right;
}*/
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
/* -webkit-flex-direction: column;
-webkit-justify-content: space-around;*/
}
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="rightMenu">
Home
</div>
<div class="rightMenu">
Beginner
</div>
<div class="rightMenu">
Advanced
</div>
<div class="rightMenu">
Tips
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>