align div's on one horizontal line

align div's on one horizontal line - javascript

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/)

Related

why float left is not working on last element?

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.

Difficulty with CSS

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

How to make buttons inside columns equal in height on all devices?

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 nú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.

Site does not load layout [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello everyone I have a bug that my site does not want to load its layout, I do not know where it comes from, so I left PHP, it's CSS, if you can help me please I appreciate it, I'm a beginner in it
The error that appears is in the photo below.
Screenshot
/*!
* Style ColorTip.
* http://jquery.com - http://fwdesign.com.br
*
* Copyright 2013, Jquery.com
* Editado por: Gabriel Lopes (https://www.facebook.com/gabrielopes1);
*
* All rights reserved to this website.
*/
.colorTip {
display: none;
position: absolute;
left: 50%;
bottom: 63px;
font-family:Segoe UI;
font-size: 12px;
font-style: normal;
font-weight:normal;
text-decoration: none;
text-align: center;
text-shadow: 0 0 1px white;
white-space: nowrap;
border-radius: 4px;
margin-top: 30px;
padding:0px 5px;
z-index:9999999999;
}
.colorTipContainer {
position: relative;
text-decoration: none !important;
}
.pointyTip,.pointyTipShadow {
border:6px solid transparent;
bottom:-10px;
height:0;
left:50%;
margin-left:-6px;
position:absolute;
width:0;
}
.pointyTipShadow {
border-width:7px;
bottom:-14px;
margin-left:-7px;
}
.colorTipContainer {
position:relative;
text-decoration:none !important;
}
.yellow .pointyTip {
border-top-color:#000;
}
.yellow .pointyTipShadow {
border-top-color:#000;
}
.yellow .colorTip {
background-color:#000;
border:1px solid #000;
color:#fff;
opacity:0.9;
font-family:Segoe UI;
font-size: 12px;
padding:5px 8px;
text-shadow:#000 0px 1px;
}
.none .pointyTip {
border-top-color:rgba(0,0,0,0.0);
}
.none .pointyTipShadow {
border-top-color:rgba(0,0,0,0.0);
}
.none .colorTip {
background-color:rgba(0,0,0,0.0);
border:1px solid rgba(0,0,0,0.0);
text-shadow:rgba(0,0,0,0.0);
box-shadow: 0px 0px 5px rgba(0,0,0,0.0);
padding:0px;
}
<?php
header('Content-Type: text/html; charset=iso-8859-1');
session_start();
date_default_timezone_set('America/Sao_Paulo');
/* CONEXAO */
include('site_vibe/install/config.php');
/* INSTALAR */
include('site_vibe/install/install.php');
/* MODULOS */
$caminhoModulo = 'site_vibe/modulos/';
include('site_vibe/modulos/Functions.php');
include('site_vibe/modulos/Extras.php');
if(!class_exists('Main')) {
include('site_vibe/modulos/Main.php');
$Main = new Main();
}
if(!class_exists('Site')) {
include('site_vibe/modulos/Site.php');
$Site = new Site();
}
if(!class_exists('Vibe')) {
include('site_vibe/modulos/Vibe.php');
$Vibe = new Vibe();
}
if(!class_exists('Usuario')) {
include('site_vibe/modulos/Usuario.php');
$Usuario = new Usuario();
}
$deleteUsersOn = mysql_query(sprintf("DELETE FROM online WHERE tempo < '%u'", time()));
if(isset($_SESSION['usuario'])){
$onlines_users = mysql_query(sprintf("SELECT * FROM online WHERE usuario='%s'", $_SESSION['usuario']));
$online_users_row = mysql_num_rows($onlines_users);
}else{
$online_users_row = true;
}
$online_visit = mysql_query(sprintf("SELECT * FROM online WHERE ip='%s' AND usuario='visitante'", $_SERVER['REMOTE_ADDR']));
$online_visit_row = mysql_num_rows($online_visit);
if(!$online_visit_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(ip, tempo, usuario) VALUES ('%s', '%s', '%s')", $_SERVER['REMOTE_ADDR'], strtotime('+1 minutes'), 'visitante'));
}
if(!$online_users_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(tempo, usuario) VALUES ('%s', '%s')", strtotime('+1 minutes'), $_SESSION['usuario']));
}
if(Usuario::Logado()):
if(Usuario::Dados('banido') == 'sim'){
session_start();ob_start();session_unset();session_destroy();
}
endif;
$notificacao_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND modo='1'"));
$notificacao_seguidor_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND tipo='seguindo' AND modo='2'"));
/* PRESENCA */
$sql_presenca = db::Query("SELECT * FROM presenca WHERE ativo='s' ORDER BY id DESC");
while($ver_presenca = db::FetchArray($sql_presenca)){
$data_presenca = $ver_presenca['data'];
$id_presenca = $ver_presenca['id'];
if($data_presenca > time() - 300){
echo('');
}else{
db::Query("UPDATE presenca SET ativo='n' WHERE id='$id_presenca' ");
}
}
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vibe Habbo ~ A vibe dos seus pixels!</title>
<base href="/<?php echo $install['diretorio']; ?>">
<meta http-equiv="content-language" content="pt-br">
<meta name="author" content="Gabriel Lopes">
<meta name="reply-to" content="biellopes1#hotmail.com">
<meta name="description" content="A vibe dos seus pixels!">
<meta name="keywords" content="vibehabbo, fã-site, rádio, música, noticias, habbo, top, forúm, topico, pixel, tirinha, valores, pixel, ducket, cambios, moedas, rico, pobre, divulgue, button, player, parceiros, mobis, mobs, mobilias, raros, gabriel lopes, fwdesign, administradores, locutor, jornalista, moderador, fã-center, pagina inicial, rede socias, facebook, twitter, fw, fwdesign">
<meta name="url" content="http://vibehabbo.com.br"/>
<meta name="Robots" content="index,follow">
<meta name="language" content="pt_BR">
<link rel="shortcut icon" href="imagens/favicon.png" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="VibeHabbo.Com.Br - Feed RRS" href="http://vibehabbo.com.br/feed" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="css/fwcss.css"/>
<link type="text/css" rel="stylesheet" href="css/shadowbox.css"/>
<link type="text/css" rel="stylesheet" href="css/colortips.css"/>
<!-- Jquery -->
<script type="text/javascript" src="scripts/jquery.js"</script>
<script type="text/javascript" src="scripts/jquery-nav.js"></script>
<script type="text/javascript" src="scripts/colortip.js"</script>
<script type="text/javascript" src="scripts/jquery.cycle.all.min.js"</script>
<script type="text/javascript" src="scripts/shadowbox.js"</script>
<script type="text/javascript" src="scripts/principal.js"</script>
<!-- HTML 5 -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<style>
#modal { background:#19140D; position:fixed; left:0; right:0; top:0; bottom:0 ;z-index:99999999999999999999999999999999999999999999999;}
#modal #alerta { width:387px; position:fixed; cursor:move; }
</style>
<script>
var Site = '/<?php echo $install['diretorio']; ?>';
</script>
<body>
<div id="content_topo">
<div id="content_player_canto">
<div id="avatar-player" style="width:60px; height:65px; float:left; margin:6px 0 0 1px; background:url(imagens/avatar.png) 1px -13px; cursor:pointer;" onClick="player.atualizar('avatar');">
<div id="botao_mais_locutor_player_canto"></div>
</div>
<div id="content_botao_base_play_pause">
<div id="content_botao_play_pause"><div id="icone_pause_player"></div></div>
</div>
<div id="content_ouvintes">
<div id="total_ouvintes" class="text_total_ouvintes_player ver-ouvintes-player" style="cursor:pointer;" onClick="player.atualizar('ouvintes');">...</div>
<div id="title_ouv_player" class="text_title_ouvintes_player">ouv.</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-locutor-player" style="cursor:pointer;" onClick="player.atualizar('locutor');">carregando</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-programa-player" style="cursor:pointer;" onClick="player.atualizar('programa');"><marquee height="19" scrollamount="4" scrolldelay="4" direction="left">carregando</marquee></div>
</div>
<div id="botao_pedido_player">
<div id="botao_pedido_player_cima"></div>
<div id="insert_botao_text_pedido_player" class="text_botao_pedido_player">Fazer pedido</div>
</div>
</div>
<?php if(!Usuario::Logado()): ?>
<form action="javascript:;" id="form-login">
<div id="content_conta_canto_esq" style="z-index:999999999;">
<div id="content_notificacao_login">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_login">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_login" class="text_titulo_insert_notificacao">login</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Crie sua conta</div>
</div>
<div id="content_insert_notificacao_login">
<div id="insert_titulo_box_login" class="text_titulo_box_lados">E-mail ou nick:</div>
<input type="text" id="username-login" style="width:246px;"/>
<div id="insert_titulo_box_login" class="text_titulo_box_lados">
<div id="botao_esqueceu_senha" class="text_botao_esqueceu_senha">Esqueceu a senha?</div>
Senha:</div>
<input id="password-login"type="password" style="width:246px;"/>
</div>
</div>
<div id="botao_content_notificacao">
<div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao logar-submit">fazer login</div>
</div>
</div>
<div id="insert_conta_canto_esq">
<div id="icone_conta_canto_esq"></div>
</div>
</div>
<?php else: ?>
<!-- inicia logado -->
<div id="content_logado_canto">
<div style="width:60px; height:46px; float:left; margin:3px 0 0 0; background:url(https://www.habbo.com.br/habbo-imaging/avatarimage?img_format=gif&user=<?php echo $_SESSION['usuario']; ?>&action=std&direction=2&head_direction=2&gesture=sml&size=b) 1px -13px;">
<div id="botao_editar_dados_logado_canto">
<div id="icone_editar_dados_logado_canto"></div>
</div>
</div>
<div id="content_logado_canto_opcoes">
<!-- inicia notificacao -->
<div id="content_notificacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="icone_insert_notificacao"></div>
<div id="content_title_notificacao" class="text_titulo_insert_notificacao">notificações</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-notificacao-total">
<?php include('Notificacao.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todas notificações</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao seguidores -->
<div id="content_notificacao_solicitacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_solicitacao" class="text_titulo_insert_notificacao">seguidores</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-seguidores-total">
<?php include('Seguidor.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos seguidores</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao marcar presensa -->
<div id="content_notificacao_presenca">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_presenca">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_marcar_presenca" class="text_titulo_insert_notificacao">código de presença</div>
<div id="botao_codigos_hoje_notificacao" class="text_botao_codigos_hoje">Códigos de Hoje</div>
</div>
<div style="height:189px; overflow-x:hidden; overflow-y:auto; clear:both;">
<div id="content_insert_presenca_notificacao">
<div id="insert_title_presenca_notificacao" class="text_insert_title_presenca_notificacao">Digite o Código de presença abaixo</div>
<div id="content_input_botao_codigo_presenca">
<style>
#input_insert_codigo_presenca {width:113px; height:28px; float:left; padding:0px; margin:6px 0 0 16px; background:#D9D9D9; border:none; font-family:Segoe UI; font-size:15px; color:#333; font-weight:bold;}
#input_insert_codigo_presenca:focus, #input_insert_codigo_presenca:hover {border:0px; box-shadow:0px 0px 0px; margin:6px 0 0 16px;}
</style>
<form id="gerar-presenca" action="javascript:;">
<div id="base_input_codigo_presenca"><input id="input_insert_codigo_presenca" type="text"/></div>
<div id="botao_codigo_presenca_gerar">
<div id="insert_botao_codigo_presenca_gerar_title" class="text_insert_botao_presenca_gerar">Gerar código</div>
</div>
</form>
<!--
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
-->
</div>
</div>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos códigos gerados</div></div>
</div>
<!-- encerra notificacao marcar presenca -->
<div id="icone_notificacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-tudo"><?php echo $notificacao_nao_lida; ?></div></div>
<div id="icone_solicitacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-seguidor"><?php echo $notificacao_seguidor_nao_lida; ?></div></div>
<div id="icone_creditos_logado"></div>
<div id="icone_marcar_presenca_logado"></div>
<div id="icone_configuracao_logado"></div>
<div id="icone_home_logado"></div>
<div id="icone_galeria_logado"></div>
<div id="icone_topico_logado"></div>
</div>
<div id="botao_sair_logado_canto" onClick="usuario.deslogar();">
<div id="insert_botao_sair_logado_canto" class="text_sair_logado_canto">sair</div>
</div>
</div>
<!-- encerra logado -->
<?php endif; ?>
<!-- inicia pesquisar -->
<div id="content_pesquisar_canto_esq">
<!-- caixa lado pesquisa -->
<div id="content_pesquisa_canto_esq_lado">
<div id="icone_flecha_content_pesquisa_canto_esq"></div>
<div id="content_insert_pesquisa_principal_canto_esq">
<style>
#input_pesquisar_canto_lado_esq {width:140px; height:20px; padding:0px; float:left; margin:11px 0 0 19px; background:#558EC0; border:none; font-family:Segoe UI; font-size:13px; color:#FFF; line-height:1.0em;}
#input_pesquisar_canto_lado_esq:focus, #input_pesquisar_canto_lado_esq:hover {border:0px; box-shadow:0px 0px 0px; margin:11px 0 0 19px;}</style>
<form action="javascript:;" id="pesquisar-canto">
<input id="input_pesquisar_canto_lado_esq" type="text" value="Pesquisar usuário"/>
</form>
<div id="icone_pesquisa_canto_esq_small"></div>
</div>
</div>
<!-- caixa lado pesquisa -->
<div id="insert_content_pesquisar_canto_esq">
<div id="icone_pesquisar_canto_esq"></div>
</div>
</div>
<!-- encerra pesquisar -->
<div id="insert_content_topo">
<style>
#content_paginacao_slide a {width:13px; height:13px; float:left; margin:0 7px 0 0; background:rgba(500,500,500,0.7); border-radius:100%; cursor:pointer; transition:0.3s;}
#content_paginacao_slide a.activeSlide {width:13px; height:13px; float:left; margin:0 7px 0 0; background:#FF0033; border-radius:100%; cursor:pointer;}
</style>
<div id="content_paginacao_slide" style="position:absolute; z-index:100;">
</div>
<div id="recebe-slide" style="width:552px; height:310px; float:left;">
<div id="imagem_principal_slide" style="background:url(http://imgur.com/Pyp3XCI.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Bem-vindo a versão 3!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">Cadastre-se em nosso site !</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
<div id="imagem_principal_slide" style="background:url(http://i.imgur.com/8pkjwwb.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Facebook da VibeHabbo!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">fica ligando em nosso facebook</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
</div>
<div id="logo_site_principal"></div>
<div id="content_palcos_mobilias_recentes">
<div id="palco_mobilias_recentes_1"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/1.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_2"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/9.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_3"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/8.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_4"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/2.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_5"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/3.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_6"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/6.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_9"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/7.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_7"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/5.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_8"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/4.png) no-repeat center;"></div></div>
</div>
</div>
</div>
<div id="content_base_corpo_site">
<div id="info_barra_corpo_site">
<div id="content_insert_info_barra_corpo_site">
<div id="icone_insert_info_barra_corpo_site"></div>
<div id="insert_text_info_barra_corpo_site" class="text_insert_info_barra_corpo_site">Olá <b>usuários</b>, gostariamos de saber oque acharam do nosso novo site?</div>
</div>
</div>
<div id="corpo_site">
<?php
Site::Paginas('Paginas');
?>
</div>
<div id="content_rodape">
<div id="content_text_creditos_rodape" class="text_creditos_rodape">Copyrights © 2013 - 2014 | Vibe Habbo. Todos os direitos reservados a este site da web. Este site não é de propriedade ou operado pela Sulake Corporation e não é parte do Habbo Hotel®.</div>
<div id="logo_vibe_rodape"></div>
<div id="base_logo_fw_rodape"><div id="logo_fw_rodape"></div></div>
</div>
</div>
</body>
</html>

Here's what your script header tags should look like. Notice how there is a > symbol after each src element. This denotes the closing of the tag.
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-nav.js"></script>
<script type="text/javascript" src="scripts/colortip.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="scripts/shadowbox.js"></script>
<script type="text/javascript" src="scripts/principal.js"></script>
It's also recommended to use _ instead of spaces in your folder name to help reduce errors. So http://habbomania.esy.es/vibe v3/index.php should be http://habbomania.esy.es/vibe_v3/index.php.

jQuery Accordion with overlay

I work on a accordion to show old blog posts. If you use a tab the part below goes down or jumps around, but I want that the tab lays over the rows below.
I tried some solutions to work with z-index and fixed positions, but nothing will work.
Here is a Snippet of my Code:
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
.accordion-section-content {
background-color: #faf5f2;
}
.termin-header {
position: absolute;
left: 15px;
right: 15px;
bottom: 45px;
text-align: center;
background: rgba(99,98,96,0.7);
}
.termin-header > h2 {
color: white;
}
#firstimage{
position:relative;
background: no-repeat 50% / 100%;
border-bottom: 2px solid #000;
}
.firstimage > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
.firstimage > div{
position: absolute;
top: 0;
width:100%;
height:100%;
}
.firstimage p{
padding:30px;
}
.aktuelles-title {
color: white;
font-size: 30px;
font-family: 'AracneCondensedRegular';
text-align: center;
margin: 0px;
height: 100px;
}
.aktuelles-wrapper {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-122" class="post-122 post type-post status-publish format-image has-post-thumbnail hentry category-aktuelles post_format-post-format-image">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/Unbenannt-1_08.gif');">
<div>
<a class="accordion-section-title" href="#accordion-122"><h2 class="aktuelles-title entry-title ">And the Winner is….</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-122" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Hier ist das Gewinneroutfit von Stil-Frage Teil 3. Felix hat sich für Outfit Nr. 3 entschieden! Wir freuen uns mit YVONNE MARCATH. Sie ist die Gewinnerin des 50€ Einkaufsgutscheins.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-93" class="post-93 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/outfit.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-93"><h2 class="aktuelles-title entry-title ">Ein Typ….Drei Outfits.</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-93" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p><strong>Für welches Outfit entscheidet sich Felix aus Ramsdorf?</strong></p>
<p>Felix war einverstanden bei uns drei verschiedene Outfits anzuprobieren. Am Ende kann er sich aber nur für eins entscheiden – welches wird das sein? Jetzt auf der Facebook – Seite vom Modehaus Cohausz abstimmen und mit etwas Glück einen Modegutschein gewinnen. Das Video vom Casting findet Ihr <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">hier</a> und auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">BorioTv.</a></p>
<div class="align-center">
<p>Die Auflösung gibt es am kommenden Mittwoch.</p>
</div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/08/verkaufsoffen.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-1"><h2 class="aktuelles-title entry-title ">Borken lädt ein…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-1" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>zum 07. Borkener Ostermarkt am Sonntag, den 22. März 2015 ab 11.00 Uhr. Die Geschäfte in der Innenstadt sind von 13.00 Uhr bis 18.00 Uhr geöffnet.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-329" class="post-329 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/catwalk.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-329"><h2 class="aktuelles-title entry-title ">Vielen Dank für Ihr Interesse an unserer Fashion Show…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-329" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Wir bedanken uns bei unseren kleinen und großen Modells und dem zahlreich erschienenen Publikum für den gelungenen stimmungsvollen Abend.<br>
Weitere Bilder der Show auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borken-live.de/" target="_blank">Borken-Live.de</a></p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-332" class="post-332 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-332"><h2 class="aktuelles-title entry-title ">Modegutschein zu gewinnen…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-332" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Genießen Sie einen modischen Vorgeschmack auf das Frühjahr bei unserer Modenschau am 19. März 2015. Wir laden Sie, gern auch Ihre Freundin, auf ein Gläschen Prosecco ein. Mit ein wenig Glück haben Sie die Möglichkeit einen Modegutschein zu gewinnen.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-335" class="post-335 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung2.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-335"><h2 class="aktuelles-title entry-title ">Noch auf der Suche nach dem perfekten Frühjahrslook?</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-335" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<div class="news-list-item">
<p>Welche Farben sind in dieser Saison angesagt? Wie kombiniert man die neusten Trends?</p>
<div class="align-center">
<p>Wir zeigen Ihnen den Frühling auf unserer exclusiven Fashionshow</p>
<p>am Donnerstag, dem 12. März 2015 um 19.03 Uhr.</p>
<p>Wir bitten um Anmeldung unter 02861/92190 oder</p>
<p>info#mode-cohausz.de</p>
</div>
</div>
<div class="news-list-item"></div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
</div>

I did somthing simular a while ago.
I know that the z-index did it for me after playing around with it for a while.
You coul'd also set the article hidden in your css, after you placed it on the right position and then toggle it in jquery.
EDIT:
$(document).ready(function(){
$("image").click(function(){
$("#articleText").toggle();
});
});
#image{
background-color: green;
width: 80px;
height: 80px;
}
#articleText{
visibility: ;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="image">this represents a image</div><!-- image or somthing else, you have images what show a artivle on click -->
<div id="articleText">
This is a article
</div> <!-- your article -->
</body>
</html>
something like this should work, I'wrong with the z-index.
I found a link on google what might would help you with that, I'd watch to the part where the position is absolute:
https://css-tricks.com/almanac/properties/z/z-index/

We Keep Coding

JavaScript is the programming language of the Web.

align div's on one horizontal line - javascript

Related

why float left is not working on last element?

Difficulty with CSS

How to make buttons inside columns equal in height on all devices?

Site does not load layout [closed]

jQuery Accordion with overlay

Categories

Resources