?
Solved

How to create a user bar with PHP and html.

Posted on 2011-03-24
12
Medium Priority
?
276 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 84

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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 84

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
 

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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 2000 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 84

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 84

Expert Comment

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

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

770 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