Hello guys I am building a php webpage with bootstrap and I have margin in my top, right and left of the body.
Following this question I downloaded the notepad++ and to converted to utf-8 without BOM but the margins are still there.
Here is my css file
.texts{
color: white;
}
.mainbody{
margin-top: 0;
max-width: 1200px;
}
.banner{
height : 600px;
width : 100%;
max-width:100%;
background-image: url("restrooms.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.bannertext{
color: white;
}
.bannerbg{
background-color: #a52f0b;
opacity: 0.7;
margin-left: 40px;
height :150px
}
.dashform{
margin-top: 10px;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
}
.mtop{
margin-top: 6px;
}
.blbc{
background-color: #424242;
}
.im-centered{margin: auto; max-width: 100%;}
here is index.php
<?php
include ('header.html');
?>
<div class="w3-container w3-center">
<div class="w3-container banner">
<div class="w3-container w3-display-left bannerbg">
<h2 class="w3-container bannertext">Βρες το κατάλληλο εστιατόριο<br>.....στην κατάλληλη τιμή</h2>
<button class="w3-btn w3-red w3-round-xxlarge">Βρές Εστιατόριο</button>
</div>
</div>
</div>
</body>
</html>
header.html
<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang:"en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="rules.css"/>
<title>Αρχική</title>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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" href="index.php">Δυναμικό Τιμολόγιο</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Αρχική</li>
<li>Ολα Τα Καταστήματα</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
and here is a sreenshot of the output
What am I missing?
body has default margins on all browsers, so all you need to do is shave them off:
html,
body {
margin: 0;
padding:0;
text-align: center;
}
By default, most browsers add a margin / padding to the body.
Add the following to the top of your CSS file:
html,
body {
padding: 0;
margin: 0;
}
Related
Please someone help me. Im new to coding, I'm trying to highlight the active menu item. I have been searching for almost two weeks, but it is still not resolved. I have tried with Jquery CDN; it works, but when I upload all this to the web, it doesn't work. When I click the menu, it highlights, then disappears suddenly. So it didn't work with Jquery CDN.
here is the html
<!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">
<title>Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</ul>
</div>
</div>
<!-- Main variables *content* -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
$("#toi").click(function(e) {
e.preventDefault();
$("#main-wrap").toggleClass("launched");
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$(".mobileSearch a").click(function(e){
e.preventDefault();
$(".search-bar").toggleClass("toggleSearch");
});
} else {
$('#main-wrap').addClass('launched');
}
/*$(window).scroll(function() {
var nav = $('#scrollNav');
if ($(window).scrollTop() >= 10) {
nav.addClass('fixedNav');
} else {
nav.removeClass('fixedNav');
}
});*/
</script>
</body>
</html>
here is the css
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
please help
Not an answer as such but I corrected your HTML markup as best I could - it now validates correctly so that in itself might be a help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name='keywords' content='' />
<meta name='description' content='' />
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!--///////////////////////////////////////////////////////////////////////
The element "button" must not appear as a descendant of the "a" element.
The hyperlink has been removed from the DOM which might affect your
layout
/////////////////////////////////////////////////////////////////////////-->
<!--
<a class="navbar-brand" href="/"></a>
-->
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Main variables *content* -->
<script src='//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js'></script>
<script>
$('#toi').click(function(e) {
e.preventDefault();
$('#main-wrap').toggleClass('launched');
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$('.mobileSearch a').click(function(e){
e.preventDefault();
$('.search-bar').toggleClass('toggleSearch');
});
} else {
$('#main-wrap').addClass('launched');
}
</script>
</body>
</html>
The original code, run through the W3c validator produced the following results... as you will see it gave up hope and bailed!
If the markup alters the layout significantly look again at the css and judge whether the above markup was your intended layout. With valid markup you should have fewer problems going forward I hope.
I want to question for my problem about a Slider/Swipe, i want the slider can move automatically.
so, I have a page php with Slider/Swipe, but its not move automatically, how to make the slider automatic move.
please help for my problem, I really hope for your help, thank you all
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="tmp_home_swipe/css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" /> -->
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 70%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container" id="slideshow">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="tmp_home_swipe/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
thanks for attention.
var swiper = new Swiper(".swiper-container", {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
https://themesbrand.com/velzon/docs/php/swiper-slider.html
I have a problem regarding about the navbar. Just now when I was able to do make the navbar stick to the top when scrolling, the top content was then blocking my view and I actually used this question to help me but it didn't work, is there another solution or am I just putting it at the wrong place? Here is the question that I used to help me, Twitter Bootstrap - top nav bar blocking top content of the page
I tried using this following of the codes but it doesn't help:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
This is what happen
So here is the codes:
app.blade.php(where my navbar is)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid" style="background-color: blue">
<div class="navbar-header" style="padding-left: 50px">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
test.css (this is inside my sidebar code, I don't think the sidebar code is needed so I just put the css since it affect the navbar also)
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
padding-top: 65px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position:fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {
background:#0000FF;
position: fixed;
width: 100%;
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
#test .dropdown-menu {
position: absolute;
top: 0;
left: 180px;
min-width: 180px;
}
Try adding the "padding-top: 60px;" style to whatever element is wrapping the "#yield('content')" area rather than to the body element. Hopefully, that will push your content below the absolute-positioned navigation bar.
I have a bunch of PHP forms which is working perfect. I am working on Integrating all the forms into a single HTML page so that on the click it opens the form in the same HTML page. I am new to HTML5 and took some HTML file and modified it.
I am facing two issues.
1. On click of the options in top of the form(from drop-down) it opens the page in the new tab. I need to open it in the center of the HTML page.
2. I need to create in-line drop-down boxes, the second drop-down menu is not showing up correctly.
It may be trivial or I am doing something completely wrong?
Experts, please tell me what I am missing..
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DG SIM</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<link rel="stylesheet" href="/ASSIM/css/bootstrap.min.css">
<script src="/ASSIM/jquery-1.11.3.min.js"></script>
<script src="/ASSIM/js/bootstrap.min.js"></script>
<style type="text/css">
.x-panel-framed {
padding: 0;
}
#div_g2 {
background-color: #FFFFFF;
margin: 10 10 10 10;
}
button#inner {
color: #FFF;
background-color: #3498DB;
border-radius: 10px;
margin: 0px 10px 10px 0px;
font-weight: bold;
font-size: 110%;
width: 100%;
text-transform: uppercase;
}
.dropdown-menu form :focus{
color:black;
background-color: none;
}
.buttonWidth {
width: 160px
}
</style>
<script type="text/javascript">
$(function() {
pageLoaded();
});
function pageLoaded() {
//need to call a php script here too so that it shows up on the cneter page.
}
Code:
</script>
</head>
<body style="background-color:#0067AC;">
<div align="center"><img src="img/aff_new.gif" /><img src="img/corp_id_small.gif" /></div>
<!-- Device options-->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">Device Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Onboarding Devices</li>
<li><a target="div_g2" href="/ASSIM/trialdeviceActions.php">Device Actions</a</li>
</ul>
</div>
<!-- DATA Option
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">SCEF Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a target="div_g2" href="/ASSIM/addSF.php">ADD SCEF</a>
<li><a target="div_g2" href="/ASSIM/trial.html">Delete SCEF</a>
</li>
</ul>
</div>
</div>
-->
<div style="background-color:#0067AC; position: absolute; left: 10px; right: 10px; top: 95px; bottom: 10px;" > <div>
<div id='div_g2' style='height:500px; top: 30px;'></div>
</div>
</body>
</html>
I have had this problem for a while. I am including a CSS file into an index page and the classes from the CSS file are ignored. What is wrong?
This is in CSS.php file
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>FormAssembler</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Icon -->
<link rel="icon" href="https://student.sps-prosek.cz/~moudrmi14/Navrhy/Projekt/barchart-icon.png" type="image/gif" sizes="16x16">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.center{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
body {background: linear-gradient(white,rgba(77, 184, 255, 0.34);}
.alignCenter {text-align: center;}
.margin0 {margin: 0 auto;}
/* INDEX */
.CCSnavbar-class {position: relative;top: 5px;width: 1300px;margin: 0 auto;}
.header {width: 1200px;margin: 0 auto;}
.line {background-color: rgb(146, 145, 145);width: 100%;height: 1px;margin-bottom: 15px;}
.content {width: 1200px;margin: 0 auto;}
</style>
<!-- Navbar -->
<ul class="nav navbar-nav">
<li>HOME</li>
<li>FORM ASSEMBLE</li>
<li>PROFILE</li>
</ul>
<!-- Navbar log/reg -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><button class="btn btn-link" data-toggle="modal" data-target="#myModal" style="margin-top: 8px;"><span class="glyphicon glyphicon-log-in"></span> Login</button></li>
</ul>
</div>
</nav>
<div class="center" style="margin: 0 auto; width: 1300px;background-color: white;">
<div class="filler1" style="width: 100%; height: 10px;background-color: white;margin-top: 20px;">
</div>
This is a part of the Index page
<?php include "CSS.php"; ?>
<!-- Header -->
<div class="header">
<H1>Welcome to FormAssembler</H1>
<div class="line">
</div>
</div>
<div class="content">
Header, Content, body doesn't work either. The whole CSS is beeing ignored
You made mistake in CSS file.Please make syntax on CSS properties.
Inbetween the body tag syntax error,Try below the codes.
<style type="text/css">
.center{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
body {background: rgba(77, 184, 255, 0.34);}
.alignCenter {text-align: center;}
.margin0 {margin: 0 auto;}
/* INDEX */
.CCSnavbar-class {position: relative;top: 5px;width: 1300px;margin: 0 auto;}
.header {width: 1200px;margin: 0 auto;}
.line {background-color: rgb(146, 145, 145);width: 100%;height: 1px;margin-bottom: 15px;}
.content {width: 1200px;margin: 0 auto;}
</style>
try to use this as CSS file put in style.css and then include in as
<?php include "style.css"; ?>
for correct including css in index file
a. don't put the style tag on your css file, you don't need it if you'r write the code in the css file itself.
b. I order to link the css file to the html file I would simply use:
<link rel ="stylesheet" href = "path_to_css_fill">
put that on the head part of the your html page