My Bootstrap columns are equal in height no matter the size of the device (computers, tablets, phones, etc.) thanks to JavaScript's MatchHeight.
But the problem is that I also want to make the buttons inside them equal in height despite different amount of text above them. I've tried min-height, margin-bottom (aren't responsive). How can I achieve this? With bootstrap somehow, or js, or something but it's important for aesthetics!
EDIT: This is what I want to achieve: https://i.stack.imgur.com/NOlns.png
Buttons stay the same no matter what!
#section4 .divider-fullwidth {
margin-bottom: 15px;
}
#section4 .lastdivider {
margin-top: 50px;
}
#section4 .box {
margin: 1px;
margin-bottom: 30px;
padding: 5% 8%;
}
#section4 .btn {
font-size: .9em;
padding: 5% 4%;
width: 100%;
}
#section4 .innerBox {
min-height: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_section4">
<div id="section4" class="container">
<div class="row intro">
<h2>ESCOGE TU PLAN</h2>
<p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p>
</div>
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
</div>
</div>
</div>
Below is the solution, I assume ,this is what you are looking for.
.box{
position: relative;
height:500px;
}
.btn{
position: absolute;
bottom:0px;
width: auto; //You can adjust the width accordingly
}
You can adjust the height of your div accordingly.
.box {
border: 1px solid black;
padding: 20px;
margin: 20px;
position: relative;
height: 440px;
}
.btn {
font-size: .9em;
float: none;
width: auto;
position: absolute;
bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
</div>
Padding given to .box is causing the issue.
Related
I create a horizontal list using float:left .It is working fine in all element but not working in last element . I have already trying clear:both.but it not working.
Actually I the problem is all element have 101px height . but last item or last li increase it's height to 303px .I am thinking float left not working.
here is my code
https://jsfiddle.net/74scu286/1/
I am using like this
.rh08-slider__slide {
float: left;
position: relative;
}
my only concern was why last element increase it's height as it has same content.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body class="f20 f20v0 ready" style="opacity:1">
<div class="f20w1">
<section class="rh08 rh08v0 rw-neutral-50bg" data-trackas="rh08" data-ocomid="rh08">
<div class="rh08-slider rh08-slider-1 is-draggable rh08-slider_ready" data-custom-id="rh08-slider-1">
<div class="rh08-slider__slides-container">
<div class="rh08-slider__track" style="width: 8454px; transform: translate3d(-1409px, 0px, 0px);">
<div class="rh08-slider__slide" data-crystal-slide="1" style="width: 16.6667%;">
<div class="rh08w1 cpad">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">4 Premier League wählt Oracle Cloud als Grundlage für
neue, fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert
die Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
</div>
<div class="rh08w1 cpad rh08-slider__slide slick-active" data-crystal-slide="2"
style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert die
Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="3" style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">2 Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert die
Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
<!-- <div class="crsl-nav slick-nav "><a class="slick-prev slick-arrow slick-disabled" data-lbl="prev-slide" aria-label="Previous" aria-disabled="true" style="">Previous</a><a class="slick-next slick-arrow o-hf" data-lbl="next-slide" aria-label="Next" style="" aria-disabled="false">Next</a><ul class="slick-dots hide" role="tablist"><li class="slick-active" role="presentation"><button type="button" aria-pressed="true" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="0" aria-selected="true">1</button></li><li role="presentation"><button type="button" aria-pressed="false" role="tab" id="slick-slide-control01" aria-controls="slick-slide03" aria-label="2 of 2" tabindex="-1">2</button></li></ul></div>-->
</div>
<div class="rh08-slider__slide" data-crystal-slide="6" style="width: 16.6667%;">
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="2" style="width: 16.6667%;">
<div class="rh08w2 rh02txt">
<div class="rh08w5">
<div class="rh08w6">
<h2 class="rwaccent-4">Premier League wählt Oracle Cloud als Grundlage für neue,
fortschrittliche Fußballanalysen</h2>
<p>Das Gesundheitsmanagementsystem des australischen Bundesstaates digitalisiert
die Patientenaufnahme und verwaltet gleichzeitig Gesundheitsakten und
Impfstoffbestände sicher.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /RH08v0 -->
</div>
</body>
</html>
My issue is related to height .Actually last element increase it's height. it should be same as 101px as other slide
updated link https://jsfiddle.net/74scu286/1/
Your floats are working fine.
However, your final floated div has this extra div within it which the others don't have:
<div class="rh08w1 cpad rh08-slider__slide" data-crystal-slide="2" style="width: 16.6667%;">
This means you are putting the width down by 16.6667% twice so it's narrower, thus taller.
I know there are a lot of question similar but none have helped me so I'm here.
I have a 9 button grid, if i click one it change color (orange) but if i click another one they both stay orange. i don't want it. i want that if a button is already orange, the new one get colored but the first one return to normal color. I tried in a lot of ways but i'm not so good at js and HTML so i'm not understanding where the problem is
function hide() {
var x = document.getElementById("demo");
var y = document.getElementById("demo2")
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
function hide2() {
var x = document.getElementById("demo2");
var y = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
document.getElementById('sel').onclick = function() {
var className = ' ' + sel.className + ' ';
var a = document.getElementById('sel2');
var b = document.getElementById('sel2');
var c = document.getElementById('sel3');
var d = document.getElementById('sel4');
var e = document.getElementById('sel5');
var f = document.getElementById('sel6');
var g = document.getElementById('sel7');
var h = document.getElementById('sel8');
var i = document.getElementById('sel9');
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
this.a = a.replace(' btn2 ', 'btn ')
this.b = b.replace(' btn2 ', 'btn ')
this.c = c.replace(' btn2 ', 'btn ')
this.d = d.replace(' btn2 ', 'btn ')
this.e = e.replace(' btn2 ', 'btn ')
this.f = f.replace(' btn2 ', 'btn ')
this.g = g.replace(' btn2 ', 'btn ')
this.h = h.replace(' btn2 ', 'btn ')
this.i = i.replace(' btn2 ', 'btn ')
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel2').onclick = function() {
var className = ' ' + sel2.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel3').onclick = function() {
var className = ' ' + sel3.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel4').onclick = function() {
var className = ' ' + sel4.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel5').onclick = function() {
var className = ' ' + sel5.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel6').onclick = function() {
var className = ' ' + sel6.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel7').onclick = function() {
var className = ' ' + sel7.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel8').onclick = function() {
var className = ' ' + sel8.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
document.getElementById('sel9').onclick = function() {
var className = ' ' + sel9.className + ' ';
if (~className.indexOf(' btn ')) {
this.className = className.replace(' btn ', 'btn2 ');
} else {
this.className = className.replace('btn2 ', 'btn ');
}
}
body {
font-family: "Open Sans", sans-serif;
background-color: white;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2 {
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Normalize.css">
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="container justify flex-row">
<div class="flex-col">
<div class="justify flex-row">
<h1 class="intro">Vuoi conoscere quali potrebbero <br> essere i <strong>costi</strong> della attività di <span class="orange">logistica</span> e <br>
<span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br> Gruppo Sinergia?</h1>
</div>
<div class="justify flex-row">
<h2 class="orange">Calcola il tuo preventivo!</h2>
</div>
<div class="justify flex-row">
<h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br> dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
</div>
<div class="justify flex-row">
<h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br> struttura di Gruppo Sinergia.</h3>
</div>
<!--^tariffe^-->
<div class="justify flex-row">
<p class="tabtitle">TIPOLOGIA PRODOTTO</p>
</div>
<!--Parte di codice con button-->
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div class="justify flex-row">
<p class="tabtitle">DIMENSIONI PRODOTTO</p>
</div>
<div class="flex-row justify evenly">
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide()">Standard</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide2()">Fuori misura</button>
</div>
</div>
</div>
<div id="demo2" class="justify m-30 evenly bg flex-row hide">
<div class="flex-col">
<div class="flex-row">
<p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
</div>
<div class="flex-row justify evenly">
<input class="small info2" type="text" placeholder="lunghezza">
<input class="small info2" type="text" placeholder="larghezza">
<input class="small info2" type="text" placeholder="altezza">
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti justify flex-row">
<div class="flex-col">
<p>€ <span class="white">4,56</span></p>
</div>
<div class="flex-col">
<p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col align">
<div class="flex-row">
<p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
<div class="flex-row justify intro">
<p class="tariffe">
I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br> Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br> Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br> di prodotti, contattaci!
</p>
</div>
<div class="justify flex-row bg">
<div class="flex-col">
<div class="flex-row">
<p>Nome e Cognome</p>
</div>
<div class="flex-row">
<p>E-mail</p>
</div>
<div class="flex-row">
<p>Telefono</p>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
</div>
</div>
<div class="flex-row m-7 justify">
<button class="richiedi">
Richiedi un preventivo
</button>
</div>
</div>
</div>
</body>
</html>
Just to let everyone know, the function in js i'm trying to make to solve this is just on the first button (ID sel) and i've tried telling the code to replace the colored class with the uncolored one.
I also know that it will look strange cause i have used 2 different ways to create a variable, but i found all the other function i used on stack overflow written like that (i just changed the ID name) but i don't know if there are differences on how i then added the other variables.
You can easily achieve this using the below steps
First, remove all code in your javascript regarding click listener.
Then, store a list of buttons using this
var buttons = document.querySelectorAll('.bottoneCategoria');
Then, add this function. Basically, this function will be called whenever one of your buttons is clicked.
function onButtonClick(event) {
// Get the button on which user clicked using event.target
let clickedButton = event.target;
// Loop over all your buttons and replace the btn2 with btn
// This means all buttons will now be normal
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.replace('btn2', 'btn');
}
// Finally change your clicked button from btn to btn2
// This will make your clicked button to orange while rest will be normall
clickedButton.classList.replace('btn', 'btn2');
}
Finally, loop over all your buttons and attach the function you created in previous step to all the buttons.
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', onButtonClick);
}
Check the working code snippet for more details.
function hide() {
var x = document.getElementById("demo");
var y = document.getElementById("demo2")
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
function hide2() {
var x = document.getElementById("demo2");
var y = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "inline-flex";
} else {
x.style.display = "inline-flex";
}
if (y.style.display === "inline-flex") {
y.style.display = "none"
}
}
var buttons = document.querySelectorAll('.bottoneCategoria');
function onButtonClick(event) {
let clickedButton = event.target;
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.replace('btn2', 'btn');
}
clickedButton.classList.replace('btn', 'btn2');
}
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', onButtonClick);
}
body {
font-family: "Open Sans", sans-serif;
background-color: white;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify {
justify-content: center;
}
.align {
align-items: center;
}
.evenly {
justify-content: space-evenly;
}
.between {
justify-content: space-between;
}
.border {
border: 1px solid black;
}
.m-0 {
margin: 0;
}
.spacer {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.orange {
color: orange;
}
.bold {
font-weight: bold;
}
.bg {
background-color: whitesmoke;
}
.tabtitle {
font-weight: bold;
}
.tariffe {
font-size: small;
}
.intro {
text-align: center;
}
.tartitle {
font-size: medium;
}
div h2 {
font-size: xx-large;
}
.cont {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
margin-top: 12px;
cursor: pointer;
}
.m-7 {
margin-top: 7px;
}
.m-14 {
margin: 14px;
padding: 0px;
}
div input {
border-radius: 3px;
border: solid 1px black;
}
div input:focus {
outline: none;
}
.richiedi {
text-align: center;
padding: 5px 50px;
}
.tabcosti {
background-color: darkorange;
border: solid darkorange 1px;
}
.border {
border: solid darkorange 1px;
}
.black {
color: black;
}
.white {
color: white;
}
.m-left-50 {
margin-left: 200px;
}
.x-small {
font-size: x-small;
}
.tabcosti2 {
border-top: 0px;
border: solid darkorange 1px;
}
.margin-left {
margin-left: 20px;
}
.info {
width: 215px;
height: 20px;
}
.info2 {
width: 75px;
height: 20px;
margin: 10px;
}
.small {
font-size: small;
}
.unbtn {
border: 0px;
width: 20vw;
height: 30px;
background-color: whitesmoke;
}
.unbtn:focus {
outline: none;
background-color: darkorange;
color: white;
}
.hide {
display: none;
}
.btn {
background-color: whitesmoke;
border-radius: 3px;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
.btn2 {
background-color: darkorange;
color: white;
border: none;
text-decoration: none;
flex-grow: 1;
margin: 10px;
height: 30px;
}
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Normalize.css">
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="container justify flex-row">
<div class="flex-col">
<div class="justify flex-row">
<h1 class="intro">Vuoi conoscere quali potrebbero <br> essere i <strong>costi</strong> della attività di <span class="orange">logistica</span> e <br>
<span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br> Gruppo Sinergia?</h1>
</div>
<div class="justify flex-row">
<h2 class="orange">Calcola il tuo preventivo!</h2>
</div>
<div class="justify flex-row">
<h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br> dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
</div>
<div class="justify flex-row">
<h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br> struttura di Gruppo Sinergia.</h3>
</div>
<!--^tariffe^-->
<div class="justify flex-row">
<p class="tabtitle">TIPOLOGIA PRODOTTO</p>
</div>
<!--Parte di codice con button-->
<div class="justify evenly flex-row">
<div class="flex-col">
<div class="flex-row">
<button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
</div>
<div class="flex-row">
<button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
</div>
<div class="flex-row">
<button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
</div>
<div class="flex-row">
<button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
</div>
<div class="flex-row">
<button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
</div>
<div class="flex-row">
<button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
</div>
<div class="flex-row">
<button id="sel9" class="btn bottoneCategoria">Altro</button>
</div>
</div>
</div>
<div class="justify flex-row">
<p class="tabtitle">DIMENSIONI PRODOTTO</p>
</div>
<div class="flex-row justify evenly">
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide()">Standard</button>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<button class="unbtn" onclick="hide2()">Fuori misura</button>
</div>
</div>
</div>
<div id="demo2" class="justify m-30 evenly bg flex-row hide">
<div class="flex-col">
<div class="flex-row">
<p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
</div>
<div class="flex-row justify evenly">
<input class="small info2" type="text" placeholder="lunghezza">
<input class="small info2" type="text" placeholder="larghezza">
<input class="small info2" type="text" placeholder="altezza">
</div>
</div>
</div>
<div id="demo" class="justify m-30 evenly flex-row bg hide">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
</div>
</div>
</div>
<div class="flex-row bg m-7 justify evenly">
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
</div>
<div class="align flex-row">
<input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
</div>
</div>
<div class="flex-col">
<div class="align flex-row">
<input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
</div>
</div>
</div>
<div class="justify evenly flex-row">
<div class="flex-col">
<p>TARIFFA DI GESTIONE</p>
</div>
<div class="flex-col">
<p>TARIFFA DI STOCCAGGIO</p>
</div>
</div>
<div class="tabcosti justify flex-row">
<div class="flex-col">
<p>€ <span class="white">4,56</span></p>
</div>
<div class="flex-col">
<p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
</div>
</div>
<div class="flex-row tabcosti2">
<div class="flex-col align">
<div class="flex-row">
<p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
</div>
<div class="flex-row">
<p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
</div>
<div class="flex-row">
<p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
</div>
</div>
<div class="flex-col spacer"></div>
</div>
<div class="flex-row justify intro">
<p class="tariffe">
I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br> Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br> Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br> di prodotti, contattaci!
</p>
</div>
<div class="justify flex-row bg">
<div class="flex-col">
<div class="flex-row">
<p>Nome e Cognome</p>
</div>
<div class="flex-row">
<p>E-mail</p>
</div>
<div class="flex-row">
<p>Telefono</p>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
<div class="flex-row">
<input class="small info m-14" type="text">
</div>
</div>
</div>
<div class="flex-row m-7 justify">
<button class="richiedi">
Richiedi un preventivo
</button>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
I have a list of div, each div with a button. When I click a button a text is displayed, and when I click out, the info hides with focus out function. If I have a button opened and I want to click a parent button, it's work's well, the button that was opened closes and the new button that I pressed open at the same time. The problem is when I want to do this action with a button that is next, it's don't do the two things and the same time (focus out and click the new button). Live example to check it: https://www.lagaleramagazine.es/
$(".p1").hide();
$(".p1-img").hide();
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
$(this).focusout(function() {
$(".p1").hide();
$(".p1-img").hide();
$(this).text('Más detalles');
});
var $p1 = $(this).next(".p1").toggle();
var $p1img = $(this).parents().eq(4).find(".p1-img").toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule">
<span class="ev-day">25</span>
<span class="ev-mo">febrero</span>
<span class="ev-yr">2019</span>
</div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title">
<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
</h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas
para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
Ir al evento »
</div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue">
<span class="ect-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<span class="ect-venue-details ect-address">
Area de atención al Mayor , Ayuntamiento de Badajoz,
<span class="tribe-address">
<span class="tribe-locality">Badajoz</span>
<span class="tribe-delimiter">,</span>
<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
<span class="tribe-country-name">España</span>
</span>
</span>
<span class="ect-google">
<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
</span>
<div class="ect-rate-area">
<span class="ect-rate-icon">
<i class="fa fa-money" aria-hidden="true"></i>
</span>
<span class="ect-rate">Gratuito</span>
</div>
</div>
</div>
</div>
</div>
</div>
I suggest you can remove the focusout functionality and use click event only since its more accessible. Please check the example below.
Note: The reason why focusout is not working for you is that you are targeting a global class .p1 and hiding it, which is basically hiding the other p tags as well.
$(".btn1").click(function() {
if ($.trim($(this).text()) === 'Más detalles') {
$(this).text('Menos detalles');
} else {
$(this).text('Más detalles');
}
var $p1 = $(this).next(".p1");
var $p1img = $(this).parents().eq(4).find(".p1-img");
$p1.toggle();
$p1img.toggle();
$(".p1").not($p1).hide();
$(".p1-img").not($p1img).hide();
});
.p1,
.p1-img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="event-55758" class="ect-list-post ect-featured-event data-parent-post-id=" 51063 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/timthumb.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Exposición : “16 personajes que maravillan y … Miguel de Cervantes”." rel="bookmark">Exposición : “16 personajes que maravillan y … Miguel de Cervantes”.</a></h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>El próximo 11 de enero, se inaugurará en la Biblioteca Pública del Estado "Bartolomé J. Gallardo" de Badajoz , esta exposición que traza la vida literaria de Miguel de Cervantes(1547-1616), a través de un recorrido por su propia
obra y acompañado de otros 16 personajes que conmemoran la muerte del autor, incluyendo la presencia del novelista en...</p> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/"
class="ect-events-read-more" rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><span class="tribe-address"><span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr"
title="Badajoz">Badajoz</abbr><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span></div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="event-58349" class="ect-list-post ect-simple-event data-parent-post-id=" 58345 ""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/02/cropped-32396-vegetables-1920x1200-photography-wallpaper.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Come con la cabeza, no con la boca – Charlas para niños" rel="bookmark">Come con la cabeza, no con la boca – Charlas para niños</a></h2>
<button class="btn1 button-more svg"><span>Más detalles</span></button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Fundación CB lanza de nuevo una campaña para educar y concienciar a los niños y padres sobre la importancia de seguir unos hábitos alimenticios saludables. Por la mañana se ofrecerán las charlas a los alumnos y por la tarde a los padres interesados
en ampliar conocimientos sobre buenos alimentos, enfermedades relacionadas con una mala alimentación,...</p> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" class="ect-events-read-more"
rel="bookmark">Ir al evento »</a></div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address">Fundación CB,<span class="tribe-address"><span class="tribe-street-address">C/ Pablo Sorozábal, s/nº1,</span> <br> <span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-postal-code">06006</span><span class="tribe-country-name">España</span></span>
</span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=C%2F+Pablo+Soroz%C3%A1bal%2C+s%2Fn%C2%BA1%2C+Badajoz+Badajoz+06006+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span>
<div class="ect-rate-area"><span class="ect-rate-icon"><i class="fa fa-money" aria-hidden="true"></i></span> <span class="ect-rate">Gratuito</span></div>
</div>
</div>
</div>
</div>
</div>
This is my current plan: making the button with the white circle around, does not even need the WhatsApp icon.
But after so much hitting my head and looking for a solution, I could not find the solution and came for help.
It's coming out like this:
Someone can help me?
The HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="piauí fábio abreu segurança eleições">
<title>Fábio Abreu</title>
<meta property="og:title" content="Fábio Abreu">
<meta name="twitter:title" content="Fábio Abreu">
<meta name="description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta name="twitter:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta name="twitter:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:secure_url" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:width" content="600">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Fábio Abreu">
<meta property="og:url" content="http://www.fabioabreupi.com.br/">
<meta property="og:type" content="website">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="smUoPpsSNtD2udIYqosIhQyHKaWY5tK49rUhJBLTElTKMCyIgbxE3BAqVwLvADny/9UZ+J6IGf29QvjPM72Fvw==" />
<link rel="stylesheet" media="all" href="/assets/site-dc393f9cdad26bd31342ace6c0e567e3893492c1ec06c16976bea61958ce06ad.css" />
<link rel="stylesheet" media="all" href="/assets/default/css/main-5c3e617fe669fbfd1915fd6ba42ddae97daaf842e3037fde45d55bfdd0f7b4aa.css" />
<link rel="canonical" href="http://www.fabioabreupi.com.br/">
<link rel='shortcut icon' type='image/x-icon' href='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_95e76849-329a-449b-8e1b-f118083035a4.png' /> <link href='https://fonts.googleapis.com/css?family=Roboto Condensed:400,400i,700,700i' rel='stylesheet'> <style>
#TopMenu ul#menu-main li a,#TopMenu ul#menu-main li a span.caret{font-size:14px !important;text-transform:uppercase !important}
#MainHeader{background-color:rgba(0, 0, 0, 0) !important}
h3{font-size:15px !important;font-family:'Roboto Condensed' !important;font-weight:bold !important}
footer#MainFooter{background-color:rgba(255, 255, 255, 1) !important;border-color:rgba(255, 255, 255, 1) !important}
</style>
<style>#TopMenu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2722ad+28,ff3b21+100 */
background: #2722ad; /* Old browsers */
background: -moz-linear-gradient(left, #2722ad 28%, #ff3b21 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2722ad 28%,#ff3b21 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2722ad 28%,#ff3b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2722ad', endColorstr='#ff3b21',GradientType=1 ); /* IE6-9 */
}
#menu-main{
padding: 0px 20px 0px 9px;
margin: 0px 20px 0px 9px;
word-spacing: 0px;
}
#menu-main li:last-child{
padding-left: 178px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-radius: 42px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px
text-decoration:none;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:44px;
}
}
#menu-main li:nth-last-child(2){
padding-left: 20px;
}
#menu-main li:nth-last-child(3){
padding-left: 20px;
}
#menu-main li:nth-last-child(4){
padding-left: 20px;
}
#menu-main li:nth-last-child(5){
padding-left: 20px;
}
#MainHeader{
padding: 0px 0px 0px 5px;
}
#MainFooter{
background-color: #00004d
}
#GroupList1{
background-color: #ffffff;
box-shadow: none;
}
#lws-homesection-title{
text-align: center;
}
#GroupList2{
display: none;
}</style>
</head>
<body class="palette-red">
<div id="fb-root"></div>
<header id="MainHeader">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-3">
<div class="LogoArea">
<a href="/" id="BrandImage">
<img src="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png" alt="Fábio Abreu" class="img-responsive center-block">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div id="ContactsTop">
</div>
</div>
</div>
</div>
</header>
<nav id="TopMenu" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul id="menu-main" class="nav navbar-nav" data-hover="dropdown" data-animations="zoomIn">
<li>Início</li>
<li>NOTÍCIAS</li>
<li>FOTOS</li>
<li>PROJETOS</li>
<li>BIOGRAFIA</li>
<li>ENTRE EM CONTATO</li>
</ul>
</div>
</div>
</nav>
<div id="mySlide">
<div style="width:100%;" id="bf494d0c-d537-4f36-bdf2-4754dbee0839" class="inner-content-slide carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover"><ol class="carousel-indicators"><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="0" class="active"></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="1" class=""></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="2" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><div data-img-height="481" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_f5a4a97f-204c-4538-bc79-d4bed4be75f3.jpeg);background-size:cover"></div></div><div class="item "><div data-img-height="480" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_06fa6929-4e05-4d40-aebd-99233e3852d6.JPG);background-size:cover"></div></div><div class="item "><div data-img-height="488" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_471118d4-7857-496c-b0db-21d5479de784.jpg);background-size:cover"></div></div></div><a class="left carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="prev"><i class="icon-prev"></i><span class="sr-only">Anterior</span></a><a class="right carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="next"><i class="icon-next"></i><span class="sr-only">Próximo</span></a></div>
</div>
<div class="marketing">
<div class="container"><section data-section-area='V10'><div data-section='home-section' data-area='V10' data-section-id='c60fb099-5b76-4835-a254-f7ead8bde197'><div class='lws-homesection-text-image'><div class='row'><div class='col-xs-12 col-sm-12 col-md-6'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_edab1478-6055-4a29-aa01-1fe4426e6ff2.png' class='img-responsive'></div><div class='col-xs-12 col-sm-12 col-md-6'><div class='lws-homesection-body'>Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire. Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.</div></div></div></div></div></section></div>
<div id="GroupList1">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group1">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png" data-iw-image="image_group1" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group1">Projetos</h2>
<p data-iw-multiline="body_group1"></p>
<a data-iw-link="link_group1" class=" btn btn-primary" href="categories/projetos" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group2">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png" data-iw-image="image_group2" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group2">Biografia</h2>
<p data-iw-multiline="body_group2"></p>
<a data-iw-link="link_group2" class=" btn btn-primary" href="biografia" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group3">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png" data-iw-image="image_group3" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group3">Fotos</h2>
<p data-iw-multiline="body_group3"></p>
<a data-iw-link="link_group3" class=" btn btn-primary" href="categories/fotos" role="button">Saiba mais</a>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V20'><div data-section='home-section' data-area='V20' data-section-id='a40ab6b2-e909-4021-99b5-ac1ebde763d7'><h2 class='lws-homesection-title'>Notícias destaque</h2><div class='lws-homesection-resource-list'><div class='row'><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_dc88125b-b8f3-4455-bcbc-de7d9d0720ca.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu troca PTB pelo PR e tenta reeleição a deputado federal</h4><div class='resource-list-excerpt'>No evento de filiação ao PR, Fábio Abreu anunciou sua pré-candidatura a deputado federal e afirmou que está preparado para disputar a reeleição. O ...</div><a href='/posts/fabio-abreu-troca-ptb-pelo-pr-e-tenta-reeleicao-a-deputado-federal' class='btn btn-primary'>Veja mais</a></div></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_d445acdc-1a7f-4b75-a96c-76f3e0cf67d3.jpg);background-size:cover'></div><h4 class='resource-list-title'>Antes de entregar cargo, Fábio Abreu apresenta Plano de Segurança</h4><div class='resource-list-excerpt'>
O documento traça uma linha de trabalho para o setor pelos próximoa s20 anos e prevê investimentos que começam com um empréstimo junto ao BNDES p...</div><a href='/posts/antes-de-entregar-cargo-fabio-abreu-apresenta-plano-de-seguranca' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs col-sm-12 hidden-md hidden-lg"></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_56e67980-ecd2-444e-a0d9-e2c8a8735420.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu destaca falta de atenção a segurança pública</h4><div class='resource-list-excerpt'>
Em entrevista ao Acorda Piauí, o deputado federal Fábio Abreu (PR), destacou que, enquanto a falta de segurança pública é um dos problemas mais a...</div><a href='/posts/fabio-abreu-destaca-falta-de-atencao-a-seguranca-publica' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs hidden-sm col-md-12 col-lg-12"></div></div></div></div></section></div>
<div id="GroupList2">
<div class="container">
<div class="GL2-item" data-iw-group="group4">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group4" class="featurette-heading"></h2>
<p data-iw-multiline="body_group4" class="lead"></p>
<a data-iw-link="link_group4" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group4" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group5">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group5" class="featurette-heading"></h2>
<p data-iw-multiline="body_group5" class="lead"></p>
<a data-iw-link="link_group5" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group5" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group6">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group6" class="featurette-heading"></h2>
<p data-iw-multiline="body_group6" class="lead"></p>
<a data-iw-link="link_group6" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group6" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V30'></section></div>
</div>
<footer id="MainFooter">
<div class="container">
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F10'><div data-section='home-section' data-area='F10' data-section-id='f97be27b-c0e9-4229-b584-64ee920ef08a'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_3939ae3f-43d1-4f63-a724-741c5ae11f47.png' class='img-responsive'></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F20'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F30'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F40'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F50'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F60'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F70'></section></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="contacts_footer list-inline">
<li></li>
<li></li>
<li></li>
</ul>
<p>© 2018 - Fábio Abreu</p>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F80'><div data-section='home-section' data-area='F80' data-section-id='76c13c4e-249f-4cac-b9ae-e2a56220e80c'><div class='lws-homesection-body'>Todos os direitos reservados.
</div></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F90'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F100'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F110'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F120'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F130'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F140'></section></div>
</div>
</div>
</div>
</div>
</footer>
<script src="/assets/site-fd70af901fb20b8029f75be40e0f5ff5848d5415b704279fd88ad5bc9c0ec4ec.js"></script>
<script src="/assets/default/js/main-efff309d3722bafb3f5fa5a2092f366e799cac0d724996ca31c7e52b408475ec.js"></script>
<div id="side-social-networks-loguei" role="group" class="list-unstyled btn-group-vertical">
</div>
<aside id="AVS-ContactButtons" class="">
<ul class="list-unstyled">
</ul>
</aside>
<script>
setTimeout(function(){
$('#AVS-ContactButtons ul li a span').css({
right: '-200px'
});
}, 4000);
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1982872918652221',
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.onload = function() { fbAsyncInit(); }
js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11&appId=1982872918652221';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
var NEWSLETTER_URL = '/fabio-abreu-1/newsletters';
var DEFAULT_ADDRESS = '';
$('.iw-contact-form').submit(function(e){
e.preventDefault();var f = $(this);$.ajax({
url:'/contact/fabio-abreu-1?authenticity_token=%2FLURz%2Fx9fdgyLq2zjSHViEkAz%2BQpMcS5Jvvnqwx9hveE4BV55tMP1NS9KKnIquT%2FulL%2FuS9fD%2FxtDD5ALRMRHA%3D%3D',
type:'POST',data:f.serialize(),success:function(){
var redir = $('#iw_redir_loguei_cf').length;
if (redir == 0) {alert('Email enviado com sucesso');f[0].reset();} else {
var to = $('#iw_redir_loguei_cf').val(); window.location=to;
}
},error:function(){alert('Erro ao enviar email');}
});
});
</script>
</body>
</html>
This is the CSS code:
#menu-main li:last-child{
padding-left: 378px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-top-left-radius:42px;
border-radius-topleft:42px;
border-top-left-radius:42px;
border-top-right-radius:42px;
border-radius-topright:42px;
border-top-right-radius:42px;
border-bottom-right-radius:42px;
border-radius-bottomright:42px;
border-bottom-right-radius:42px;
border-bottom-left-radius:42px;
border-radius-bottomleft:42px;
border-bottom-left-radius:42px;
text-indent:0px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px;
text-decoration:none;
text-align:center;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:1px;
}
I would be happy to help, but I would need to see your HTML, so please add it to the question.
I imagine that:
It has too much width
You probably need some margin around it to make it centered more on the navbar
That padding-left: 378px; should likely be margin-left or nothing, as that might be causing the over-sided width
Also, if you want the WhatsApp icon you can check out https://fontawesome.com/icons/whatsapp?style=brands
You can just set border-radius: 42px; instead of doing each corner by itself.
try using float: right; on the button and I think you were trying to use margin-left and not padding-left on #menu-main li:last-child
I have 5 horizontal divs.
Each div contains three child divs:
Header div
line div
text div
How can I achieve that all the line div's (I mean the div that creates a line between header text and content text) will be aligned horizontally?
I need all the horizontal line divs (class="h_line") on one horizontal line.
The horizontal lines are highlighted with red arrows.
See the fiddle.
Please note that I use bigtext.
That library centers the text in its div.
Html
<div class="ThirdSectionTextArea">
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
<span class="bigtext">
<div class="header_allroundservice leftalign">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell4">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME CONTENT
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell5">
</div>
I assume any title text can vary in length and span over more than 1 line when some are in just 1 line, is that correct?
In such case you need rows, like below sample, if you want it to be dynamically adjusting. If not, you need to have fixed heights on the title.
table, body {
background-color: #ccc;
}
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 33%;
padding-left: 2%;
padding-right: 2%;
}
.cell:nth-child(1) {
background-color: orange;
border-right: 5px solid #ccc;
}
.cell:nth-child(2) {
background-color: yellow;
border-left: 5px solid #ccc;
border-right: 5px solid #ccc;
}
.cell:nth-child(3) {
background-color: lime;
border-left: 5px solid #ccc;
}
.inner {
max-height: 100px;
overflow: auto;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second<br>
2 lines
</div>
<div class="cell">
Third
</div>
</div>
<div class="row">
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
</div>
<div class="row">
<div class="cell">
<div class="inner">
First
</div>
</div>
<div class="cell">
<div class="inner">
Second<br>
2 lines
</div>
</div>
<div class="cell">
<div class="inner">
Third<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
</div>
</div>
</div>
</div>
Use display-inline
.parent {
display: flex;
}
.block {
margin: 0px;
background-color: #84c300;
display: inline-block;
width: 20%;
}
.block .title {
padding: 5px;
}
.block .text {
padding: 5px;
}
<div class="parent">
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
</div>
Please try my JS fiddle code. I hope this will solve your problem.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box-1 {
width:25%;
float:left;
text-align:center;
}
.box-1:first-child {
background: red;
}
.box-1:nth-child(2) {
background: green;
}
.box-1:nth-child(3) {
background: brown;
}
.box-1:nth-child(4) {
background: orange;
}
.heading {
min-height:40px;
border-bottom: 1px solid #fff;
}
.heading h1 {
color:#fff;
font-size:11px;
}
.text p{
color:#fff;
font-size:10px;
}
</style>
</head>
<body>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
</body>
</html>
Float divs with same heading height(https://jsfiddle.net/ua7hmwsn/)