Jump to content

help with php positioning

abrahamgarcia27

By abrahamgarcia27
in CSS Help

 Share

Recommended Posts

abrahamgarcia27 Member

abrahamgarcia27

Posted
Posted

I am creating an application that query all my users information such as: member id, first name, last name, login, and password from mysql table. The problem that i encountered is when running the query the data is displayed in one single line. I am using css to position my data. I don't know if there is a better way to position data on a table. I want the application to look as nice as it can.

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/240762-help-with-php-positioning/
Share on other sites
abrahamgarcia27 Member

abrahamgarcia27

Posted
  • Author
Posted (edited) 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View Users</title>
<link href="loginmodule.css" rel="stylesheet" type="text/css" />
</head>
<body>

<table id="mytable" cellspacing="0" summary="User Table">
<caption>Pacific Basin Users </caption>
  <tr>
    <th width="150" class="nobg" scope="col" abbr="Configurations">User ID</th>

    <th width="150" scope="col" abbr="fname">First Name</th>
    <th width="150" scope="col" abbr="lname">Last Name</th>
<th width="150" scope="col" abbr="login">Login</th>
    <th width="150" scope="col" abbr="passwd">Password</th>
  </tr>
  <tr>
</table>


<?php
mysql_connect("xxxx", "xxxx", "xxxx");
mysql_select_db("pacificbasintest");

$sql = mysql_query("SELECT * FROM newUsers2 ORDER BY member_id ASC");






$id = 'member_id';
$fname = 'firstname';
$lname = 'lastname';
$login = 'login';
$password = 'passwd';
while ($rows = mysql_fetch_assoc($sql)){
echo '<div id="positionid">' .$rows[$id]. '</div>' ;
echo '<div id="positionfname">' .$rows[$fname]. '</div>' ;
echo '<div id="positionlname">' .$rows[$lname]. '</div>' ;
echo '<div id="positionlogin">' .$rows[$login]. '</div>';
echo  '<div id="positionpassword">' .$rows[$password]. '</div>' ;
}


?>




</body>
</html>

 

body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 20px 10px 0px;
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: #99CC00;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0; padding:0;}
#navigation li {list-style: none;}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(pacificbasintest/images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(pacificbasintest/images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(pacificbasintest/images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}

#positionid
{
position:absolute;
left:40px;
top:75px;
}

#positionfname
{
position:absolute;
left:200px;
top:75px;
}

#positionlname
{
position:absolute;
left:375px;
top:75px;
}


#positionlogin
{
position:absolute;
left:550px;
top:75px;
}


#positionpassword
{
position:absolute;
left:700px;
top:75px;
}
Edited by ignace
cssfreakie Regular Member

cssfreakie

Posted
Posted

well this is the part where you output the stuff from your database:

while ($rows = mysql_fetch_assoc($sql)){
echo '<div id="positionid">' .$rows[$id]. '</div>' ;
echo '<div id="positionfname">' .$rows[$fname]. '</div>' ;
echo '<div id="positionlname">' .$rows[$lname]. '</div>' ;
echo '<div id="positionlogin">' .$rows[$login]. '</div>';
echo  '<div id="positionpassword">' .$rows[$password]. '</div>' ;
}

It has nothing to do with the table you created above that. What i would do is make a nice list.

 

while ($rows = mysql_fetch_assoc($sql)){
echo <ul class="profilelist">
echo '<li id="positionid">' .$rows[$id]. '</li>' ;
echo '<li id="positionfname">' .$rows[$fname]. '</li>' ;
echo '<li id="positionlname">' .$rows[$lname]. '</li>' ;
echo '<li id="positionlogin">' .$rows[$login]. '</li>';
echo  '<li id="positionpassword">' .$rows[$password]. '</li>' ;
echo </ul>
}

 

If you mean with it all appears on one line in your source code..? you  a newline character  \n withing double quotes  "\n"

 

Apart from your question. Keep in mind that if you hashed the password (i hope you do!instead of storing it in plain text) there is no use in outputting the password to the user. 

abrahamgarcia27 Member

abrahamgarcia27

Posted
  • Author
Posted

This query is basically for the admin control panel in order for him to see all the users that are enrolled and there he can click a link to edit the user which i haven't gotten to that part. The password is hashed, but i also wanted to pull the password as normal text. The query that i am doing show as the picture attached below. I want it to after every user it skips a line.

 

[attachment deleted by admin]

cssfreakie Regular Member

cssfreakie

Posted
Posted

could you run that page, than right click view source and copy paste that here. HAppy to take a look at that. Right now, I am pretty sure your use of position absolute it screwing things up. Did you try out the list btw?

cssfreakie Regular Member

cssfreakie

Posted
Posted

well in a nutshell the absolute positioning will place all items on top of each other the way you used it now. A much better approach is the use of an unordered list.

 

have a look at the code i provided at the bottom and run it. Not only do you need les mark up/css it much easier to read through the source code.

Note though i did not mess with the header. you may do that your self to make it picture perfect (get rid of the table or make everything a table) but you'll get the idea

 

The only thing you need to do when querying a database is to put the values in a list like this

 

      <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>

Also keep in mind that #id's can only be used 1 time  I onticed in your code you use the same Id multiple time that will produces weird stuff in some browsers

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View Users</title>
<link href="loginmodule.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 20px 10px 0px;
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: #99CC00;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0; padding:0;}
#navigation li {list-style: none;}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(pacificbasintest/images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}


td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(pacificbasintest/images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(pacificbasintest/images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/* general style */
.list{
    margin:0;
    padding:0;
        width:840px;
}
.list li{

    list-style: none;
    margin:2px 0;
    overflow:hidden;
    border-bottom:1px solid #eee;
}
.entries span{
    display:block;
    width:155px; /* (~width of list) / 5 keep in mind the boxmodel*/
    float:left;
    padding-left:12px;
    border-right:1px solid #eee;
    line-height: 30px;
    height:30px;
}
/* entries */


</style>
</head>
<body>

<table id="mytable" cellspacing="0" summary="User Table">
<caption>Pacific Basin Users </caption>
  <tr>
    <th width="150" class="nobg" scope="col" abbr="Configurations">User ID</th>

    <th width="150" scope="col" abbr="fname">First Name</th>
    <th width="150" scope="col" abbr="lname">Last Name</th>
<th width="150" scope="col" abbr="login">Login</th>
    <th width="150" scope="col" abbr="passwd">Password</th>
  </tr>
<!-- i removed a tr -->
</table>


    <ul class="list">
        <!-- each user has it's own <li>  -->
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
    </ul>
</body>
</html>

cssfreakie Regular Member

cssfreakie

Posted
Posted

-edit: I was distracted, so here is a working example without the use of tables and without loads of css (including a heading)

The extra classes are not needed in this example but allow to style each collumn.

 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View Users</title>
<link href="loginmodule.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 20px 10px 0px;
}

/* general style */
.list{
    margin:0;
    padding:0;
        width:840px;
}
.list li{

    list-style: none;
    margin:2px 0;
    overflow:hidden;
    border-bottom:1px solid #eee;
}
.entries span, .heading span{
    display:block;
    width:155px; /* (~width of list) / 5 keep in mind the boxmodel*/
    float:left;
    padding-left:12px;
    border-right:1px solid #eee;
    line-height: 30px;
    height:30px;
}
.heading span{
    background: #CAE8EA;
}
/* entries */


</style>
</head>
<body>

    <ul class="list">
        <li class="heading">
            <span class="id">ID</span>
            <span class="firstname">FIRST NAME</span>
            <span class="lastname">LAST NAME</span>
            <span class="login">LOGIN</span>
            <span class="password">PASSWORD</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
        <li class="entries">
            <span class="id">9</span>
            <span class="firstname">John</span>
            <span class="lastname">Miller</span>
            <span class="login">fatmonkeys</span>
            <span class="password">hfhfhfhf</span>
        </li>
    </ul>
</body>
</html>

abrahamgarcia27 Member

abrahamgarcia27

Posted
  • Author
Posted (edited)

i am still having some trouble. The example you sent me was great, but when i try to insert the classes inside php i get errors. I am sorry i am trying to learn to code. This is what i have without getting errors

 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View Users</title>
<link href="loginmodule.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 20px 10px 0px;
}

/* general style */
.list{
    margin:0;
    padding:0;
        width:840px;
}
.list li{

    list-style: none;
    margin:2px 0;
    overflow:hidden;
    border-bottom:1px solid #eee;
}
.entries span, .heading span{
    display:block;
    width:155px; /* (~width of list) / 5 keep in mind the boxmodel*/
    float:left;
    padding-left:12px;
    border-right:1px solid #eee;
    line-height: 30px;
    height:30px;
}
.heading span{
    background: #CAE8EA;
}
/* entries */



</style>
</head>
<body>
<ul class="list">
<li class="heading">
            <span class="id">ID</span>
            <span class="firstname">FIRST NAME</span>
            <span class="lastname">LAST NAME</span>
            <span class="login">LOGIN</span>
            <span class="password">PASSWORD</span>
        </li>
        </ul>
       

    <?php


mysql_connect("xxxx", "xxx", "xxxx");
mysql_select_db("pacificbasintest");

$sql = mysql_query("SELECT * FROM newUsers2 ORDER BY member_id ASC");

$id = 'member_id';
$fname = 'firstname';
$lname = 'lastname';
$login = 'login';
$password = 'passwd';

while ($rows = mysql_fetch_assoc($sql)){

echo '<span class="id">' .$rows[$id]. '</span>' ;
echo '<span class="firstname">' .$rows[$fname]. '</span>' ;
echo '<span class="lastname">' .$rows[$lname]. '</span>' ;
echo '<span class="login">' .$rows[$login]. '</span>';
echo  '<span class="password">' .$rows[$password]. '</span>' ;

}


   
?>



   
</body>
</html>
Edited by ignace
abrahamgarcia27 Member

abrahamgarcia27

Posted
  • Author
Posted

i got it to work with this code, but its repeating the heading. How could i do it so it doesn't repeat it?

 

 $sql = mysql_query("SELECT * FROM newUsers2 ORDER BY member_id ASC");

$id = 'member_id';
$fname = 'firstname';
$lname = 'lastname';
$login = 'login';
$password = 'passwd';

while ($rows = mysql_fetch_assoc($sql)){
echo '<ul class="list">' ;
echo  '<li class="heading">';
echo '<span class="id">ID </span>' ;
echo '<span class="firstname">FIRST NAME </span>' ;
echo '<span class="lastname">LAST NAME </span>' ;
echo '<span class="login">LOGIN </span>' ;
echo '<span class="password">PASSWORD </span>';  
echo '</li>' ;  
echo '<li class="entries">' ;
echo '<span class="id">' .$rows[$id]. '</span>' ;
echo '<span class="firstname">' .$rows[$fname]. '</span>' ;
echo '<span class="lastname">' .$rows[$lname]. '</span>' ;
echo '<span class= "login">' .$rows[$login]. '</span>';
echo  '<span class="password">' .$rows[$password]. '</span>' ;
echo '</li>' ;
echo '</ul>' ;
}	    
?>    
</body>
</html>

 

 

 

[attachment deleted by admin]

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.

×
 Share
Go to topic listing
×
×
  • 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.