What are you working on? v7

[antiChrist]

[QUOTE=Miljaker;35762316]What colors should I use? For the headings and menu.

[URL]http://hrvoje.microskip.com/bb/new/[/URL][/QUOTE]

Image thumbnails.

[editline]30th April 2012[/editline]

Also make the links reffer to #menu1, #menu2 etc..

[Jelly_]

Also collapse the logo text, it's wasting too much vertical space.

[Miljaker]

[QUOTE=Jelly;35767078]Also collapse the logo text, it's wasting too much vertical space.[/QUOTE]

I agree but this is how they want it.

[Streetser20]

[QUOTE=Miljaker;35767880]I agree but this is how they want it.[/QUOTE]

Can't you move it to the left (or right) and use the rest of the space for something else (e.g. menu)
Although that will probably look too crowded...

[HandsomeFrog]

I'm just starting to work on my first website. Its kind of like facepunch. A general gaming forum. I just can't think of a name.

I'm right now working on the header and getting a host and everything but I need a name before anything.

Any help?

[Miljaker]

[QUOTE=Streetser20;35771181]Can't you move it to the left (or right) and use the rest of the space for something else (e.g. menu)
Although that will probably look too crowded...[/QUOTE]

Nope they specifically said they wanted it like this.

[torekk]

[QUOTE=HandsomeFrog;35771749]I'm just starting to work on my first website. Its kind of like facepunch. A general gaming forum. I just can't think of a name.

I'm right now working on the header and getting a host and everything but I need a name before anything.

Any help?[/QUOTE]

Not to sound mean, but if you can't even think of a name, how do you think will you get people joining your gaming forum? There's already thousands of them, why would they join yours?

[Streetser20]

[QUOTE=Torekk;35772023]Not to sound mean, but if you can't even think of a name, how do you think will you get people joining your gaming forum? There's already thousands of them, why would they join yours?[/QUOTE]

Agreeing and backing up this comment, you say it's your first website - do you mean first EVER website; or just first 'real-full-blown-project' type website?
Experiment and test things out before you go ahead with buying a domain name, etc.

[HandsomeFrog]

[QUOTE=Streetser20;35772428]Agreeing and backing up this comment, you say it's your first website - do you mean first EVER website; or just first 'real-full-blown-project' type website?
Experiment and test things out before you go ahead with buying a domain name, etc.[/QUOTE]

Just first real full blown project. I've done alittle bit on websites before. and I think I've got a name now (Surgeon Gaming - We own the Scrubs) or something like that, unfortunately as I am 17 it would be a free domain (like x10 hosting).

But regardless, my question is, is it okay to take an image off of google images and make that your logo if its like a vector? Or do you have to make it?

[C:\]

After a few hours of making this:

[url]http://dl.dropbox.com/u/74957033/uploadsite/index.html[/url]

I notice it's all about 100px off.
:smack:

[swift and shift]

[QUOTE=HandsomeFrog;35772483]unfortunately as I am 17 it would be a free domain (like x10 hosting).
[/QUOTE]

i am 17

[slater]

[QUOTE=HandsomeFrog;35772483]But regardless, my question is, is it okay to take an image off of google images and make that your logo if its like a vector? Or do you have to make it?[/QUOTE]

Contact the author and tell them it's for a non-profit project. Whether they let you or not is a different story.

[douche beat]

i am 16 and i own more than 10 domain names

[Ohfoohy]

[QUOTE=douche beat;35777590]i am 16 and i own more than 10 domain names[/QUOTE]

[IMG]http://i0.kym-cdn.com/photos/images/newsfeed/000/198/020/BRTky.jpg?1320962111[/IMG]
___________________________________________________________________________________________________________________________

Trying to make myself a photography/videography portfolio. God I suck at this. Scrapping the current design and going for a darker one. Anyone have any portfolio experiences or know of any good ones? I need some ideas of how to display my work. I know someone on here was doing something for fun and using Pick's (Edwin Quast) work, but I can't remember who it was.

[highlight](User was banned for this post ("meme reply" - postal))[/highlight]

[inconspicious]

[QUOTE=swift and shift;35774581]i am 17[/QUOTE]

Oh, I feel inadaquate now.
I think I need to spend more time programming and less goofing off online.

[Kirth]

[quote]I think I need to spend more time programming and less goofing off online.[/quote]

You should get a browser plugin that prevents you from accessing any sites that waste time. Schedule your life (or your online time) a bit. This has really helped me in the long run.

[inconspicious]

[QUOTE=Kirth;35781271]You should get a browser plugin that prevents you from accessing any sites that waste time. Schedule your life (or your online time) a bit. This has really helped me in the long run.[/QUOTE]

I think my hosts file requires a few modifications.

[Miljaker]

Got sick of using excising lightboxes so I quickly made my own. A simple div that pops up with whatever content you want. Might be useful for someone.

place this in your head or js file.

<script type="text/javascript">
function lightboxshow(lbid, pwidth, pheight){
    document.getElementById(lbid).style.display = 'block';
    document.getElementById(lbid).style.width = pwidth+'px';
    document.getElementById(lbid).style.height = pheight+'px';
    var nml = (Math.round((pwidth / 2)));
    document.getElementById(lbid).style.marginLeft = "-"+nml+'px';
    var nmt = (Math.round((pheight / 2)));
    document.getElementById(lbid).style.marginTop = "-"+nmt+'px';
    document.getElementById("lightboxshade").style.display = 'block';
}

function closelightbox(){
    document.getElementById("lightboxshade").style.display = 'none';
    var amount = document.getElementsByClassName("lightbox").length;
    for(i=0;i < amount; i++){
    document.getElementsByClassName("lightbox").item(i).style.display = 'none';
    }
}
</script>

place this in your css

#lightboxshade{
 display:none;
 background: rgba(0, 0, 0, 0.9);
 position:fixed;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}

.lightbox{
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 z-index:1001;
 overflow:hidden;
}

Place the following code in your body.

<div id="lightboxshade" onclick="closelightbox()"></div>

Place the lightbox div in your body and give it the class "lightbox" and an unique id. Put whatever content you want in the div. Make as many as you want but make sure the id is unique.

Example:

<div class="lightbox" id="lb1"><img src="http://placekitten.com/500/500" width="500" height="500" /></div>

To show the lightbox place the following code in an element of your choice.

onclick="lightboxshow('[id of the lightbox to show]', [width you want the lightbox to be], [height you want the lightbox to be])"

Example:

<img src="http://placekitten.com/110/110" width="100" height="100" onclick="lightboxshow('lb1', 500, 500)"/>

Another one:

<a onclick="lightboxshow('lb2', 100, 200)" >CLICK</a>

[C:\]

[QUOTE=Miljaker;35783010]Got sick of using excising lightboxes so I quickly made my own. A simple div that pops up with whatever content you want. Might be useful for someone. [/QUOTE]

Doesn't work for me. I click the image and nothing happens.

[Miljaker]

[QUOTE=C:\;35783249]Doesn't work for me. I click the image and nothing happens.[/QUOTE]

I use it exactly like I said [URL="http://hrvoje.microskip.com/bb/"]here[/URL] and it works perfectly fine. Click on the images and you will see.
You probably made a mistake with the ids or classes.

Did you put the div id in single quotes in the onclick?

[C:\]

[QUOTE=Miljaker;35783268]I use it exactly like I said [URL="http://hrvoje.microskip.com/bb/new/#"]here[/URL] and it works perfectly fine. Click on the images and you will see.[/QUOTE]

Looks nice, I'll try again.
edit:nope

[Miljaker]

[QUOTE=C:\;35783287]Looks nice, I'll try again.
edit:nope[/QUOTE]

:/

copy paste the following code in your <head>

<script type="text/javascript">
function lightboxshow(lbid, pwidth, pheight){
	document.getElementById(lbid).style.display = 'block';
	document.getElementById(lbid).style.width = pwidth+'px';
	document.getElementById(lbid).style.height = pheight+'px';
	var nml = (Math.round((pwidth / 2)));
	document.getElementById(lbid).style.marginLeft = "-"+nml+'px';
	var nmt = (Math.round((pheight / 2)));
	document.getElementById(lbid).style.marginTop = "-"+nmt+'px';
	document.getElementById("lightboxshade").style.display = 'block';
}


function closelightbox(){
	document.getElementById("lightboxshade").style.display = 'none';
	var amount = document.getElementsByClassName("lightbox").length;
	for(i=0;i < amount; i++){
	document.getElementsByClassName("lightbox").item(i).style.display = 'none';
	}
}
</script>
<style>
#lightboxshade{
 display:none;
 background: rgba(0, 0, 0, 0.9);
 position:fixed;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}


.lightbox{
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 z-index:1001;
 overflow:hidden;
}
</style>

Then in your html copy paste this:

<div id="lightboxshade" onclick="closelightbox()"></div>

<div class="lightbox" id="lb1">YOUR CONTENT</div>

<a onclick="lightboxshow('lb1', 500, 500)" >CLICK HERE</a>

[rookwood101]

[QUOTE=Miljaker;35783374]:/

copy paste the following code in your <head>

<script type="text/javascript">
function lightboxshow(lbid, pwidth, pheight){
	document.getElementById(lbid).style.display = 'block';
	document.getElementById(lbid).style.width = pwidth+'px';
	document.getElementById(lbid).style.height = pheight+'px';
	var nml = (Math.round((pwidth / 2)));
	document.getElementById(lbid).style.marginLeft = "-"+nml+'px';
	var nmt = (Math.round((pheight / 2)));
	document.getElementById(lbid).style.marginTop = "-"+nmt+'px';
	document.getElementById("lightboxshade").style.display = 'block';
}


function closelightbox(){
	document.getElementById("lightboxshade").style.display = 'none';
	var amount = document.getElementsByClassName("lightbox").length;
	for(i=0;i < amount; i++){
	document.getElementsByClassName("lightbox").item(i).style.display = 'none';
	}
}
</script>
<style>
#lightboxshade{
 display:none;
 background: rgba(0, 0, 0, 0.9);
 position:fixed;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}


.lightbox{
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 z-index:1001;
 overflow:hidden;
}
</style>

Then in your html copy paste this:

<div id="lightboxshade" onclick="closelightbox()"></div>

<div class="lightbox" id="lb1">YOUR CONTENT</div>

<a onclick="lightboxshow('lb1', 500, 500)" >CLICK HERE</a>

[/QUOTE]

So miljaker, I was browsing your site randomly, and in the root directory I came across... Well, look for yourselves:
[URL="http://hrvoje.microskip.com/"]http://hrvoje.microskip.com/[/URL]

and I'm wondering, who the fuck is Roy?

[Miljaker]

[QUOTE=rookwood101;35783825]So miljaker, I was browsing your site randomly, and in the root directory I came across... Well, look for yourselves:
[URL]http://hrvoje.microskip.com/[/URL]

and I'm wondering, who the fuck is Roy?[/QUOTE]

Haha, Roy is one of my best friends. We hired a stripper for his 18 birthday (more then 2 years ago now) and filmed it. He lost the cd it was on so I uploaded it for him.

[jaybuz]

[QUOTE=Miljaker;35783374]:/

copy paste the following code in your <head>

- snip -

[/QUOTE]

I made it simpler for you. I was originally just giving an example of using vars to cache dom elements but I got carried away. The big ass css line is a loading gif image.

<style>
#lightbox{
	display: none;
	background: rgba(0, 0, 0, 0.8) url(data:image/gif;base64,R0lGODlhIAAgAPMAAAAAAP///zg4OHp6ekhISGRkZMjIyKioqCYmJhoaGkJCQuDg4Pr6+gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==) no-repeat 50% 50%;
	position: fixed;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0px;
	z-index: 1000;
}
#lightbox img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
}

a.lightbox img {
	cursor:pointer;
	cursor:-moz-zoom-in;
	cursor:-webkit-zoom-in;
}
</style>

<script>
(function(window, document){

	var lightbox = document.getElementById("lightbox"),
		lightboxImage = lightbox.childNodes[0];

	window.lightbox = {
	
		show: function(link){

			lightboxImage.src = link.getAttribute('href');

			if( lightboxImage.complete ) {
				complete();
			}
			else {
				lightboxImage.onload = complete;
			}
		
			lightbox.style.display = 'block';

			function complete(){
				lightboxImage.style.marginLeft = '-' + lightboxImage.width / 2;
				lightboxImage.style.marginTop = '-' + lightboxImage.height / 2;

				lightboxImage.style.display = 'block';
			}
		},
		
		close: function(){
		
			lightbox.style.display = 'none';
			lightboxImage.style.display = 'none';
			lightboxImage.src = '';
		}
	
	};
})(this, document);
</script>

Image HTML. It uses the link href for the lightbox image:

<div id="lightbox" onclick="lightbox.close()"><img src="" /></div>

<a class="lightbox" onclick="lightbox.show(this); return false" href="http://placekitten.com/500/500">
	<img src="http://placekitten.com/200/200" width="200px" height="200px">
</a>

[Miljaker]

[QUOTE=jaybuz;35785020]I made it simpler for you. I was originally just giving an example of using vars to cache dom elements but I got carried away. The big ass css line is a loading gif image.

- snip -

[/QUOTE]

How would you put different content in the lightbox besides an image? And can you explain what the disadvantage is of using my code?

[Robbi]

A website which I had as a final assignment for my introductory webdesign class:

Some of the buttons are light since I was hovering my mouse over them but the mouse wasn't captured in the print screen.

[t]http://i.imgur.com/sRETd.png[/t]

[t]http://i.imgur.com/kH6pR.png[/t]

[t]http://i.imgur.com/oaAMi.png [/t]

Is it any good? Any improvements? Any tips?

[buhbang]

[QUOTE=Robbi;35788149]A website which I had as a final assignment for my introductory webdesign class:

Some of the buttons are light since I was hovering my mouse over them but the mouse wasn't captured in the print screen.

[t]http://i.imgur.com/sRETd.png[/t]

[t]http://i.imgur.com/kH6pR.png[/t]

[t]http://i.imgur.com/oaAMi.png [/t]

Is it any good? Any improvements? Any tips?[/QUOTE]

isn't imgur banned from facepunch? anyways, looks nice but never put buttons under another button. I would rather suggest you a vertical menu or make the menu buttons smaller so they all fit in 1 row because the menu looks rather ugly when under each other going horizontally. espacially when it's gradient and you can see the dark to light

[VoHiYo]

they unbanned imgur but it might take awhile for it to stop 403ing for some people

[RidingKeys]

put this together really fast and shittily over the past few hrs. It's for an airsoft event.
[url]http://vizze.net/op/index.html[/url]