Jump to content

CSS design/layout help.


paddyhaig

Recommended Posts

Could this be done with CSS layout. It needs to be centered, preferably near the top of the page. And stay centered despite the size of the browser window. It's presently just made up of tables. I am looking for a smoother more efficient way of building this layout. Any and all help is greatly appreciated.

 

http://www.onina.net/concierge/

Link to comment
Share on other sites

Wow ignace, you are truly everywhere! I have no clue as to what you have wrote. I have really no idea when it comes to css. All I know is that I have to create a css style sheet and in that style sheet are parameters pertaining to layout, text color and background color. I know the are div's that can be used for placement of items on the page and that they can be used with percentages. 

Link to comment
Share on other sites

Here is the beginning of my project.

http://www.onina.net/concierge/

 

I need css relative positioning for the entire blue interface on the browser page, so it is located (Center/middle) despite browser size.

 

Then I need each of the elements inside of the blue box absolutely positioned in relation to the box.

The are eight graphics and a table with User and Pass dialog boxes in the middle. I would actually like to get rid of the table completely if it was possible.

 

I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start?

 

Any and all help greatly appreciated.

Link to comment
Share on other sites

Hi ignace, I guess one of my questions would be, am I really centering the box? Or is the div in the top left corner, so there-for I would have to make sure that the box top left corner was always 1/3 away from the top left corner of the browser window, but I guess that is also relative to the size of the centered box? As you can see I obviously have no clue?

But I do seriously appreciate you feed back.

Link to comment
Share on other sites

I need css relative positioning for the entire blue interface on the browser page, so it is located (Center/middle) despite browser size.

 

width: (x)px; margin: 0 auto; does just that

 

I would probably create your blue box like:

 

<div id="wrapper">
  <div id="content">
    <form action="#" method="POST">
      <div>
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
      </div>
      <div>
        <label for="password">Password</label>
        <input type="text" id="password" name="password">
      </div>
      <input type="submit" value="Login">
    </form>
  </div>
</div>

 

#wrapper {
  width: 400px;
  height: 400px;
  margin: 0 auto;/*center it in the viewport*/
  background: url(path/to/background/image.fig);
}

#content form {
  width: 200px;
  height: 150px;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -100px;
}

Link to comment
Share on other sites

Thank you Ignace, for the code. Although I am not altogether really sure what to do with it. I think the divs go in the header and the rest of the code in the body right? As I might of said earlier I have really no idea what I am doing with css. The html aspect I developed 7 years ago. Since then I really haven't touched code. I think if I can just get a couple of working templates then I will be able to work it out from there. I am watching css videos and reading all I can at this very moment.

To answer n000bie, it seemed like a good idea at the time! I think the reasoning behind the sliced pictures was two-fold.

1, The smaller graphics seemed to load faster than one large graphic and also the graphics are only on the periphery of the authentication box. The center of the box is a regular html table just colored to match the surrounding graphics. I might go with the single graphic method now that we all have more bandwidth and I am starting to get a grasp of layering in css.

2, I new absolutely nothing about css and layering when I started the project 7 years ago. I had already built the interface, when I stumbled across more efficient ways that I could of coding it (If that is I had known at the time how to use css). Now I am trying to implement those more efficient technologies.

Again, I am always very grateful of all and any feedback. Thanks again all!

Link to comment
Share on other sites

All HTML code is meant to go in the <body> tag. The CSS should be linked in the <head> section. The above code creates a div#wrapper that contains the blue background image, the div#content contains the actual form with the input fields.

 

The div#wrapper is horizontally centered across the view-port (everything below the tabs and above the status-bar); div#content is centered both horizontally and vertically I use negative margins to have it slide back up and move to the left as it otherwise would render in the 4th quadrant of the box.

Link to comment
Share on other sites

<!--

Here's what I got.

-->

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<!--

@import url(layout/style.css);

-->

 

<style type="text/css">body,td,th {

color: #283A86;

}

 

#wrapper {

  width: 400px;

  height: 400px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(path/to/background/image.fig);

}

 

#content form {

  width: 200px;

  height: 150px;

}

 

#content {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -75px;

  margin-left: -100px;

}

 

 

</style>

 

</head>

 

 

<body>

 

<form method="POST" action="scripts/authenticate/auth.php">

 

<div id="wrapper">

  <div id="content">

    <form action="#" method="POST">

      <div>

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

        <input type="text" id="username" name="username">

      </div>

      <div>

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

        <input type="text" id="password" name="password">

      </div>

      <input type="submit" value="Login">

    </form>

  </div>

</div>

 

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

 

Now all the blue stuff has gone, the graphics and the authentication box. All I have is the two text fields and a button. And it doesn't seem to want to work any more. Log-in that is.

The input boxes are however in the middle of the screen, so all is not lost!

All help greatly appreciated and I am really not just saying that.

 

Link to comment
Share on other sites

My code served as an example, it needs editing for it to work.

 

background: url(path/to/background/image.fig); <-- put here your path to the actual background image

 

Also change the width's and height's as I have them now specified to 400x400 for the wrapper 200x150 for the form. Also the #content margin-top and margin-left is the half of the width and height of the form

Link to comment
Share on other sites

Here's what I got so far: It looks ugly! http://www.onina.net/concierge/

 

Here's the code. And the ability to login has gone.

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<!--

@import url(layout/style.css);

-->

 

<style type="text/css">body,td,th {

  color: #283A86;

}

 

#wrapper {

  width: 400px;

  height: 400px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(graphics/concierge_auth.jpg);

}

 

#content form {

  width: 200px;

  height: 150px;

}

 

#content {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -75px;

  margin-left: -100px;

}

 

 

</style>

 

</head>

 

 

<body>

 

<form method="POST" action="scripts/authenticate/auth.php">

 

<div id="wrapper">

  <div id="content">

    <form action="#" method="POST">

      <div>

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

        <input type="text" id="username" name="username">

      </div>

      <div>

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

        <input type="text" id="password" name="password">

      </div>

      <input type="submit" value="Login">

    </form>

  </div>

</div>

 

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

Link to comment
Share on other sites

It's still messed up. What <form> tag

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<!--

@import url(layout/style.css);

-->

 

<style type="text/css">body,td,th {

  color: #283A86;

}

 

#wrapper {

  width: 400px;

  height: 400px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(graphics/concierge_auth.jpg);

}

 

#content form {

  width: 200px;

  height: 150px;

}

 

#content {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -75px;

  margin-left: -100px;

}

 

 

</style>

 

</head>

 

 

<body>

 

<div id="wrapper">

  <div id="content">

    <form action="scripts/authenticate/auth.php" method="POST">

      <div>

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

        <input type="text" id="username" name="username">

      </div>

      <div>

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

        <input type="text" id="password" name="password">

      </div>

      <input type="submit" value="Login">

    </form>

  </div>

</div>

 

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

Link to comment
Share on other sites

I would like to say that fixed it, but it's even worse now! CSS layout is really not as easy as people like to say it is. See: http://www.onina.net/concierge/

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<style type="text/css">

  @import url(layout/style.css);

 

}

 

#wrapper {

  width: 400px;

  height: 400px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(graphics/concierge_auth.jpg);

}

 

#content form {

  width: 200px;

  height: 150px;

}

 

#content {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -75px;

  margin-left: -100px;

}

 

 

</style>

 

</head>

 

 

<body>

 

<div id="wrapper">

  <div id="content">

    <form action="scripts/authenticate/auth.php" method="POST">

      <div>

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

        <input type="text" id="username" name="username">

      </div>

      <div>

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

        <input type="text" id="password" name="password">

      </div>

      <input type="submit" value="Login">

    </form>

  </div>

</div>

 

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

 

 

Link to comment
Share on other sites

I was just looking at this a little more and it dawned on me that this index page should not be pulling styles from any where else. So I don't see why it needs to import anything. All the css should be self contained on this page.

 

<style type="text/css">

  @import url(layout/style.css);

Link to comment
Share on other sites

Ok I messed with it and it works a little better now, but it's still not right.

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<!-- ------------------------------------------------------------------------------------------------- -->

<!-- These are the css styles -->

 

<style type="text/css">

 

#wrapper {

  width: 400px;

  height: 400px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(graphics/concierge_auth.jpg);

}

 

#content form {

  width: 200px;

  height: 150px;

}

 

#content {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -75px;

  margin-left: -100px;

}

 

 

</style>

 

<!-- -------------------------------------------------------------------------------------------------

<!-- This is the form and background graphic -->

 

</head>

 

 

<body>

 

<div id="wrapper">

  <div id="content">

   

<form action="scripts/authenticate/auth.php" method="POST">

     

<div>

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

        <input type="text" id="username" name="username">

      </div>

 

      <div>

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

        <input type="text" id="password" name="password">

      </div>

     

<input type="submit" value="Login">

    </form>

  </div>

 

</div>

 

 

<!-- ------------------------------------------------------------------------------------------------- -->

<!-- This is the lower section still using tables with the Onina URL -->

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

Link to comment
Share on other sites

So I got it looking a whole lot better. There's still a couple of things I would like to fix if anyone knows how?

1, I would like the text in the form to be bold and white. That is 'Username' & 'Password' 2, I would also like for the form to actually work again, that is login as it did before. (I think I know what the problem is there.)

3, I would also like for the footer tables to be in css as well. (I will probably put them in a separate file at some point).

Any and all help greatly appreciated. To see live view: http://www.onina.net/concierge/

I just wanna say thanks for everyone's help so far, especially 'Ignace'

 

 

<html>

 

<head>

 

<meta http-equiv="Content-Language" content="en-us">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Concierge</title>

 

<!-- ------------------------------------------------------------------------------------------------- -->

<!-- These are the css styles -->

 

<style type="text/css">

 

<!-- This is my own experiment as I want the text in the form to be bold and white -->

 

#text_color

{

  white

}

 

<!-- Just not 100% sure how to implement it -->

 

#wrapper

{

  width: 384px;

  height: 358px;

  margin: 0 auto;/*center it in the viewport*/

  background: url(graphics/concierge_auth.jpg);

}

 

#content form

{

  width: 200px;

  height: 150px;

}

 

#content

{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -150px;

  margin-left: -70px;

}

 

 

</style>

 

</head>

 

<!-- -------------------------------------------------------------------------------------------------

<!-- This is the form and background graphic -->

 

<body>

 

 

<div id="wrapper">

<div id="content">

   

<form action="scripts/authenticate/auth.php" method="POST">

     

<div>

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

        <input type="text" id="username" name="username">

      </div>

 

      <div>

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

        <input type="text" id="password" name="password">

      </div>

     

<input type="submit" value="Login">

    </form>

  </div>

 

 

</div>

 

<!-- ------------------------------------------------------------------------------------------------- -->

<!-- This is the lower section still using tables with the Onina URL -->

 

<div align="center">

  <center>

  <table border="0" cellpadding="0" cellspacing="0">

    <tr>

      <td align="center"><font color="#808080" size="2">Concierge System </font></td>

    </tr>

    <tr>

      <td align="center"><font color="#808080" size="2">Powered by</font></td>

    </tr>

    <tr>

      <td align="center"><a href="http://www.onina.net/onina/public_html2/" target="_blank"><font size="2" color="#0000FF">Onina</font></a></td>

    </tr>

  </table>

  </center>

</div>

<p align="center"> </p>

 

 

</body>

 

</html>

Link to comment
Share on other sites

<html>
<head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Concierge</title>
    <style type="text/css">
        #blue-box {
            position: relative;
            width: 384px;
            height: 357px;
            margin: 0 auto;
            background-image: url(http://www.onina.net/concierge/graphics/concierge_auth.jpg);

            color: #FFF;
            font-family: Helvetica, Arial, Verdana, sans-serif;
        }
        form {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -100px;
            width: 200px;
            height: 150px;
        }
        form label {
            font-weight: bold;
        }
    </style>
    <!--[if IE]><style type="text/css">body { text-align: center; } #blue-box { text-align: left; }</style><![endif]-->
</head>
<body>
<div id="blue-box">
    <form action="http://www.onina.net/concierge/scripts/authenticate/auth.php" method="POST">
        <div>
            <label for="username">Username</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">Password</label>
            <input type="text" id="password" name="password">
        </div>
        <input type="submit" value="Login">
    </form>
</div>
<div style="text-align:center">Concierge system powered by <a href="#">Onina</a></div>
</body>
</html>

 

What code goes behind auth.php?

Link to comment
Share on other sites

Well it was kinda three tiered with different levels of access. If you were an Administrator you got one page, if you were a manager you got another and if you were staff you got another still. The admin user name is: admin and the password is: 1234

The web site is: http://www.onina.net/concierge/

 

Here's a copy of the auth.php page. I just changed the sql user/pass (Not that I don't trust you, but this is pretty public.)

 

<?php

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)) {

    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);

  }

}

?>

Link to comment
Share on other sites

Couple of things!

1, I noticed when I was entering my password it was no longer obscured by asterisks.

2, I made the change you suggested <input type="submit" name="submit" value="Login">

and although the page appears to do something, nothing seems to come up? See web site: http://www.onina.net/concierge/index.php Username: admin / Password: 1234

Link to comment
Share on other sites

1, I noticed when I was entering my password it was no longer obscured by asterisks.

 

My bad, change type="text" to type="password"

 

2, I made the change you suggested <input type="submit" name="submit" value="Login">

 

I am guessing it's due to

 

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

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

    exit(0);

  }

 

And that's due to:

 

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

 

Which should have been:

 

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.