jQuery Accordion with overlay - javascript

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/

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.

Site does not load layoutt

Hello I have 2 errors that I do not know how to solve, the layout of it does not load I saw here on inspect site in google it says 2erros but I do not know where it comes from is how to solve them I'm new at it.
Here are the errors:
Uncaught SyntaxError: Unexpected token
Failed to load resource: the server responded with a status of 400 (Bad Request)
Link to my website: http://habbomania.esy.es/vibe_v3/index.php
<?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="" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/fwcss.css?v=1"/>
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/shadowbox.css?<?php echo filemtime('css/shadowbox.css'); ?>"/>
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/colortips.css?<?php echo filemtime('css/colortips.css'); ?>"/>
<!-- Jquery -->
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery.js?<?php echo filemtime('scripts/jquery.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery-nav.js?<?php echo filemtime('scripts/jquery-nav.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/colortip.js?<?php echo filemtime('scripts/colortip.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery.cycle.all.min.js?<?php echo filemtime('scripts/jquery-nav.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/shadowbox.js?<?php echo filemtime('scripts/shadowbox.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/principal.js?v=1"></script>
</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>

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.

align div's on one horizontal line

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

Bootstrap carrousel works fine in my computer, but not on the web site

In my computer the arrow links and the carrousel work just fine in Firefox, Internet Explorer, Opera and Chrome. But in the site not the carrousel, nor the arrows links work. I have tried everything I could find about the code. But couldnt find why, I have even suspected the hosting service provider. But I don't think so. Anyway here is the code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Enseñame a vivir en libertad centro de rehabilitacion</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/moveme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src='images/NewLogo_name_300px.png' alt=''/>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Inicio</li>
<li>Info</li>
<li>Medico</li>
<li>Contacto</li>
<li>Testimonios</li>
<li>Certificaciones</li>
</ul>
</div>
</nav>
</div>
<!-- End Navigation -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Recuperación</h1>
<p align="center">El primer paso es estar alejado de las fuentes que propician la adicción, para dar paso a la deshabituación.</p>
<p>Contacto</p>
</div>
</div>
</div>
<div class="item">
<img src="images/slide2.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Servicio</h1>
<p align="center">El segundo paso consiste en crear nuevos hábitos, mejorando los propios juicios y actitudes en pro de una vida más sana.</p>
<p>Contacto</p>
</div>
</div>
</div>
<div class="item">
<img src="images/slide3.jpg">
<div class="container active">
<div class="carousel-caption">
<h1>Libertad</h1>
<p align="center">El tercer paso consiste en adquirir las herramientas para vivir libre de adicciones a través de la práctica de principios espirituales y sociales que nos llevan a un sentido interno de libertad.</p>
<p>Contacto</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--Carousel End -->
<div class="intro-block" id="info" >
<div class="container">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive tpad" src="images/logo2.png">
</div>
<div class="col-xs-9">
<h1>LA MEJOR OPCION<span class="text-muted">» Desde el año 2006</span></h1>
<p class="lead justify">Somos el centro de rehabilitación con mayor arraigo en Campeche, los que colaboramos como consultores y asesores en adicción sumamos más de 70 años de experiencia trabajando en pro de la SOBRIEDAD y la vida en libertad sin el consumo de substancias.</p>
</div>
</div>
</div>
</div>
<!-- End Intro Text -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
</body>
</html>
I hope someone can explain me why it works in my computer and not in any browser if I go to the site, btw, it is www.vivirlibertad.com and it is in Spanish.
Thanks in advance.

It looks like there's a jQuery conflict on the site. I checked the console and it's saying "$ is not defined".
I see you've the following code just before the closing </body> tag:
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
This is causing the conflict with your other JS files. Change the above to:
<script>
var $car = jQuery.noConflict();
$car('.carousel').carousel({
interval: 3000
})
</script>
Check the official documentation on jQuery conflicts here: https://api.jquery.com/jquery.noconflict/

Categories