Why does bootstrap not show some of my elements? - php
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; }
Related
script show errors about design
i tested a script like 5months ago it was all good, when i uploaded now it on a host it shows so much errors any idea what is the problem ?
It shows like this: https://prnt.sc/118djwo , https://prnt.sc/118dkmy
So it dont show the design like navbar, butons etc it shows only text typed
the code of this page:
<?php
include "config.php";
include "functions/function.views.php";
include "functions/function.notifications.php";
if(!isset($_SESSION['aname']) and !isset($_SESSION['apass'])){
header("location: login.php");
exit();
}
function extrat_ress($item,$query, $dbcon){
$line1 = mysqli_query($dbcon,$query);
$line2 = mysqli_fetch_assoc($line1);
return $line2[$item];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/favicon.ico">
<title>TEST</title>
<style type="text/css">
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://vanishingpointcreative.com/bhiva/app/assets/preloader.gif') 50% 50% no-repeat rgb(249,249,249);
}
.well-box.linnea {
line-height: 25px;
}
.rad-info-box {
border-radius:13px;
margin-bottom: 10px;
box-shadow: 1px 1px 2px 0 #CCCCCC;
padding: 20px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.16),0 1px 1px 0 rgba(0,0,0,.12);
background: white !important;}
.rad-info-box i {
display: block;
background-clip: padding-box;
margin-right: 15px;
height: 60px;
width: 60px;
border-radius: 100%;
line-height: 60px;
text-align: center;
font-size: 4.4em;
position: absolute;
}
.rad-info-box .value,
.rad-info-box .heading {
display: block;
position: relative;
color: #515d6e;
text-align: right;
z-index: 10;
}
.rad-info-box .heading {
font-size: 1.2em;
font-weight: 300;
text-transform: uppercase;
}
.rad-info-box .value {
font-size: 2.1em;
font-weight: 600;
margin-top: 5px;
}
#media screen and (max-width: 450px) {
.rad-info-box i {
opacity: .3;
}
}
</style>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<!-- Notifer Alert -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap252.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" >
<!-- Custom core CSS -->
<link href="css/stylea.css" rel="stylesheet">
<link href="css/navbarr.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<!-- datatable information -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<!-- SweetAlert -->
<link rel="stylesheet" href="alerts/sweetalert.css">
<script src="alerts/sweetalert-dev.js"></script>
<script src="alerts/sweetalert.min.js"></script>
<!-- spin files -->
<script src="js/spin.js"></script>
<script src="js/spin.min.js"></script>
<link rel="stylesheet" href="css/alertify.core.css" />
<link rel="stylesheet" href="css/alertify.default.css" />
<script src="js/alertify.min.js"></script>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="margin-top: 75px;">
<!-- // loader -->
<div class="loader"></div>
<!-- // nav menu -->
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">TEST</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Dashboard" style="margin-left: 10px;">TEST</a>
</div>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="border-radius: 0;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" style="margin-left: 15px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">TEST</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Dashboard">TEST</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<!-- //left menu -->
<ul class="nav navbar-nav">
<li>
<a>||</a>
</li>
<li></i>A</li>
<li></i>S</li>
<li></i>T</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Balance <b>
<?php
$uid = mysqli_real_escape_string($dbcon,$_SESSION['aname']);
echo '<span class="label btn-info">'.
extrat_ress('balance',"SELECT * FROM users WHERE username='".$uid."'",$dbcon).
'$</b></span>';
?>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-btc"></i> Add Bitcoin$</li>
<li><i class="fa fa-rub"></i> Add PerfectMoney$</li>
<li class="divider"></li>
<li><i class="fa fa-history"></i> Billing History</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Support <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-commenting"></i> My Tickets</li>
<li><i class="fa fa-envelope"></i> Reported</li>
<li class="divider"></li>
<li><i class="fa fa-plus-circle"></i> Open New Ticket</li>
</ul>
</li>
<li><i class="fa fa-shopping-cart"></i> Purchased </li>
<li></i>Rules</li>
<li><i class="fa fa-angle-double-up"></i> </li>
</ul>
<!-- // reight menu -->
<ul class="nav navbar-nav navbar-right" style="margin-right : 5px;">
=
<li><i class="fa fa-user"></i> My Profile</li>
<li class="divider"></li>
</li><li><i class="fa fa-power-off"></i></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</nav>
<?php
$q=mysqli_query($dbcon,"SELECT * FROM s WHERE sold='0'");
$q0=mysqli_query($dbcon,"SELECT * FROM c WHERE sold='0'");
$q1=mysqli_query($dbcon,"SELECT * FROM a WHERE sold='0'");
$q2=mysqli_query($dbcon,"SELECT * FROM t WHERE sold='0'");
$q3=mysqli_query($dbcon,"SELECT * FROM tool ");
$wsq = mysqli_query($dbcon,"SELECT * FROM settings")or die(mysqli_error());
$rsq = mysqli_fetch_assoc($wsq);
// check if banned
$user = $_SESSION['aname'];
$sbanned = mysqli_query($dbcon,"SELECT * FROM banned WHERE username='$user'") or die(mysqli_error());
$nbanned = mysqli_num_rows($sbanned);
if($nbanned > 0)
{
header("Location: banned.html");
die();
exit();
}
?>
<script type="text/javascript">
function buythistool(id){
var tbl = $("#buyt"+id).attr('type');
$.ajax({
method:"GET",
url:"ajax/buytool.php?id="+id+"&t="+tbl,
dataType:"text",
success:function(data){
if(data.match(/successfully/)){
sweetAlert("",data,"success")
}else{
sweetAlert("",data,"error")
}
},
});
}
function check(id){
var type = $("#shop"+id).attr('type')
$("#shop"+id).html('<img src="w1loading.gif" alt="Wait">').show();
$.ajax({
type: 'GET',
url: 'checker.php?id='+id+'&type='+type,
success: function(data)
{
$("#shop"+id).html(data).show();
}});
}
function cpanelit(id){
$("#shop"+id).html('<img src="img/w1loading.gif" alt="Wait">').show();
$.ajax({
type: 'GET',
url: 'cpanel.php?id='+id,
success: function(data)
{
$("#shop"+id).html(data).show();
}});
}
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
Your issue in style paths, you set static path for heads file... Simply, try to add backslash for your includes like: "/css/..." or "/js/..." <script src="/js/jquery.min.js"></script> <!-- Notifer Alert --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="/css/bootstrap252.css" rel="stylesheet"> <link rel="stylesheet" href="/css/font-awesome.min.css" > <!-- Custom core CSS --> <link href="/css/stylea.css" rel="stylesheet"> <link href="/css/navbarr.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/css/offcanvas.css" rel="stylesheet"> <!-- datatable information --> <link href="/css/dataTables.bootstrap.min.css" rel="stylesheet"> <script src="/js/jquery.dataTables.min.js"></script> <script src="/js/dataTables.bootstrap.min.js"></script> <!-- SweetAlert --> <link rel="stylesheet" href="alerts/sweetalert.css"> <script src="alerts/sweetalert-dev.js"></script> <script src="alerts/sweetalert.min.js"></script> <!-- spin files --> <script src="/js/spin.js"></script> <script src="/js/spin.min.js"></script> <link rel="stylesheet" href="/css/alertify.core.css" /> <link rel="stylesheet" href="/css/alertify.default.css" /> <script src="/js/alertify.min.js"></script> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="/js/ie-emulation-modes-warning.js"></script> ================ For trace issue, you can open console and check errors, if this solution not resolve your issue, you can take screen shoot from console error and check network error file...any 404 or 401 also make sure your read/write file is set correctly in host like 644 for file, 755 for directory.
Footer coming in the div when I use PHP to retrieve data in the that div
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> "; [...]
Background image elements on top
I've been assigned the task to create a 404.php error page. I just started learning everything and this task is quite difficult. So far I have successuflly:
set up github + atom
clone the repository containing some code
set up MAMP + Wordpress and got the database working
trying to organize all the terms and trying to not confuse them
It's only been 4 days since I started from scratch with basically everything.
I managed to get this code into the 404.php:
> <?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
And this is the css:
#bg {
position: fixed;
top: -64%;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
It looks like this on the localhost-page:
preview of 404
How can I make the other elements be on top of the background? I read several answers but I'm so confused right now that I need a specific hint for my case.
Thanks in advance for helping!
So if i understand you correctly your background is overlapping right now?
I think the property you are searching for is called the z-index.
you probably need to do something like
#bg{
z-index: -1;
}
more info about z-index
Try it once ...
<?php
/**
* The template for displaying 404 pages (Not Found).
**/
get_header(); ?>
<div id="bg">
<img src="<?php echo get_bloginfo('template_directory'); ?> \img\Free-Chalkboard-Backgrounds.jpg" alt="background">
</div>
<header class="entry-header">
<center>
<h1 class="entry-title">404 - Not found</h1>
</center>
</header>
<article id="post-0" class="post error404 no-results not-found">
<div class="entry-content">
<p><big>404 - Die Seite konnte nicht gefunden werden.</big></p>
<?php get_search_form(); ?>
<!-- <img class="img-responsive" src="<?php echo $logoUrl; ?>" alt="Logo - <?php echo get_bloginfo('name'); ?>"> -->
<center><img src="<?php echo get_bloginfo('template_directory'); ?> \img\internet-error-404-file-not-found.jpg" alt="404 not-found" />
</center>
</div>
<!-- .entry-content -->
</article>
<!-- #post-0 -->
<footer>
<ul class="list-inline Impressum">
<li> <a href="https://www.th-nuernberg.de/seitenbaum/impressum/page.html" target="blank">
<alt=>Impressum</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/hochschulkommunikation/ohm-shop/agb/page.html" target="blank">
<alt=>AGB</a> </li>
<li> |
</li>
<li> <a href="https://www.th-nuernberg.de/institutionen/language-center/ueber-uns/page.html" target="blank">
<alt=>Über uns</a> </li>
</ul>
</footer>
<?php get_footer(); ?>
CSS
.bg-img {
background-position: right 45px bottom;
}
#bg {
position: fixed;
top: -64%;
background-position: top center;
left: -55%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
background-position: top center;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 55%;
min-height: 55%;
}
New at html, facing an error on my website [closed]
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.
Creating a row that spans the width of the screen using bootstrap
I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}