On my site for one particular page the logo is nudged down a few pixels, while on all the other pages it is not. The code is identical(at least I think it is) for all pages so I'm not sure what is causing the issue.
Here is a screen shot of a working vs non working:
Working:
Non-Working:
The code for both is shown below however for some reason, one of the pages doesn't render correctly
<body>
<div class="wrapper"><?php include("include/header.php"); ?>
header.php:
<header id="header">
<div id="logo">
<h1 class="hidden">Welcome</h1>
</div><!-- #logo -->
<?php include("getstageinfo.php");
switch ($currentStage)
{
case "0":
$home ="period0.php";
break;
case "1":
$home ="period1.php" ;
break;
case "2":
$home ="period2.php" ;
break;
case "3":
$home = "period3.php";
break;
}
?>
<nav id="nav">
<h1 class="hidden">Main Navigation</h1>
<a class="nav-item current" href="<?php echo $home ?>">HOME</a>
<a class="nav-item" href="news.php">NEWS</a>
<a class="nav-item" href="accounts.php">ACCOUNTS</a>
<a class="nav-item" href="logout.php">LOG OUT</a>
<div id="nav_edge"> </div><!-- #nav_edge -->
</nav><!-- #nav -->
</header><!-- #header -->
CSS:
body { background-color: #031311; margin: 0px; padding: 0px; width: 100%; position: relative; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; overflow-x:hidden; font-size: 14px; line-height: 1.6em; color: #2a2d32; }
#header { margin: 0px; padding: 0px; width: 100%; height: 350px; display: block; position: relative; overflow: hidden; }
#header #logo { background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: center top; display: block; margin: 0px; padding: 0px; height: 450px; width: 100%; }
#header #nav { position: absolute; height: 50px; width: 455px; left: 50px; top: 298px; background-image: url(../images/nav_bg.png); background-repeat: repeat; background-position: left top; margin: 0px; padding: 0px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8C9791; border-bottom-color: #8C9791; border-left-color: #8C9791; }
#header #nav .nav-item { font-size: 14px; line-height: 50px; color: #E1E7EA; display: inline-block; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; font-style: italic; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 15px; text-shadow: 1px 1px 1px #000; }
#header #nav #nav_edge { background-image: url(../images/nav_edge.png); background-repeat: no-repeat; background-position: left top; display: block; margin: 0px; padding: 0px; height: 52px; width: 40px; position: absolute; top: -1px; right: -40px; }
#header #nav .nav-item:hover, #header #nav .nav-item:focus { color: #FFF; }
#header #nav .nav-item.current { color: #2BD5CC !important; }
And here is the generated html for working:
And here's the non working:
for css purpose IE7 different from IE8 and they all differnet from FIREFOX, CHROME....
I dont see you specifying css file for IE7 using
<!--[if lte IE 7]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
You need to have alternate css for IE7 in your page
I realised that it was to do with the include(); functions I was using before declaring the doctype. So I asked a new question. See below
PHP include() before doctype, causing a white space
Related
I have images in a file with its name in the database. And I would like to display it in a responsive list. But I would like to add for each image an icon in a corner (or text below the frame) of the image to remove it if necessary. here is my html and php code
<?php
$sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'";
$result = mysqli_query($conn, $sqlimage);
foreach ($result as $imageShow) {
?>
<div class="container">
<h1>Image Galerry</h1>
<div class="image-container">
<div class="image">
<img src="<?php echo 'Media/'.$imageShow['file_name'] ?>" alt="">
<div>
<i class='fa fa-trash' style='color: red'></i>
</div>
</div>
<div class="linkDelete"
style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
Delete
</div>
<?php
}
mysqli_close($conn);
?>
</div>
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
</div>
And here is my CSS3 code to display the images
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
min-height: 100vh;
background-color: #191C24 !important;
}
.container h1{
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: #333;
text-align: center;
text-transform: capitalize;
}
.container .image-container{
display: flex;
flex-wrap: wrap;
gap:15px;
justify-content: center;
padding: 10px;
}
.container .image-container .image{
height: 250px;
width: 350px;
border: 10px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
overflow: hidden;
cursor: pointer;
float: left;
}
.linkDelete{
float: left;
clear: left;
}
.container .image-container .image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image a{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image:hover img{
transform: scale(1.1);
}
.container .popup-image{
position: fixed;
top: 50px;
left: 0px;
background: rgba(0, 0, 0, .9) ;
height: 100%;
width: 100%;
z-index: 100%;
display: none;
}
.photo-name{
position: absolute;
width: 100%;
bottom: 30px;
text-align: center;
background-color: cyan;
}
/* .image-container{
position:relative;
}
.image-container a{
position:absolute;
bottom:0px;
right:0px;
} */
.container .popup-image span{
position: absolute;
top: 0;
right: 10px;
font-size: 60px;
font-weight: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px){
.container .popup-image img{
width: 95%;
}
}
I would like to have an image and on this image there is the icon which tells me the link to delete which is already prepared
I tried several ways but each time I find the icon in a position since the images with different dimensions.
If there was a possibility if not below the image a link to delete it and thank you in advance.
Set position: relative; on .image. Then set a class on the parent div for the icon. I called it .icon-wrapper. Set this parent to position: absolute; with top: 0;. Then you can use width and height: 100%; so it falls directly on top of your .image div.
Then you can use display: flex; with align-items: center; and justify-content: center; on .icon.wrapper to align the icon vertically and horizontally.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
min-height: 100vh;
background-color: #191C24 !important;
}
.container h1 {
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: normal;
padding: 15px;
color: #333;
text-align: center;
text-transform: capitalize;
}
.container .image-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .image-container .image {
height: 250px;
width: 350px;
border: 10px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
overflow: hidden;
cursor: pointer;
float: left;
}
.linkDelete {
float: left;
clear: left;
}
.container .image-container .image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image a {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .image-container .image:hover img {
transform: scale(1.1);
}
.container .popup-image {
position: fixed;
top: 50px;
left: 0px;
background: rgba(0, 0, 0, .9);
height: 100%;
width: 100%;
z-index: 100%;
display: none;
}
.photo-name {
position: absolute;
width: 100%;
bottom: 30px;
text-align: center;
background-color: cyan;
}
/* .image-container{
position:relative;
}
.image-container a{
position:absolute;
bottom:0px;
right:0px;
} */
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: 60px;
font-weight: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px) {
.container .popup-image img {
width: 95%;
}
}
i {
font-size: 3em;
color: red;
}
.image {
position: relative;
}
.icon-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<div class="container">
<h1>Image Galerry</h1>
<div class="image-container">
<div class="image">
<img src="https://dummyimage.com/300/000/fff" alt="">
<div class="icon-wrapper">
<i class="fa-solid fa-trash"></i>
</div>
</div>
<div class="linkDelete" style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
Delete
</div>
</div>
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
</div>
Thanks for adding the delete icon. But this one blocked me from displaying the full size image when I click inside the photo (the popup-image class action).
In the CSS
.container .popup-image img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid #333;
border-radius: 5px;
width: 75%;
object-fit: cover;
}
#media (max-width:768px){
.container .popup-image img{
width: 95%;
}
}
And in the HTML
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
I have had a problem with creating a if statement in order to display a default profile picture in case that the user hasn't uploaded their own profile picture. I have tried many examples online yet none of them seemed to have worked on my certain code and didn't reply to working, overall. I deleted my attempts to fixing the problem and gave the original code. Here's the current code I have:
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileIMG">
<img src=<?php echo $file; ?> width="100" height="100">
</div>
<div class="profileNAME">
<<?php echo $username ?>
</div>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 13%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
font-size: 20px;
font-family: arial;
overflow: hidden;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
li a:target {
background-color: #4CAF50;
color: white;
}
li button {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li button.active {
background-color: #4CAF50;
color: white;
}
li button:hover:not(.active) {
background-color: #555;
color: white;
}
body {
background-image: url(extra/background.png);
margin: 0;
overflow: hidden;
}
h5 {
color: green;
margin-left: 6%;
font-family: arial;
font-size: 15px;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 15px;
}
#player {
width: 200px;
height: 50px;
position: relative;
margin-left: 24px;
top: 18px;
}
#player i {
position: absolute;
margin-top: -6px;
color: #666;
}
#player i.fa-volume-down {
margin-left: -8px;
}
#player i.fa-volume-up {
margin-right: -8px;
right: 0;
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height: 5px;
width: 150px;
background: #555;
border-radius: 15px;
}
#volume .ui-slider-range-min {
height: 5px;
width: 300px;
position: absolute;
background: #2ecc71;
border: none;
border-radius: 10px;
outline: none;
}
#volume .ui-slider-handle {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
margin-left: -8px;
margin-top: -8px;
cursor: pointer;
outline: none;
z-index: 1;
}
.logStatus {
position: absolute;
bottom: 0;
}
The CSS is not needed but rather there to make viewing more pleasing. Also, the folder extra/ contains the images and the name of the default photo is defaultProfile.png.
Make this simple change at the top of your script where you are initialising your $file variable,
$file = 'extra/' . $username . '.png';
if (!file_exists($file))
$file = 'path-to-default-image';
To be fair, if you wanted to keep your code 'logical', you can flip the above check, so it sets $file to the default image location first and then if the user's image exists then switch to that:
$file = 'path-to-default-image';
if (file_exists('extra/' . $username . '.png'))
$file = 'extra/' . $username . '.png';
Reading Material
file_exists
Hi my PHP include is not appearing in my footer and can't figure out why. When I open the include file it works fine. Any suggestions? It is the same navigation code I had for other files, but i just moved it to the footer from a navigation bar at the top of the website. The navigation works in that case.
PHP file:
<div id="footer">
<div id="navigation">
<?php require_once ("navigation.inc.php"); ?>
</div>
</div>
Navigation file:
<div id="navigation">
Home
</div>
CSS file:
#footer {
position: absolute;
clear: left;
height: 60px;
width: 100%;
text-align: center;
line-height: -5px;
padding: 0px 0px 0px 0px;
bottom: 0px;
left: 0px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: green;
#navigation {
font-size: 125%;
padding: 5px;
bottom: 0px;
position: absolute;
width: 100%;
height: 40px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#navigation a {
color: black;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
text-decoration: none;
text-align: center;
}
#navigation a:hover {
background-color: #FF8B27;
}
I tried searching and using the codes I found somewhere else where it suggests to put:
margin:0px;
, but it still doesn't resolve my issue about the GAP created between the divs of my file. Here's the code: [The first one's the Jquery, the second is for the CSS, and the last one is the body.]
jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>
<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink">Home</li>
<li class="navlink"> Foods </li>
<li class="navlink"> Beverages </li>
</ul>
</ul>
</div>
<!-- Here's where the gap appears -->
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>
<div class="parallax1"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>
Couple of reasons:
p element has margins.
.nav-placeholder class has margin-bottom: 40px;
ul.header (which should be div.header) is displayed as
inline-block and pushes its parent height - leave its default
display as block.
if you are referring to the gap between your nav links, it is because display: inline-block; creates a gap by inserting a space between the elements. One solution to fix this is to set the parent container font-size: 0;.
.nav{
font-size: 0;
}
https://jsfiddle.net/unueg9zL/
The <p> you are adding inside #content is adding the gap, p elements have a default margin=1em (added by the browsers). You should set that margin to 0px explicitly on your CSS rules
#content p {margin:0}
https://jsfiddle.net/hkuo8xdx/