Hi all,

I really don't want to trouble anyone here, but I've spent literally all day trying to figure out how to do some of the cool features that are on this site.

I'm quite new to web design using CSS, and am looking for some help.

First of all, I'm looking at the login Icon at the top right.

Mine is at the top left because I have no idea how vg got theirs to be at the top right like it is. But that doesn't matter so much. What I'm really interested in is how to get the icon to appear differently depending on whether or not a user is logged in. I've come to the conclusion that it is likely a java script in action that tracks the user along with a database to decide which icon to show. For example, using the view source for this page, I come across the icon somewhere near the beginning with two png to be used, but both have the style visibility: hidden and display: none properties added to them. I can only assume that something causes those things to become unhidden.

How does that work?

(I really hope someone here understands what I'm talking about lol)

Hold it there buddy, i'm posting from my Phone so i can't go into details but there is a lot more going on here then just css..
There is php and mysql involved.. Short story: the php has a login script, which checks the mysql database for the user info, if it's there, the php will tell to display other stuff then when it's not there.. For instance the login image (which by css float: right or margin-left: 980px pushing it to the right) Since php is used to create webpages dynamicly you won't be able to look at the real source code unless you have the files used by ioi to create the site..

For the .css it will probably be floating right.

To make the drop down box when you hover over is probably javascript (though I know you didn't ask that)

The rest is all done server side with php and mysql databases. The databases will hold all the user names and info and a link to where the avatar pic is uploaded, then php calls in the right details when you log in (or if not logged in gives the "login/sign-up" option)

Good luck man, this site looks like it is incredibly difficult to code.

I'd use css for that. And I'm too lazy to check what vgc uses here. JS became more common thanks to things like facebook and people don't mind using it anymore. But css should still be more accessible and faster for things like popups on hover (unless it does an ajax call for dynamic content; which is not the case in the login box though).

I use NoScript so it's easy to check, and you are right it isn't .js (the old drop downs from VGC 1.0 and 2.0 were though, so I just assumed)

I just taught myself how to do the drop down through css by looking at the code here and writing my own. Yes, I basically just taught myself how to use Unordered lists and lists, and divs.

@Nikkom
Yes, thanks. PHP appears to be an integral part of the function. Is that what PHP does? Like, checks whether things are "true" or not, and then arranges information, or sends info to other parts of the code? Looks like another long day for me.
And MySql, yeah, I figured I was going to need a database as well.
Man I don't know any of this stuff, how troublesome. I was literally bumbling my way into learning that I can't make an on-off dropmenu for logins simply through css. Lol. I literally started making the pages using tables. Then I read someone say that tables are garbage. I'm going to spend this next year just teaching myself coding.

OH, btw, I saw someone mention the use of CMS instead, like OpenCMS. Would you recommend that instead?


@TWroo, yeah the main box at the top appears to be all css.
The problem I'm having is how i the hell they lined up the login box as they did. There's links all over the place and the coding on here is very complicated to figure out. I've been copypasting the code on section at a time until an ID tag pops up wherein I will copypaste the css info for that ID, and I just can't figure out how they're getting a picture left and words below and more to the right, and then a line lol.


@Mav- think about this also. I've NEVER used the coding portion of Dreamweaver until two days ago. I literally have coding pouring out of my ears.

@Ostro- I heard Javascript isn't as good as css. Is that true?

So i spent the day installing a test server using mysql, phpmysql, apache, and php5.
Took about 4 hours to figure out all the bugs in the installation..
now i realize i have no idea what im doing with it so gunna try looking up how to make databases work.

Lol, good luck.

Did you at least get the presentation how you wanted it with css and html?

If you wanna learn all the php and sql that it takes to make your site, have fun(becuse it is fun!).
But if not, maybe you wanna take a shortcut and use some forum script or an cms that has most of the functions you need. You wont understand anything of whats happening under the hood, but it could spare you some time :)