[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to create a user bar with PHP and html.

Posted on 2011-03-24
12
Medium Priority
?
279 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

656 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