Please take a look at the below example. I'm learning css grids. The whole purpose is to keep things simple and to not need to specify distinct layout details on the child elements unnecessarily, so solutions should conform to this pattern.
Given the following:
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
.selected {
width: 150%;
height: 150%;
z-index: 2;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>
https://jsfiddle.net/robbie_at_harvard/a3ouq711/1/
Please adjust to cause the areas two, three and four to expand towards the middle instead of always from the top-left corner? Again, preferably with generic rules rather than ones specific to the div.class specifications.
Second question, if I wanted instead a 4x4 layout of 2x2 child elements, where clicking on one element expanded it to 3x3 and contracted the others to 1x2, 2x1, and 1x1 in the opposite corner, what is necessary to produce this solution?
You could use transform:scale(1.5) and position it with transform-origin.
It would require specific CSS rules depending on the grid (i use :nth-child to target each element)
For 2x2 use
main div:nth-child(1){transform-origin: top left;}
main div:nth-child(2){transform-origin: top right;}
main div:nth-child(3){transform-origin: bottom left;}
main div:nth-child(4){transform-origin: bottom right;}
.selected {
transform:scale(1.5);
z-index: 2;
}
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
}
.one {
background: red
}
.two {
background: green
}
.three {
background: blue
}
main div:nth-child(1) {
transform-origin: top left;
}
main div:nth-child(2) {
transform-origin: top right;
}
main div:nth-child(3) {
transform-origin: bottom left;
}
main div:nth-child(4) {
transform-origin: bottom right;
}
.selected {
transform: scale(1.5);
z-index: 2;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>
I think it's difficult to have a general solution since the 4 blocks need to move in different ways. By the way here a solution that involve few CSS changes.
I know you want a generic one but i think in all the cases you will have some specificities (like the color and the content)
function toggle(t) {
document.querySelectorAll('div').forEach(el =>
el.classList[0] === t.classList[0] ?
el.classList.toggle('selected') :
el.classList.remove('selected'))
}
:root,
html,
body,
main {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
main {
position:relative;
border: solid 3pt white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
div {
grid-area: span 2 / span 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 5em;
font-weight: bold;
color: white;
background: grey;
transition:0.5s;
}
.one {
background: red;
}
.two {
background: green;
right:25%;
}
.three {
background: blue;
bottom:25%;
}
.four {
bottom:25%;
right:25%;
}
.selected {
position:relative;
width:150%;
height:150%;
}
<main>
<div class=one onclick="toggle(event.target)">one</div>
<div class=two onclick="toggle(event.target)">two</div>
<div class=three onclick="toggle(event.target)">three</div>
<div class=four onclick="toggle(event.target)">four</div>
</main>
Related
As title, I can nudge down in increments of .001 but not up by the same amount as it seems to jump to the max value?
In the example code, pressing the Nudge - button see's the value decrease by .001 each press, exactly as expected however pressing the Nudge + button I expect an increase of .001 each press but instead it jumps to the max value for the range slider?
updatespeedchange();
function updatespeedchange() {
document.getElementById('curval').innerText = document.getElementById('p1pitchslider').value;
}
function p1nminus() {
document.getElementById('p1pitchslider').value = document.getElementById('p1pitchslider').value - .001;
updatespeedchange();
}
function p1plus() {
document.getElementById('p1pitchslider').value = document.getElementById('p1pitchslider').value + .001;
updatespeedchange();
}
.contbendnudge {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
width: 45px;
height: 25px;
border: 0.5px solid pink;
font-size: 10px;
text-align: center;
grid-template-areas:
"Nudge Nudge"
"nminus nplus";
}
.Nudge {
line-height: 10px;
grid-area: Nudge;
}
.nminus {
font-size: 34px;
line-height: 4px;
font-weight: 1;
margin-top: 2px;
grid-area: nminus;
}
.nplus {
font-size: 22px;
line-height: 10px;
font-weight: 900;
margin-top: 2px;
grid-area: nplus;
}
<input id="p1pitchslider" oninput="updatespeedchange()" class="pitchslider" type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>
</div><br>
<div class="contbendnudge">
<div class="Nudge">Nudge</div>
<div class="nminus" onclick="p1nminus()">-</div>
<div class="nplus" onclick="p1plus()">+</div>
</div>
Keep in mind that JavaScript is loosely typed, so the plus operator can also cause string concatenation. (Input values are always strings.) If you force the value to a float first it works.
updatespeedchange();
function updatespeedchange() {
document.getElementById('curval').innerText =
document.getElementById('p1pitchslider').value;
}
function p1nminus() {
document.getElementById('p1pitchslider').value -= .001;
updatespeedchange();
}
function p1plus() {
document.getElementById('p1pitchslider').value =
parseFloat(document.getElementById('p1pitchslider').value) + .001;
updatespeedchange();
}
.contbendnudge {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
width: 45px;
height: 25px;
border: 0.5px solid pink;
font-size: 10px;
text-align: center;
grid-template-areas: "Nudge Nudge" "nminus nplus";
}
.Nudge {
line-height: 10px;
grid-area: Nudge;
}
.nminus {
font-size: 34px;
line-height: 4px;
font-weight: 1;
margin-top: 2px;
grid-area: nminus;
}
.nplus {
font-size: 22px;
line-height: 10px;
font-weight: 900;
margin-top: 2px;
grid-area: nplus;
}
<input id="p1pitchslider" oninput="updatespeedchange()" class="pitchslider" type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>
<div class="contbendnudge">
<div class="Nudge">Nudge</div>
<div class="nminus" onclick="p1nminus()">-</div>
<div class="nplus" onclick="p1plus()">+</div>
</div>
I'm trying to manipulate what is happening in the fiddle on this forum, but I am having some trouble and I'm not sure where I am going wrong.
I have created my own pen here with a stripped down version of what is on my site.
Essentially what I want to do is whenever you hover over the image or the gray box, the body background color will change. (Ideally a fade in/out type of interaction, but if the fade part can be accomplished via CSS, I can do that).
I tried to changed getElementById (from the example) to getElementsByClassName since I have multiple instances of the class, but that didn't seem to work. I had added back in getElementById and it works where applied (on the image) but I don't think that would be best practice since I will have multiple instances of the class.
Disclaimer: I don't know much about JS, so if there is a better way to do this, I'd be glad to try it out!
I only added the JS in the post here to keep things condensed. HTML and CSS in the codepen.
$(document).ready(function(){
window.onload = function(){
var block1 = document.getElementById('hover-color1');
var body = document.body;
block1.onmouseover = function() {
body.className = 'hover-color1';
}
block1.onmouseout = function() {
body.className = '';
}
};
});
You are looking for a transition on the background color. Add the transition for background-color in your body CSS, then in your hover to change body, set the new background color and the transition will fire and make it animate from color one to the other color.
Javascript:
get the class elements using a node selector to create a nodeList -> querySelectorAll returns a nodeList
iterate over the list to get the event.target
use a mouseover and mouseout event to add/remove the class using classList.add/remove
const block1 = document.querySelectorAll('.hover-color1')
block1.forEach(img => {
img.addEventListener('mouseover', e => {
document.body.classList.add('hover-color1')
})
img.addEventListener('mouseout', e => {
document.body.classList.remove('hover-color1')
})
})
CSS: Add a transition to your CSS for the body on background and then on hover the background change will transition from the background-color set in body to the body.hoverElement background-color.
body {
font-family: 'IBM Plex Sans', sans-serif;
color: #1a1b1f;
font-size: 16px;
line-height: 28px;
font-weight: 400;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
body.hover-color1 {
background-color: red;
}
$(document).ready(function() {
window.onload = function() {
const block1 = document.querySelectorAll('.hover-color1')
block1.forEach(img => {
img.addEventListener('mouseover', e => {
document.body.classList.add('hover-color1')
})
img.addEventListener('mouseout', e => {
document.body.classList.remove('hover-color1')
})
})
}
})
.w-layout-grid {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-row-gap: 16px;
grid-column-gap: 16px;
}
body {
font-family: 'IBM Plex Sans', sans-serif;
color: #1a1b1f;
font-size: 16px;
line-height: 28px;
font-weight: 400;
-webkit-transition: background-color .5s linear;
-moz-transition: background-color .5s linear;
-o-transition: background-color .5s linear;
-ms-transition: background-color .5s linear;
transition: background-color .5s linear;
}
body.hover-color1 {
background-color: red;
}
.section {
position: relative;
z-index: 10;
width: 100%;
height: auto;
margin-right: 0px;
margin-left: 0px;
padding-right: 30px;
padding-left: 30px;
}
img {
display: block;
max-width: 1200px;
}
.container {
width: 100%;
max-width: 1140px;
margin-right: auto;
margin-left: auto;
}
.paragraph {
margin-bottom: 20px;
border-top: 1px none #525254;
font-family: 'IBM Plex Sans', sans-serif;
color: #525254;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.3px;
}
.relative-block {
position: relative;
}
.heading-3.display-mono {
font-family: 'IBM Plex Mono', sans-serif;
color: #1a1b1f;
font-size: 32px;
letter-spacing: 1.1px;
}
.heading-4.display-h6 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 20px;
line-height: 1.5em;
font-weight: 400;
}
.link {
display: inline-block;
font-family: 'IBM Plex Mono', sans-serif;
line-height: 1.5em;
text-decoration: none;
}
.portfolio-block-left {
position: relative;
max-width: 1440px;
margin: 50px auto;
}
.portfolio-grid-left {
position: relative;
grid-column-gap: 25px;
grid-row-gap: 25px;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: auto auto auto auto;
grid-template-rows: auto auto auto auto;
}
.portfolio-image.fade-in-1st {
position: relative;
z-index: 1;
}
.portfolio-title {
position: relative;
z-index: 2;
max-width: 570px;
margin-right: 0px;
margin-left: 0px;
padding: 25px;
background-color: #ccc;
}
.portfolio-block-right {
position: relative;
max-width: 1440px;
margin: 50px auto;
}
.portfolio-grid-right {
position: relative;
grid-column-gap: 25px;
grid-row-gap: 25px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto;
}
.max-1440 {
width: 100%;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
}
#w-node-link-block-825bf526 {
grid-column-end: 7;
grid-column-start: 1;
grid-row-end: 4;
grid-row-start: 1;
}
#w-node-eb6e1164-1454-9dc3-9597-76f59d0186bb-825bf526 {
grid-column-end: 8;
grid-column-start: 4;
grid-row-end: 5;
grid-row-start: 3;
align-self: end;
justify-self: end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="padding-50px section">
<div class="portfolio-block-left">
<div class="w-layout-grid portfolio-grid-left">
<a id="w-node-link-block-825bf526" href="#" class="portfolio-image fade-in-1st w-inline-block">
<img class="hover-color1" src="https://source.unsplash.com/random/1200x400" alt=""></a>
<div id="w-node-eb6e1164-1454-9dc3-9597-76f59d0186bb-825bf526" class="portfolio-title hover-color1">
<h3 class="heading-3 display-mono">Title</h3>
<h4 class="heading-4 display-h6">Secondary Title</h4>View Project
</div>
</div>
</div>
</div>
If you want to attach your mouse events to multiple items you can use querySelectorAll to get references to multiple nodes. They can be ids or classes the selectors are your choice. A data attribute could also be another choice which can be applied to any dom node as well. Regardless of your selectors you need to apply your onmouse events to each node, which is done by looping through the results of querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
If you want to control a transition without css, you can manipulate a dom nodes style attribute. In this case we apply a transition of 1 second on background and change and the background to either the data attribute if it exists for data-hover-color or else red by default on hover.
const body = document.body;
const domNodes = document.querySelectorAll("[data-hover-changer]");
for (domNode of domNodes) {
domNode.onmouseover = (event) => {
body.style.transition = "background 1s ease";
body.style.background = event.target.dataset.hoverColor || "red";
}
domNode.onmouseout = () => {
body.style.background = "transparent";
}
}
<div id="hoverId" data-hover-changer>Hover to change background to red</div>
<div class="hoverClass" data-hover-changer data-hover-color="yellow">Hover to change background to yellow</div>
<div class="hoverClass" data-hover-changer data-hover-color="green">Hover to change background to green</div>
<div>Hover will not work on me</div>
I make a game for a project that you must find the real neighbours of a country.
I have this HTML code:
.game-panel {
gap: 10px;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 5.5em 22px auto;
gap: 10px;
grid-template-areas: "side main" "side main2" "side main3";
}
#sidebar {
width: 200px;
border-radius: 5px;
background-color: #ff1493;
display: flex;
grid-area: side;
flex-direction: column;
z-index: 100;
}
#playing-country {
display: flex;
border-radius: 5px;
background-color: #708090;
grid-area: main;
}
#progress {
-webkit-appearance: none;
display: flex;
position: sticky;
top: 0;
height: 24px;
grid-area: main2;
height: 24px;
border: 1px solid #ccc;
color: #aaa;
width: 100%;
border-radius: 5px;
z-index: 102;
}
#progress[value]::-webkit-progress-bar {
background: #f1f1f1;
}
#progress[value]::-webkit-progress-value {
background: blue;
}
#neighbours-panel {
border-radius: 5px;
grid-area: main3;
display: flex;
flex-shrink: 1;
background-color: #fff;
}
.overlay {
position: absolute;
padding: 0 !important;
margin: 0 !important;
background-color: rgba(136, 132, 132, 0.5);
}
<div class="game-panel">
<div id='sidebar'>
<h3>Βρες τους γείτονες</h3>
<div id="round">Γύρος: <span id='round-text'>0</span></div>
<div id="score">Σκορ: <span id='score-text'>0</span></div>
<button id="btn-next-round"><span>Επόμενη χώρα</span></button>
<button id="btn-new-game"><span>Νέο παιχνίδι</span></button>
</div>
<div id="playing-country">playing-country</div>
<progress id='progress' max='100' value='0'></progress>
<div id='neighbours-panel'>
</div>
</div>
In the #neighbours-panel I dynamically create divs with country choices and when I click the right ones, a semi-transparent div with overlay class is created inside the #neighbours-panel that covers only the #neighbours-panel with the countries. To do this I add position:relative; to the parent #neighbours-panel and position:absolute; to the newly created overlay div. The #progress must be sticky on the top of the page when scroll down. The problem is that with position:relative; on the #neighbours-panel in order to work properly the overlay, the position:sticky; of the #progress is disabled. If I remove position:relative; then the sticky position works as it should but then the overlay div covers the whole page and not only the #neighbours-panel as it should. Can anyone help me find out what to do?
I am having some issues with CSS Grid "blow out" which is causing my text property text-overflow: ellipsis to not work.
I have seen many posts on this, and tried many things, but just don't understand what I have wrong. I can reproduce in a simple example.
In my case, I am using a third part component, where I want to put my UI inside one of it's elements.
For example, below the element third-party-container is the third part component, and my UI is contained in my-containerm where I wish to completely fill the third-party-container
HTML
<div id='third-party-container'>
<div id='my-container'>
<div id='s1'>S1</div>
<div id='s2'>S2</div>
<div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
</div>
</div>
CSS
#third-party-container {
height: 40px;
width: 140px;
background: orange;
}
#my-container {
background: yellow;
height: 100%;
width: 100%;
display:grid;
align-items: center;
justify-items: left;
grid-template-columns: min-content 13px minmax(0, 1fr);
grid-template-rows: 1fr;
column-gap: 2px;
white-space: nowrap;
}
#s1 {
background: red;
grid-row: 1;
justify-items: left;
grid-column: 1;
align-items: stretch;
}
#s2{
background: green;
grid-row: 1;
overflow: hidden;
grid-column: 2;
}
#s3 {
background: pink;
grid-row: 1;
justify-items: left;
display: grid;
align-items: center;
grid-column: 3;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Also available at this Plunkr
So in my-container I have a single row, and 3 columns. The first two columns have quite small widths. The first columns may vary slightly, but will always be quite small. The 2nd is just fixed.
The third column s3 (coloured pink) is the one that may sometimes have longer text than can fit in the containers. However, this is what I see in the above example...
When I look at this in dev tools, I can see the s3 is "blowing out", ie not being contained within its container.
I had got around this before by using the minmax(0, 1fr) but it is not working here.
The outer container has a fixed width, and my-container is 100% of this.
What am I doing wrong and how I can get this to work?
The issue is the use of display:grid on #s3. Remove it and also add width:100%
#third-party-container {
height: 40px;
width: 140px;
background: orange;
}
#my-container {
background: yellow;
height: 100%;
display: grid;
align-items: center;
justify-items: left;
grid-template-columns: min-content 13px minmax(0, 1fr);
grid-template-rows: 1fr;
column-gap: 2px;
white-space: nowrap;
}
#s1 {
background: red;
}
#s2 {
background: green;
overflow: hidden;
}
#s3 {
background: pink;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
width:100%;
}
<div id='third-party-container'>
<div id='my-container'>
<div id='s1'>S1</div>
<div id='s2'>S2</div>
<div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
</div>
</div>
I have a two row grid with three columns. Each row has a text in the middle column. The first row's middle column needs to fit to the text. But when there is a longer text in the second row, the first row's middle column won't fit to the text. A better explanation with pictures above:
When the first row's text is longer then it fits correctly.
But when the second row's text is longer than the first row's text, the first row's column won't fit the text.
How can I fit the first row middle column's width to the text?
Here is
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container {
justify-content: center;
display: grid;
grid-template-columns: 10vmin min-content 10vmin;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas: "left middle right ""left first-text-middle right""second-text-left second-text-middle second-text-right";
}
.left {
border: 1px solid red;
grid-area: left;
text-align: right;
}
.right {
border: 1px solid red;
grid-area: right;
}
.middle {
border: 1px solid red;
grid-area: middle;
}
.second-text-left {
border: 1px solid red;
grid-area: second-text-left;
}
.second-text-right {
border: 1px solid red;
grid-area: second-text-right;
}
.first-text-middle {
border: 1px solid red;
text-align: center;
grid-area: first-text-middle;
align-self: stretch;
vertical-align: top;
}
.second-text-middle {
border: 1px solid red;
text-align: center;
grid-area: second-text-middle;
align-self: stretch;
vertical-align: top;
}
<div class="grid-container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="left"></div>
<div class="first-text-middle">
<span id="n1">LoremIps</span>
</div>
<div class="second-text-left "></div>
<div class="second-text-middle">
<span id="n3">Lorem</span>
</div>
<div class="second-text-right"></div>
</div>
If you want the top text to expand according to the width of the parent element (which has been expanded by the .second-text-middle inner text), you could use simple JavaScript.
Here we can check the width of #n1 and .first-text-middle, and increase the font size: n%; of #n1 until it fits the parent.
fitWidth();
window.addEventListener("resize", function() {
fitWidth();
});
function fitWidth() {
let first = document.querySelector('.first-text-middle');
let firstText = document.getElementById('n1');
let textSize = 100; // we will use it like a base 100% font-size later
// set font size to '#n1'
firstText.style.cssText = 'font-size:' + textSize + '%';
while (first.clientWidth - 2 >= firstText.offsetWidth) {
textSize = textSize + 1; //increments font size by 1% each loop
firstText.style.cssText = 'font-size:' + textSize + '%';
// basically in DOM you see only result of the very last loop of this 'while' statment
}
}
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container {
justify-content: center;
display: grid;
grid-template-columns: 10vmin min-content 10vmin;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas: "left middle right ""left first-text-middle right""second-text-left second-text-middle second-text-right";
}
.left {
border: 1px solid red;
grid-area: left;
text-align: right;
}
.right {
border: 1px solid red;
grid-area: right;
}
.middle {
border: 1px solid red;
grid-area: middle;
}
.second-text-left {
border: 1px solid red;
grid-area: second-text-left;
}
.second-text-right {
border: 1px solid red;
grid-area: second-text-right;
}
.first-text-middle {
border: 1px solid red;
text-align: center;
grid-area: first-text-middle;
align-self: stretch;
vertical-align: top;
}
.second-text-middle {
border: 1px solid red;
text-align: center;
grid-area: second-text-middle;
align-self: stretch;
vertical-align: top;
overflow: hidden;
}
<div class="grid-container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="left"></div>
<div class="first-text-middle">
<span id="n1">Lorem</span>
</div>
<div class="second-text-left "></div>
<div class="second-text-middle">
<span id="n3">LoremIps</span>
</div>
<div class="second-text-right"></div>
</div>