Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
Improve this question
In the following codes I used universal header and footer and my problem is that when I add universal footer(I mean this part of code : ) calendrer does not open and I can not select date and time there!! and when I remove footer everything is fine!! I wonder what should I do to overcome this problem.
Thank you for your help in advance
<?php
$title = "drinkmenu";
include "header.php" ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
body {
background-image: url(images/salad.jpg);
color: white;
text-align: center;
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
mmargin-top: 90px;
display: flex;
flex-flow: column;
overflow-x: hidden;
}
.image {
display: block;
width: 100%;
height: 100%;
}
h2 , h3 {
margin-left: 1%;
color: white !important;
}
#booking {
margin-left: 1%;
background-color: rgb(43, 26, 8);
}
</style>
</head>
<body>
<div class="row">
<h2>Book a table</h2>
</div>
<div class="row">
<div class="col" id="booking">
<label for="sel1" class="form-label">Party size</label>
<select class="form-select form-select-lg mb-5" id="sel1" name="sellist1">
<option>1 person</option>
<option>2 persons</option>
<option>3 persons</option>
<option>4 persons</option>
<option>+5 persons</option>
</select>
<div class="">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br/>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker2').datetimepicker({
format: 'MM/DD/YYYY HH:mm'
});
$('#datetimepicker3').datetimepicker({
format: 'hh:mm A',
});
});
</script>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col" id="">
<img class="image" src="images/Bookatable.jpg" alt="Moroccan tomato salad">
</div>
</div>
<?php include "footer.php" ?>
</body>
</html>
i expect calendar works properly
Related
I want both the textbox and the button to occupy the entire div (which is colored) only using bootstrap. Here I show you a screenshot of my screen: https://postimg.cc/yJcPtVSg. I have tried several things (put the col-12) but I have not been successful. This is my code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<LINK REL=StyleSheet HREF="css2/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container" style='height:600px;'>
<div class='row h-100 '>
<div class='col bg-danger my-auto d-flex justify-content-center alig-items-center '>
<form action="lineas.php" method="post">
<div class ='row m-3 '>
<?php echo("Elige origen: ");?>
<input type="text" id="origen" name="origen" class="form-control ">
</div>
<div class ="row m-3">
<?php echo("Elige destino: ");?>
<input type="text" id="destino" name="destino" class="form-control">
</div>
<div class ="row m-3">
Selecciona una fecha: <input type="text" id="datepicker" name="fecha" class="form-control">
</div>
<div class ="row m-3">
<input type="submit" name="enviar" value="Enviar" class="btn btn-primary btn-block">
</div>
</form>
<script src="js2/popper.min.js" type="text/javascript"></script>
<script src="js2/utilidades.js" type="text/javascript"></script>
</div>
</div>
</div>
</body>
</html>
Add this CSS.
.full-width {
width: 100vw;
position: relative;
left: 50%; /* adds left 50% to the element */
right: 50%; /* adds right 50% to the element */
margin-left: -50vw; /* it works as left: 0 */
margin-right: -50vw; /* it works as right: 0 */
}
add another div with class = "container" before form. it will work
This is my html code. It dynamically creates these textboxes but they all have the same name.
<?php
include 'db.php';
$office = $_GET['office'];
$application_name = $_GET['application_name'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Add Requirements for New Application</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sidebar.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap css library -->
</head>
<style>
.header--banner {
background-image: url(cb.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
}
.header--banner {
background-image: url(magic.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
position: relative;
text-align: center;
color: black;
}
.green{
text-decoration: none;
font-family: Modern;
font-size: 18px;
border-radius: 5px;
padding: 5px 8px;
background-color: #27ae60;
color: #ffffff;
}
a.green:hover{
text-decoration: none;
background-color: #145a32;
color: #ffffff;
transition: 0.7s;
}
.bs-example2{
border: 3px solid black;
background: #f5f5f5;
text-align: center;
padding:20px;
margin:5px;
height:200px;
}
</style>
<body>
<header class="header--banner">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="kiosk-HOMEPAGE.php">
HOME
</a>
</li>
<li>
Offices
</li>
<li>
Employees
</li>
<li>
Change Username & Password
</li>
<li>
Reports
</li>
<li>
Log Out
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="jumbotron">
<div class="container-fluid">
<img src="urdBanner.jpg" id="urdBanner" alt="Banner" style="width:100%; height:250px;">
<center><h2 style="position:relative;">Requirements</h2></center>
<p></p>
<img src="menu.jpg" class="rounded-circle" style="width:30px; height:30px;">
<br>
<br>
Previous
<br>
<br>
<form method="get" action="kiosk-NEW_CHARTER_REQUIREMENTS_insert.php">
<input type="hidden" name="office" value="<?php echo $office ?>">
<input type="hidden" name="application_name" value="<?php echo $application_name ?>">
<br>
<div class="row form-group">
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Step By Step Procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Personnel in charge</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Time needed to complete procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Amount of fees if any</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Required Documents</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Procedure for the filing of complaints</b></label>
</div>
</div>
</div>
<div class="form-group fieldGroup">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript">
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<script type="text/javascript">
// Auto-Grow-TextArea script.
// Script copyright (C) 2011 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function AutoGrowTextArea(textField)
{
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height = textField.scrollHeight + "px";
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height =
(textField.scrollHeight * 2 - textField.clientHeight) + "px";
}
}
}
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
this is my insert.php
<?php
if(isset($_GET['submit'])){
$con = mysqli_connect('localhost','root','','information_kiosk');
$office = $_GET['office'];
$application_name = $_GET['application_name'];
$steps = $_GET['steps'];
$personnel = $_GET['personnel'];
$time = $_GET['time'];
$fees = $_GET['fees'];
$documents = $_GET['documents'];
$complaints = $_GET['complaints'];
$totalSize = sizeof($steps);
for($i=0;$i <=$totalSize;$i++) {
$InsertSteps = (!empty($steps[$i])) ? $steps[$i] : '';
$InsertPersonnel = (!empty($personnel[$i])) ? $personnel[$i] : '';
$InsertTime = (!empty($time[$i])) ? $time[$i] : '';
$InsertFees = (!empty($fees[$i])) ? $fees[$i] : '';
$InsertDocuments = (!empty($documents[$i])) ? $documents[$i] : '';
$InsertComplaints = (!empty($complaints[$i])) ? $complaints[$i] : '';;
echo $InsertSteps;
echo "<br>";
echo $InsertPersonnel;
echo $InsertSteps;
echo "<br>";
}
}
?>
*update. with my insert code now it only shows the first row of data but not the 2nd or 3rd
only the first row gets inserted into database but the following dynamically created rows dont. My question is how could i change my syntax so that each row would insert into the database for example.
stepsColumn PersonnelColumn timeColumn feesColumn documentsColumn
array[0] array[0] array [0] array[0] array[0]
array[1] array[1] array [1] array[1] array[1]
I'm learning PHP and I found useful tutorials online, so I'm trying to build my very first site in PHP. I have a problem with CSS implementation. I keep my tab with localhost always on so I dont have to run it every single time when I change something. Problem is, when I code some CSS it loads on my registration form, but when i refresh the page, it's like I never coded CSS for that page. (sorry for bad english I hope You guys understand what I wanted to say..)
Here's the signup.php code :
<div class="container">
<div class="row" style="text-align:center;">
<h3>EPO - Sistem - Registracija </h3>
</div>
<div class="row sub_msg">
<p> Veb aplikacija za evidenciju predispitnih obaveza. </p>
</div>
<div class="row signup">
<div class="row">
<h3> Dobrodosli, molimo Vas, unesite podatke za registraciju. </h3>
</div>
<form action="" method="post" class="form-horizontal">
<div class="row form-group input_group">
<label for="" class="col-sm-2" >E-mail:</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Firstname:</label>
<div class="col-sm-10">
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Lastname:</label>
<div class="col-sm-10">
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Password:</label>
<div class="col-sm-10">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="row form-group" style="margin:0px 10px 20px 10px">
<div class="col-xs-12">
<input type="submit" name="submit" id="Registruj se" class="form-control">
</div>
</div>
</form>
</div>
</div>
And here's the Index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EPO - Pocetna stranica</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href=" ./css/custom.css">
</head>
<body>
<nav class="navbar" style="background-color: #c40707">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand crud" style="color: darkgray !important" href="#">EPO Aplikacija</a>
</div>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li><a data-toggle='tab' href="#index">Pocetna stranica</a></li>
<li><a data-toggle='tab' href="#login">Ulogujte se</a></li>
<li><a data-toggle='tab' href="#signup">Prijavite se</a></li>
</ul>
<div class="tab-content">
<div id="index" class="tab-pane fade in">
<p>Index</p>
</div>
<div id="login" class="tab-pane fade in">
<p>Login</p>
</div>
<div id="signup" class="tab-pane fade in">
<?php include("./user/signup.php"); ?>
</div>
</div>
</div>
</body>
</html>
And here's the css code:
body{
background-color: darkgray;
font-size: 22px;
margin: 0;
padding: 0;
}
.crud{
width:auto;
color: #605d5d !important;
font-size: 25px;
font-weight: 800;
}
.sub_msg{
text-align: center;
padding: 10px 0px 20px 0px;
}
.signup{
border: 1px solid #c40707;
text-align: center;
width: 60%;
height: auto;
margin: auto;
}
.input_group{
margin: 0px 20px 20px 20px;
}
.input_group input{
height: 40px;
font-size: 20px;
}
input[type="submit"]{
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: #c40707;
color: #605d5d !important;
}
I'm stuck her for over two hours, and I'm pretty sure it's some beginners silly mistake but I can't find it..
Correct the path of from <link rel="stylesheet" href=" ./css/custom.css"> to <link rel="stylesheet" href="./css/custom.css">
If still not work then force your browser to refresh the stylesheet.
Check by adding version number like
<link rel="stylesheet" type="text/css" href="./css/custom.css?version=51">
In the code below href attribute has unneeded space in it.
<link rel="stylesheet" href=" ./css/custom.css">
Should be:
<link rel="stylesheet" href="./css/custom.css">
Also sometimes you may need to clear cache for the changes in your css to appear.
In this case, cause it can become tiresome pressing the refresh button, rather than do a refresh, I add a random value at the end of the css url to make it appear like a new url so no caching will happen.
Like
<link rel="stylesheet" href="./css/custom.css?<?php echo rand(1,300);?>">
Try to change this line (assuming that your css folder in in the same level as you index.php)
<link rel="stylesheet" href=" ./css/custom.css">
To this this
<link rel="stylesheet" href="css/custom.css?t=<?php echo time(); ?>">
Remove the <?php echo time(); ?> once you go on production as it meant on for development so you don't need to clear the cache or the hard reload if the changes in your css are not reflected in the browser.
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 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;
}