here is my code
.usp-bar {
display: flex;
flex-wrap: wrap;
background-color: #005932;
color: #fff;
font-weight: 700;
padding: 10px 0;
margin-top: 0;
justify-content: center;
height: auto;
}
.usp-text {
font-family: inherit;
font-size: inherit;
margin: auto;
}
.icon {
background-image: url(/media/icon.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
And here the HTML
<div class="usp-bar">
<div class="icon"></div>
<div class="usp-text">USP 1</div>
<div class="icon"></div>
<div class="usp-text">USP 2</div>
<div class="icon"></div>
<div class="usp-text">USP 3</div>
</div>
I want to have the icon left of my text. The bar is full width and should be full responsive. The 3 text items are centered. Thats all ok, but now I want an icon left of every of the 3 text boxes but the icon is like a background image and the text overlays this in my current setting.
Can you help me pls?
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style>
.usp-bar {
display: flex;
flex-wrap: wrap;
background-color: #005932;
color: #fff;
font-weight: 700;
padding: 10px 0;
margin-top: 0;
height: auto;
}
.icon {
background-image: url('https://img.icons8.com/ios-glyphs/50/000000/networking-manager.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.box {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
</style>
</head>
<body>
<div class="usp-bar">
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 1</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 2</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="usp-text">USP 3</div>
</div>
</div>
</body>
</html>
check this code if thats you are looking
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.
#pad {
float: left;
}
#kaart {
display: block;
transform: translateX(-30px);
text-align: center;
}
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 520px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
margin-right: 1.8rem;
/* Positioning */
position: sticky;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
</div>
In this application, a column covering 33.3% and 66.6% of a container was created using Bootstrap 5. The second column, occupying 66.6% of the space inside the container, was divided into two separate 40% and 60% columns. Application test image and developed solution are available below.
#pad {
float: left;
}
#weertekst {
font-weight: bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest {
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.specialColumn {
float: left;
}
.left {
width: 40%;
}
.right {
width: 60%;
}
.specialRow:after {
content: "";
display: table;
clear: both;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div style="margin: 75px;">
<div class="row">
<div class="col-md-4" style="margin: 0px !important; padding: 0px !important;">
<div id="pad" style="width: 100% !important;">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag">
<h3>Vandaag</h3>
</div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden">
<h3>
<!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
</div>
<div id="directie">
<h3 id="nbold">Windrichting:<br></h3>
<h3><span id="winddir"></span></h3>
</div>
<div id="snelheid">
<h3 id="nbold">Windsnelheid:<br></h3>
<h3><span id="windspeed"></span></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" style="margin: 0px !important; padding: 0px !important;">
<div class="specialRow">
<div class="specialColumn left" style="background-color:#aaa; height: 515px;">
<h1 class="text-center">%40</h1>
</div>
<div class="specialColumn right" style="background-color:#bbb; height: 515px;">
<h1 class="text-center">%60</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have an issue where an element is auto-sized by an unknown image's dimensions. I'd like a sibling element to this image to be constrained by the same width as the image is set to. Without using javascript.
I've set up a pen to show what I mean:
.container {
display: table
}
.img-wrapper {
line-height: 0
}
.info {
display: table-cell;
vertical-align: middle;
background: black;
color: white;
}
.info p {
margin: 0 2vmin
}
<div class="container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
https://codepen.io/Slagon/pen/oNePqNo
Is it possible for .info to be as wide .img-wrapper? (Ignore that the dimensions are predefined in this pen).
I used Bootstrap to solve this. Essentially how it works is a normal webpage spans 12 columns. So in this case I put each of you divs in a col-6 so that each element would take up half of the page. BOTH of these col-6 spans are contained by a row. Please see below.
.container {
display: block;
justify-content: center;
}
.img-wrapper {
line-height: 0;
}
.info {
display: flex;
background: black;
color: white;
width: 100%;
height: 100%;
}
.col-6 > .img-wrapper > img {
width: 100%;
height: 100%;
margin: 0;
}
div.col-6 {
padding: 0;
}
p {
width: 100%;
text-align: center;
margin: auto;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
</div>
<div class="col-6">
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
</div>
</div>
</body>
Click full-page
In the middle (not banner or footer) section of my page, I have two elements: classed as left-container and right-container.
I want to fill the left-container with many columns of a specific width, and have them overflow to the left, such that the page loads to show their right-most element and the user must scroll left to see the others.
How is this possible with flexbox?
Here's my code:
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 100vw;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
display: flex;
flex-direction: column;
}
<!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 rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Images of desired result:
As unusual an experience as it is likely to cause, you can use a mixture of the flex-direction and order properties to have a scrollable container start on its right-most side.
Like was mentioned in the comments, you will need a container around your columns with flex-direction: row-reverse; to start scrolling from the right. This will place your columns in the opposite order you expect, however.
If you try and use the direction: ltr; style to fix this issue, the scrollbar will again start from the left. Instead, you must set the order property of your columns in reverse. This will take some javascript or server-side templating if you want to avoid unnecessary nth-child selectors.
Here's an example.
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
#main {
flex-direction: row-reverse;
}
#left {
flex-direction: row-reverse;
overflow-x: scroll;
}
#banner { background-color: lightblue; }
#right { background-color: salmon; width: 400px; }
#left { background-color: teal; }
#footer { background-color: purple; }
<div class="column">
<div class="row" id="banner">Banner</div>
<div class="row" id="main">
<div id="right">Right Container</div>
<div class="row" id="left">
<div class="column" style="order:12">Column Container 1</div>
<div class="column" style="order:11">Column Container 2</div>
<div class="column" style="order:10">Column Container 3</div>
<div class="column" style="order:9">Column Container 4</div>
<div class="column" style="order:8">Column Container 5</div>
<div class="column" style="order:7">Column Container 6</div>
<div class="column" style="order:6">Column Container 7</div>
<div class="column" style="order:5">Column Container 8</div>
<div class="column" style="order:4">Column Container 9</div>
<div class="column" style="order:3">Column Container 10</div>
<div class="column" style="order:2">Column Container 11</div>
<div class="column" style="order:1">Column Container 12</div>
</div>
</div>
<div class="row" id="footer">Footer</div>
</div>
It is not possible to do that with CSS because CSS is made in such a unique way that you can do the things in right manner without any bugs in code .
What you are saying is a behavior opposite to what CSS made for ( which violates its basic rule ) .
Instead you can show the data which user should see first on the left and then he/she can scroll for more on the right side ( This is your best and easy shot) . It will remove other headache like which comes first and last and changing order.
Else you can use JS function to make it possible in opposite way
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 300px;
display: flex;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
padding: 40px;
flex-direction: row-reverse;
direction: rtl
}
<!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 rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Using order is the property to change the order of elements without changing position
I was wondering how you would achieve a clip path effect/knockout effect in css for multiple divs (created as rectangles) for a single background image (similar to clipping paths in photoshop?)
Is there a CSS tool for this? I have included a sample image within code.
example: https://imgur.com/a/dcADVca
codepen: https://codepen.io/lucasenz/pen/MWYaZBJ
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO.</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<h1>HELLO</h1>
</div>
<div class="content">
<div class="row ">
<div class="col rectangle">BOX ONE</div>
<div class="col rectangle">BOX TWO</div>
</div>
<div class="row ">
<div class="col rectangle">BOX THREE</div>
<div class="col rectangle">4 of 6</div>
</div>
<div class="row ">
<div class="col rectangle">5 of 6</div>
<div class="col rectangle">6 of 6</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1568039955984-85273dd1cd2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80"/>
</body>
</html>
CSS:
*{
font-family: lato;
}
body{
height: 100%;
}
h1{
font-weight:900;
letter-spacing: 0.2em;
text-align: center;
font-size: 4vh;
margin-top: 4vh;
}
.content{
width: 50%;
height: 80vh;
align-items: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rectangle{
height: 18vh;
width: 15vw;
margin: 1.5vh 0.7vw;
text-align: center;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
}
I would go for a simple solution. Create a container with your image as background and draw separator lines by creating transparent divs inside your container with white border.
.cont{
display: flex;
flex-wrap: wrap;
width: 560px;
height: 300px;
background-image: url("https://cnet4.cbsistatic.com/img/pI-Oq4fGqthDVMMMuyL2ZMnaC5I=/2019/11/01/1e902743-2ee4-4c22-9b66-0b396596b13e/20190701-154228.jpg");
background-size: cover;
}
.box{
flex-basis: 28%;
flex-grow: 1;
flex-shrink: 1;
height: 46%;
border: 10px solid white;
}
<div class="cont">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>