I have been trying to fix one issue for the last two weeks but didn't find any solution to my problem. So, I am trying to add HTTP authentication with PHP 7.4.
The main issue
I have to add restrictions for specific URLs ( For example, https://example.com/photos ) with PHP, and I am using the below code. But the problem is I have to show logged-in users on other pages, too. For example, if I didn't log in, then anything to show, but if I am logged in need to show username and password on all pages, but again I have to restrict only specific pages.
PHP Code:
Header("WWW-Authenticate: Basic realm='Members Only' valid-user");
http_response_code(401);
echo "<script> window.location.replace( 'https://example.com/sign-up' ) </script>";
exit;
.htaccess Code:
AuthUserfile PATH_TO_THE_FILE/.htpasswd
AuthName "Members Only"
AuthType Basic
AuthBasicProvider file
I hope someone will help me soon.
This is what I use
Put these 2 files in a folder...change the password fields and the refresh redirect code once correct password is entered.
index.php
<meta name='robots' content='noindex, nofollow' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=1">
<?php
session_start();
if(isset($_POST['submit_pass']) && $_POST['pass'])
{
$pass=$_POST['pass'];
if($pass=="12345678")
{
$_SESSION['password']=$pass;
}
else
{
$error="Incorrect Pssword";
}
}
if(isset($_POST['page_logout']))
{
unset($_SESSION['password']);
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="password_style.css">
</head>
<body>
<div id="wrapper">
<?php
if($_SESSION['password']=="12345678")
{
?>
<meta http-equiv="refresh" content="0;url=https://example.com">
<?php
}
else
{
?>
<form method="post" action="" id="login_form">
<h1>LOGIN TO PROCEED</h1>
<input type="password" name="pass" placeholder="*******">
<input type="submit" name="submit_pass" value="SUBMIT">
<p><font style="color:red;"><?php echo $error;?></font></p>
</form>
<?php
}
?>
</div>
</body>
</html>
password_style.css
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#8A4B08;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:50px;
font-size:45px;
color:white;
}
#wrapper p
{
font-size:16px;
}
#logout_form input[type="submit"]
{
width:250px;
margin-top:10px;
height:40px;
font-size:16px;
background:none;
border:2px solid white;
color:white;
}
#login_form
{
margin-top:200px;
background-color:white;
width:350px;
margin-left:310px;
padding:20px;
box-sizing:border-box;
box-shadow:0px 0px 10px 0px #3B240B;
}
#login_form h1
{
margin:0px;
font-size:25px;
color:#8A4B08;
}
#login_form input[type="password"]
{
width:250px;
margin-top:10px;
height:40px;
padding-left:10px;
font-size:16px;
}
#login_form input[type="submit"]
{
width:250px;
margin-top:10px;
height:40px;
font-size:16px;
background-color:#8A4B08;
border:none;
box-shadow:0px 4px 0px 0px #61380B;
color:white;
border-radius:3px;
}
#login_form p
{
margin:0px;
margin-top:15px;
color:#8A4B08;
font-size:17px;
font-weight:bold;
}
Related
I'm trying to align my label tag's to center under the text but it won't budge. What should I change?
I honestly have no idea why text-align center is not working. I've searched everywhere but can't seem to find anything that works for me personally. Any help is welcome, thank you in regard. - Sjoerd
Code: {html}
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Guardian - a safe online storage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="container flex">
<div class="title">
<h1>Guardian</h1>
<p>A service to store your information</p>
</div>
<nav>
<a class="active" href="index.html"> Home </a>
All your information
</nav>
</div>
</header>
<main>
<section class="banner">
<div class="container">
<div class="main-text">
</div>
<img src="img/guardian-logo.jpg" style="display: block; margin-left: auto; margin-right: auto;">
<h2> This is where you will store your information:</h2>
<div class="data">
<form action="forms_script/formsHandler.php" method="POST">
<label for="name">Email:</label>
<input type="text" id="fullName" placeholder="Enter full name" name="fullName">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pswd" placeholder="Enter password" name="pswd">
<label>
</label>
<button type="submit">Opslaan</button>
</form>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
**CSS Part**
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
.title p {
margin-top: 0;
}
.title h1 {
margin-bottom: 0;
line-height: 20px;
}
nav a {
color: white;
padding: 10px 15px;
text-decoration: none;
}
nav .active {
background-color: #76C38F;
border-radius: 10px;
}
header {
border-top: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #815B40;
color: white;
}
/* ==========================================================================
main
========================================================================== */
.banner {
border-bottom: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #F68026;
color: white;
}
.banner h2 {
text-align: center;
margin: 0;
}
.data {
display: flex;
text-align: center;
line-height: 150%;
font-size: .85em;
}
.data input {
display: block;
}
/* ==========================================================================
Helper classes
========================================================================== */
.container {
width: 70%;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
{php}
<h1>PHP test website</h1>
<?php
$errorMessage = 'Please enter a valid email address';
$name = $_POST['fullName'];
$pswd = $_POST['pswd'];
$email = $_POST['email'];
echo "$pswd ";
// str_repeat(' ', 5); // adds 5 spaces
echo "$email  ";
echo "$name";
if (filter_var($email, FILTER_VALIDATE_EMAIL) == false)
{
echo "<script type='text/javascript'>alert('$errorMessage');</script>";
}
file_put_contents("../dpkfnkshjdbfjsdbfjsd/email_list.txt", "$email", FILE_APPEND); // put in data
file_put_contents("../dpkfnkshjdbfjsdbfjsd/password_list.txt", "$pswd", FILE_APPEND); // put in data
?>
I'm assuming you want the form (labels & input) centered, in which case you could add margin to your form:
form {
margin: auto;
}
<label> is not a block by default and text-align works only if the tag has <div>'s behavior.
This should be good to start:
label {
display:block;
}
This is because label is an inline element, and is therefore only as big as the text it contains.
The possible is to display your label as a block element like this:
.data label {
display:block;
text-align:center;
}
I had the same question, and this solved my problem.
label {
margin: auto;
}
You should add a simple code to your file that is given below:
<style>
label {
display: block;
text-align: center;
}
</style>
I am writing a php file. It should read the username and password I enter and recored them to a txt file. It is only showing please enter username. It isn't showing my background colors either.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NewHW3</title>
</head>
<body>
<style scoped>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #333FFF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
<h1>User Login</h1>
<form method="post" action="863l.php">
Username: <input type="text" name="uname" placeholder="Username">
Password: <input type="password" name="password" placeholder="Password">
<input type="submit" name="login" value="Login">
</form>
</body>
</html>
That's the first code, it is supposed to display username and password. It seems to work but when I run it just says please enter username on the top.
<?php
$uname=$_POST['username'];
$password=$_POST['password'];
if ($uname==''){
echo "<script>alert('Please Enter Username');</script>";
exit();
}
if (!isset($_POST['username'])) ;{
}
if(!isset($_POST['password']));
$fp=fopen("863l.txt", "a");
$savestring="Username: ".$email."\n"."Password: ".$password."\n";
fwrite($fp, $savestring);
fclose($fp);
?>
The second code is supposed to record my input information into a txt file, it isn't doing that.
I didn't add the text file, bit it isnt recording to it either:
change this:
$uname=$_POST['username'];
to this:
$uname=$_POST['uname'];
because your input form like this
Username: <input type="text" name="uname" placeholder="Username">
I'm having some problems with my login feature using php with multiple users, I'm not using a database as this is a school assignment.
So the assignment is as follows "create an associative array with usernames as keys and encrypted passwords using password_hash. Once the user has logged in it shall print out the users name." We got a template that we should use, I will paste all the necessary code. So the problem I am having is, that when I try to log in as a user it keeps redirecting me so that I get the "too many redirects" error.
login.php
<?php
session_start();
if(isset($_POST['password'],$_POST['username'])){
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if(isset($user[$key])){
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
}
if(isset($_SESSION['inloggad'])){
header("Location: index.php");
}
else{
echo "<h1>Vänligen logga in!</h1>";
}
?>
login.html
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" >
<title>Sessioner</title>
</head>
<body>
<form method="post" action="login.php">
Username: <input type="username" name="username" size="20" /><br />
<br>
Password: <input type="password" name="password" size="20" /><br />
<input type="submit" value="Logga in" name="login"/>
</form>
</body>
</html>
user.php
<?php
$user['admin'] = '$2y$10$9NyoNcqG9sh0KOrVnUXLr.KscgDy0L1S0klYXK67oxVBVsElbbGja';
$user['hank'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
$user['elias'] = '$2y$10$tQNcTINMIcotw0IczQ1nTuOVRIpbuqh5M/k.mLpz7ZiZl8q2WA0Cy';
?>
start.php
<h1>Välkommen</h1>
<?php
include("login.php");
if(isset($_POST['password'],$_POST['username'])){
echo '<h1>' . $_POST['username'] . '</h1>';
}
?>
index.php
<?php session_start(); ?>
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Länka in med PHP</title>
<link href="css/styleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<?php include("header.php"); ?>
</header><!-- header -->
<section id="leftColumn">
<nav>
<?php
if(isset($_SESSION['inloggad'])){
include("meny.php");
}else{
include("login.html");
}
?>
</nav>
<aside>
<?php include("aside.php"); ?>
</aside>
</section><!-- End leftColumn -->
<main>
<section>
<!-- Lägg in innehållet här -->
<?php
$page = "start";
if(isset($_GET['page']))
$page = $_GET['page'];
switch($page){
case 'blogg': include('blogg.php');
break;
case 'bilder': include('bilder.php');
break;
case 'kontakt': include('kontakt.php');
break;
case 'klotter': include('klotter.php');
break;
default: include('start.php');
}
?>
</section>
</main><!-- End main -->
<footer>
<?php include('footer.php'); ?>
</footer><!-- End footer -->
</div><!-- End wrapper -->
</body>
</html>
styleSheet.css
#CHARSET "UTF-8";
* {
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
}
body{
font-size: 100%;
}
p {
font-size: 0.8em;
margin-bottom: 10px;
margin-top: 5px;
margin-right: 10px;
text-align: justify;
}
/* Wrapper */
#wrapper {
width: 800px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
border: 2px solid rgba(0,0,0,0.8);
}
/* End wrapper */
/* Header */
header {
text-align:center;
height: 60px;
background-image: url("../bilder/bgImg.png");
color: white;
}
header h1{
font-family: Arial;
font-size: 1.9em;
padding-top: 0.25em;
}
header time{
float: right;
margin-right: 2em;
font-size: 0.8em;
}
/* End header */
nav{
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
nav ul {
list-style:none;
}
nav li{
margin-top: 5px;
border: 1px solid #000;
}
nav li a{
display:block;
font-size: 0.8em;
text-decoration: none;
color: #aa0000;
padding-left: 15px;
background-color:#FFC;
}
nav li a:hover, #leftColumn li a:active, #leftColumn li a:focus{
background-color: gray;
color: #ffffff;
}
aside {
-moz-border-radius: 5px; /* Ger rundade hörn i Firefox */
border-radius: 5px; /* CSS3 */
border: 1px solid #999;
padding: 4px;
margin-bottom:5px;
}
aside p {
font-size: 0.8em;
}
/* leftColumn */
#leftColumn {
float: left;
width: 180px;
margin: 8px;
}
#leftColumn h1 {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
/* End leftColumn */
/* Main */
main {
margin-top: 8px;
margin-left:200px;
}
main h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
}
main h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
main section{
float:right;
width: 99%;
}
form label,a{
font-size: 0.8em;
}
/* End content */
/* Footer */
footer {
height: 30px;
background-image: url("../bilder/bgImg.png");
color: white;
font-size: 0.75em;
clear:both;
}
footer #footerRight{
float:right;
padding: 5px;
}
footer #footerLeft{
float:left;
padding: 5px;
}
/* End footer */
the rest of the template is not really necessary for me to paste as it's just html code for the website, I just linked the css code if you want to check what the page looks like yourself. If you need any more information that I might have forgotten to write please notify me.
I know there's a problem with me using include("login.php") in the start.php, I just don't know how to solve it as I need the information submitted in the login form. The page controller is stating that start.php is the default page the template uses in the section.
EDIT: sorry I was not clear about this part. it only happens once I enter the correct details, for example, admin:12345.
EDIT 2:
new start.php code
<?php
include("login.php");
if(isset($_SESSION['user'])){
echo '<h1>Välkommen</h1>' . '<h1>' . $_SESSION['user'] . '</h1>';
}
?>
Full login.php I'm using:
<?php
session_start();
if (isset($_POST['password'], $_POST['username'])) {
include("pwd.php");
include("user.php");
$key = $_POST['username'];
if (isset($user[$key])) {
$_SESSION['inloggad'] = true; // Användaren har anget rätt uppgifter.
$_SESSION['user'] = $_POST['username'];
}
if (isset($_SESSION['inloggad']) && ($_SESSION['inloggad'] === TRUE)) {
header("Location: index.php");
} else {
echo "<h1>Vänligen logga in!</h1>";
}
}
In the index.php file there is a line default: include('start.php'); that can cause this page to redirect to itself because file start.php includes file login.php which has header("Location: index.php"). The same problem would apply in case any other included file on this page lead to inclusion of header("Location: index.php")
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
I'm creating my website found here, I added my logo at the top of the page.
As this site is a mobile-optimized site, I wanted to add the logo so it correctly scales to the appropriate viewport (device screen size).
I have accomplished this by using this code in my CSS file:
.logo{
width: 75%;
height: 10%;
}
My logo is stored in header.php, and is included on all of the respective pages. However, the logo looks good on the homepage, but when clicking one of the navigational tabs to bring up the list.php page, it doesn't look scaled correctly.
header.php ------------
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<p align="center"><img src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" class="logo" border="0" width="100%" />
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Home - Search - More</h1></strong><div class="ribbon-stitches-bottom"></div></div></p>
<br /><br /><br /><br />
</p>
</body>
</html>
The CSS is:
body{
background-color:#dff7c8;
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.eot'); /* For Internet Explorer 6+ */
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.ttf'); /* For non-IE browsers */
}
a:link{
color:black;
text-decoration:none;
}
.border {
width: 90%;
height: auto;
Margin-left:auto;
Margin-right:auto;
background-color:#c3f495;
border: 5px ridge #009900;
border-radius: 20px 50px 20px 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.55);
}
.title {
font-family: 'CustomFont';
text-align: center;
font-size: 2.5em;
color:#000000;
text-shadow: #999 2px 2px 4px;
}
.content {
font-size: 15px;
color:#000000;
}
.search {
width: 24em;
height:3em;
border: 5px solid #009900;
border-radius: 10px;
position: relative;
box-shadow: 2px 2px 2px 2px #A4A4A4;
font-size: 20px; Position:relative;
}
/* (portrait) ----------- */
#media screen and (orientation:portrait){
.logo{
position:relative;
width: 75%;
height: 10%;
}
.go {
position:relative;
float: right;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:201px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
border-radius:20%;
width:201px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:201px;
height:150px;
background-color: transparent;
}
.appimg {
position:relative;
width:20%;
height:20%;
background-color: transparent;
}
.drapp {
position:relative;
width:35%;
height:15%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:110px;
height:40px;
background-color: transparent;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
/*(landscape) ----------- */
#media screen and (orientation:landscape){
.go {
position:relative;
float: right;
height:90px;
width:90px;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:211px;
height:160px;
background-color: transparent;
}
.appimg {
width:15%;
height:8%;
background-color: transparent;
}
.drapp {
position:relative;
width:25%;
height:30%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:220px;
height:80px;
background-color: transparent;
}
.logo{
position:relative;
width: 75%;
height: 10%;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
list.php ------------
<?php
include_once('include/connection.php');
include_once('include/article.php');
$article = new storearticle();
$articles = $article->fetch_all();
?>
<html>
<head>
<title>xclo mobi</title>
<link rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<?php include_once('header.php'); ?>
<div class="container">
<h6><div align="center" class="title" style="color:#618050;"><b><u><?PHP echo "category = ", htmlspecialchars($_GET['id']); ?></b></u></h6></div>
<?php foreach ($articles as $article) {
if ($article['promo_cat'] === $_GET['id']) { ?>
<div class="border">
<a href="single.php?id=<?php echo $article['promo_title']; ?>" style="text-decoration: none">
<img src="<?php echo $article['promo_image']; ?>" border="0" class="img" align="left"><br />
<img alt="" title="" src="GO.png" height="50" width="50" align="right" />
<br /><br /><br /><br />
<?PHP echo '<div class="title">' . $article['promo_title'] . '</div>'; ?>
<br />
<font class="content"><em><center><?php echo $article['promo_content']; ?></center></em></font>
</div><br/><br />
</a>
<?php } } ?>
</div>
<?php include_once('footer.php'); ?>
</body>
</html>
Could someone please guide me in the correct direction? Thank you.
There are a few methods you can try.
Your initial logo size is 1,000px × 400px (scaled to 743px × 297px)
I suggest to use this for ALL your CSS classes (.logo)
width:100%; max-width:743px; max-height:297px;
I use something to that affect and it works beautifully.
You could also try:
<img style="-ms-interpolation-mode: bicubic; width:100%;" border=0 alt="LOGO" align=middle src="your_image.xxx">
Which is another method I used for a client's website and using a 1800px wide image which renders nicely for large as well as small iPhone screens and will automatically adjust to screen width, without worrying about height attribute.
You have to remove either the width rule or the height rule to keep the image proportions.
Do you want it to be 10% of the height or 75% of the width?
Also remove the
width="100%"
from inline html. Keep all style rules in external css.