I have this code for my header.php
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
and this one in my style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
#media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
my problem is.
my .mobilogo code in my CSS will not center the image.
I need this image to appear in the center of the page and not be aligned to the left.
please can someone help tell me what is holding it back?
.mobile class could have text-align:center; if you don't want to use the text-align try the below:
Also you can give .mobilogo width and have margin:0 auto; to center it.
.mobilogo{
margin:0 auto;
width:50%;
height: 50%;
}
In order for the width and height to work with percentages you need to give the parent elements width and height.
Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.
Like this:
.mobilogo {
margin: 0 auto;
display: block;
}
Related
The CSS code for the navbar appears at the top of the page. How can I hide it? I use internal CSS.
Here's how it looks in the browser:
This is the code:
<!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">
<link href="layout/css/bootstrap.min.css" rel="stylesheet">
<link href="layout/css/fontawesome.min.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
display: inline;
font-family: sans-serif;
overflow: hidden;
user-select: none;
}
nav .logo{
color: white;
font-size: 33px;
font-weight: bold;
line-height: 50px;
padding-left: 50px;
}
nav{
height: 70px;
background: #063247;
box-shadow: 0 3px 15px rgba(0,0,0,.4);
}
nav ul{
float: right;
margin-right: 10px;
}
nav ul li{
display: inline-block;
}
nav ul li a{
color: white;
display: block;
padding: 0 15px;
line-height: 70px;
font-size: 20px;
background: #063247;
transition: .5s;
}
nav ul li a:hover,
nav ul li a.active{
color: #23dbdb;
}
nav ul ul{
position: absolute;
top: 85px;
border-top: 3px solid #23dbdb;
opacity: 0;
visibility: hidden;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
transition: .3s linear;
}
nav ul ul li{
width: 150px;
display: list-item;
position: relative;
border: 1px solid #042331;
border-top: none;
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul{
border-top: none;
}
nav ul ul ul li{
position: relative;
top: -70px;
left: 150px;
}
nav ul ul li a i{
margin-left: 45px;
}
section{
background: url(bg.jpeg);
background-position: center;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<nav>
<label class="logo">Clothes Store</label>
<ul>
<li><a class="active" href="home.php">الصفحة الرئيسية</a></li>
<li>
<a href="viewProducts.php">الفئات
<i class="fas fa-caret-down"></i>
</a>
</li>
<li>إضافة منتجات
</li>
<li>السلة</li>
<li>التواصل</li>
<li>Feedback</li>
<li>تسجيل الخروج</li>
</ul>
</nav>
</body>
</html>
On all pages, this code appears at the top of the page.
What is the wrong in the code?
At first it doesn't appear, but then suddenly comes:
.....................................................
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
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>
#charset "UTF-8";
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
h1 {
color: #00ff00;
}
p {
background-color: transparent;
color: #ffffff;
}
div
{
color: #00cc00;
}
div #controls
{
color: red;
}
div a
{
color: #00cc00;
}
div a:active {
color: #00cc00;
}
div a:hover {
color: #F58100;
}
<!--/MAIN PANEL/-->
#parent {
width:400px;
}
#controls, #monitor {
float:left;
margin-top:0px;
padding-below:200px;
height:400px;
width:50%;
border:1px;
display:inline-block;
solid rgba(0,0,0,1);
text-align:center;
}
<!--/CONTENT AND CONTROLS/-->
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
h1text {
color: #fb667a;
font-size: 16px;
font-weight: bold;
float:left;
width:159px;
white-space:pre-wrap;
background: transparent;
}
.year {
float:left;
background: transparent;
}
img {
margin-bottom: 5px;
background:#fff;
cursor:pointer;
transform: scale(1);
-moz-box-shadow: 0px 1px 5px 0px #00cc00;
-webkit-box-shadow: 0px 1px 5px 0px #00cc00;
box-shadow: 0px 1px 5px 0px #00cc00;
}
img:hover {
opacity: 0.5;
cursor:pointer;
transform: scale(1);
visibility:visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index:100;
transition-timing-function:cubic-bezier(0.5, 0, 0.1, 1);
transition-duration:400ms;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height: 400px;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
margin
bottom:0;
right:0;
text-align:center;
width:100%;
background: #00cc00;
opacity: .8;
z-index:2;
}
#detail div span2 {
color:#ffffff;
position:absolute;
top:200px;
right:10px;
text-align:center;
width:50%;
height:200px;
background: #F58100;
opacity: .8;
z-index:10;
}
#links img {
width:10%;
height:30%;
margin-left:16px;
margin-top:100px;
}
<!--/SLIDER/-->
.track {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
border: 0;
width: 2000px;
}
.book {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
border: 0;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
.book:hover {
opacity: 0.5;
}
.book:nth-child(1) {
background-color: #ff0000;
}
.book:nth-child(2) {
background-color: #ffaa00;
}
.book:nth-child(3) {
background-color: #ffff00;
}
.book:nth-child(4) {
background-color: #00ff00;
}
.book:nth-child(5) {
background-color: #0000ff;
}
.book:nth-child(6) {
background-color: #aa00ff;
}
.book:nth-child(7) {
background-color: #ff00ff;
}
.left, .right {
position: absolute;
color: white;
font-size: 48px;
top: 57px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'pixbeans';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<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>pixBeans - Original Black TV Series</title>
<meta name="author" content="Antonio James">
<link rel="shortcut icon" href="assets/Icons/pixBeans icon.png">
<link href="tabpan.css" rel="stylesheet" type="text/css">
</head>
<style>*{margin: 0px; padding: 0px; background-color:black;}</style>
<body>
<div id="main-wrapper">
<div id="moviesbox" style="display:inline-block;">
<?php while ($movie = $result->fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
</div>
<?php endwhile; ?>
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="javascript/tabpan.js"></script>
<script src="javascript/imgjump.js"></script>
<script src="javascript/imgslider.js"></script>
</body>
</html>
I am trying to make all my images display on one horizontal line/row that can be scrolled left or right. However, no matter what I do I cannot seem to make the images quit wrapping to the next line. They are responsive so if i make the screen small 2 images will appear and the rest wraps to a new line. If i make full screen several images appear and the other 15 wrap accordingly. However, I want them to stay on one line. I dont care if the overflow is hidden or if the overflow scrolls in from off the page, I just want them to quit wrapping.
Here is what the site looks like right now:
screen shot. I made the parent div"moviesbox" dark grey so that you can see how far the div extends and I am using light grey to show the div area.
Here is the code that I am using to generate the images into the divs:
<div id="moviesbox" style="display:inline-block;">
fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
Here is the CSS I am using. I PREFER TO USE CSS but if not, i'm open to other fixes.
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
THanks.
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?