CSS design/layout help.

paddyhaig · May 9, 2010

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/

ignace · May 9, 2010

..

</form>

</div>

#wrapper { width: 400px; margin: 0 auto; }

paddyhaig · May 9, 2010

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.

ignace · May 9, 2010

To center a div you use:

margin-left: auto;

margin-right: auto;

or short:

margin: 0 auto;

And in order for this to work your div should have a fixed width.

paddyhaig · May 9, 2010

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.

paddyhaig · May 9, 2010

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.

ignace · May 10, 2010

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

paddyhaig · May 10, 2010

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!

ignace · May 10, 2010

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.

paddyhaig · May 10, 2010

<!--

Here's what I got.

-->

<html>

<head>

<title>Concierge</title>

<!--

@import url(layout/style.css);

-->

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>

<div>

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

</div>

<div>

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

</div>

</form>

</div>

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

</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.

ignace · May 10, 2010

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

paddyhaig · May 10, 2010

I noticed that you had moved away from using multiple graphics and where now layering the table over a single background graphic. I have just made up that background graphic and introduced it's path to the code. It doesn't log in any more, you can see it here: http://www.onina.net/concierge/

paddyhaig · May 10, 2010

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>

<title>Concierge</title>

<!--

@import url(layout/style.css);

-->

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>

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

</div>

<div>

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

</div>

</form>

</div>

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

</body>

</html>

ignace · May 10, 2010

That's due <form action="#" method="POST"> modify # with the URL and remove the <form> tag you used after the <body> tag

paddyhaig · May 10, 2010

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

<html>

<head>

<title>Concierge</title>

<!--

@import url(layout/style.css);

-->

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>

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

</div>

<div>

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

</div>

</form>

</div>

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

</body>

</html>

ignace · May 10, 2010

<!--

@import url(layout/style.css);

-->

should be:

@import url(layout/style.css);

paddyhaig · May 10, 2010

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>

<title>Concierge</title>

@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>

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

</div>

<div>

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

</div>

</form>

</div>

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

</body>

</html>

paddyhaig · May 10, 2010

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.

@import url(layout/style.css);

paddyhaig · May 10, 2010

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

<html>

<head>

<title>Concierge</title>

#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>

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

</div>

<div>

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

</div>

</form>

</div>

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

</body>

</html>

paddyhaig · May 10, 2010

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>

<title>Concierge</title>

#text_color

{

white

}

#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>

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

<body>

<div>

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

</div>

<div>

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

</div>

</form>

</div>

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

</body>

</html>

ignace · May 10, 2010

<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?

paddyhaig · May 10, 2010

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

}

?>

ignace · May 10, 2010

Modify <input type="submit" value="Login"> to <input type="submit" name="submit" value="Login"> and your script works again.

paddyhaig · May 10, 2010

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

ignace · May 10, 2010

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

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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information