I am writing a website for my Uncle's business. I just started today.
**Update: I have fixed the website as I got an answer.
But to all who want to know, what I was dealing with,
I put a code snippet below. Win-Win for all.**
I am stuck at one thing.
First have a look here : MyWebsiteIsHere
Have a look at my code, its pretty primitive:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<?php include 'php/start.php'; ?>
<?php include 'php/start2.php'; ?>
<?php include 'php/start3.php'; ?>
</body>
</html>
php/start.php
<?php
echo '<head><title>Super Express Logistics</title></head>';
echo "<header style=\"background-color:pink\">
<p class=\"centered\">Hello</p></header>";
?>
php/start2.php
<?php
echo "<header style=\"background-color:brown\"><p class=\"centered\">Ola!
</p></header>";
?>
php/start3.php
<?php
echo "<header style=\"background-color:lightblue\">
<p class=\"centered\">こんにちわ ！</p></header>";
?>
css/stylesheet.css
header{
width: 100%;
height: 100vh;
background-color: #000000;
color: white;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The Question
As you see in my website (kinda), when you scroll, there is some weird text overlapping in the middle. All the three texts are enclosed in <p> SomeTextHere </p>
I put position:fixed in the css only to put the text in the perfect center, but because of that, ALL of those texts jump to the center
Can I like, fix the position for each text in the center of their parent and when I scroll, it scrolls with the parent ?
header{
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
<html>
<body>
<header style="background-color:pink"><p class="centered"> Hi !</p></header>
<header style="background-color:brown;"><p class="centered"> Ola !</p></header>
<header style="background-color:teal"><p class="centered"> こんにちわ !</p></header>
</body>
</html>
You can update the CSS in the below way:
header{
position: relative;
width: 100vw;
height: 100vh;
color:white;
}
.centered{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Related
I can't able to see the image after applying CSS background color.
HTML page:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
CSS page:
.heading{
background-color: yellow;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
}
span{
color: skyblue;
}
SCREENSHOTS:
The image should be visible after applying the CSS background color.
The images might be having transparent background. In this case it will use the container's background color. Apply a background-color css rule to the img to get a color to your image.
.heading img{
background-color: white;
}
Just in case, base_url(); isn't a valid function (if you haven't written one).
you can use $_SERVER['REQUEST_URI'] it gave you the whole link from your Website back in form of an String. In that case you can use the substr to cut the sting in your form you like.
Here is my Examlpe of your code:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
If you want to know more about base urls take a look here
Enjoy and have fun ;)
--- EDITS: ---
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
</h2>
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
</div>
<style>
.heading {
background-color: black;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
float: left;
}
span{
color: skyblue;
}
</style>
</body>
</html>
Perhaps this one is better and you can test it with e sperate file so you don't need to change your original.
I'm having an issue trying getting my fixed header and footer to show using a php include
Here is my HTML
<?php include '_includes/header.php' ?>
<div class="neo__wrapper">
<div class="neo__container">
</div>
</div>
<?php include '_includes/footer.php' ?>
My SASS (used for nesting)
*{
margin: 0;
padding: 0;
text-decoration: none;
border: 0;
border: none;
}
html,body{
width: 100%;
height: 100%;
}
.neo__wrapper{
width: 100%;
height: 100%;
margin: 0 auto;
.neo__container{
width: 960px;
height: 3000px;
margin: 0 auto;
}
}
header{
background:#ccc;
width: 100%;
position: fixed;
height: 100px;
top: 0;
}
footer{
background:#ccc;
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
}
I'm just building a framework so my header.php is just
<header></header>
and my footer.php is
<footer></footer>
Basically, my page should just have a gray fixed header and footer
Your including an empty file.
<head><link rel="stylesheet" type="text/css" href="MyCSSFile.css"></head>
also, if you are doing a header and footer on every page, include this code into them as well. in header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="MyCSSFile.css">
</head>
<body>
and in footer.php
<footer>
<script src="MyJavascriptFile.js"></script>
</footer>
</body>
</html>
Just figured out that it was an issue regarding WAMP, so PHP wasn't even running in the first place
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}
I have a very simple test site that I am using to practice some of my CSS skills. I cannot get the two main divs to match the height of the wrapper. I have a color coded example at the bottom of this post.
I had read somewhere that if I use the overflow property in my css file, that should take care of the problem. I tried both overflow: hidden and overflow: auto. Overflow: hidden did get the wrapper to be the right length, but the sidebar still wasn't long enough.
I'm sure this is something that is very simple and I know there are many tutorials out there on this issue but I cannot seem to understand what they are doing.
Here is my css file:
#wrapper {
background-color: green;
height: auto;
width: 1024px;
}
#head {
background-color:blue;
width: 100%;
height: 100px;
}
#sidebar {
background-color:red;
float: left;
width: 50px;
height: 100%;
}
#menu {
background-color:yellow;
float: right;
width: 974px;
height: 50px;
}
#content {
background-color:orange;
float: right;
width: 974px;
height: 100%;
}
I have three php files that come together to make the index page.
header.php
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
footer.php
</body>
</html>
index.php
<?php
$pageTitle = "Home";
require_once('includes/header.php');
?>
<div id='wrapper'>
wrapper
<div id='head'>
head
</div>
<div id='sidebar'>
sidebar
</div>
<div id='menu'>
menu
</div>
<div id='content'>
content
</div>
</div>
<?php require_once('includes/footer.php'); ?>
Add the following to your #wrapper...
position: relative;
overflow: hidden;
And the following to your #sidebar...
position: absolute;
For example of how it all works out, see: http://jsfiddle.net/AeLJQ/
I have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.
assets/header.php
<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>
</head>
<body>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
assets/style.css
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
display: block;
width: 100%;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 100px;
text-decoration: none;
font-size: 17px;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.header p {
color: white;
font-size: 50px;
text-align: center;
vertical-align: middle;
font-family: 'Indie Flower', cursive;
}
index.php
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
style.css
.input {
width: 50%;
}
.form {
position: relative;
left: 25%;
}
add this in your stylesheet to fill the header 100%
.header{
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
Check if that css file is being accessed first. If so then have the following
.header {
display: block;
width: 100% !important;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
If still not working add lines one by one and see the effect.
Let me know if you require any further help
.form {
position: relative;
/* left: 25%; */
margin: 0 auto;
text-align: center;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
so change your body tag to remove the left and right margin, may be that is why the full width is not filled
There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.
So you need to either remove the left: 25% from the form or make give it a width of less than 75%.
You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.
i have tested this and it worked.when the size of explore become small without any horizontal scroll bar
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<style>
.input {
width: 50%;
}
.form {
left: 25%;
}
</style>
</head>
<body>
<continer>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
<div class="form" style=" text-align: center;">
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
</div>
</continer>
</body>
</html>