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.
Related
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
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 :)
Hello i am making my own wordpress bootstrap theme. And i have one thing what i want to make that it work nice on mobile and tablets. Right now in mobile mode my site Title in mixed together with my info box. I think it would be nice if i could move my text box under the text box when the page is visited on smaller screens.
You can see my problem in image:
My HTML:
<div class="container">
<div class="wrapper">
<h1>
<?php
if(get_theme_mod( 'header_banner_title_setting' )){
echo get_theme_mod( 'header_banner_title_setting' );
}else{
echo 'Wordpress + Bootstrap';
}
?>
</h1>
<p>
<?php
if(get_theme_mod( 'header_banner_tagline_setting' )){
echo get_theme_mod( 'header_banner_tagline_setting' );
}else{
echo esc_html__('To customize the contents of this
header banner and other elements of your site, go to D
ashboard > Appearance >
Customize','wp-bootstrap-starter');
}
?>
</p>
<div id="headertxt">
<a>Zvani - <span class="head"> (+371) 29429748</span><br />
</a>
<a href="mailto:godeli#tvnet.lv">Raksti - <span
class="head_2">godeli#tvnet.lv</span><br /></a>
<a href="/ka-mus-atrast/">Redzi mūs <span
class="head_2">kartē</span><br /></a>
<a><span class="head">57°11'58.4"N 22°12'11.2"E</span><br />
</a>
<hr>
<a href="./rekviziti/"><span
class="head_2">REKVIZĪTI</span></a>
</div>
</div>
<a href="#content" class="page-scroller"><i class="fa fa-fw fa-
angle-down"></i></a>
</div>
</div>
CSS :
header#masthead {
margin-bottom: 0;
background-color: #563d7c ;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
padding: .60rem 1rem;
border-bottom: 1px solid #9175bb ;
position: fixed;
z-index: 2000;
width: 100%;
}
.navbar-brand > a {
color: rgba(0, 0, 0, 0.9);
font-size: 1.1rem;
outline: medium none;
text-decoration: none;
color: #fff;
font-weight: 700;
}
.navbar-brand > a:visited, .navbar-brand > a:hover {
text-decoration: none;
}
#page-sub-header {
position: relative;
padding-top: 15rem;
padding-bottom: 0;
text-align: center;
font-size: 1.25rem;
background-size: cover !important;
}
#page-sub-header h1 {
line-height: 1;
text-align: left;
font-size: 4rem;
color: #563e7c;
margin: 0 0 1rem;
border: 0;
padding: 0;
}
#page-sub-header p {
margin-bottom: 0;
text-align: left;
line-height: 1.4;
font-size: 1.25rem;
font-weight: 300;
color: #563e7c;
}
a.page-scroller {
color: #333;
font-size: 2.6rem;
display: inline-block;
margin-top: 2rem;
}
#media screen and (min-width: 768px) {
#page-sub-header h1 {
font-size: 3.750rem;
line-height: 1;
}
#page-sub-header {
font-size: 1.25rem;
}
}
#media screen and (min-width: 992px) {
#page-sub-header p {
max-width: 43rem;
margin: 0 auto;
}
}
#headertxt {
position: absolute;
right: 20px;
bottom: 100px;
background-size: auto;
background: rgba(0, 0, 0, 0.7);
padding: 10px 10px 10px 10px;
}
#headertxt a {
text-align: right;
color: white;
font-size: 20px;
}
I hope someone will lead me to some way how to fix this problem and points me to some good tip. Thanks!
css:
<style>
#head3{
color: #fff;
text-align: center;
font-weight: bold;
background-image: url(images/flag/sab.jpg);
background-size: 1095px 180px;
background-repeat: no-repeat;
height: 180px;
}
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 240px;
height: 140px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
background: orange;
transform: rotateY(180deg);
}
#head5{
text-align: center;
margin-top: 50px;
font-weight: bold;
color: #fff;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
#heading{
color: #fff;
text-align: center;
font-weight: bold;
background: #260663;
width: 240px;
}
</style>
code:
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<?php
}
?>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
In this code I want to open diffrent modal according by country name.
<span>(click)</span>
here I am echo $country_name but there is no modal showing but when I am define openModal in place of $country_name modal open so, how can I open diffrent modal according to country_name ?
Thank You
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
<?php
}
?>
So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}