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
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:
What I want is so that the divs are lined up properly. Here is my code:
body {
background-color: #558C89;
/*background-color: #1FDA9A;*/
color: #000305; /*remove if background is not working */
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
margin-left: 21.5%;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
}
form {
display: inline;
}
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
height: 50px;
vertical-align: top;
}
.mainheader img {
width: 100%;
height: auto;
margin: 0% 0%;
}
.mainheader nav {
background-color: #424242;
/*background-color: #008BBA; /* Here for color of navigated buttons*/
height: 65px;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: right;
display: inline;
margin-top: 0px;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
font-weight: bold;
display: inline-block;
padding: 18px 25px;
height: 10px;
/* Come back here to continue to edit buttons */
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #638CA6;
opacity: 0.85;
height: 63px;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.newsClass{
position: absolute;
width: 1000px;
background-color: #404040;
border-style: solid;
border-color: black;
border-width: 1px;
text-align: center;
color: #FFF;
margin: -100px 0 0 -150px;
top: 25%;
left: 27%;
z-index: 2;
}
.topcontent {
background-color: #404040;
width: 850px;
position: absolute;
text-align: center;
color: #FFF;
margin-top: 120px;
border-style: solid;
border-color: black;
border-width: 1px;
line-height: 1;
display: inline-block;
left: 21.5%;
}
#box{
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
border-radius: 4px;
top:50px;
}
h2{
text-align:center;
color:#fff;
}
#footer {
color: #FFF;
}
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
include("blog.php");
$posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts();
$username = $_SESSION['username'];
?>
<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>
<!-- CSS -->
<link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="indexCSS/bootstrap.min.css">
<link rel="stylesheet" href="indexCSS/font-awesome.min.css">
<link rel="stylesheet" href="indexCSS/form-elements.css">
<link rel="stylesheet" href="indexCSS/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="icon" href="images/favicon.gif">
</head>
<body>
<img src="images/logo.gif" id="logo"/>
<header class="mainheader">
<nav><ul>
<?php
if(isset($_SESSION['user_id'])){
echo '<li>Log out</li>';
}else{
echo '<li>Log in</li>';
}
?>
<li>My Account</li>
<li>Contact</li>
<li>Play</li>
<li>Home</li>
</ul></nav>
</header>
<h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo 'New Post'; }?>
</h2>
<?php
foreach($posts as $post) {
?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h2 class ="title"><?php echo $post['title'];?></h2>
<p> Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in <?php echo $post['name']; ?>
<br></br>
<?php
if(getPermissions($username)) {
?>
Edit Post |
Delete Post
<?php
}
?>
</p>
<div class="contents"> <?php echo nl2br($post['contents']); ?></div>
<?php
}
?>
</div>
<div class="form-top-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88077370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
NOTE: I guess the "run snipped" doesn't seem to run php.
It sounds like you are not closing the divs in the correct places.
Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.
I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.
<?php foreach ($posts as $post):?>
<div>
<h2 class ="title">
<?php echo $post['title'];?>
</h2>
<p>
Posted on
<?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in
<a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
<?php echo $post['name']; ?>
</a>
<br></br>
<?php if(getPermissions($username)): ?>
Edit Post |
Delete Post
<?php endif; ?>
</p>
<div class="contents">
<?php echo nl2br($post['contents']); ?></div>
<div>
</div>
<?php endforeach;?>
Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.
I am programming a website, but I can have just one div per CSS document.
Here is my code:
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: white;
background: url("https://static.pexels.com/photos/160133/pexels-photo-160133.jpeg");
background-size: cover;
}
#menu {
width: 100%;
height: 60px;
background-color: white;
float: right;
}
#menu ul {
list-style: none;
margin-right: 25%;
}
#menu li {
padding-top: 7px;
float: right;
color: black;
display: inline;
margin-right: 15px;
font-family: 'Josefin Sans', sans-serif;
}
#menu a {
text-decoration: none;
color: black;
}
#menu a:hover {
text-decoration: none;
color: #DD0604;
}
#menu li:hover::first-letter {
color: black;
}
#menu li::first-letter {
color: #DD0604;
}
#menu img {
width: 70px;
height: 70px;
margin-top: -25px;
}
/* This doesnt work */
.devices-and-text {
color: green;
}
<head>
<title>Tvorba webstránok FAXEOT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="">
<meta name="">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div id="menu">
<ul>
<li style="float: left; margin-left: 30%;"> <img src="images/logo.png"> </li>
<li class="blue"> Menu </li>
<li> Menu </li>
<li> Menu </li>
<li> Menu </li>
</ul>
</div>
<div class="devices-and-text">
This text doesn't work...
</div>
</body>
Website shows menu and everything about menu is OK. But my div "devices-and-text" is still black not green. When I put the style into the index.php, everything works.
I'm having some trouble getting my page laid out the way I want. I have a gap that's showing up between two divs on my page, and a css menu that I can't figure out how to center. Any help would be appreciated...
FYI, template_header.php is the only template with any content in it at this point.
Here is the code...
* index.php *
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
<?php include './templates/template_header.php'; ?>
<div id="pageBody">
<?php
include './templates/template_contextmenu.php';
include './templates/template_content.php';
include './templates/template_sidebar.php';
?>
</div>
<div id="pageFooter">
<?php include './templates/template_footer.php'; ?>
</div>
</body>
</html>
* template_header.php *
<div class="banner" >
<img class="bannerImage" src="./graphics/FullLogo2.png" height="216" />
</div>
<div id="menu">
<ul>
<li></li>
<li>Home</li>
<li>Products</li>
<li>Information</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
* style.css *
header, footer, aside, nav, article, section {
display: block;}
body {
margin: 0px;
padding: 0px;}
div.banner {
background-image:url("./graphics/BannerBG_220.png") ;
background-repeat:repeat-x;
height:13.5em;
border:solid;
border-width:thin;
margin: 0;
padding: 0;}
.bannerImage {
display: block;
margin-left: auto;
margin-right: auto;}
#menu{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
height:2.25em;
font-size:1.25em;
font-weight: 500;
background:transparent url(./graphics/navbackground2.png) repeat-x ;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#menu ul {
padding:0;
list-style-type:none;
width:auto;}
#menu ul li {
display:block;}
#menu ul li a {
display:block;
float:left;
color:#e5e5e5;
text-shadow: 2px 2px 2px #3d3d3d;
text-decoration:none;
padding: .4em 1.5em .2em 1.5em;
height: 2.25em;
background:transparent url(./graphics/MenuDivider.png) no-repeat top right;}
#menu ul li a:hover, #menu ul li a.current {
background: url(./graphics/NavBackgroundOn.png) repeat-x;}
You won't be able to center #menu using margin: 0 auto without a width. You can measure the width of the links with javascript and then set the sum of all link widths as the width of #menu. You'll see a short delay but it'll work.
As for the white gap, an inspection with Firebug will show you where the unwanted margin or padding is coming from.
Get rid of the whitespace around your php tags.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
<?php include './templates/template_header.php'; ?>
<div id="pageBody"><?php
include './templates/template_contextmenu.php';
include './templates/template_content.php';
include './templates/template_sidebar.php';
?></div>
<div id="pageFooter"><?php include './templates/template_footer.php'; ?></div>
</body>
</html>
To center it, try this in the css:
#pageFooter { margin-left:auto; margin-right:auto; }
my code which I am going to paste here shows different results in FF, IE6 and Opera.
The difference between results from FF and Opera is the amount of space shown above (in sky color) and below (in white color) the horizontal menu. In the case of IE6, the difference from the result of FF is the amount of space (white color) shown below the horizontal menu. How can I get all 3 browsers to show the same result i.e the current result from FF ?
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>fffffff</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header_inside">
<div class="logo">
<img src="img/img_flwr.png" width="224px" height="162px" >
</div> <!-- end of class logo-->
<div class="chat">
<img src="img/img_flwr.png" width="124px" height="62px">
</div>
<div class="clear">
</div>
<div class="name">
<marquee behavior="scroll" direction="RIGHT" scrollamount='5' scrolldelay='25' >
CODE ARROW
</marquee>
</div> -->
<div id="slides">
<img src="img/img_1.jpg" alt="Img 1" width="815px" height="268px" />
</div>
<div class="clear">
</div>
<br>
</div> <!-- end of class header_inside-->
</div> <!-- end of header-->
<div class="menu_h">
<div class="menu_h_inside">
<br>
<ul>
<li><a href="index.php" id="home_nav" >Home</a></li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Photo Gallery</li>
<li>Video Gallery</li>
<li>Career</li>
<li>Contact</li>
</ul>
<br style="clear:left"/>
</div> <!-- end of class menu_h_inside-->
</div>
</body>
</html>
and the css is:
/* CSS Document */
*{
padding:0;
margin:0;
}
body{
width: 1160px;
/*background:#BFFDC4 !important;*/
margin-left: 20px;
/*border:4px solid red;*/
}
#frame {
/*width: 710px;*/
width: 1125px;
/*BORDER:12PX SOLID RED;*/
/*border:7px solid green;*/
}
#header{
position:relative:
display:block;
/*border:10px solid green;*/
width:1160px;
background:#9DD4FF;
}
.header_inside{
}
body#home a#home_nav,
body#image_gallery a#image_gallery_nav
{
background-color:#0b75b2 !important;
}
.logo{
position:relative;
left:3px;
top:3px;
float:left;
/*border: 8px solid #F2AC4E;*/
}
.chat{
position:relative;
float:left;
display:inline-block;
margin-left:100px;
margin-top:15px;
/*border:13px solid red;*/
}
.chat img:hover{
}
.clear{
clear:both;
}
.name{
position:relative;
display:block
clear:both;
width:300px;
height:50px;
MARGIN-TOP:75PX;
background-color:#000000;
color:#FFFF80;
font-size:40px;
}
#slides{
position:relative;
left:300px;
MARGIN-top:-180px;
FLOAT:LEFT;
}
/* horizontal menu_h css begins*/
.menu_h{
position:relative;
margin-top:20px;
width: 1145px;
/*border:5px solid yellow;*/
}
.menu_h ul{
margin: 0; padding: 0;
float: left;}
.menu_h ul li{
display: inline;
}
.menu_h ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 44.6px;
/*background-color: #333; EDITED BY ME */
background-color:#C7A781;
border-right: 1px solid #FFFFFF;
}
.menu_h ul li a:visited{
color: white;}
.menu_h ul li a:hover, .menu_h ul li .current{
color: #fff;
background-color:#0b75b2;}
/* horizontal menu_h css ended */
.menu_h_inside{
margin-left:1px;
/*margin-top:7px;*/
}
IMAGES should be used in appropriate places.
Thanks in advance.
Istiaque Ahmed
Bangladesh
Your problem is most likely caused by the browser default stylesheets being all over the place. You should consider adding in a good CSS reset before spending a lot of time trying to debug the problem. This one is from the guy that came up with the first universal reset. It works pretty well.
http://meyerweb.com/eric/tools/css/reset/
Your doctype is incorrect and you are in quirks mode. Change your doctype to this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and see where we stand.
Make sure you follow Firefox or Opera first. Then look to see how IE screws things up before you try and "fix" anything. Never, ever trust IE to do anything right.