I'm trying to create following shape.
Almost I tried to create this image by following way. In order create this Image using HTML and CSS. I tried to use following code.
.left1{
float:left;
transform: rotate(180deg);
}
.halfCircleRight1{
height: 70px;
width: 70px;
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
background: #326d7d;
}
.halfCoverTop1 {
height: 35px;
width: 35px;
border-bottom-right-radius: 10em;
background: #ffffff;
}
.halfCoverBottom1{
height: 35px;
width: 35px;
border-top-right-radius: 10em;
background: #ffffff;
}
.left{
float:left;
}
.halfCircleRight{
height: 70px;
width: 70px;
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
background: #b1a51f;
}
.halfCoverTop {
height: 35px;
width: 35px;
border-bottom-right-radius: 10em;
background: #ffffff;
}
.halfCoverBottom{
height: 35px;
width: 35px;
border-top-right-radius: 10em;
background: #ffffff;
}
<div class="left">
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
</div>
<div class="left">
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
</div>
<div class="left">
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
</div>
<div class="left">
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
<div class="halfCircleRight">
<div class="halfCoverTop"></div>
<div class="halfCoverBottom"></div>
</div>
</div>
<div class="left1">
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
</div>
<div class="left1">
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
</div>
<div class="left1">
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
</div>
<div class="left1">
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
<div class="halfCircleRight1">
<div class="halfCoverTop1"></div>
<div class="halfCoverBottom1"></div>
</div>
</div>
But some where I'm going wrong to achieve my desires output.I'm not able to figure out my approach. Could any one can please help achieve my actual output.
There are multiple possibilities to create this shape. Each one has its own pros and cons. You may decide which best suits your needs.
SVG Based Approach:
SVG is the recommneded and more appropriate way to create such shapes.
Step #1:
The idea is to draw a small component that is being repeated in your shape and then repeat it using SVG's patterns. We can use SVG's path element to create this shape and fill it with some color, gradient or pattern.
Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.
Below is the necessary code to create this shape:
<path d="M 0,.125
Q .110,.114 .125,0
A .125,.125 0 0 1 .125,.250
Q .110,.136 0,.125" />
I've used 3 commands inside path element. Below is a brief description:
M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
Q command is used to draw curves.
A command is also used to draw curves.
Working Example:
body {
background-color: #ececec;
}
svg {
margin: 10px auto;
display: block;
}
<svg width="170" height="170" viewBox="0 0 50 50">
<path d="M 0,25
Q 22,22 25,0
A 25,25 0 0 1 25,50
Q 22,28 0,25" fill="#aba219" fill-opacity="inherit" />
</svg>
Output Image:
Below is the output of first step:
Step #2:
Now we will create a pattern that will repeat this shape. After creating this we will be a bit more closer to the final output.
Consider the below code:
<defs>
<pattern id="pattern1" x="0" y="0" width="25%" height="25%"
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox">
<path id="tile" fill="inherit" fill-opacity="inherit"
d="M 0,.125
Q .110,.114 .125,0
A .125,.125 0 0 1 .125,.250
Q .110,.136 0,.125" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#pattern1)" />
Below is a brief description of above code:
SVG's <defs> element is used to define graphics/elements for later use. Objects defined inside defs are not drawn immediately on screen. They will be referenced by other parts of the code in future.
The <pattern> element defines a graphics object which can be redrawn at repeated x and y-coordinate intervals ("tiled") to cover an area. This pattern will be referenced by fill / stroke attributes of graphics elements.
<rect> element is used to draw rectangular area on screen. Notice the fill attribute used on this element. This attribute is referencing the pattern defined above in <defs> section. Now we are actually using this pattern to fill the rectangular area.
Working Example:
body {
background-color: #ececec;
}
svg {
margin: 0 auto;
display: block;
}
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<path id="tile" fill="inherit" fill-opacity="inherit"
d="M 0,.125
Q .110,.114 .125,0
A .125,.125 0 0 1 .125,.250
Q .110,.136 0,.125" />
<pattern id="pattern1" x="0" y="0" width="25%" height="25%"
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox">
<use href="#tile" fill="#aba219" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#pattern1)" />
</svg>
Output Image:
Below is the result till now:
Step #3:
Finally we will create two patterns and apply it on 2 different <rect> elements to create the final output.
Following code pattern will be used to create final output:
<defs>
<path id="tile" d="..." />
<pattern id="pattern1">
<use href="#tile" fill="#aba219" />
</pattern>
<pattern id="pattern2" patternTransform="scale(-1)">
<use href="#tile" fill="#023e54" />
</pattern>
</defs>
<rect width="200" height="880" fill="url(#pattern1)" />
<rect width="200" height="200" fill="url(#pattern2)" />
Most of the code is similar as described above. However notice the use of <use> element. Instead of defining path element in each pattern element, we have defined it once and copying it in 2 other places with <use> element.
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.
Working Example:
body {
background-color: #ececec;
}
svg {
margin: 0 auto;
display: block;
}
<svg width="190" height="190" viewBox="0 0 990 990">
<defs>
<path id="tile" fill="inherit" fill-opacity="inherit"
d="M 0,.125
Q .110,.114 .125,0
A .125,.125 0 0 1 .125,.250
Q .110,.136 0,.125" />
<pattern id="pattern1" x="0" y="0" width="25%" height="25%"
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox">
<use href="#tile" fill="#aba219" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="25%" height="25%"
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
patternTransform="scale(-1)">
<use href="#tile" fill="#023e54" fill-opacity="0.7" />
</pattern>
</defs>
<rect x="0" y="0" width="880" height="880" fill="url(#pattern1)" />
<rect x="110" y="110" width="880" height="880" fill="url(#pattern2)" />
</svg>
Output Image:
Below is the final output image:
HTML/CSS Based Approach:
Although possible but I won't recommend this because a lot of elements will be required to create this shape which is won't be an efficient approach.
Working Example:
body {
background-color: #ececec;
}
.tile-list {
list-style: none;
margin: 0 auto;
width: 225px;
padding: 0;
}
.tile-list li {
display: flex;
}
.tile-list li:nth-child(even) {
position: relative;
padding-left: 25px;
margin: -25px 0;
z-index: 1;
}
.tile {
border-radius: 100%;
position: relative;
overflow: hidden;
height: 50px;
width: 50px;
}
.tile .left {
position: absolute;
overflow: hidden;
height: 50%;
width: 50%;
left: 0;
top: 0;
}
.tile .left.bottom {
bottom: 0;
top: auto;
}
.tile .left::before {
box-shadow: 0 0 0 10px #aba219;
border-radius: 100%;
position: absolute;
overflow: hidden;
content: '';
height: 200%;
width: 200%;
left: -100%;
top: -100%;
}
.tile .left.bottom::before {
bottom: -100%;
top: auto;
}
.tile .right {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
left: 50%;
top: 0;
}
.tile .right::before {
background-color: #aba219;
position: absolute;
height: 100%;
content: '';
width: 100%;
left: -50%;
top: 0;
}
.tile-list li:nth-child(even) .tile {
transform: scale(-1);
}
.tile-list li:nth-child(even) .tile .right::before {
background-color: rgb(2, 62, 84, 0.7);
}
.tile-list li:nth-child(even) .tile .left::before {
box-shadow: 0 0 0 10px rgb(2, 62, 84, 0.7);
}
<ul class="tile-list">
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
<li>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
<div class="tile">
<div class="left top"></div>
<div class="left bottom"></div>
<div class="right"></div>
</div>
</li>
</ul>
What about another idea using some SVG, pseudo-element and multiple background:
.box {
margin:60px;
width:450px;
height:250px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="rgb(177, 165, 31,0.8)"/></svg>') -50px -50px /100px 100px,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-90 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="%23326d7d" transform="scale(-1,1)"/></svg>') 0px 0px/100px 100px;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:-50px;
height:50px;
left:0;
right:0;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="rgb(177, 165, 31,0.8)"/></svg>') 50px 0 /100px 100px;
}
.box:after {
content:"";
position:absolute;
bottom:-50px;
height:50px;
left:0;
right:0;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-90 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="%23326d7d" transform="scale(-1,1)"/></svg>')0px -50px/100px 100px ;
}
.intern {
height:100%;
position:relative;
}
.intern:before {
content:"";
position:absolute;
top:-50px;
bottom:0;
left:-50px;
width:50px;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="rgb(177, 165, 31,0.8)"/></svg>') 0 0 /100px 100px;
}
.intern:after {
content:"";
position:absolute;
top:0;
bottom:-50px;
right:-50px;
width:50px;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-90 10 75 80" width="100"><path d="M50 10 C 100 10, 100 90, 50 90 C 50 65, 35 50, 10 50 C 35 50, 50 35, 50 10" fill="%23326d7d" transform="scale(-1,1)"/></svg>')-50px 0/100px 100px;
}
<div class="box">
<div class="intern"></div>
</div>
UPDATE
Here is another idea without the use of SVG and only CSS (I will rely on radial-gradient):
.container {
position:relative;
width:400px;
z-index:0;
}
.bottom {
position:absolute;
z-index:-1;
top:0;
left:0;
transform:translate(50px,50px);
}
.top >div,
.bottom >div{
width:100px;
height:100px;
border-radius:50%;
display:inline-block;
background-size:100% 50%;
background-position:top,bottom;
background-repeat:no-repeat;
}
.top >div {
background-image:
radial-gradient(circle at top left, transparent 44%, rgb(177, 165, 31,0.8) 44.5%),
radial-gradient(circle at bottom left,transparent 44%, rgb(177, 165, 31,0.8) 44.5%);
}
.bottom >div {
background-image:
radial-gradient(circle at top right, transparent 44%, #326d7d 44.5%),
radial-gradient(circle at bottom right,transparent 44%, #326d7d 44.5%);
}
<div class="container">
<div class="top">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="bottom">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
Related
I have 10 squares that are floated, and in a wrapper. I wrap each square in an anchor tag so that I can link the squares.
So I have a wrapper and inside I have 10 of these elements:
.square {
float: left;
width: calc(20% - 16px);
padding-bottom: calc(20% - 16px);
overflow: hidden;
background-image: url(myimg.jpg);
border-radius: 5%;
background-size: cover;
position: relative;
z-index: 10;
margin: 8px;
transition: ease all .3s;
color: rgb(255, 230, 20);
}
.content {
position: absolute;
width: 88%;
height: 89%;
top: 6%;
left: 6%;
cursor: pointer;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 8px;
}
<div class="productsWrap">
<a href="mylink.com">
<div class="square">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</div>
</a>
//and then ten more of the same anchor tags
</div>
The first 5 squares display like stairs, and the five remaining that are in the second row display properly inline.
The problem is you are floating .square element but expecting .content to be floating. Here is the answer:
Improved HTML
<div class="productsWrap">
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
</div>
Improved CSS
.square {
float: left;
width: calc(20% - 16px);
padding-bottom: calc(20% - 16px);
overflow: hidden;
background: #f00;
border-radius: 5%;
background-size: cover;
position: relative;
z-index: 10;
margin: 8px;
transition: ease all .3s;
color: rgb(255, 230, 20);
}
.square a {
color:yellow;
}
.content {
position: absolute;
width: 88%;
height: 89%;
top: 6%;
left: 6%;
cursor: pointer;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 8px;
}
And Here is the result
enter image description here
I am creating a structure by svg shapes. I have overlapped a "rect" shape on "line" shape. What should I do for this?
See attached image
.parking-area {
background: #4c4c4c;
padding: 30px;
}
.circle-green {
height: 40px;
width: 40px;
background: #72ce79;
border: 2px solid white;
border-radius: 100px;
}
.circle-yellow {
height: 40px;
width: 40px;
background: #f9e972;
border: 2px solid white;
border-radius: 100px;
}
.circle-red {
height: 40px;
width: 40px;
background: #da5649;
border: 2px solid white;
border-radius: 100px;
}
.triangle-pink {
height: 0px;
width: 0px;
border-left: 15px solid #4c4c4c;
border-right: 15px solid #4c4c4c;
border-bottom: 40px solid #d400f9;
}
.element-description {
color: white;
font-weight: 500;
}
.parking-area hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 2px solid #909090;
}
.full-width {
width: 100%;
}
.dashed-line-h {
fill: none;
stroke: #7F7D60 !important;
stroke-width: 5;
stroke-miterlimit: 8;
stroke-dasharray: 12, 10;
}
.text-bg {
fill: green;
height: 30px;
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jQuery library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-green"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-1
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-yellow"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-2
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-red">
</div>
</div>
<div class="col-md-10">
<div class="element-description">Option-3
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="triangle-pink"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-4
<p>Lorem ipsum dolor sumit
<p>
</div>
<line style=""></line>
</div>
</div>
</div>
</div>
<hr>
<svg height="60px" width="100%">
<rect x="40%" y="20" class="text-bg"/>
<svg height="60px" width="100%" >
<text x="50%" y="40" alignment-baseline="middle" text-anchor="middle" style="fill:#939393; height: 30px; ">My text</text>
</svg>
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
</div>
</body>
</html>
I created my own object because I can't see your svgs in your code. Basically, create a relative container and put the rectangle and hr inside that, then the rectangle is an absolutely positioned element:
.relative {
position: relative;
}
.absolute {
position: absolute;
right: 1em;
top: -1.5em;
background: green;
width: 200px;
height: 50px;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Website</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="relative">
<div class="absolute"></div>
<hr>
</div>
<svg height="60px" width="100%">
<rect x="40%" y="20" style="fill:green; height: 30px; width:20%; " />
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © my website 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
I have a grid I have built out of flex boxes. Some of the grid is made of squares, with two rectangles. I can't seem to get the boxes to align correctly, using flexbox with flex-grow, or manually setting the box heights. The goal is to have them all line up with equal margins between the entire grid. Here is the grid code:
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:800px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
For easy viewing, here is a codepen I've made: https://codepen.io/bsquared/pen/zdPqPJ
As commented, if you involved <a> in your flex layout and also to draw the background, you can achieve the visual you look for.
a {
/*with no fix height so it can be spread evenly if needed*/
background: blue;
/* draw bg here it will include children area and further if needed to even the visual */
margin: 10px;
/* set margins here */
color: white;
}
/* flex layout and sizing */
.flex,
a {
display: flex;
}
.column,
a {
flex-direction: column;
flex: 1;/* make fill entire space left if any */
}
.box {
height: 400px;
}
.tall {
height: 800px;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');"><!-- background-image is to be send & set to the parent A -->
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
If you want to keep heights, then you need to mind the amounts of margins all together with eights of elements in each column :
example
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:824px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" >
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
The p tags, which has margins top and bottom by defaults, are pushing the boxes up. You have to use overflow: auto; on the parent div to prevent it from happening.
.project-grid .column .box {
// ...
overflow: auto;
}
Full working code:
.project-grid {
height: 1400px;
padding: 80px 20px;
}
.project-grid .column {
width: 33.33%;
margin-left: 10px;
flex-direction: column;
margin-top: -10px;
}
.project-grid .column:first-child {
margin-left: 0;
}
.project-grid .column .box {
margin-top: 10px;
background-color: blue;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
overflow: auto;
}
.project-grid .column .box.tall {
height: 800px;
}
.project-grid .column a .box>p {
font-family: $lato;
color: $white;
font-size: 24px;
}
.flex {
display: flex;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
So I'd like my footer to adjust and stay on the bottom of the page no matter the height of the content which is dynamic
Below is the CSS for the body, wrapper and footer .. the footer doesn't not stay in the bottom when the content is too long and gets display in the middle of the page when you have to scroll
body, html{
margin:0px;
padding:0px;
width:100%;
height:100%;
background:#FFFFFF;
}
#wrapper{
position:relative;
top:0px;
left:0px;
width:100%;
padding:0px;
min-height:100%;
overflow-x:hidden;
}
#footer{
position:absolute;
bottom:0px;
left:150px;
width:1600px;
height:500px;
background:blue;
}
...
<div id="wrapper">
<div id="header"></div>
<div id="logo"><img src="images/u176.png" class="logo_pic" style="outline: none;"></div>
<div id="search_bar"><input type="text" name="search_bar" class="search" /></div>
<div id="search_icon"><img src="images/u205.png" width="28px" height="28px" /></div>
<div id="become_a_chef"><span id="become_title">Become </span></div>
<div id="login">Log in</div>
<div id="sign_up">Sign up</div>
<div id="tap-container"><img id="tap-pic" class="food_container_pic" src="images/today_menu/u35.png" /></div>
<div id="tap-content"></div>
<div class="column1">
<div class="tap-links">Become a member</div>
<div class="tap-links">Sign up</div>
<div class="tap-links">Log in</div>
<div class="tap-links">Home</div>
</div>
<div class="column2">
<div class="tap-links">Search</div>
<div class="tap-links">Download the App</div>
<div class="tap-links">How it works</div>
<div class="tap-links">Help</div>
</div>
<div id="chef-rating-responsive">
<div class="subinfo_container3"><img class="food_container_pic" src="images/fusion/u1837.jpg" /></div>
<div class="subinfo_container4">A</div>
<div class="subinfo_container5">Open Now</div>
<div class="subinfo_container6">More...</div>
</div>
<div id="cover_picture_container"><img class="food_container_pic" src="images/u4.jpg" /></div>
<div id="profile_picture_container"><img id="profile_picture" class="img" src="<?php echo $picture;?>"></div>
<div id="chef_description_container">
<div id="kitchen_name"><span id="kitchen_title"><?php echo $name;?></span></div>
<div id="chef_description_summary"><?php echo description;?></div>
<div id="schedule_info_container">
<div class="subinfo_container">
<img id="chef_rating" src="images/fusion/u1837.jpg" width="186px" height="35px">
<span id="number_reviews">64 reviews</span>
</div>
<div class="subinfo_container"><span id="open_now">Open Now</span></div>
<div class="subinfo_container"><span id="chef_location">Chef Location</span></div>
<div class="subinfo_container2"><span id="letter_grade">A</span><span id="chef_grade">since Nov.2016</span></div>
<div class="subinfo_container2">
<div id="clock"><img id="u1341_img" src="images/u1341.png" class="full" ></div>
<span id="schedule_hours"></span>
</div>
<div class="subinfo_container2"><span id="chef_contact">Chef contact</span></div>
</div>
</div>
<div class="today_menu">
<div class="space"></div>
</div>
<div id="footer">
<div class="company_footer">
<div class="title">Company</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Careers</div>
<div class="column_content_footer">Press</div>
<div class="column_content_footer">Blog</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Help</div>
<div class="column_content_footer">Policies</div>
<div class="column_content_footer">Disaster</div>
<div class="column_content_footer">Terms & Privacy</div>
</div>
<div class="discover_footer">
<div class="title">Discover</div>
<div class="column_content_footer">Trust & Safety</div>
<div class="column_content_footer">Invite friends</div>
<div class="column_content_footer">Gift card</div>
<div class="column_content_footer">pricks</div>
<div class="column_content_footer">Mobile</div>
<div class="column_content_footer">Events support</div>
<div class="column_content_footer">Travel</div>
<div class="column_content_footer">Nearby</div>
</div>
<div class="kitchening_footer">
<div class="title"></div>
<div class="column_content_footer"></div>
<div class="column_content_footer">Serving</div>
<div class="column_content_footer">Responsible</
</div>
<div class="social_media_buttons">Hey</div>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
background: #fff;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 400px;
box-sizing: border-box;
}
#footer {
z-index: 50;
position: fixed;
bottom: 0;
width: 100%;
height: 400px;
background: blue;
}
<div id="wrapper">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="footer">
</div>
</div>
This works perfectly fine for me (tweaked it a little bit). I'd advice you not to use fixed widths like 1600px, but to work with percentages and max-widths. Hope this helps
If your footer has a fixed height you could do something like this:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.force-min-height {
min-height: 100%;
position: relative;
}
.header {
background: grey;
}
.content {
/* padding being the same as footer height */
padding-bottom: 4em;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: grey;
}
<div class="force-min-height">
<div class="header">Header</div>
<div class="content">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</div>
<div class="footer">Footer</div>
</div>
I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row
I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>
I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>