Web Design Forum: FizixRichard - Viewing Profile - Web Design Forum

I work on iPhone/iPad and Android apps so by all means drop me a PM if you want to discuss any potential collaborations.

spartan sean, on 14 February 2012 - 03:57 PM, said:

Yes, if the element a unique class name and you create a CSS class for it then you're style will affect only that element.

If you find that the class affects all items you're probably assigning the class name to the parent item rather than the individual element.

Thats quite simple to do actually.

The easy way:

The blue line is just a background image.

The menu links are just a CSS formatted list. A quick look at their code reveals the normal way of doing these things:

<ul class='menu clearAfter'>
   <li class='work'><span>Work</span></li>
   <li class='print'><a href="http://www.alessandrogiammaria.com/print"><span>print</span></a></li>
   <li class='web'><a href="http://www.alessandrogiammaria.com/web"><span>web</span></a></li>
   <li class='logo sel'><a href="http://www.alessandrogiammaria.com/logo"><span>logo</span></a></li>
</ul>

As you can see, its simply an unordered list, each LI tag contains a relevant page link. Everything else is done via CSS.



The CSS for the menu UL

ul.menu 
{
  padding:0;
  width: 235px; 
  list-style-type:none;
  clear: both;
  float: right
}

Basically they have set the padding and width, and set the list style so that the bullets are invisible.



For the links themselves (the LI and the A's)

.menu li { width: 234px; height: 65px; margin-top: -10px; }

.menu a {
   display:block;
   height: 65px; width: 234px;
   background-position:0 0px;
   text-indent:-9999px;
  background: url(../img/menu.png) no-repeat;
}

.menu li is setting the LI's so a specific height and width and setting a margin-top offset

.menu a is setting the link style, indenting the text off the screen, setting the background image position and setting a background image.

.menu .print a { background-position: 0px -65px; }
.menu .print a:hover, .menu .print.sel a { background-position: -233px -65px; }

For each link they are setting the background position so that the "banner" is hidden (moving the background image so that the off state of the image is visible), on hover they are moving the background image so that the on state is visible.

The image would basically be a regular image with the on and off states side by side (either next to each other (horizontal) or above/below each other (vertically).

Then using CSS moving that image so the required "state" is visible (on or off).


That's basically it.


So to emulate that:

1. Create an unordered list containing your links, you can have a background image set to the container DIV so there is an image behind/around the menu.

2. Use CSS to make the list appear as rows (without the bullet)

3. Create a background image for the links (i.e. the banner thing they have, is just a background image; either as two states (on/off) or single state (on)

4. Create some CSS for each link that moves the background image as appropriate (so move it so the offset brings the on/off states in and out of focus as required or if single state so that the image is "on screen" or "off screen" as required.

Right, here goes.

The reason I brought up learning about Joins was because different types of join achieve different things; for example left and right joins.

Let's say you are trying to retrieve a forum thread:

thread table, post table, user table.

If you want to return every post for a given threadid, regardless of whether a user record exists, go left join. If you want to ignore any posts that don't have a valid user record (i.e. the user has been deleted) use right join (which forces that join to return a result to be valid).

Well thats not entirely true, but it's effectively what you get.

A better explanation of inner and outer / left and right joins, is that it defines the direction you are searching the DB in.

As in, a LEFT JOIN will show all records from the left table regardless of whether there are matching tables records in the right table.

RIGHT JOIN does the same, but in the opposite direction.

Anyway, in your context I'd simply use a sequence of left joins. This may not be the BEST method as I've kept it simple, but its a working method that is easy to read:


The query would look something like this:

SELECT messages.*, users.*, employers.*, jobseekers.* FROM messages LEFT JOIN users ON users.userid = messages.senderid LEFT JOIN employers ON employers.empid = users.userid LEFT JOIN jobseekers ON jobseekers.jsid = users.userid WHERE messages.recipientid='2'

First, I've selected all 4 tables, all fields; which means you could get "field conflicts" so its best to explicitly state the fields you need.

Also, you should always state the table before the field when using joins, to prevent confusion. Like users.userid and jobseekers.jsid as opposed to userid and jsid.


We select from messages where messages.recipientid='whatever_the_id_is'

In the middle we do 3 left joins.

LEFT JOIN 1 selects any records from users where users.userid = messages.senderid (regardless of whether a user record exists for that senderid, changing this to a right join will fail the query if the user doesn't exist)

LEFT JOIN 2 select any records from employers where employers.empid = users.userid (this will have to be a left join as a user could be an employer or jobseeker)

LEFT JOIN 3 selects any records from jobseekers where jobseekers.jsid = users.userid (this will have to be a left join as a user could be an employer or jobseeker)


Then on your display code (where you display the message), you would use logic there to parse the data and decide how and what to display.

AdamConder, on 13 February 2012 - 01:44 PM, said:

I posted that link as it contains information on doing complex joins and performing joins on multiple tables.

I'm sorry I didn't figure out the solution for you, I normally do but didn't have time but wanted to help in some way. I don't think there is any need for you to be narky about it.

Anyway maybe if you post up your database tables I'll give it a crack.