I am trying to make my new web using material design technology via polymer and i made fixed header, which contains button, H1, picture and text. When you resize page or zoom, everything screws and all stuff on that header just moves. I have a "hidden" sidebar also, which transit from left side when you click on the button. When i zoom it comes on web on its own. Help please:X
HTML&PHP code:
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>RostaCZE</title>
<link rel="stylesheet" type="text/css" href="css.php">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<script src="jquery-2.1.3.js">
</script>
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<script>
$(document).ready(function(){
var width=$('.sidebar').width();
$('.sidebar').css('left',-width);
var rig=$('.sidebar').position().left;
$(".button").click(function() {
var rig=$('.sidebar').position().left;
if(rig == 0 )
{
$('.sidebar').animate({left:-width}, 400);
}
else
{
$('.sidebar').animate({left:'0px'}, 400);
}
});
});
</script>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
<?php
$_SESSION['dark_blue'] = '#1E88E5';
$_SESSION['light_blue'] = '#E3F2FD';
$_SESSION['grey'] = '#BDBDBD';
?>
</head>
<body>
<header>
<paper-ripple id="header_ripple"></paper-ripple>
<div class="button raised">
<div class="center" fit>MENU</div>
<paper-ripple fit></paper-ripple>
</div>
<div class="time">
<?php
$today = date("Y-m-d H:i:s");
echo "$today";
?>
</div>
<div class="name">
<img src="face.png" alt="me"/>
<h1>Rostislav Danko</h1>
</div>
</header>
<div class="sidebar">
</div>
<div id="main">
</div>
<footer>
</footer>
</body>
</html>
<style>
</style>
CSS code ( some css colors are not filled, i have it made via PHP variables )
<?php
session_start();
?>
<?php header("Content-type: text/css; charset: UTF-8"); ?>
html, body {
position: relative;
margin: 0px;
height: 100%;
}
header {
position: fixed;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;
height: 10%;
width: 100%;
-webkit-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
box-shadow: 0px 3px 30px 0px rgba(50, 50, 50, 0.7);
z-index: 20;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 10;
}
.name {
position: relative;
margin-left: 4%;
margin-top: -5%;
}
.name img {
position: relative;
height: 150%;
width: 7%;
margin-top: -3.8%;
margin-left: 30%;
}
.time {
position: relative;
margin-left: 90%;
margin-top: 1.5%;
font-color: <?php echo $_SESSION["light_blue"]; ?>;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
font-size: 20px;
}
h1 {
position: relative;
margin-top: -5%;
text-align: center;
color: <?php echo $_SESSION["light_blue"]; ?>;
z-index: 20;
}
#main {
float: left;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
width: 100%;
height: 110%;
z-index: 10;
}
.sidebar {
position: fixed;
height: 100%;
width: 20%;
margin-top: 7.1%;
background-color: <?php echo $_SESSION["dark_blue"]; ?>;;
z-index: 30;
border-top: solid 1px <?php echo $_SESSION["light_blue"]; ?>;
}
#header_ripple {
position: absolute;
color: #E3F2FD;
width: 100%;
height: 100%;
z-index: 10;
}
.button {
display: inline-block;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
z-index: 100;
position: absolute;
margin-left: 5%;
margin-top: 2%;
text-align: center;
cursor: pointer;
background-color: <?php echo $_SESSION["light_blue"]; ?>;
font-color: <?php echo $_SESSION["grey"]; ?>;
}
.button > paper-ripple {
color: <?php echo $_SESSION["dark_blue"]; ?>;
border-radius: 2px;
overflow: hidden;
}
.button.narrow {
width: 60px;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.raised:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
Related
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 :)
#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.
I have made this gallery listview page here and I want it so that all 3 columns are equally filled with items from my database, right now it creates a new column every time and displays the same sql item thrice.
Img here: http://i.stack.imgur.com/LMw1L.png
As you can see it just creates a whole bunch of columns which is not what I want.
How do I alter my php so that it neatly distributes the database items in my 3 columns (.column, .column-2, .column-3)?
home.php
<?php
ob_start();
require_once("connect.php");
if(isset($_POST['name'])){
$_SESSION["user"] = $_POST["name"];
$name = $_SESSION["user"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dotbar.css">
<link rel="stylesheet" href="css/loginoverlay.css">
<!--jQuery library voor de menubar -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<!-- Show login screen, when cookie is not placed -->
<?php
if (empty($_COOKIE['first_time'])) {
?><div id="black-overlay">
<div id="grey-box">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
<form action="home.php" method="POST">
<br>
<br>
<label for="name"> Naam: </label>
<br>
<input type="text" name="name" id="name">
<label for="password"> Wachtwoord: </label>
<br>
<input type="password" name="password" id="password">
<input type="submit" value="submit" name="submit">
</form>
</div>
</div><?php;
setcookie("first_time", 1, time()+157680000); /* expire in 5 years */}
?>
<!--page content -->
<div class="container">
<div class="container2">
<nav id='nav_bar'>
<ul class='nav_links'>
<li>
<?php
//If there is a user SESSION echo in NAV bar
if(isset($_SESSION['user'])) {
//echo admin link when admin is logged in
if ($_SESSION['user'] == 'admin') {
echo "<a href='admin.php'>Admin</a>";
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}
//echo user which is not the admin when logged in
else {echo $_SESSION["user"];
echo "/<br>";
echo "<a href='sessiondestroy.php'>Log uit</a>";}}
//echo the login button when user is not logged in
else { echo "<a href='login.php'>Login</a>";}
?>
<br><br><br>→<br><br><br>
</li>
<li>
<a href="?pages=home">
Home<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news">
Blog<br><br><br>→<br><br><br>
</a>
</li>
<li>
<a href="?pages=news2">
Gallery <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news3">
About <br><br><br>→ <br><br><br>
</a>
</li>
<li>
<a href="?pages=news4">
Contact<br><br><br>→<br><br><br>
</a>
</li>
</ul>
</nav>
<div class="content">
<h1>
GRAKA!
</h1>
<div id="bar2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>
<div id="circle7"></div>
<div id="circle8"></div>
<div id="circle9"></div>
<div id="circle10"></div>
<div id="circle11"></div>
</div>
<?php
if(isset($_GET['pages'])) {
$pages = $_GET['pages'];
$pagename = $pages. '.php';
include_once($pagename);
}?>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h2>
Designed and produced by
</h2>
<h3>
All rights reserved.<br>
</h3>
</div>
</footer>
<!--Menubar script -->
<script src="menubar.js"></script>
</body>
</html>
<?php
ob_flush();
?>
news2.php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php}?>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php } ?>
css:
body {
margin: 0px;
padding: 0px;
background-color: black;
background-attachment: fixed;
background-image: url(img/2560x2560bubbles.png);
background-size: cover;
font-family: "Segoe UI", 'Helvetica Neue';
}
.container {
margin-top: 520px;
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
background-image: -moz-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
}
.container2 {
width: 1280px;
padding-bottom: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
nav {
margin-left: 7.5%;
margin-top: 100px;
width: 10%;
float: left;
}
#nav_bar {}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
margin-left: 5.3%;
}
ul {
list-style-type: none;
}
li {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: bold;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
clear: none;
min-height: 0px;
}
a {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: grey;
}
a:focus {
text-decoration: none;
color: yellowgreen;
}
a:active {
text-decoration: none;
color: greenyellow
}
.content {
width: 70%;
margin-right: 7.5%;
margin-top: 100px;
float: right;
}
article {
width: 45.4%;
padding: 2.3%;
float: left;
}
img {
width: 100%;
}
h1 {
text-align: right;
margin: 0px;
font-size: 6.0em;
margin-bottom: 10px;
}
h2 {
margin: 0px;
text-align: center;
}
h3 {
margin: 0px;
text-align: center;
}
p {}
p1 {
float: right;
}
footer {
margin-top: 320px;
background-color: rgb(28, 28, 28);
height: 260px;
padding: 120px;
}
.footer-content {
color: white;
}
/*--Bloglist.css --*/
#blog {
width: 100%;
padding: 2.3%;
margin-top: 2.3%;
overflow: hidden;
}
article3 {
width: 100%;
padding: 2.3%;
overflow: hidden;
}
#blogfoto {
width: 257px;
height: 257px;
float: left;
overflow: hidden;
background-color: black;
}
p1#blog {
margin-top: 0px;
width: 62.07%;
float: left;
}
h4 {
margin-left: 2.3%;
float: left;
width: 56.66%;
margin-bottom: 0px;
}
/*-- Thumbnails --*/
.wrapper {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
}
/*-- Gallerylist -- */
.column {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: blue;
}
.column2 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: green;
}
.column3 {
float: left;
margin-left: 0px;
margin-top: 20px;
width: 28.73%;
padding: 2.3%;
background-color: red;
}
I'm assuming that you want each column to show a different row from your database. If so, just include a counter variable say $count = 0; before you enter your loop.
When $count % 3 == 0 use the class '.column', when $count % 3 == 1 use the '.column-2' and $count % 3 == 2 use '.column-3'.
Don't forget to increment the loop counter at the end of each iteration.
Edit:
<?php
$query = "SELECT * FROM gallery";
$result = mysqli_query($con, $query);
$count = 0;
while ($row = mysqli_fetch_array($result)) {?>
<?php if($count % 3 == 0) {?>
<div class="column">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
<?php }
else if($count % 3 == 1){
?>
</div>
<div class="column2">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php }
else{
?>
<div class="column3">
<div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php
echo "".$row['galleryfoto']."";
?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
<h4><?php echo $row['gallerytitel']?></h4>
</div>
<?php
}
$count++;
}
?>
This is not the neatest code, but this should get the job done.
So I created a wordpress and on that wordpress I made a custom template.
The custom template shows up fine, But when I try to add plugins or text to my custom template via the wordpress dashboard nothing shows up. Its not adding it to the code or adding it to the page.
Below are some pic of what I mean.
This is the wordpress dashboard where I am adding at, As you can see my template is MainTest which I made myself and works perfect
SS of the Wordpress Dashboard
Now this is the SS of the page, As you can see the words test test test are not showing up anywhere.
This is the SS of the page
Here is the code for the MaintTest template page
<?php
/*
Template Name: MainTest
*/
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="wp-content/themes/iribbon/newaddons/animate.css">
<link rel="stylesheet" type="text/css" href="wp-content/themes/iribbon/newaddons/newstyle.css">
<script type='text/javascript' src='rotate.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Fancy/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="Fancy/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class='container-fill'>
<?php include 'wp-content/themes/iribbon/newaddons/header.php'; ?>
<?php include 'wp-content/themes/iribbon/newaddons/footer.php'; ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
And here is the CSS that controls it. Yes I understand my CSS looks sloppy.
#midbar {
background-color: #FFFFFF;
height: 115px;
margin: 0 auto;
opacity: 0.9;
position: relative;
top: 0px;
width: 1200px;
z-index: 1111;
}
#midbar img {
position: absolute;
top: -20px;
left:50%;
margin-left: -160px;
width: 300px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
opacity:4.0;
}
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #FFFFFF;
z-index: 3333;
opacity: 0.9;
margin: 0 auto;
width: 100%;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#social {
position: relative;
width: 20%;
top: 30px;
margin-left: auto;
margin-right: auto;
}
#social .fb {
position: relative;
left: -5%;
}
#social .pin {
position: relative;
left: 0%;
}
#social .tweet{
position: relative;
left: 5%;
}
#foot {
width: 100%;
height: 200px;
position: absolute;
margin-right: auto;
margin-left: auto;
bottom: 0;
background-color: #FFFFFF;
margin:0;
text-align: center;
font-size: 12px;
}
#pics {
width: 100%;
height: 300px;
position: relative;
top: -100px;
margin-right: auto;
margin-left: auto;
}
#pics .ball {
position: relative;
vertical-align: middle;
left: 140px;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .light {
position: relative;
left:165px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .car {
position: relative;
left: 190px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#piccon {
width: 1400px;
height: 300px;
position: relative;
margin-right: auto;
margin-left: auto;
min-width: 800px;
}
#rotating-item-wrapper {
position: absolute;
width: 1940px;
height: 347px;
top: 60px;
z-index: 8888;
left: 0;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
#mainabout img {
width: 100%;
height: 100%;
}
#maintext {
width: 800px;
min-width: 300px;
height: 600px;
min-height: 300px;
position: absolute;
top: 175px;
left: 40%;
margin-right: -250px;
text-align: center;
font-size: 18px;
}
#mainabout {
background-color: green;
position: absolute;
left: 40%;
margin-left: -650px;
top: 155px;
width: 600px;
height: 500px;
min-height: 600px;
}
.hidden {
display: none;
}
.images {
width: 50%;
position: relative;
top: 300px;
height: 300px;
display: block;
}
.images img {
width: 30%;
height: 60%;
}
Please note, The css controls more then just this page thats why there is so much in it.
The reason for no content showing up is because you are not including the loop in your html body. See the codex for further details: http://codex.wordpress.org/The_Loop
Here is an example with the presentation separated from the logic which will allow you to have more control over the DOM.
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- This will output the title of your page-->
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<!-- the_content() function is required to output "test test test" -->
<?php the_content(); ?>
<?php endwhile; else: ?>
<!-- If there is an error, this 404 message will be displayed-->
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</body>
Also, you should be calling your header and footer with the following functions:
Header: http://codex.wordpress.org/Function_Reference/get_header
<?php get_header(); ?>
Footer: http://codex.wordpress.org/Function_Reference/get_footer
<?php get_footer(); ?>
You should add the loop to get the things that should be on the page. It's also reffered to as The Loop. Below the easiest example: show the content or say the page couldn't be found.
Insert that between your header and footer and you should be fine.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else:
print('<p>Sorry, this page couldn`t be found.</p>');
endif;
?>
I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>