Here is a strange one. At least for me anyway. I have an HTML page that is being generated by PHP with a style sheet (css.php) linked in. My original plan was to be able to save the attributes for this file in a MySQL database and then load values into the file using PHP variables at each page load. I was talked out of this because it would use to many server resources to parse this file on each page load. I decided to rewrite this file each time changes were made to the database. Now that I have written a file with preferences.php and changed its name to css.css it no longer sees the correct file. It only sees a one line file that I wrote while initially setting up my code. Now that I have a full file it still uses the one-liner that no longer exists. If I change back to my .php file that is in the same folder (the only difference between the two is the file extension) everything works correctly? Where have I gone wrong? I'm sure it's something simple that I can't see.
here is index.html that is loading the css file
<!doctype html>
<html lang= "en">
<head>
<title>Rogers Enterprises</title>
<link rel= "icon" type= "image/png" href= "images/bc2.JPG">
<meta charset="utf-8">
<link rel="stylesheet" href= "css/css.css" >
<script src="js/js.js"></script>
</head>
and here is my css.css
body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}
This is preferences.php that generates the CSS
$file = fopen("../css/css.css", "w");
$txt = 'body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}';
fwrite($file, $txt);
fclose($file);
My directory structure looks like this
rogersproperties
|___index.html
|___css
| |___css.php
| |___css.css
|___php
|___preferences.php
Related
This is the HTML in PHP, I tried to change the classes and one time to add li and ul but that is making the code not to work. I added the Java Script in the html for now because I wanted it to work. It works but after I change something to the topnav class it is not working anymore:
<div class="container">
<h3></h3>
<div class="topnav" id="myTopnav">
<?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?>• Home
<?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?>About
<?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?>Gallery
<?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?>Contact •
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
And this is the CSS for the responsive navbar. The media queries I believe is the problem but I'm not sure:
.topnav {
overflow: hidden;
background-color: #ce8c4e;
border-bottom: #63451e 1px solid;
}
.topnav a {
float: left;
color: black;
padding: 10px 12px;
text-decoration: none;
font-size: 14px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
I tried to change the float and add some classes to the acronyms but did not work like I wanted.
How about this-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.topnav {
overflow: hidden;
background-color: #ce8c4e;
border-bottom: #63451e 1px solid;
}
.topnav a {
float: left;
color: black;
padding: 10px 12px;
text-decoration: none;
font-size: 14px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
.topnav-container {
width: fit-content;
margin: 0 auto;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav-container {
width: auto;
}
}
</style>
</head>
<body>
<div class="container">
<h3></h3>
<div class="topnav" id="myTopnav">
<div class="topnav-container">
<?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?>• Home
<?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?>About
<?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?>Gallery
<?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?>Contact •
☰
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</body>
</html>
so I'm making a website in wordpress, and I keep struggling with the main menu. The menu does some things stated in the media queries, but leaves out other things. The hamburger menu button is shown, but I can't click it. I don't know how I can fix it.
This is the code from header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and
everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-
files/#template-partials
*
* #package epw_theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('style.css'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="hero">
<div class="fullwidthbar">
<h1 id="headertext"><a id="headertext" href="<?php echo esc_url( home_url(
'/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation hdftbg" role="navigation">
<div class="ham">
<?php wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_id' => 'myTopnav',
'menu_class' => 'topnav'
)); ?>
<div class="test">
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">☰</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}</script>
</nav>
</div>
<div id="content" class="site-content">
</div>
And the css that goes with it:
/* Add a background color to the top navigation */
.topnav {
background-color: #1d1f20;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #f77;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
color: #000000 !important;
}
.icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links. Show the
link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav {
width: 100%;
}
}
.test {
display: none;
}
/* The "responsive" class is added to the topnav with JavaScript when the
user
clicks on the icon. This class makes the topnav look good on small screens
(display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
z-index: 9999;
display: block;
}
.test {
display: block;
}
.topnav.responsive a.icon {
position: absolute;
right: 0 !important;
top: 0 !important;
}
.icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 99999;
}
.menu-item {
width: 100% !important;
}
.superflex {
position: absolute !important;;
}
}
p.navigatie {
display: none;
}
ul {
float: right;
}
.ham {
background-color: #1D1F20;
width: 100%;
height: 3em;
}
#header{
margin-top: -55px;
width: 100%;
height: 100%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-2.jpg);
background-size: cover;
z-index: -100;
}
#header h3{
position: absolute;
margin-top: 300px;
}
#header h4{
position: absolute;
margin-top: 400px;
}
#arrowdown{
width: 150px;
position: absolute;
margin-top: 600px;
left: 50%;
transform: translate(-50%, -50%);
}
#headersec{
margin-top: -55px;
width: 100%;
height: 75%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-small.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#tagline{
font-style: italic;
font-size: 50px;
text-align: center;
color: white;
}
#lowerline{
font-style: italic;
font-size: 45px;
text-align: center;
color: #ccc;
}
html {
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.hero {
margin: 0 auto;
padding-top: 0px;
width: 100%;
}
.hero h1 {
margin-top: 0;
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hero {
color: #fff;
font-family: 'Raleway', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hdftbg{
width: 50%;
padding-left: 10px;
background-color: #1D1F20;
float: right;
z-index: 100;
margin-top: 0;
}
.fullwidthbar{
width: 100%;
background-color: #1D1F20;
height: 35px;
margin-bottom: -1px;
}
#headertext {
padding-top: 5px;
font-size: 18px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#headerfield {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.menu-items{
margin-top: -20px;
}
The .hdftbg, .fullwidthbar and .hero are all used for the clip path, which is why I can't remove them. Any idea how to fix this?
I'm using wordpress and the theme is Newspaper. I want to center the copyrights text but I don't know how. I have checked the theme panel settings and there's no options to edit that.
Theme panel pic:
I have gone through some answers in the web and they suggested adding codes in the editor but I'm not sure if it's the footer.php or style.css. If the latter, I managed to find the part regarding sub-footer:
Sub Footer
*/
.td-sub-footer-container {
background-color: #0d0d0d;
color: #ccc;
font-size: 12px;
font-family: 'Open Sans', arial, sans-serif;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container {
text-align: center;
padding: 6px 0;
}
}
.td-sub-footer-copy {
line-height: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Sub Footer Menu */
.td-sub-footer-container .td-sub-footer-menu {
float: right;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container .td-sub-footer-menu {
float: none;
}
}
.td-subfooter-menu {
display: inline-block;
margin: 0;
float: right;
/* responsive landscape tablet */
/* responsive landscape tablet */
/* responsive portrait tablet */
/* responsive portrait phone */
}
#media (min-width: 1019px) and (max-width: 1140px) {
.td-subfooter-menu {
padding-right: 40px;
}
}
#media (min-width: 768px) and (max-width: 1018px) {
.td-subfooter-menu {
padding-right: 48px;
}
}
#media (max-width: 767px) {
.td-subfooter-menu {
float: none;
}
}
.td-subfooter-menu li {
display: inline-block;
margin-left: 0;
}
.td-subfooter-menu li a {
margin-right: 16px;
line-height: 34px;
display: inline-block;
color: #ccc;
}
.td-subfooter-menu li a:hover {
color: #4db2ec;
}
.td-subfooter-menu li:last-child a {
margin-right: 0;
}
.td-subfooter-menu ul {
display: none;
}
Thank you for such depth! Here's some CSS you need to add:
.td-pb-span5.td-sub-footer-copy {
float: none;
text-align: center;
margin:0 auto;
}
The reason why you need this is because your subfooter is following some rules that are already established for the rest of your page:
.td-pb-row [class*="td-pb-span"] {
display: block;
min-height: 1px;
float: left;
padding-right: 24px;
padding-left: 24px;
position: relative;
}
Simply removing the immediately above CSS will 'break' the rest of your page's layout.
Edit, to answer comment question:
Apologies, here's a bit more information:
When CSS is being applied to an element that is already being styled by a different selector's rules, there's a calculation of specificity. The CSS I've given you will be fine on its own if added, however, if you'd like to add it to the selector you already have, .sub-footer-copy, then you'd have to add !important to override your already written CSS, like so:
td.sub-footer-copy{
float: none !important;
text-align: center;
margin: 0 auto;
}
This is because the selector .td-pb-row [class*="td-pb-span"] is more specific than the selector .sub-footer-copy. Here's some further reading on this:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, I'd like to note that the selector .td-pb-row [class*="td-pb-span"] is an attribute selector referring to a CSS class, so it is similar to .td-pb-row .td-pb-span
On MyPage are many pictures. In the normal case are 6 pictures in one row. If you change the size of the browser the number of pictures in each row will change. I solved this problem with media queries. In each row the last picture shouldnt get a margin-right: 5px;. But the nth-child wont change its every time the same, thats why the margin isnt correct. What did i wrong?
Here is my php output for the images:
<?php
$sql = "SELECT * FROM bilder";
$result=mysqli_query($db,$sql);
while($row=mysqli_fetch_assoc($result)){
echo "<img class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
}
?>
Here is the css:
section{
margin: 0px auto;
width: 925px;
margin-top: 55px;
}
.image{
object-position: center; /* Center the image within the element */
height: 150px;
width: 150px;
object-fit: cover;
margin-right: 5px;
}
.image-margin{
margin-right: 5px;
}
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}
#media only screen and (max-width : 770px) {
/* Four images in each row */
section{
margin: 0px auto;
width: 615px;
margin-top: 55px;
}
section img:nth-child(4n+4){
margin-right:0;
}
}
#media only screen and (max-width : 615px) {
section{
margin: 0px auto;
width: 460px;
margin-top: 55px;
}
section img:nth-child(3n+3){
margin-right:0;
}
}
#media only screen and (max-width : 460px) {
section{
margin: 0px auto;
width: 305px;
margin-top: 55px;
}
section img:nth-child(2n+2){
margin-right:0;
}
}
I solved my problem. I had to reset the old nth-child code
like this:
section img:nth-child(6n+6){
margin-right:0;
}
#media only screen and (max-width : 924px) {
/* Five images in each row */
section{
margin: 0px auto;
width: 770px;
margin-top: 55px;
}
section img:nth-child(6n+6){
margin-right:5px;
}
section img:nth-child(5n+5){
margin-right:0;
}
}
Today I tried use SCCS Compiler (http://leafo.net/scssphp/) and i fell in love with this tool, but I need one more feature.
I generated compressed CSS file like that:
html,body{height:100%;}html,body{height:100%;}html,body{height:100%;}#media all and (max-width:960px){body{height:80%;width:95%;}}#media all and (max-width:480px){body{height:100%;width:90%;}}nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}html,body{height:100%;}html,body{height:100%;}#media all and (max-width:960px){body{height:80%;width:95%;}}#media all and (max-width:480px){body{height:100%;width:90%;}}html,body{height:100%;}
Uncompressed file:
html, body {
height: 100%;
}
html, body {
height: 100%;
}
html, body {
height: 100%;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
body {
height: 100%;
width: 90%;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
html, body {
height: 100%;
}
html, body {
height: 100%;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
html, body {
height: 100%;
}
body {
height: 100%;
width: 90%;
}
}
html, body {
height: 100%;
}
I have this code in string variable in PHP and I need remove duplicates. It's sounds easy, array_unique and that's it. Of course. But i need unique code for normal css and for every media separately. So i need output:
html, body {
height: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
html, body {
height: 100%;
}
body {
height: 100%;
width: 90%;
}
}
So this script don't remove html,body { height: 100% } from #media all and (max-width: 480px) because in this media is unique.
Could you help me?
If you can put every media queries at the end of the file I would be happy.
you should use a css optimization like: https://github.com/GoalSmashers/clean-css
and I advise you to use Grunt in combination with scss and cleancss plugins for it instead of using PHP to parse your scss -> css, once you're used to it it's far easier to handle.