Expanding sidebar CSS unexpected behavior in Safari? - php
I've been working on a web app project for school, and I've designed an expanding sidebar with HTML/CSS. The sidebar is supposed to have a z-index greater than everything else on the page. I use Chrome, so I didn't notice until recently that in Safari Version 14.0.3 (on MacOS Big Sur 11.2.3), my sidebar only behaves properly some of the time, sometimes appearing on top of the contents of the page as intended, and other times appearing on top of everything except a table on one of the pages (player-search.php). I was hoping I could get some advice as to how to fix this problem, as I've never seen an issue like this before. Many thanks in advance, and happy to provide additional info.
Here is a screenshot of the behavior on Chrome
&
here is a screenshot of the behavior on Safari.
It's also hosted on Heroku here if you want to interact with it.
Here is the file structure:
project/
│ player-search.php
│
│────css/
│ reset.css
│ styles.css
│ sidebar.css
│
└────includes/
footer.php
header.php
sidebar.php
Here is the relevant code:
header.php
<!DOCTYPE html>
<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.0">
<title>Fantasy Soccer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<?php function isCurrentPath($path) {...} ?>
<body>
<div style="display: grid; grid-template-rows: 10vh 90vh; width: 100vw; height: 100vh; color: white;">
<div class="top-bar">
<a style="height: 100%; text-decoration: none; padding: 0 25px; color: white;" href="/">
<div style="display: flex; align-items: center; height: 100%; font-size: 32px;">Upper90</div>
</a>
<div style="font-size: 45px; padding: 0 25px;"><a style="text-decoration: none; color: white; height: 100%; display: flex; align-items: center;" href="/"><i class="far fa-user-circle"></i></a></div>
</div>
<div style="height: 100%; width: 100%; position: relative;">
<?php include_once "includes/sidebar.php" ?>
<div style="width: 100%; height: 100%; background: var(--light-blue); position: absolute; z-index: 5;">
sidebar.php
<?php
$host = $_SERVER['HTTP_HOST'];
$sidebar_items = array(
"Home" => array("classes" => "fas fa-home", "path" => "/"),
"How to Play" => array("classes" => "fas fa-info-circle", "path" => "/how-to-play"),
"Player Search" => array("classes" => "fas fa-search", "path" => "/player-search"),
"My Roster" => array("classes" => "fas fa-user-friends", "path" => "/my-roster"),
"Submit Feedback" => array("classes" => "fas fa-comment", "path" => "/submit-feedback")
);
function getIconClassFromValue($v) {...}
function transformPath($path) {...}
function getHoverClassFromURI($uri) {...}
?>
<link rel="stylesheet" href="css/sidebar.css">
<div style="position: absolute; height: 100%; z-index: 10;">
<div class="sidebar-wrapper">
<div class="sidebar-contents">
<?php foreach ($sidebar_items as $key => $value) : ?>
<a <?php getHoverClassFromURI($value['path']) ?> href=<?php echo transformPath($value['path']); ?>>
<div>
<div class="sidebar-icon">
<div><i <?php getIconClassFromValue($value['classes']) ?>></i></div>
</div>
<div class="sidebar-text">
<div><?php echo $key ?></div>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
player-search.php
<?php include_once "includes/header.php" ?>
<?php
$rows = array("One" => "One",
"Two" => "Two",
"Three" => "Three",
"Four" => "Four",
"Five" => "Five",
"Six" => "Six");
?>
<div class="inner-page-contents">
<div class="player-search">
<div class="player-search-top-section">
<div class="ps-input">
<input type="text" name="player-search" id="player-search" placeholder="Search Player Info..." autofocus>
<i class="fas fa-search"></i>
</div>
<div class="ps-dropdown">
<label for="actions">Actions: </label>
<select name="actions" id="actions-input">
<option selected disabled value="">----- Select Option -----</option>
<option value="Add">Add Player(s) To Team</option>
<option value="Remove">Remove Player(s) From Team</option>
</select>
</div>
<div class="ps-dropdown">
<label for="sort">Sort By: </label>
<select name="sort" id="sort-input">
<option selected disabled value="">----- Select Option -----</option>
<option value="Name_A_Z">Name (A-Z)</option>
<option value="Name_Z_A">Name (Z-A)</option>
<option value="Goals">Goals</option>
<option value="Assists">Assists</option>
<option value="MVPs">MVPs</option>
</select>
</div>
</div>
<div class="player-search-bottom-section">
<div class="table-wrapper">
<table>
<thead>
<tr class="table-header">
<th>Select</th>
<th>Player Name</th>
<th>Goals</th>
<th>Assists</th>
<th>MVPs</th>
</tr>
</thead>
<tbody>
<?php foreach ($rows as $key => $value) : ?>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include_once "includes/footer.php" ?>
footer.php
</div>
</div>
</div>
</body>
</html>
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
styles.css
:root {
--dark-blue: #042d4a;
--blue: #59819e;
--light-blue: #a1d3f7;
font-family: "Open Sans", sans-serif;
}
* {
box-sizing: border-box;
}
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#500&display=swap");
.top-bar {
width: 100%;
height: 100%;
background: var(--dark-blue);
display: flex;
justify-content: space-between;
}
.inner-page-contents {
height: 100%;
width: 100%;
padding-left: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.player-search {
display: grid;
grid-template-rows: 10% 90%;
height: 100%;
width: 100%;
color: #393e43;
}
.player-search-top-section {
padding: 0 2.5%;
display: flex;
align-items: flex-end;
}
.player-search-top-section input {
height: 30px;
font-family: "Open Sans", sans-serif;
font-size: 1.25em;
}
.player-search-top-section select {
height: 30px;
text-align: center;
}
.ps-input {
width: 40%;
position: relative;
}
.ps-input > i {
position: absolute;
left: 12px;
top: 7px;
}
.ps-dropdown label {
margin: 0 5px 0 10px;
font-size: 1.25em;
font-weight: 600;
}
#player-search {
border-radius: 999px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
font-size: 1em;
padding-left: 40px;
}
#player-search:focus {
outline: none;
box-shadow: 0 0 10px purple;
}
.player-search-bottom-section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.table-wrapper {
height: 90%;
width: 95%;
overflow-y: scroll;
overflow-x: hidden;
}
table {
table-layout: fixed;
height: 100%;
width: 100%;
position: relative;
}
tr:not(.table-header) {
width: 100%;
height: 100px;
}
.table-wrapper td {
border: 2px solid #666666;
}
.table-wrapper tr {
background: #cccccc;
}
.table-wrapper tr:nth-child(even) {
background: #eeeeee;
}
.table-header > th {
color: white;
font-weight: 600;
padding: 20px 0;
background: var(--dark-blue);
top: 0;
position: sticky;
}
sidebar.css
.sidebar-wrapper {
width: 100%;
height: 100%;
background: var(--dark-blue);
position: relative;
}
.sidebar-contents {
width: 100%;
height: 100%;
background: inherit;
transition: width 0.4s;
}
.sidebar-wrapper:hover .sidebar-contents {
width: 300px;
transition: width 0.4s;
}
.sidebar-item {
width: 100%;
display: block;
text-decoration: none;
color: white;
font-size: 40px;
}
.sidebar-item.active {
background: var(--blue);
}
.sidebar-item:hover {
background: var(--blue);
}
.sidebar-item > div {
padding: 10px;
display: flex;
}
.sidebar-icon {
width: 50px;
}
.sidebar-icon > div {
display: flex;
align-items: center;
}
.sidebar-text {
font-size: 0px;
margin-left: 0;
transition: font-size 0.4s, margin-left 0.4s;
}
.sidebar-text > div {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
}
.sidebar-wrapper:hover .sidebar-text {
font-size: 24px;
margin-left: 15px;
transition: font-size 0.4s, margin-left 0.4s;
transition-delay: 0.4s;
}
Related
How to make tab layout in HTML
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
My stylesheet works only when in mobile view, it worked fine yesterday but today all styles are gone if viewed on desktop
So I wrote a small website and everything was working great, all styles were working but today it only displays the style sheet in mobile view in the normal desktop view it disregards all the styles in my css/style.css
The navbar and header imag keeps their style regardless of the size of the browser just the rest of the styles are gone when in desktop view
My header and footer is included in all pages with php includes the files is in includes/header.php and includes/footer.php
Here is the link to the project as well to look at maxi.maxihome.co.za
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap--!>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Style sheet -->
<link rel="stylesheet" href="css/style.css">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Acme|Neuton&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap"
rel="stylesheet">
<!-- js script header -->
<script type="text/javascript"src="js/app.js">
</script>
<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">
<!-- custom menu -->
<div class="nav">
<div class="logo">
<img class="imagelogo"src="images/name.png" alt="">
</div>
<div class="togg">
<div></div>
<div></div>
<div></div>
</div>
<ul class="firstlevel">
<li></li>
<li></li>
<li>Home</li>
<li>Services</li>
<li class="has-sub"><a>Renovations</a>
<ul class="sub">
<li>Kitchen</li>
<li>Bathroom</li>
<li>Living Area</li>
<li>Total Renovation</li>
</ul></li>
<li>Contact Us</li>
<li><i class="fa fa-facebook-square"></i></li>
</ul>
</div>
<img class="headerImage" src="images/headerImg.png"
alt="HeaderImage">
</section>
</body>
/*index page*/
<?php
include "includes/header.php" ?>
<section class="feature">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carouselExampleInterval" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img class="imgCar"src="images/h1.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar"src="images/h2.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar" src="images/h3.jpg" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php
include "includes/footer.php" ?>
.headerImage{
width: 100%;
heigth: 300px;
padding-top:75px;
color:#bf2132;
}
.fimage{
width: 100%;
heigth: 300px;
padding-top:75px;
}
.navbar-default{
background-color:#bf2132;
border-color: #bf2132;
}
/* navigation */
.nav
{
width:100%;
background-color:#ccc;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
.nav .logo
{
display:flex;
width:200px;
height: 50px;
flex-wrap:wrap;
justify-content: center;
align-items: center;
text-transform:uppercase;
cursor:pointer;
}
.imagelogo{
width:100px;
heigth:50px;
}
.togg
{
position:absolute;
right:40px;
top:20px;
display:none;
z-index: 5;
}
.togg div {
width: 36px;
height: 2px;
background-color: red;
margin: 6px 0px;
position: relative;
transition:all .8s ease;
}
.togg.lijo div
{
position:absolute;
transition:all .8s ease;
}
.togg.lijo div:nth-child(1){
transform: rotate(48deg);
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(2)
{
width:0px;
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(3)
{
transform: rotate(-48deg);
top: 7px;
right: 0px;
}
.nav ul.firstlevel
{
list-style:none;
width:calc(100% - 200px);
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
margin-bottom:0px;
padding-left:0px;
}
.nav ul.firstlevel li
{
display:inline-block;
margin-bottom:0px;
color:#000;
}
.nav ul.firstlevel li a
{
cursor:pointer;
display:block;
padding:15px;
transition:.8s ease;
text-decoration:none;
text-transform:uppercase;
color:#fff;
}
.nav ul.firstlevel li a:hover
{
text-decoration:none;
}
.nav ul.firstlevel li ul.sub li {
display: block;
background-color:rgba(191,33,50,1);
}
.nav ul.firstlevel li ul.sub li:hover {
display: block;
background-color:rgba(172, 78, 2, 0.79);
}
.nav ul.firstlevel li ul.sub li a{
color:#fff;
}
.nav ul.firstlevel li ul.sub
{
width:200px;
position:absolute;
padding-left:0px;
opacity:0;
visibility: hidden;
transform:translateY(30px);
transition:.5s linear;
padding-top:20px;
}
.nav ul.firstlevel li ul.sub:after {
content: '';
width: 41px;
height: 20px;
border-bottom: solid 18px rgba(191,33,50,1);
border-left: solid 20px transparent;
border-right: solid 21px transparent;
top: 0px;
display: block;
position: absolute;
left: 16px;
}
#media(min-width:1024px)
{
.nav ul.firstlevel li:hover ul.sub
{
visibility:visible;
opacity:1;
transform:translateY(0px);
}
.nav ul.firstlevel li:hover
{
display:inline-block;
margin-bottom:0px;
background-color: rgba(27, 27, 27, 0.32);;
color:#fff !important;
}
.nav ul.firstlevel li:hover a
{
color:#fff !important;
}
}
#media(max-width:1024px)
{
.nav
{
min-height:50px;
}
.togg
{
display:block;
top:10px;
}
.nav ul.firstlevel
{
position: absolute;
top: 50px;
transform: translateX(100%);
right: 0;
transition:.8s ease;
width:40%;
height: calc(100vh - 50px);
z-index: fixed;
}
.nav ul.firstlevel li {
display: block;
}
.nav ul.firstlevel.surya {
transform: translateX(0%);
}
.nav ul.firstlevel li ul.sub
{
opacity: 1;
visibility: visible;
display:none;
position:relative;
padding-top:0px;
width:100%;
transition:0s;
transform: translateY(0px);
}
.nav ul.firstlevel li ul.sub:after
{
display:none;
}
/* Feature */
.feature{
padding-left: 100px;
padding-right: 100px;
padding-top: 70px;
padding-bottom: 70px;
background-image: url("../images/paper.jpg");
text-align:center;
}
.houseimg{
width: 400px;
height: 350px;
border:5px solid rgb(191,33,50);
background-color:#ff0;
}
.about{
padding-right: 100px;
padding-left: 100px;
padding-bottom: 70px;
text-align:center;
background-image: url("../images/paper.jpg");
}
/* spinning text */
#blink{
width:100%;
height: 50px;
padding: 15px;
text-align: center;
line-height: 50px;
}
.htext{
font-family: "Alfa Slab One";
color: rgb(191,33,50);
animation: blink 1.5s linear infinite;
padding-bottom: 100px;
}
#keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
/* paragraph background */
.backpar{
border-radius: 25px;
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
padding: 20px;
width: 100%;
height: 100%;
color: white;
font-family: "Concert One";
}
.footer{
background-image: url("../images/footer.png");
}
/* Contact */
.contact{
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
background-image:url("../images/paper.jpg");
}
.jumbotron {
background: rgb(191,33,50);
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
/* carousel homepage*/
.carousel-item{
width: 100% !important;
Height: 350px !important;}
.imgCar{
width: 100% !important;
Height: 350px !important;
border: 2px solid red;
border-radius: 5px;
}
I have noticed I left out a curly bracket everything is working again Embarrassed Thank you
I have index.php inside this file there is html when i try to style it with css there is no affect
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but i used other program and now it's working after checking network tab i saw that css file appear after some time and when it appear it has an old version of it im not sure why but i used PhpStorm and then i make localhost using PhpStorm and now it's working thank you for people tried to help me :)
Responsive Wordpress menu not working - Hamburger not clickable
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?
PHP includes overlap eacher other
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.