CSS design/layout help.

paddyhaig · May 10, 2010

That did it! Phew! We were in a pickle for a while there...

Do you know if the is any way of making the browser cursor start in the first input box (

Username) by default, instead of having to click on it? Like if I go to Google, my cursor always automatically starts in the query box?

ignace · May 11, 2010

paddyhaig · May 11, 2010

Ahhh, If it were as easy as that!

I found the same string out there on the tinternet, but alas dear Yorick, I don't know where to put the damned thing and me being a grown man and all that.

I really hate to bother you any more ignace, you have been God sent!

Did you log in and take a look at what's yet to be done. Daunting!~

I just want to say thank you for everything. Thank you, thank you, thank you.

paddyhaig · May 11, 2010

It's Ok I got it! For any one else out there here's an example of where to use this little bit of code to make your cursor start in a specific dorm field. Thanks go to Ignace.

This is the line that does the magic:

<html>

<head>

<title>Concierge</title>

#blue-box {

position: relative;

width: 384px;

height: 357px;

margin: 0 auto;

background-image: url(graphics/concierge_auth.jpg);

color: #FFF;

font-family: Helvetica, Arial, Verdana, sans-serif;

}

form {

position: absolute;

top: 50%;

left: 50%;

margin-top: -55px;

margin-left: -65px;

width: 200px;

height: 150px;

}

form label {

font-weight: bold;

}

</style>

</head>

<div>

<label for="username">Username</label>

</div>

<div>

<label for="password">Password</label>

</div>

</form>

</div>

<div style="text-align:center">Concierge system powered by <a href="#">Onina</a></div>

</body>

</html>

paddyhaig · May 11, 2010

I feel like I am eventually making progress. A huge thanks to Ignace and PHPFreaks.

However the is still so much more to be done...

I want to be able to secure all the pages so that no one can circumnavigate the initial authentication page. I am not sure how this is done, possibly with a cookie of some description. As it is you can go straight in if you know the URL.

http://www.onina.net/concierge/admin/index.php

Now I would like to make.

1, A common .css document (For the rest of the site)

2, A common .dbx document, so that the database (mySQL) coneXion settings are all in the same document.

3, Figure out a better, maybe cleaner interface. I would like for it to possibly be used in a kiosk with a touch screen. SO all the buttons have to be fairly large.

I have a virtual keyboard, that runs as a Windows app, and a batch script that brings up both ie in kiosk mode and the virtual keyboard placed where I want it on the screen. But I would like it if the Web app had it's own virtual keyboard (Possibly java or flash) that was platform independent. Any and all ideas are greatly appreciated.

ignace · May 11, 2010

I have edited your PHP code and marked it, all you need to do now is add before or after the <form> tag:

<?php if (isset($_GET['message'])): ?>
<p class="error"><?php print $_GET['message']; ?></p>
<?php endif; ?>

The edited code

if (isset($_POST['submit'])) {
  $db = mysql_connect('localhost', 'onina', 'example') or die("Couldn't connect to the database<br>" . mysql_error());
  mysql_select_db('oninacom_concierge', $db) or die("Couldn't select<br>" . mysql_error());

  $login = mysql_real_escape_string($_POST['login'], $db);
  $password = mysql_real_escape_string($_POST['password'], $db);

  $query = "SELECT privilage FROM auth WHERE login = '$login' AND password = '$password'";
  $result = mysql_query($query, $db) or die("Problem with the query: $query<br>" . mysql_error());
  if (0 === mysql_num_rows($result)) {
    //EDITED CODE HERE
    header('Location: ../../index.php?message=' . urlencode('Incorrect username and/or password'));
    //EDITED CODE HERE
    exit(0);
  }

  $row = mysql_fetch_assoc($result);
  $privilage = $row['privilage'];

  session_start();
  $_SESSION['username'] = $login;
  $_SESSION['privilage'] = $privilage;

  if ('receptionist' === $privilage) {
    header('Location: ../../employees/receptionist/index2.htm');
    exit(0);
  }

  if ('manager' === $privilage) {
    header('Location: ../../employees/managers/index1.htm');
    exit(0);
  }

  if ('administrator' === $privilage) {
    header('Location: ../../admin/index.php');
    exit(0);
  }
}

I want to be able to secure all the pages so that no one can circumnavigate the initial authentication page. I am not sure how this is done, possibly with a cookie of some description.

Add to the pages you want to protect:

if (empty($_SESSION['login']) || empty($_SESSION['privilage'])) {
  header('Location: ../../index.php');//this path may be incorrect, please correct
  exit(0);
}

1, A common .css document (For the rest of the site)

Create a file with the .css extension and link to it using the <link> tag as:

<link href="style.css" type="text/css" rel="stylesheet" media="screen">

2, A common .dbx document, so that the database (mySQL) coneXion settings are all in the same document.

Make that a common .php file so no-one can read it and include it:

require 'db.php';

3, Figure out a better, maybe cleaner interface. I would like for it to possibly be used in a kiosk with a touch screen. SO all the buttons have to be fairly large.

You can use the same setup for the rest of the website

But I would like it if the Web app had it's own virtual keyboard (Possibly java or flash) that was platform independent.

You can create one using JS, just take a look at google.com click the little keyboard in the search bar.

paddyhaig · May 11, 2010

Last thing is first: A Java keyboard. You say I can create one using JS, just take a look at google.com click the little keyboard in the search bar. I don't seem to have a little keyboard in my search bar. Actually which search bar are you talking about. I have a Google search bar built into my Firefox browser or the search input box when I pull up the Google web site?

ignace · May 11, 2010

If you click the little keyboard icon you get that big keyboard on screen.

paddyhaig · May 11, 2010

Mmmm, we don't seem to get that feature here on the U.S version of Google. But I do see what you are saying in regards to a Java keyboard. I looked all over for the code but don't seem to of done so well so far. I like it though! Thanks for the heads up

ignace · May 11, 2010

Java != JavaScript. I don't see why they would show the keyboard for Europe countries only?

paddyhaig · May 11, 2010

That's all we get here. See graphic... I am originally from just outside of Liverpool in the UK, but now live in New Orleans, USA. I did once live in Bruxelles about 20 years ago. I do love Belgium.

[attachment deleted by admin]

ignace · May 11, 2010

I do love Belgium.

I do to I live in Landen, Vlaams-Brabant about 30 min from Brussel Bruxelles is how they name it in Brussel due to the many french living there.

[dutch]Spreek je ook nog Nederlands of Vlaams in de volksmond?[/dutch]

paddyhaig · May 11, 2010

Please excuse me if I am wrong, but you would be a Walloon? Whatever you are you have been very kind and very helpful, thank you so very much!

Did you log into the site? I think I am starting to get a grasp of css. Although I am cheating a little as I am also using Dreamweaver.

paddyhaig · May 11, 2010

I guess your not a Walloon! I just quickly researched Walloons, you would be Flemish, I never could quite figure it out. Just like PHP and CSS. LOL

I remember a lot of Graffiti in Brussels whilst I was there referring to the different sides to the Belgian cultures. In the UK, I guess we just have football teams that hate one another. Lol, never really my thing. Again I really do appreciate all the help you have given me.

ignace · May 11, 2010

I am indeed a Flemish person Yeah Brussels indeed has a lot of graffiti. All are written in French by rival graffiti gangs. Besides football team supporters that hate one another we also have the Flemish VS Walloons as the latter refuses to speak Flemish even in the Flemish parts and demand that we (Flemish) speak French or now that we no longer have a government they demand that we give even more of Belgium to the Walloons if we want to split BHV. We have an old grudge against French (since WW2 and the "Et pour le Flamand, le meme choice"-incident) as we are proud of our language. Even our King barely speaks Flemish.

To bad we have such a great health care and education (that is also they only things we are great at though) or I would have bolted a long time ago.

http://www.askmen.com/specials/top_29_cities/ -- is a good start if I ever would decide to move

paddyhaig · May 11, 2010

Wowser! Well the Flemish have my vote. I totally love the Askmen webmag, I was just reading it the other day. London was number 5, New York number 1. Both I have lived in and didn't really like. I didn't see Brussels, Liverpool or New Orleans. Oh well!

I was trying to think of a different way to represent the buttons on the Concierge project. If you log in, you will see a rather goofy looking table with some button graphics. I want buttons that will be easy to press with a finger on a touch screen. I was wondering if I used the same graphic with no text on it for the buttons and overlay the text with css. Therefor the page would load faster as the graphic would be cached and the text would be super fast.

I would use the same backdrop as the authentication screen.

paddyhaig · May 11, 2010

Just out of interest, does anyone use an IDE for css and php and if so which one?

ignace · May 11, 2010

Just out of interest, does anyone use an IDE for css and php and if so which one?

See my sig, it's really great. It for example supports Zen Coding, a little example:

html5>head+body>div#wrapper>div#header+div#content+div#footer

creates

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</body>
</html>

paddyhaig · May 12, 2010

1, I have somehow messed up my auth page/script again. I changed the default login button for a custom graphic/button that could be used on a touch screen. (I think this is ok) I also added an additional input field (I think this is where the problem is). I don't really need the field to work at the moment, but I will be introducing it at some point and would like it at least to be a visual representation of a future feature.

2, How do I add script's and code to PHPfreaks in that little scrollable window as Posted by: ignace. earlier.

Here is my authentication dialog page.

<html>

<head>

<title>Onina Concierge Login</title>

#blue-box {

position: relative;

width: 384px;

height: 357px;

margin: 0 auto;

background-image: url(graphics/small_backdrop.jpg);

color: #FFF;

font-family: Helvetica, Arial, Verdana, sans-serif;

}

form {

position: absolute;

top: 143px;

left: 182px;

margin-top: -55px;

margin-left: -65px;

width: 145px;

height: 149px;

}

form label {

font-weight: bold;

}

</style>

</head>

<div>

<label for="username">Account:</label>

</div>

<div>

<label for="username">Username:</label>

</div>

<div>

<label for="password">Password:</label>

</div>

<p>

</p>

</p></form>

</div>

<div style="text-align:center">Concierge system powered by <a href="http://www.onina.net/onina/public_html2/">Onina</a><a href="#"></a></div>

</body>

</html>

Here is my auth.php script.

<?php

if (isset($_POST['submit'])) {

$db = mysql_connect('localhost', 'example', 'example') or die("Couldn't connect to the database<br>" . mysql_error());

mysql_select_db('concierge', $db) or die("Couldn't select<br>" . mysql_error());

$login = mysql_real_escape_string($_POST['username'], $db);

$password = mysql_real_escape_string($_POST['password'], $db);

$query = "SELECT privilage FROM auth WHERE login = '$login' AND password = '$password'";

$result = mysql_query($query, $db) or die("Problem with the query: $query<br>" . mysql_error());

if (0 === mysql_num_rows($result)) {

header('Location: ../../index.php');

exit(0);

}

$row = mysql_fetch_assoc($result);

$privilage = $row['privilage'];

session_start();

$_SESSION['username'] = $login;

$_SESSION['privilage'] = $privilage;

if ('receptionist' === $privilage) {

header('Location: ../../employees/receptionist/index2.htm');

exit(0);

}

if ('manager' === $privilage) {

header('Location: ../../employees/managers/index1.htm');

exit(0);

}

if ('administrator' === $privilage) {

header('Location: ../../admin/index.php');

exit(0);

}

?>

ignace · May 13, 2010

I already gave you the answer:

if (isset($_POST['submit'])

should be

if (isset($_POST['username']) && isset($_POST['password']))

paddyhaig · May 13, 2010

I am so sorry ignace, the thing is, I don't remember touching the auth.php script at all. I figured that was fine and working ok. The only changes I remember making where to the index.php form layout. Weird! Thanks again, I am such a duffus!

Maybe you can help me with this, how do you enter code in those little scrolling windows on the phpfreaks site?

ignace · May 13, 2010

[ php ] text here [ /php ]

paddyhaig · May 14, 2010

I seem to be a bit stuck with the below code. I am not sure where I should put it in the run of things. I ended up putting it in a separate auth_check.inc. Then tried to include it in some of my pages. <?php include("../includes/auth_check.inc"); ?>

But it doesn't seem to work.

if (empty($_SESSION['login']) || empty($_SESSION['privilage'])) {

header('Location: ../../index.php');//this path may be incorrect, please correct

exit(0);

}

Sign In

CSS design/layout help.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information