I am trying to develop a website in php. On my main page I use include function (in php) to include other files in it. But when load the main page the CSS in the other files get all screwed up. It is showing as if there is no CSS at all so everything is on top of each other. When I load the files separately everything works perfectly fine.
So in the index.php file I have
//code
include 'toolbar.php';
Then in toolbar.php I have
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top:0px;
left:0px;
z-index: 10;
}
.text_computer
{
position: absolute;
top:80px;
left:20px;
z-index: 20;
text-align:center
}
input.file
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:317;
height:202;
}
.text_upload
{
position: absolute;
top:6px;
left:80px;
z-index: 20;
text-align:center
}
input.submit
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:330;
height:50;
}
//code
<div class="fileinputs">
<input type="file" class="file" name='image'/>
<div class="fakefile">
<img src='red_frame.png' width='330'>
</div>
<div class="text_computer">
<a style='font-family:Arial;color:white;'><font size='6'>Choose a photo from<br> your Computer</font></a>
</div>
</div>
<div class="des_box">
<textarea name='description' cols='38' rows='4' placeholder='Enter a description here...' maxlength='500'></textarea><br>
</div>
<br>
<div class="fileinputs">
<input type="submit" class="submit" value='Upload'>
<div class="fakefile">
<img src='red_frame.png' width='330' height='50'>
</div>
<div class="text_upload">
<a style='font-family:Arial;color:white;'><font size='6'>UPLOAD!!!!</font></a>
</div>
</div>
This isn't all of the code but this is the part that is piling on top of each other when I include it in index.php
When I just run toolbar.php everything is spaced out fine.
Is there a way to fix this?
Could there be some other sort of problem that is causing this?
Wait never mind i found this <!DOCTYPE html> at the top of my index.php and removed it to see if it would fix the problem and for some reason it did. I have no idea why that fixed it, but now everything works.
I suggest not to use 'include', please try in the following way-
<?php
.
.
.
?>
<link href="../bootstrap/css/bootstrap-timepicker.min.css" rel="stylesheet"
type="text/css"/>
<?php
.
.
.
?>
Just include your CSS file through PHP. Its legitimate !
<?php include ('yourheader.php'); ?>
<style>
<?php include ('main.css'); ?>
</style>
You can use #import also to load the css styles.
#import url('/css/styles.css');
#import url('/css/main.css');
#import url('/css/color.css');
/* All three CSS files above will be loaded from
this single document. */
Related
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
I am actually working on this Wordpress website and i am trying to fix the footer via code (because via theme options is not possible with this template).
This is the footer.php code
<!-- Footer -->
<footer>
<div class="container-fluid">
<div class="row padding-bottom48">
<div class="col-md-12 text-center padding-top48 text-footer">
<?php sierra_opt_footer_text(); ?>
<?php sierra_opt_footer_social_icons(); ?>
<div class="text-center padding-top72">
<a href="#" class="scroll-to relative">
<p class="sierra-arrow-up"></p>
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end footer -->
I tried in the easy way:
footer { position: fixed; )
Without nice results.
How can i make the footer sticky and fixed?
Thanks in advice.
Try this code
footer {
bottom: 0;
position: fixed;
width: 100%;
}
And add height as per your requirement
This should do the trick (adapted from CSS-Tricks). You should change page-wrap to your theme "page wrapper" class or add one if missing.
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
footer, .page-wrap:after {
height: 142px;
}
try this
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Your css should be this:
.container-fluid {
position: fixed;
bottom: 0px;
}
I'm not sure why you want to fix your footer, though, the footer is quite large and takes up a lot of screen space from the rest of the website; the footer isn't important enough to do this with. What's your intention in this case?
Remove footer's height and add following css to it:
footer{
position: fixed;
bottom: 0;
width: 100%;
}
i was puting some company logos in my landing web site which i wantes to use as buttons for the next pages to go in...but first everything was ok. i inserted them through .php and than positioned them in css, and than i tried to make some hover animation and it destroyed it all. than i deleted all the ":hover" codes and everything i added to do that, but now its not as it was. i cant move my pictures to the desired positions. below ill post my .php code and .css as well. please help!!!
<div class="maroonlogo">
<a href="http://maroon.maroon27.com" target="_blank">
<img src="http://maroon27.com/wp-content/themes/onesie/images/weblogo.png"/>
</a>
</div>
<div class="line">
<img src="http://maroon27.com/wp-content/themes/onesie/images/line.png"/>
</div>
<div class="27logo">
<a href="http://27.maroon27.com" target="_blank">
<img src="http://maroon27.com/wp-content/themes/onesie/images/logo.png"/>
</a>
</div>
CSS
maroonlogo {
display: inline;
float:right;
position:absolute;
top: 200px;
left: 350px;
}
.line {
display: inline;
float: right;
position: absolute;
top: 180px;
left: 600px;
}
.27logo {
display: inline;
float: right;
position: absolute;
top: 200px;
left: 500px;
}
CSS classes cannot start with an integer i.e.: 27logo
Also, there is no need to put a float if you are using position:absolute as it will be meaning less.
Suppose if you can't able to change the classname, still we have solution to apply the style for the class "27logo". You need to use special character "\3" for each number like below.
.\32\37logo
{
background-color:#ff00ff;
height:200px;
width:200px;
}
DEMO
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/
Alright I know this has been asked a million time and I have seen a million answers about the body and html tags needing to be a height of 100% for it to work but I cannot get this thing to work. Here it is the problem:
I need my body inside and sidebar content to extend down to meet the other wherever the other stops. I need this for dynamic pages for wordpress. So here is the header.
header.php
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
!!!!content cut to save space!!!!!
</head>
<body <?php body_class(); ?>>
<div id="site">
<div id="wrapper">
<!------break-from-header------>
<div id="wrapperbody">
<div id="bodyinside">
The index.php pages and post.php pages anything with content are calling the header above and footer below. Self explanatory right?
footer.php
</div><!--body-inside-->
<div id="sidebar">
<?php get_sidebar(); ?>
<div id="sidebarlight">
</div>
</div>
</div><!--wrapper-body-->
</div><!--main-wrapper-->
<div id="footer-wrapper">
<div id="footer">
<div id="footer-nav">
<?php wp_nav_menu(array('theme_location' => 'footer-menu')); ?>
</div><!--footer-nav-->
<div id="copyright">
<p>Powered by: WordPress Copyright 2013</p>
</div><!--copyright-->
</div><!--footer-->
</div><!--footer-wrapper-->
</div>
</body>
</html>
and Finally the css
/******************************Basic CSS**************************************/
html,
body {
background-image:url('http://patriotvoice.net/wp-content/uploads/2013/11/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: 12pt/12pt 'Source Sans Pro', sans-serif;
height:100%
line-height: 100%;
margin: 0px auto;
padding: 0px;
}
/*********************************Wrappers********************************/
#site {
float: left;
width: 100%;
height: 100%
}
#wrapper {
height: 100%;
}
/*****************Main Body******************/
#wrapperbody {
display: block;
background: #ffffff;
padding-top: 70px;
width: 1100px;
height: 100%;
margin: auto;
}
#bodyinside {
display: inline;
background: #fff;
width:740px;
height: 100%;
float:left
}
/**************Sidebar******************/
#sidebar-wrapper {
display: inline;
background: #2E2E2E;
float: left;
position: relative;
width: 340px;
height: 100%;
}
I took out a lot of code but that is the basic stuff. Like I said I need the sidebar and body inside to align with one another. You can see where the content extends past the sidebar and I need the grey to extend down to meet with the white here http://patriotvoice.net..... BUT I need the white to extend down to the grey on a page like this http://patriotvoice.net/news
I think u should use min-height:100%; for all wraps and contents, because u gave body and html tags height:100%;
// sorry, probably I didn´t read your problem well, I'm trying harder with my English but with no significant result
Well first off the site given is looking weird because of the position: fixed on the nav-main-wrapper. Your content is being pushed upwards because of that.
For better coding practices have a header.php, content.php(with the loop), sidebar.php, footer.php to call to the index.
Your height should work fine according it the content you put in it.
Post an example of how it looks with more content for me to better understand how the height:100% isn't working so I can further assist you.