I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
Related
I'm using php to display an error message to the user. The code is sitting at the top of the page and once the error message displays, it affects the height of my textboxes. I coded the height in a style sheet. Also, my error message is sitting inside of a div. I tried using the span tag but that isn't working either since its still sitting at the top line of the page. This is the error message in php:
if($result != "")
{
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><br>";
echo $result;
echo "</div>";
}
Registration div css:
#RegBody
{
background-color: white;
background-image: url(LilyPads.jpg);
height: 82.7vh;
}
#RegContents
{
position: absolute;
margin: 39px auto 0 402px;
border-radius: 20px;
background-color: white;
width: 500px;
height: 455px;
padding-left: 57px;
}
#RegisterUser
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
margin-top: 14px;
margin-left: 112px;
color: #1A3D5B;
width: 215px;
height: 30px;
color: white;
background-color: #1A3D5B;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Error message css:
#Error
{
position: absolute;
background-color: white;
border: 2px solid red;
border-radius: 20px;
width: 200px;
padding: 15px;
margin: 147px 0 0 70px;
color: red;
}
Here's the css for the textboxes:
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height: 25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
Before the error message:
I was thinking that maybe its the font size that's the issue but regardless...a white line also appears at the bottom of the page:
Please have patience with me. I'm a student and new to php. Thank you
i can tell you how to rectify the error (though i am still looking for the reason because of which it happens).
what i did is that i inserted the php code inside body tag and it work fine no change in Textbox dimensions.Below is the code i wrote to prove the same
<?php
$result=1;
echo "<div id='Error'>";
echo "<b>The following errors occured:</b><span>";
echo $result;
echo "</span></div>";
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input[type='text']
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 10px;
width: 210px;
height:25px;
border-color: #1A3D5B;
border-style: solid;
border-radius: 20px;
}
</style>
</head>
<body>
<input type='text' name=''>
</body>
</html>
I'm pretty new to programming/web development (this is my first website essentially) and for some reason, my footer on the index.php page does not have any padding on the top (every other page the footer is perfectly fine).
Index.php
<?php
include('includes/header.php');
?>
<div class="main-body">
<div id="box-1">
<h2>WELCOME TO</h2>
</div>
<div id="box-2">
<h2>TOTALLY<br> EDUCATIONAL</h2>
</div>
</div>
<?php
include('includes/footer.php')
?>
footer.php
<footer>
<h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>
</body>
</html>
style.css(index)
/*INDEX PAGE*/
/*side-by-side box structure*/
.main-body {
box-sizing: border-box;
display: inline;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#box-1 {
width: 49.5%;
background-color: rgba(126,121,121,1.00);
float: left;
height: 600px;
border-right: solid;
border-right-width: 2px;
}
#box-2 {
width: 50%;
background-color: white;
float: left;
height: 600px;
}
/*side-by-side box styling*/
#box-1 h2 {
padding: 300px 0;
letter-spacing: 5px;
color: white;
}
#box-2 h2 {
padding: 300px 10%;
letter-spacing: 5px;
}
style.css(footer)
#footer, #footer h5 {
background-color: black;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
Above is all the PHP and CSS relevant to the problem. Basically, when I run it the index page footer h4 has no padding at the top and there's a white strip underneath it. For every other page, this problem didn't occur, only in the index.php. I wrote all this in the span of 3 or so days and I'm just starting to learn everything so it's probably some stupid newby thing I've done but any help would be much appreciated. I'll also attach some images of what it looks like.
index.php screenshot
games.php screenshot
-jEK01
Try use inline-block for .main-body, and add clear:both; to #footer:
.main-body {
box-sizing: border-box;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#footer, #footer h5 {
background-color: black;
clear:both;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
So I just learned about the include function, I made a:
include ("header.php"); and
include ("mainSection.php"); but they seem to overlap each other.
is it something with my css or html?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Chocoot</title>
</head>
<body>
<div id="wrapper">
<?php
include ("header.php");
include ("mainSection.php");
?>
</div>
</body>
</html>
The header.php
<header id="logoheader">
<h1 id="logo">Chocoot</h1>
<div id="orangeborder1">
<nav>
<ul>
<li>Home</li>
<li>Chocolate</li>
<li>Beans</li>
<li>History</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="slider"></div>
<div id="orangeborder2"></div>
</header>
The mainSection.php
<section id="midSection">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
#logoheader{
width: 1366px;
height: 30px;
background-color: #2b292a;
}
body{
background-color: #171515;
}
#wrapper{
width: 1366px;
height: auto;
margin: auto;
background-color:#2b292a;
}
header{
width: 1366px;
height: 475px;
float: left;
}
#logo{
font-family: Georgia;
font-weight: bold;
font-style: italic;
font-size: 32px;
color: white;
margin-left: 28px;
margin-top: -3px;
margin-bottom: -3px;
float: left;
}
#orangeborder1{
width: 1366px;
height: 30px;
float: left;
background-color: #2b292a;
}
#orangeborder1{
width: 1366px;
height: 86px;
background-color: #9b3210;
float: left;
}
nav ul li{
float: left;
list-style: none;
margin-top: 28px;
}
nav ul li a{
font-family: Georgia;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #fff;
}
nav ul li:first-child{
margin-left: 250px;
}
nav ul li:nth-child(2){
margin-left: 64px;
}
nav ul li:nth-child(3){
margin-left: 90px;
}
nav ul li:nth-child(4){
margin-left: 63px;
}
nav ul li:nth-child(5){
margin-left: 50px;
}
a{
text-decoration: none;
}
#slider{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#slider2{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#orangeborder2{
width: 1366px;
height: 59px;
background-color: #9B3210;
float: left;
}
#midSection{
width: 1366px;
height: 570px;
background-color: #2b292a;
float: left;
}
#pictureContainer{
width: 250px;
height: 570px;
float: left;
}
footer{
width: 1366px;
height: 155px;
background-color: #433f40;
float: left;
}
I hope you can help me :s
Delete the 'height: 30px;' in the #logoheader block of your css. So it looks like this:
#logoheader {
width: 1366px;
background-color: #2b292a;
}
Does that do anything? You should not have to tell elements how far to start down on a page. By default they will stack on each other unless otherwise told.
Long story short I was using in-line CSS directly in the page for the longest time, but decided to put it all in one file for my own sanity. I have tried the typical
<link rel="stylesheet" href="URL">
method and it loaded, but looked extremely weird, so I decided to include it with a PHP like
<?php include("assets/style.php"); ?>
and it works perfectly fine on all of my desktop browser like Chrome and IE, but on mobile safari the entire page is a mess.
This is my page.
<!DOCTYPE html>
<html>
<head>
<title>EPICMC</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
<meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
<meta name=viewport content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
<link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
<?php include("assets/style.php"); ?>
</head>
<body>
<?php include("assets/header.php"); ?>
<hgroup>
<h1 class="logo">EPIC<font color="#00aa00">MC</font></h1>
</hgroup>
<form id="statsform" action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
</div>
<center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
</form>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4863164385597709"
data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://epicmc.us/dist/js/textbox.js"></script>
<script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
<script src="https://epicmc.us/dist/js/ripples.min.js"></script>
<script src="https://epicmc.us/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>
This is my style.php
<style type="text/css">
#charset "UTF-8";
* { box-sizing: border-box;
}
p {
display: inline;
}
form {
width: 300px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
font-family: 'Numans', sans-serif;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
background: transparent;
}
input:focus {
outline: none;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00aa00;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00aa00;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
a:link,a:visited,a:hover,a:active {
color: #636363;
text-decoration: none;
}
body {
font-family: 'Numans', sans-serif;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align: center;
margin-top: 4em;
}
h1 {
color: #636363;
}
h2 {
font-family: 'Numans', sans-serif;
font-size: 12px;
}
#error {
font-family: 'Numans', sans-serif;
font-size: 15px;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
}
#username, h5 {
font-family: 'Numans',sans-serif;
font-size: 18px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.logo {
font-family: 'Days One', sans-serif;
font-weight: lighter;
font-size: 48px;
margin-bottom: 35px;
text-align: center;
}
.alert-info, .alert-danger, .alert-warning, .alert-success {
margin-top: -20px;
background-color: #323232;
}
.container {
text-align: center;
}
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
};
}
#CAPSINPUT, .CAPSINPUT {
text-transform: uppercase;
}
#stats {
width: 300px;
margin: 4em auto;
padding: 1.5em 1.5em 1.5em 1.5em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
#statsform {
background: #fafafa;
}
#search {
background: transparent;
}
table {
color: #333;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ebebeb;
cursor: pointer;
}
td, th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */;
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33.33%;
border-left: 2px solid #ebebeb;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #FEFEFE;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #F1F1F1;
}
tr td:hover {
background: #666;
color: #FFF;
} /* Hover cell effect! */
.fa-stack {
color: #00aa00;
}
#container-avatar img {
background: url('https://epicmc.us/images/herobrine.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 85px;
width: 85px;
pointer-events: none;
}
#container-avatar #badge {
font-size: 12px;
margin: -22px 0 0 130px;
position: absolute;
text-align: center;
width: 68px;
}
</style>
the href should be "style.css" and rename the style.php to style.css and remove the tag
I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;