Solved

How to create a user bar with PHP and html.

Posted on 2011-03-24
12
268 Views
Last Modified: 2012-05-11
I have created a function that will retrieve user specific info depending on the ID used between the [user][/user] tags.

I have the function complete but i ran into a couple small issues.

First when I use <table> to retrieve the background image or <div> and set an ID for CSS I run into the issue where the entire width of the page the info is shown on is now clickable through the <a> tag.  I would like to know how to limit the ability to click the tag to the parameters set with the length of the image the info sits on.

Second and finally I am unable to use any general text or images or anything for that matter on the line the tag is on.  Basically the tag hogs the entire line and can only be justified as the user wishes with the bbcode align tags I have set.

The code in which I am having the issues with is below.  Any and all help is welcome and appreciated.  Thanks...

<a class='userbar' href='viewuser.php?u={$u['userid']}'><table width='310' height='10' cellpadding='1' cellspacing='0' rules='none' background='images/user_bar.jpg'><tr id='userbar'><td width='160' align='left' nowrap='nowrap'>&nbsp;".$gangPREF." {$u['username']} [{$u['userid']}]</td><td width='60' align='left'> Lvl: {$u['level']}&nbsp;</td><td width='30' align='left'>{$u['cityab']}</td>".$status."</td></tr></table></a>

To note all the PHP variables work correctly.   The <td> tags with the set widths work as desired.  The issue is everything outside of this info.  Aside from the issues explained it looks how I want.

I have a CSS file set so if I need to mod something or add something there thats fine.  Also, I used both <p> and <object> tags thinking this would confine the clickability to the image and its contents.  Thanks again.  If you need any other info let me know.
0
Comment
Question by:Johnny-Appleseed
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35211604
I'm a little confused about what you want.  You are missing a '<td>' just before 'status'.  Should be like this:
</td><td>".$status."

Open in new window

0
 

Author Comment

by:Johnny-Appleseed
ID: 35211700
The $status has that info in an if statement.  Thats temporary and I can change that later.  As I stated all the info between the <tr> and <td> tags are fine.  The bars have populated with the info I want and the spacing is perfect.

What I have is an image 310 pixles wide that has info shown on it.  User specific info like the gang the person is in, there name, there player ID, the city they are in, there level and there current status (on or offline).

I can justify the bar with bbcode using the [align] or [center] tags I created.  The issue is the entire line this user bar is echo'ed on is clickable.  I can click next to the bar (right or left) if its centered on.  I do not want this.  I want to have to click on the image only to go to the users page.  Right now as long as I click somewhere on the line where the image is shown it will activiate the link and take me to the users page.

The other issue is that I can not include any other info on this line where the user bar is shown.

This info is all user input info on there individual profiles.
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35211770
I tried it with a plain HTML table and it does the same thing unless you wrap it in a fixed width container like this:
<div style="width: 120px;">
<a href="#">
<table width='100' border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td>&nbsp;</td></tr>
</table>
</a>
</div>

Open in new window

0
 

Author Comment

by:Johnny-Appleseed
ID: 35211859
That worked great.  I changed the 120px to 310px as the table had the image set and it worked!!!

Next thing is how can I write additional text next to a bar?  Now it breaks the line after the bar.  It may be my bbcode.  I have a function bbc2html that contains the nl2br() function that I suspect is causing this.  Any ideas?
0
 

Author Comment

by:Johnny-Appleseed
ID: 35212045
Its not the nl2br() funciton.  I commented it out and still have the same result.  Any help would be appreciated.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35212102
Any text inside the div has to be small enough not to reach the end of the div when you have a fixed width.  It will wrap if it is too long.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:Johnny-Appleseed
ID: 35212127
I understand that.  What im wanting to do is add text outside of that field.

In the dialogue box where the user would edit there text it would look like this.

[user]1[/user] - Attack

Something along those lines would be used here.  But the - Attack is being broke and placed one line down.

This is normal for most things on these pages.  For instance say I wanted to place 2 images side by side. It will break and move the image one line down by default.  When I inspect element to see what coding is being inserted there is nothing.  No literal line break <br> or anything.  Just the <div> tag and next line down the text.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 35212160
Then you need to float two divs, one with the [user] info and one with the text.  Otherwise 'div's will cause the line break by themselves.  You could get around it with 'absolute' positioning but that would be another mess to deal with.  You may have to add 'position:relative;' to the 'div' that surrounds these two.
<div style="floatLleft; width: 120px;">
<a href="#">
<table width='100' border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td>&nbsp;</td></tr>
</table>
</a>
</div>
<div style="floatLleft;">
- Attack
</div>

Open in new window

0
 

Author Comment

by:Johnny-Appleseed
ID: 35212298
That destroys my use of <center> or <div align>.

The example I gave you is random.  I have no way of knowing what sort of text that will be used here for sure.  However what you gave me does do what I asked it messes other things up.

I guess what I need to do is figure out a way to encase any text used on these pages with <div> tags?  I do not want to force the float: left...  Whats my next option here?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35212451
Usually what happens is you go thru a bunch of experiments and settle on the things that are workable.  You never end with all the choices still available.  There have to be some limits for the page to work.
0
 

Author Comment

by:Johnny-Appleseed
ID: 35212464
I understand...  I am happy with the way it is now.  I would be 100% satisfied but I guess I cant always get what I want.  Thanks so much for working with me.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35212483
You're welcome, glad to help.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to count occurrences of each item in an array.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now