I have used following code to add a background image to my PHP file.
body {
background-image:url('background.png');
background-color: #F0F8FF;
}
But I can see the color only changed not the image. Can someone help me to solve this? Does this due to the image resolutions? I exported the image from microsoft powerpoint. Do I need to consider that as well? Are there any method to find whether the issue with my code or my picture.
I have pasted my whole code.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Library Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 align="center">Management System</h3><br />
<br />
<br />
<br />
<br />
<br />
<?php
if(isset($_SESSION['username']))
{
?>
<div align="center">
<h1>Welcome to Dialog G-Tech Library</h1><br />
<div class="bar" align="center">
Logout
</div>
</div>
<?php
}
else
{
?>
<div id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
<br />
</body>
<style type="text/css">
.bar {
overflow: hidden;
background-color: #87CEEB;
}
.bar a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.bar a:hover {
background-color: #ddd;
color: black;
}
body {
background-image:url('background.png');
background-color: #F0F8FF;
}
</style>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br />
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br />
<button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>
</div>
</div>
</div>
</div>
Sometimes the cache won’t realize that changes have been made to your website. A hard refresh is a way of clearing the browser’s cache for a specific page, to force it to load the most recent version of a page. Sometimes, when changes are made to the website, they don’t register immediately due to caching. A hard refresh will usually fix this, though occasionally completely clearing the cache is necessary.
Right Click on the refresh button and click on Empty Cache and Hard Reload and check its working or not
Related
I am using laravel framework to develop web application i have one simple form i have one table which is coming from API based on that i am loading all the values into the table everything works fine but when i click on remove button it's taking first record id (i.e.. first item id of the array for all items )only instead of taking that particular record id,could you please help me where did i mistake..?
#include('header')
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.left-btn {
float: left;
}
.right-btn {
float: right;
}
.table-bordered {
margin-top: 3%;
}
#new-form {
border: 3px solid black;
width: 600px;
display: flex;
align-items: center;
justify-content: center;
}
table {
font-family: "Times New Roman";
font-size: 20px;
}
span.circle {
background: #ADD8E6;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #6e6e6e;
display: inline-block;
font-weight: bold;
line-height: 40px;
margin-right: 5px;
text-align: center;
width: 40px;
}
.buttons {
width: 200px;
margin: 0 auto;
display: inline;
}
.action_btn {
width: 200px;
margin: 0 auto;
display: inline;
}
.confirm_buttons {
width: 60px;
}
.popup {
font-size: 15px;
}
.file:focus,
.file:active {
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: none !important;
}
.glyphicon-remove {
font-size: 20px;;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h4 class="" style="font-size:20px;font-weight:80px;">User Records</h4>
</div>
<div class="col-6 text-right">
<button type="button" style="font-size:20px;font-weight:28px;" class="btn btn-primary"
data-toggle="modal" data-target="#exampleModal">
Add New Employee
</button>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body popup">
<form action="<?php echo url('postemployee'); ?>" method="POST" enctype="multipart/form-data">
#csrf
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="modal-body">
<div class="form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email"
aria-describedby="emailHelp" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="email1">Full Name</label>
<input type="text" class="form-control" id="fname"
aria-describedby="emailHelp" name="fname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email1">Date Of Joining</label>
<input type="date" class="form-control" name="doj" id="doj"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="password1">Date Of Leaving</label>
<input type="date" class="form-control" id="password1" name="dol">
</div>
<div class="form-check form-inline">
<label class="form-check-label" for="defaultCheck1">
Still working
</label>
<input class="form-check-input" type="checkbox" name="current_date"
id="defaultCheck1">
</div>
<div class="form-group form-inline">
<label for="email1">Upload Image</label>
<input type="file" class="file" class="form-control" id="email"
name="image" aria-describedby="emailHelp">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<table class="table table-bordered" id="table">
<tr>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Experience</th>
<th>Action</th>
</tr>
#foreach ($employees as $employee)
<tr>
<td>
#if (isset($employee['image_path']))
<img style="border-radius: 50%;height:40px;width:40px;"
src={{ URL::asset("/images/{$employee['image_path']}") }} alt="Avatar">
#else
<span class="circle">{{ ucfirst(mb_substr($employee['name'], 0, 1)) }}</span>
#endif
</td>
<td>{{ ucfirst($employee['name']) }}</td>
<td>{{ $employee['email'] }}</td>
<td>
#if ($employee['joining_date'] == '0 Days')
<span data-toggle="tooltip" data-placement="top" title="Fresher"
style="color:green;font-weight:500;">Joined Today</span>
#else
{{ $employee['joining_date'] }}
#endif
</td>
<td>
<button type="submit" class="btn" data-toggle="modal" data-target="#exampleModalCenter"
value="{{ $employee['id'] }}">
<span style="margin-top:10px;" onclick="getId()" id="mt"
class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
Are you sure you want to delete ?
<br><br>
<form action="<?php echo url('delete'); ?>" method="POST">
#csrf
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-primary confirm_buttons"
data-toggle="modal" name="delete_id" value="{{ $employee['id'] }}"
data-target="#exampleModalCenter">Yes</button>
<button type="submit" class="btn btn-secondary confirm_buttons"
data-toggle="modal" data-target="#exampleModalCenter">No</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</table>
</div>
<div class="right-btn">
</div>
<script type="text/javascript">
</script>
</body>
</html>
you can use onclick functionality for passing value ,try the following approach it will work
<button type="submit" class="btn" data-toggle="modal" data-target="#exampleModalCenter" data-backdrop="static" data-keyboard="false" value="{{ $employee['id'] }}" onclick="id(this.value)">
<span style="margin-top:10px;" id="rmr" class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<!--refactor the following line in modal target -->
<button type="submit" class="btn btn-primary confirm_buttons" data-toggle="modal" name="delete_id" id="del_id" data-target="#exampleModalCenter">Yes</button>
<script type="text/javascrpt">
function id(objButton) {
document.getElementById('del_id').value = objButton;
}
</script>
I am trying to get bootstrap modal to work with my html/css slider, it is fetching the users previous purchases into the slider div and each order has an Ellipsis icon that brings up a modal with some options for that order, but in this case the modal is only popping up inside the <div class="slider">
but if I put the modal outside of the slider div then the modal doesn't show up at all, It seems to work fine on desktop but on mobile the modal will only open inside the slider,
I believe it's because my slider CSS is conflicting with my modal in some way, I'm assuming it's the display:flex;
So how can I work around this?
I tried messing with z-index to try and force the modal to the front regardless of device but it doesn't seem to work
I will include my CSS at the bottom of this question :)
UPDATE: I have created some images, This is the mobile version, you can see how the modal opens inside the div instead of outside of it.. https://ibb.co/Q639Zzy
Heres the desktop version working fine.. https://ibb.co/tb8Tc6S
<div class="slider">
<?php
$stmt = $dbh->prepare("SELECT * FROM `orders` WHERE `username` = '$userdetails' AND `confirmation` = 'Confirmed' ORDER BY `date` DESC");
$stmt->execute();
$fetchy = $stmt->fetchAll();
if (count($fetchy) == '0')
{
echo('<p>No previous orders..</p>');
}
else
{
foreach ($fetchy as $fetch) {
?>
<div class="slide" id="slide<?php echo $fetch['uid']; ?>">
<img src="/images/temp/<?php echo $fetch['prodimage']; ?>" style="width:80px;">
<!--- Button trigger modal --->
<i data-toggle="modal" data-target="#exampleModal<?php echo $fetch['uid']; ?>" class="fas fa-ellipsis-v"></i>
<!--- Modal --->
<div class="modal fade" id="exampleModal<?php echo $fetch['uid']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
View Order
<br>
<form action="../../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<input type="hidden" value="Cancelled" name="cancelopt">
<label style="cursor:pointer;text-decoration: underline;">
Cancel Order
<input type="submit" style="display:none;" name="cancel">
</label>
</form>
<form class="deleteorderchk" action="../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<label style="cursor:pointer;text-decoration: underline;">
Delete from Recent Purchases
<input type="submit" style="display:none;" name="remove">
</label>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}}
?>
</div>
And here I have my CSS
<style type="text/css">
i.fa-ellipsis-v{
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
.slider{
width:100%;
display:flex;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.slider::-webkit-scrollbar {
display:none;
}
.slide{
width:120px;
flex-shrink:0;
height:100%;
}
.slider > div{
scroll-snap-align:start;
}
</style>
I'm tried to remove or change panel-body background to transparent. but not work... please help me
i want to change white colour to the transparent, please see the image attached.
This is my code in bootstrap.css
.panel-body {
background: transparent;
}
This is my code in login page
</style>
<style type="text/css">
body
{
background-image: url("login.jpg");
}
</style>
</head>
<body>
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<br/>
<br/>
<div class="panel panel-default">
<div class="panel-body">
<br/>
<br/>
<form method="post" action="<?php echo base_url().'welcome/login'
?>">
<div class="form-group" >
<input type="text" name="username" placeholder="username"
class="form-control" >
<?php echo form_error('username'); ?>
</div>
<div class="form-group">
<input type="password" name="password"
placeholder="password" class="form-control" >
<?php echo form_error('password'); ?>
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-
primary">
</div>
</form>
<br/>
<br/>
</div>
</div>
</div>
</body>
my login image
my code
You must remove .panel background:
.panel{
background:transparent !important;
}
Or
.panel{
background:unset;
}
thanks for answers...
this is my final code
<div class="panel panel-primary" style="background-color: transparent; border: 2px
solid red;
border-radius: 4px;">
I am new to PHP and bootstrap. I am making a login form which was perfectly fine when I do not put <link rel="stylesheet" type="text/css" href="styles.css"> in my header.
But I can't just remove them from my header because I will need them at a later time because of some custom buttons, etc.
Take a look at this snippet below. As you can see, there is a white space when I already indicated the mt-5. Any idea what caused this and how to resolve this? Thanks in advance!
[![enter image description here][1]][1]
.index-banner {
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 40, 0.5)), url(images/1.jpg) no-repeat center center fixed;
background-size: cover;
}
.primary-container {
padding-top: 150px;
padding-left: 50px;
transition: all 4s ease-in-out;
line-height: 10px;
}
<?php require_once 'indexheader.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Leafnote | Register</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black">
<h5 class="text-center py-2 font-weight-bold">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Provide utilities classes which will be realy handy and reduce you extra css like adding padding or margin and many more..
where ever if you need to add or remove margin you can add class, same way you can work with padding
mb-0 , mb-10
You can get more info
Bootstrap Utilities
The whitespace is actually coming from a margin-bottom in your card-title class and padding from your card-body class which is defaultly available in bootstrap cards. Simply add this to your css file to overwrite the bootstrap css
.card-title {
margin-bottom: 0 !important;
}
.card-body {
padding-top: 0 !important;
}
Add this to your stylesheet i.e. style.css
.card-body{
padding: 0 24px;
}
.card-title{
margin:0
}
No need of extra css as there are Bootstrap4 classes to remove your extra padding and margin. You can use mb-0 to remove your margin-bottom. You can learn more about Spacing in Bootstrap 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black mb-0">
<h5 class="text-center py-2 font-weight-bold mb-0">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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.