I have index.php main page:
<!doctype html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-123456789123456",
enable_page_level_ads: true
});
</script>
<?php require_once "system/configs.php"; ?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $baseurl?>css/bootstrap.css">
<link rel="stylesheet" href="<?= $baseurl?>css/font-awesome.css">
<meta name="google-signin-client_id" content="80957862538-juiu2cgia32rn3lik36fv9a1ihc6fqof.apps.googleusercontent.com">
<link rel="stylesheet" href="<?= $baseurl?>css/animate.css">
<link rel="stylesheet" href="<?= $baseurl?>css/style.css">
<link rel="stylesheet" href="<?= $baseurl?>css/player.css">
<title>Radio Shqip</title>
<base href="/">
</head>
<body ng-app="musiclistener">
<span ng-cloak>
<span ng-view ></span>
</span>
<div id='player-container'>
<audio controls id='music-player' src="#"></audio>
<div class='container-fluid'>
<div class='col-sm-1 col-xs-3 text-center' id='play-icon-container'>
<i class='fa fa-play-circle' id='play-btn' ng-click="playtoogle()"></i>
</div>
<div class='col-sm-1 center-block hidden-xs' id='podcast-icon-container'>
<img src="{{ playerthumb }}" id='play-img' class='img-responsive center-block' style="margin-top:7.5px">
</div>
<div class='col-md-6 col-sm-4 col-xs-6' id='podcast-bar-container' style="margin-top:17px">
<span style='color:#fff;position:relative;top:3px;text-transform:capitalize' ng-if="musicplayingentity">{{ musicplayingentity}}</span>
<div id='podcast-progress'>
<div id='podcast-id-value'></div>
</div>
</div>
<div class='col-md-1 col-sm-2 text-center hidden-xs' id='addons-icon-container'>
<span ng-hide="userLoggedIn">
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-heart-o pull-left'></i></a>
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-comment-o '></i></a>
</span>
<span ng-show ="userLoggedIn">
<i ng-click="makeFavoritePlayer()" ng-hide="playingfav" class='fa fa-heart-o extrafun'></i>
<i ng-click="removeFavoritePlayer()" ng-show="playingfav" class='fa fa-check extrafun'></i>
<i ng-click="showCommentBoxPlayer()" class='fa fa-comment-o'></i>
</span>
<i class='fa fa-share-alt pull-right' ng-click="shareboxPlayer(shareslug)"></i>
</div>
<div class='col-sm-3 col-xs-3 text-center' id='volume-container'>
<div class='col-xs-2'>
<i class='fa fa-volume-up'></i>
</div>
<div class='col-xs-1 col-md-9' style="margin-top:20px">
<div id='volume-progress'>
<div id='volume-id-value'></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="<?= $baseurl?>ang/angular.min.js"></script>
<script src="<?= $baseurl?>ang/angular-sanitize.min.js"></script>
<script src="<?= $baseurl?>ang/angular-route.min.js"></script>
<script src="<?= $baseurl?>ang/angular-cookies.min.js"></script>
<script src="<?= $baseurl?>ang/angular-facebook-sdk.js"></script>
<script>
window.fbAsyncInit = function()
{
FB.init({ appId : '195962897544265', xfbml : true, version : 'v2.8' });
};
</script>
<script src="<?= $baseurl?>ang/app.js"></script>
<script src="<?= $baseurl?>ang/controllers.js"></script>
<script src='<?= $baseurl?>js/jquery-1.7.2.min.js'></script>
<script src='<?= $baseurl?>js/bootstrap.js'></script>
<script src='<?= $baseurl?>js/typed.js'></script>
<script src='<?= $baseurl?>js/wow.js'></script>
<script src='<?= $baseurl?>js/player.js'></script>
<script type="text/javascript" src="<?= $baseurl?>js/script.js"></script>
<script type="text/javascript" src="<?= $baseurl?>ang/core.js"></script>
<script>
new WOW().init();
</script>
<script>
$(function(){
$(".typing-text").typed({
strings: ["MUSIC", "SPORTS", "BOOKS", "NEWS", "TALK"],
typeSpeed: 200,
backSpeed: 150,
loop: true
});
});
</script>
</body>
</html>
and home-track.html in template folder where I want to add my Adsense Ad unit code and to show there:
<section id="device" class="ng-scope" ng-controller="recentStation">
<div class="info_section_inner">
<div class="info_section_col" style="float: center;">
<p>
AAAA
</p>
</div>
<div class="container wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="list_stations medium">
<div class="list_header clearfix">
<div class="stations-heading-h2 ng-binding" style="margin-bottom:25px; padding-top:25px; color:#000000;" ><p style="font-family:calibri; font-size:45px;">
Recent stations
</div>
</div>
<div class="list_body">
<div style="float: right; margin: 10px 0px 10px 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Shqipradio2 -->
<ins class="adsbygoogle hidead"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-123456789123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- ngRepeat: chn in channels --><div class="list_item ng-scope" ng-repeat="chn in channels">
<div class="bg">
<a class="image_outer" href="channel/{{chn.slug}}"> <span class="image"><img ng-src="{{chn.channel_image}}" alt="tea cup match" style="overflow:hidden;" width="100%" height="100%" itemprop="image" src="{{chn.channel_image}}" class="hoverZoomLink"></span>
<span class="overlay">
<!-- -->
</span>
<span class="country ng-binding"></span>
</a>
<div class="name" itemprop="name" >
{{chn.channel_name}}
</div>
</div>
</div>
</div>
<div class="list_footer clearfix">
All stations
<br>
</div>
</div>
</div></section>
So when I paste the ad unit code in index.php everything is good but the ads showing up before header or after footer, so I want to implement in home-track.html and to show here I want. When I paste the code to home-track.html there is the space for ads like my height and weight but ad is not showing up.
PS. I don't want to implement quickads from adsense, just to paste my Ad Unit code.
I have paste also my quick ad code in index.php but I will remove from there.
thanks
when I paste this code its working:
<style>
#media (max-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<div style="float: right; margin: 10px 0px 10px 10px;">
<iframe width="300" height="600" frameborder="0" class="adsbygoogle hidead"
src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-
123456789123456&output=html&h=600&slotname=1234567890&">
</iframe>
</div>
its everything good the ads are in the place where I want to be. But why when I paste the code that google give to me doestn show:
<style>
#media (max-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<div style="float: right; margin: 10px 0px 10px 10px;">
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Shqipradio2 -->
<ins class="adsbygoogle hidead"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-123456789123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Its something wrong to use this code with
The div id = "retrieve" is the div where I am retrieving my data from a database. But then the footer below appears in the div id ="retrieve".
Where am I going wrong?
Retrieval happens properly but it displays footer inside it too.
<!DOCTYPE html>
<html>
<head>
<title>Shreegurudev Datta | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin-ext" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Advent+Pro" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<style>
body{
background:url("bg.jpg");
background-size: cover;
font-family: 'Dosis', sans-serif;
}
slider{
width:100%;
height:auto;
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom:-100px;
opacity:0
}
to {
bottom:0px;
opacity:1
}
}
#keyframes animatebottom {
from{
bottom:-100px;
opacity:0
}
to{
bottom:0;
opacity:1
}
}
</style>
</head>
<body>
<!-- Corousel-->
<div class = "navbar">
<nav class="orange">
<div class="nav-wrapper">
<image src = "dattaguru.jpg" style = "padding-top : 10px; padding-left:10px;"/>
<i class="material-icons" style = "color:indigo;">menu</i>
<ul class="right hide-on-med-and-down" >
<li class = "active"><i class="material-icons left">home</i>Home</li>
<li><i class="material-icons left">stars</i>History</li>
<li><i class="material-icons left">equalizer</i>Festivals</li>
<li><i class="material-icons left">widgets</i>Sevas</li>
<li><i class="material-icons left">wallpaper</i>Gallery</li>
<li><i class="material-icons left">today</i>Projects</li>
<li><i class="material-icons left">contacts</i>Contact</li>
<li><i class="material-icons left">payment</i>Donations</li>
</ul>
<ul class="side-nav" id="mobile-demo" style = "color:white;">
<img src="logo.png">
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div style="" id="main" class="animate-bottom">
<div class = "header">
<h3 style="text-align:center; color: #b91100; font-weight: bolder">|| श्रीगुरूदेव दत्त ||</h3>
<marquee scrollamount="7" behavior="infinite" hspace="70"><h5 style="text-align:center; color: #b91100; font-weight: bold">|| दिगंबरा दिगंबरा श्रीपाद वल्लभ दिगंबरा ||</h5></marquee>
</div>
<div class = "cover">
<img src="banner.jpg" style="padding-left:250px; width:1100px; height:420px;">
</div>
<div class="row">
<h2 style="text-align:justify; padding-left:60px; color:green;">Shree Gurudev Datta</h2>
<hr width="90%">
<h5 style="text-align:justify; padding-left:60px; color:green;">|| Digambara Digambara Shreepad Vallabh Digambara ||</h5>
<div class="col s9" style="text-align:justify; padding-left:50px;">
<p style="font-size:20px; color:maroon; padding-left:5px; padding-right:5px; border-radius:10px;"> Shree Saunsthan Dattawadi, Sankhali, The Holy Abode of Shree Dattaguru - the trinity of Lord Brahma, Lord Vishnu and Lord Mahesh - evokes deep devotion in the heart of every devotee residing not only in Goa but other parts of the world as well.
Situated in beautiful sylvan surroundings, the heavenly and serene ambience pervading within the precincts of the temple catapults visiting devotees to world full of divine bliss.
The precincs normally referred to as 'Dattawadi', is the pilgrimage centre visited by thousands of devotees and legend has it that their prayers are answered by the Almighty. It is also famous as a centre for miraculous cure for mental troubles. This beautiful structure was established way back in the year 1925 ('shakey' 1804 according to the Hindu almanac).
The Dattatray temple completed 125th anniversary of it's inception in April 2007 with great pomp and splendour. The centenary celebrations in 1982, too, had witnessed similar grandeur.</p></div>
<div id = "retrieve" class="col s3" style="text-align:justify; background-color:orange; width:250px; height:300px; margin-top:23px; border-radius:10px;">
<?php
$host="localhost";
$user="root";
$password="";
$db="db_name";
$con=mysqli_connect($host,$user,$password,$db);
$sql_query="select * from Notifications";
$result=mysqli_query($con,$sql_query);
//echo '<h1>News Flash</h1>';
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center>
";
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
echo '
<tr>
<td>'.$row['date'].'</td>
<td>'.$row['news'].'</td>
</tr>
';
}
?>
</div>
</div>
<!--this footer comes in the div id ="retrieve"-->
<div class="footer-copyright" style="padding-left:100px;">
<p style="text-align:center; background-color:#004d40; width:auto; height:50px; padding-top:15px;color:#ffffff;">In memory of late Sau Sunanda & late Avadhut Dattatraya Gaitonde</p>
</div>
<!--close loader-->
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>$(document).ready(function(){
$('.slider').slider({full_width: true});
});</script>
</body>
</html>
The problem seems to be the 'table' tag on line 126 since I can't find it's counterpart anwhere in the code:
[...]
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center> //<-- there is no </table> before </center>
";
[...]
I am using a custom theme I have found on the Internet for bootstrap. when I add a new "Row" for my grid system things get a bit messed up,
I am not sure what I am doing wrong but I do belive is styling problem, since it does not appear to show me what I want it do show so when I load the page i see the following
if you need further information to be able to help me I be glad to give it
and a scroll bar on the browser (allowing you to scroll down)
by doing so for a second you can see what else should have been there like so
but the it disspears , I will share my code if anyone can help me, I not an exprienced prgoramer but I am trying to get there.
here is the code for viewHero.php
<?php session_start();
//error_reporting(0);
//ini_set('display_errors', 0);
?>
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="style/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Overblog</title>
</head>
<body >
<header class="cd-main-header">
<img src="img/cd-logo.svg" alt="Logo">
<div class="cd-search is-hidden">
<form action="#0">
<input type="search" placeholder="Search...">
</form>
</div> <!-- cd-search -->
Menu<span></span>
<nav class="cd-nav">
<ul class="cd-top-nav">
<li class="has-children account">
<ul>
</ul>
</li>
</ul>
</nav>
</header> <!-- .cd-main-header -->
<main class="cd-main-content">
<nav class="cd-side-nav">
<ul>
<li class="cd-label">Main</li>
<li class="has-children overview">
Blog
<ul>
<li>Latest news</li>
<li>Public Test Region</li>
<li>RedPost (Redit)</li>
</ul>
</li>
<li class="has-children notifications active">
<li class="has-children comments">
Guides
</li>
<li class="has-children users">
Hereos
</li>
</ul>
</nav>
<style>
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
#media (max-width:768px)
{
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}
h2{font-size:40px;
}
</style>
<div class="content-wrapper">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<?php
//show users code.
define('SITE_ROOT', dirname(__FILE__));
echo "<br/>";
require SITE_ROOT . '\includes\loadHeroProfile.php';
?>
</div>
<div class="row">
<div class='col-lg-4'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div> <!-- /container -->
</div>
</main> <!-- .cd-main-content -->
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/jquery.menu-aim.js"></script>
<script src="scripts/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
and here is the loadHeroProfile.php
<?php
//show users code.
require SITE_ROOT . '\includes\db_connect.php';
//create connection and check it
global $connect;
$ids = intval($_GET['ids']);
$result = $conn->prepare("SELECT id,nickname,avatar,name,age,occupation,operations,affiliation,difficulty,ability,tips,story FROM heroes WHERE id=$ids");
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$id = $row["id"];
$nickname = $row["nickname"];
$avatar = $row["avatar"];
$name = $row["name"];
$age = $row["age"];
$occ = $row["occupation"];
$opp = $row["operations"];
$aff = $row["affiliation"];
$diff = $row["difficulty"];
$ability = $row["ability"];
$tips = $row["tips"];
$story = $row["story"];
$avatar = "./img/" . $avatar;
echo " <div class='fb-profile'> ";
echo " <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/> ";
echo " <img align='left' class='fb-image-profile thumbnail' src=". $avatar ." alt='Profile image example' /> ";
echo " <div class='fb-profile-text'> ";
echo " <h2>" . $nickname . "</h2><br/> ";
echo " <p>" . $name . "</p> ";
echo " </div> ";
echo " </div> ";
}
?>
What can I do to fix this issue ?
EDIT THE FINAL HTML CODE:
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="style/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Overblog</title>
</head>
<body >
<header class="cd-main-header">
<img src="img/cd-logo.svg" alt="Logo">
<div class="cd-search is-hidden">
<form action="#0">
<input type="search" placeholder="Search...">
</form>
</div> <!-- cd-search -->
Menu<span></span>
<nav class="cd-nav">
<ul class="cd-top-nav">
<li class="has-children account">
<ul>
</ul>
</li>
</ul>
</nav>
</header> <!-- .cd-main-header -->
<main class="cd-main-content">
<nav class="cd-side-nav">
<ul>
<li class="cd-label">Main</li>
<li class="has-children overview">
Blog
<ul>
<li>Latest news</li>
<li>Public Test Region</li>
<li>RedPost (Redit)</li>
</ul>
</li>
<li class="has-children notifications active">
<li class="has-children comments">
Guides
</li>
<li class="has-children users">
Hereos
</li>
</ul>
</nav>
<style>
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
#media (max-width:768px)
{
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}
h2{font-size:40px;
}
</style>
<div class="content-wrapper">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<br/> <div class='fb-profile'> <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/> <img align='left' class='fb-image-profile thumbnail' src=./img/bastion.png alt='Profile image example' /> <div class='fb-profile-text'> <h2>Bastion</h2><br/> <p>SST Laboratories Siege Automaton E54, "Bastion"</p> </div> </div> </div>
<div class="row">
<div class='col-lg-4'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div> <!-- /container -->
</div>
</main> <!-- .cd-main-content -->
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/jquery.menu-aim.js"></script>
<script src="scripts/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
edit the styling as requested :
note that I did not made or touch this, is a free tempalte over the internet
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Style.css Find it here
I can't post this because it will pass the 3k mark for posting.
The HTML that you have provided is riddled with errors and inconsistencies; I strongly recommend you review the code that your Template provided in order to ensure that these errors are not causing unexpected rendering issues.
That being said, I have created a JSFiddle showcasing corrected HTML here:
https://jsfiddle.net/embed/1pfz7yg2/show/
You can see the HTML / CSS here: https://jsfiddle.net/embed/1pfz7yg2/
From what I understand of your desired output, you want the left-hand navigation to remain static. That being the case, the most relevant bit of CSS is:
.cd-side-nav { position: fixed; }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Ok so I made my website in html, but theres some sort of white line bars located on the top and im not sure why they are there i think i made an error in my source code, if someone could please help figure out why they are there thatd be great (im new at html, only know the basics)
Heres a picture of it
<font size="4" color="white">
<h1>This Website Was Created By The One And Only SaucyFam
</font>
</div>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://www.silvergames.com/slitherio">
<link rel="alternate" href="http://www.silvergames.com/slitherio" hreflang="en">
<link rel="alternate" href="http://de.silvergames.com/slitherio" hreflang="de">
<link rel="alternate" href="http://ru.silvergames.com/slitherio" hreflang="ru">
<title>Slither.io | Game 2 Play Online</title>
<link href="http://i2.silvergames.com/css/n7.css" rel="stylesheet" type="text/css">
<link href="http://i2.silvergames.com/l-switch/css/polyglot-language-switcher-2.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="New Games" href="/feed/rss.xml" />
<script type="text/javascript" src="http://i1.silvergames.com/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/l-switch/js/jquery/jquery-polyglot.language.switcher.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/advertisement.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/js/vote.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://i3.silvergames.com/js/fullscreen_full.js"></script>
</form>
<div class="clear_both"></div>
</div>
<div class="polyglot-language-switcher" data-grid-columns="1" data-anim-effect="fade" data-open-mode="click">
<ul style="display:none">
<li>
<a href="http://www.silvergames.com/slitherio" title="English" data-lang-id="en">
<img src="http://i1.silvergames.com/l-switch/images/flags/us.png" alt="English">English
</a>
</li>
<li>
<a href="http://de.silvergames.com/slitherio" title="Deutsch" data-lang-id="de">
<img src="http://i2.silvergames.com/l-switch/images/flags/de.png" alt="Deutsch">Deutsch
</a>
</li>
<li>
<a href="http://ru.silvergames.com/slitherio" title="Русский" data-lang-id="ru">
<img src="http://i3.silvergames.com/l-switch/images/flags/ru.png" alt="Русский">Русский
</a>
</li>
</ul>
<div class="clear_both"></div>
</div></div>
<div id="menu_2" style="display:none;">
<div id="items_2"></div> <div class="clear_both">
</div>
</div></div>
<div id="content">
<div id="container" style="width:1260px;">
<div id="game-box" style="">
<div id="game" >
<div id="game_embed" style="width:700px;height:500px;">
<iframe src="http://slither.io/" id="swf" allowfullscreen frameborder="0" scrolling="no" style="background-color:#000000;border:nvone;" width="700" height="500"></iframe>
</div >
</div>
<div id="game-features">
<div id="vote-buttons">
</button>
<span id="voted"></span>
</div>
<div id="zoom-button">
<div style="cursor:pointer;" id="fullscreen">
<img src="http://i1.silvergames.com/i/fullscreen.png" title="Fullscreen" alt="fullscreen">
</div>
</div>
<div id="walkthrough-button">
<div style="" id="walkthrough">
<a href="/slitherio/walkthrough" target="" title="Slither.io Walkthrough">
<img src="http://i1.silvergames.com/i/walkthrough.png" alt="walkthrough">
</a>
</div>
</div>
<div class="clear_both"></div>
</div>
</div>
<div id="game-related-box">
<div class="hot_box">
<div id="dynamic-editorial">
<ul>
<li>
<a href="/goodgame-empire" target="">
<img src="http://agar.io/img/1200x630.png " width="110" height="70" alt=":D"/>
</a>
</li>
<li>
Unblocked Agario
</li>
</ul>
</div>
<div id="dynamic-editorial-2">
<ul>
<li>
</div>
<div style="position: absolute; top: 530px; right: 220px; width: 250px; height: 150px; background-color: ">
<font size="4" color="white">
<h1>
<< Click Here To Go Into FullScreen Mode
</div>
<div style="position: absolute; top: 200px; right: 233px; width: 240px; height: 150px; background-color: ;">
<font size="4" color="white">
<h1>SaucyFams Very Own Server IP Mods, Coming Soon:
<IMG STYLE="position:absolute; TOP:70px; LEFT:10px; WIDTH:300px; HEIGHT:200px" SRC="http://slitheriogameplay.com/wp-content/uploads/2016/04/slither-io-mods-300x167.png">
</p>
</body>
</html>
<html>
<body background="http://slither.io/s/bg45.jpg">
The issue is the 10px padding-bottom.
In file n7.css , line 31, you'll see the following:
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
Change by:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
Let me know how it goes.
The reason of problem here;
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
But I see, "you are not very familiar with css" so this code is in a file of your server (http://i2.silvergames.com/css/n7.css). Please go there, find the code above and change:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
That's all.
* I've solved this. Thanks for the help /*
I am attempting to show some images to different users depending on their user_id / username.
I am trying to do so by using userSession.
I tried by using this code:
<?php
if ($_SESSION['user_id'] == 'Charlie') {
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
}
?>
I also tried "userSession" and "user_email". None worked.
It cannot even load my website when I type in the code above. When I remove it, it loads perfectly.
Here's my home.php class which is the one that loads when a user is logged in. It's the same for everything atm but I am trying to display just certain images to the users depending on who they are. They have no special rank or anything.
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['userSession']))
{
header("Location: index2.php");
}
$query = $MySQLi_CON->query("SELECT * FROM users WHERE user_id=".$_SESSION['userSession']);
$userRow=$query->fetch_array();
$MySQLi_CON->close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<!--<link rel="stylesheet" href="css/prettyPhoto.css" />-->
<!--<link rel="stylesheet" href="css/flexslider.css" />-->
<link rel="stylesheet" href="css/custom-styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!--Fancybox dwuser.com-->
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
</style>
<!--Fancybox end-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test | <?php echo $userRow['user_email']; ?></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container main-container">
<div class="row header"><!-- Begin Header -->
<!-- Logo
================================================== -->
<div class="span5 logo">
<img src="img/%20black.png" alt="" />
</div>
<!-- Main Navigation
================================================== -->
<div class="span7 navigation">
<div class="navbar hidden-phone">
<ul class="nav">
<li>Hjem</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">Galleri <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Galleri</li>
<li>Bryllup</li>
<li>Portræt</li>
<li>Udendørs</li>
<li>Andet</li>
<!--<li></li>-->
</ul>
</li>
<li>Kontakt</li>
</ul>
<!-- Username and logout button .... nav bar only -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> <?php echo $userRow['user_name']; ?></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</div><!-- End Header -->
<div class="row headline"><!-- Begin Headline -->
<!-- Page Content
================================================== -->
<div class="row">
<!-- Gallery Items
================================================== -->
<div class="span12 gallery">
<div class="row clearfix">
<ul class="gallery-post-grid holder">
<h6>Tryk på billederne for at forstørre dem og for at opnå bedre kvalitet</h6>
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" />
</li>
<li class="span4 gallery-item" data-id="id-2">
<img class="fancybox" src="img/IMG_2205-Edit-1_small.jpg" data-big="img/IMG_2205-Edit-1.jpg" />
</li>
</ul>
</div>
</div><!-- End gallery list-->
</div><!-- End container row -->
</div> <!-- End Container -->
<!-- Footer Area
================================================== -->
<div class="row"><!-- Begin Bottom Section -->
</div><!-- End Bottom Section -->
</div> <!-- End Container -->
<!-- Scroll to Top -->
<div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--<script src="js/jquery.easing.1.3.js"></script>-->
<script src="js/bootstrap.js"></script>
<!--<script src="js/jquery.prettyPhoto.js"></script>-->
<!--<script src="js/jquery.quicksand.js"></script>-->
<!--<script src="js/jquery.custom.js"></script>-->
<!--Fancybox script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
</body>
</html>
You never changed the session data in your example code. You should do something like:
$_SESSION['user_id'] = $userRow['user_id']
to set the concerning session var.
try this code instead of yours:
<?php
if ($_SESSION['user_id'] == 'Charlie') { ?>
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
<?php } ?>
EDIT if user ID is unique and not depended on letters casing you can do
if (strtolower($_SESSION['user_id']) === 'charlie')