Web Dev Questions That Don't Need Their Own Thread v4

[Maqtiah]

I got a class called .box which contains images that I wan't to have a dark overlay when hovered and some text in it, is this doable with CSS? (3)

[commander204]

You could use the :hover selector as well as an ::after pseudo element to darken the image upon hover.

[Maqtiah]

[QUOTE=commander204;42605877]You could use the :hover selector as well as an ::after pseudo element to darken the image upon hover.[/QUOTE]

I made it like so:

.box {
	float: left;
	width: 350px;
	height: 350px;
	background-color: #000000;
	margin: 0 33px 0 33px;
}

.box img:hover {
	opacity: 0.4;
}

But adding text, that's what I don't know. Because I wan't to have it styled accordingly to the other fonts on my site.

[Loli]

So... Quick question regarding imagewebp in PHP.

I'm running MAMP, with PHP 5.5.3 and GD 2.1.0 and yet when I run

function_exists('imagewebp');

it returns null. After doing

var_dump(gd_info());

It shows that there isn't a webp item in the array, do I need to do some funky magic with my config files?

[notgeogzm]

Could anybody recommend a particularly good book or resource for learning web design from (almost) scratch? I keep finding all these conflicting sources and I'm getting everything tangled up in my mind.

[commander204]

[QUOTE=Moofy;42605894]I made it like so:

.box {
	float: left;
	width: 350px;
	height: 350px;
	background-color: #000000;
	margin: 0 33px 0 33px;
}

.box img:hover {
	opacity: 0.4;
}

But adding text, that's what I don't know. Because I wan't to have it styled accordingly to the other fonts on my site.[/QUOTE]

You could use the content attribute in concordance with the attr() value if you need localization. (Or just want to control it more easily.)

[dinonid]

I'm new to web development, I started taking HTML 1 this year (thats how new I am). My links look really boring, what do you guys do to make them look more interesting? Do you make them in photoshop?

[01271]

Give them a bit of difference from run of the mill links and then maybe give them a previewer.

a {
text-decoration:none
color:AAAAFF;
}

+
[url]http://stackoverflow.com/questions/12229029/preview-remote-links[/url]

?

[KmartSqrl]

[QUOTE=Dinonid;42611606]I'm new to web development, I started taking HTML 1 this year (thats how new I am). My links look really boring, what do you guys do to make them look more interesting? Do you make them in photoshop?[/QUOTE]

By links do you mean pages? Or do you mean the actual...

<a href="http://google.com">Links</a>

on the page? If the former, sometimes photoshop, sometimes I just design in the browser. If the later, no, photoshop has nothing to do with making links not look boring.

[dinonid]

Yeah I meant for stuff like,

<a href="http://google.com">Links</a>

Thanks!

[Maqtiah]

[QUOTE=commander204;42609660]You could use the content attribute in concordance with the attr() value if you need localization. (Or just want to control it more easily.)[/QUOTE]

I'll look into it, I completely forgot about content. Thanks!

[inaba]

[QUOTE=Dinonid;42615633]Yeah I meant for stuff like,

<a href="http://google.com">Links</a>

Thanks![/QUOTE]

It would suck if we did it for you.
You wouldn't learn anything

[dinonid]

[QUOTE=gokiyono;42616800]It would suck if we did it for you.
You wouldn't learn anything[/QUOTE]

I know how to make links, they just look bland to me. I was curious how other people made their links look prettier. As I said earlier, I'm new and just looking for tips.

[TrinityX]

[QUOTE=Dinonid;42611606]I started taking HTML 1 this year[/QUOTE]
Why?

Learn HTML5, CSS3 and maybe jQuery/Javascript if you want to design websites, learn PHP and AJAX if you want to develop content generators or other types of backends.

[dinonid]

[QUOTE=TrinityX;42618330]Why?

Learn HTML5, CSS3 and maybe jQuery/Javascript if you want to design websites, learn PHP and AJAX if you want to develop content generators or other types of backends.[/QUOTE]

Haha, I meant HTML1 the class. We are being taught HTML5 please excuse my poor wording. I managed to make the links somewhat presentable on the page I'm working on. Tell me what you guys think [url]https://googledrive.com/host/0B4xX7psUt9TYeDNwbTUzS2s1LVk/index.html[/url]

[TrinityX]

Removed the HR's above and below the image, optimized some code, removed some unneccesary code, restyled some things, aaand i fixed it.

Protip: Don't use images for anything other than logos and images :v:

[T]http://s24.postimg.org/s2sj3gyv9/fixed_it.png[/T]

[Poo Monst3r]

So I'm trying to display a list of winners for a contest.
The Entry ID of the winners are held in a winners table. The Entry ID relates to the entrants table which hold all the basic entrant information (Name, Email, etc...).

My problem is when I echo the output in a table format, the output is different from when I output the data in just plain text. Check it out to see what I mean:

[B]In a table format:[/B]

[IMG]http://i40.tinypic.com/11jod9z.png[/IMG]

[B]And the output:[/B]

[URL="http://tinypic.com/?t=postupload"][IMG]http://i39.tinypic.com/md2fxg.jpg[/IMG][/URL]

[B]And then in just plain text:[/B]

[IMG]http://i40.tinypic.com/2uho6rm.png[/IMG]

[B]And the output:[/B]

[IMG]http://i40.tinypic.com/s41dt3.png[/IMG]

You can see that when the data is output in just plain text, the Round numbers line up with the winner output. However, when I use a table, for some reason the Round numbers and winner output don't match up.

Does anyone have any idea why this is happening or how I can fix it? It's so strange to me that just adding a <tr><td></td></tr> in there can somehow offput the output by what seems like an entire loop iteration.

Any help would be greatly and immensely appreciated! If you need any more info, just let me know!
Thanks!

[manolis]

[QUOTE=TrinityX;42618330]Why?

Learn HTML5, CSS3 and maybe jQuery/Javascript if you want to design websites, learn PHP and AJAX if you want to develop content generators or other types of backends.[/QUOTE]

jQuery isn't Javascript, it's a framework for JavaScript. Also, AJAX isn't back end, it's client side, and it's not its own language, so you can't really learn it.

[eternalflamez]

[QUOTE=Poo Monst3r;42619302]Snip (4 large images, text about a contest)[/QUOTE]

It'd be a lot easier if you could paste the code into [noparse]

[/noparse] tags, or paste it on pastebin if necessary.

[dinonid]

[QUOTE=TrinityX;42618999]Removed the HR's above and below the image, optimized some code, removed some unneccesary code, restyled some things, aaand i fixed it.

Protip: Don't use images for anything other than logos and images :v:

[T]http://s24.postimg.org/s2sj3gyv9/fixed_it.png[/T][/QUOTE]

I like what you did to the nav bar, how do you make it like that?

[Epiclulz762]

- snip -

[TrinityX]

[QUOTE=Dinonid;42620422]I like what you did to the nav bar, how do you make it like that?[/QUOTE]

Here's a fiddle: [url]http://jsfiddle.net/kJ6s7/1/[/url]

[editline]23rd October 2013[/editline]

[QUOTE=Coffeee;42619349]jQuery isn't Javascript, it's a framework for JavaScript. Also, AJAX isn't back end, it's client side, and it's not its own language, so you can't really learn it.[/QUOTE]

I'm aware of all this, but it's still a good practise to learn the jQuery framework, since you can do some nice things with it. If you're developing a dynamic backend it's clever to know how to use AJAX, so you should still learn how to use the AJAX functions.

[01271]

how do I make this JS work?
[url]http://jsfiddle.net/Au97n/[/url]

The goal is to put "missing" before "backpack".

[manolis]

[QUOTE=01271;42622315]how do I make this JS work?
[url]http://jsfiddle.net/Au97n/[/url]

The goal is to put "missing" before "backpack".[/QUOTE]

Do you mean like this? [IMG]http://i42.tinypic.com/24y2w7p.png[/IMG]

[lkymky]

Looking for a PHP document that can output a 4x4 semi transparent PNG (opacity based on query string given)

For use with background-image in this example...

#fuckingShit {background-image:url('theThingFacepunchFixed.php?=40');}

So I can get opacity with full browser support.

<?php
$new   = imagecreatetruecolor(320, 320);
$color = imagecolorallocatealpha($new, 0, 0, 0, 127);

imagefill($new, 0, 0, $color);
imagesavealpha($new, TRUE);
imagepng($new);
imagesavealpha($new,true);

header('Content-type: image/png');
imagepng( $new );
imagedestroy($new); 
?>

But that only gives me a PNG file with errors, also I am still a n00b so I don't quite know how to intergrate query strings into this (id like a single PHP file to make varyingly transparent png files)

[peep]

[QUOTE=01271;42622315]how do I make this JS work?
[url]http://jsfiddle.net/Au97n/[/url]

The goal is to put "missing" before "backpack".[/QUOTE]

you didnt include jquery

[editline]23rd October 2013[/editline]

[url]http://jsfiddle.net/Au97n/1/[/url]

[Epiclulz762]

- snip -

[Chizbang]

I have this Javascript script which grabs an XML file via AJAX and puts the XML data into a var named xmlData like so:

		$(document).ready(function(){
var xmlStuffs;
			$.ajax({
				url: 'http://192.168.0.7/xml/bugs.xml',
				type: 'GET',
				dataType: "xml",
				success:function(data){
					xmlStuffs = $(this);
					console.log($('<xml>').append(xmlStuffs).html());
				}


			});
});

What I really wanna do is print all the XML data in its raw form. Just every single line of the xml file logged to the console, but for some reason when I do what i do above, it does not do a thing.
Any ideas?

[lkymky]

[QUOTE=Epiclulz762;42624418]Images involving a query don't get cached, do they?[/QUOTE]
It doesn't have the query function in it yet, this is part of the help I'm asking for.

However it shouldn't matter weather or not its cached, its going to be a tiny file to be used different ways across the site. If anything is it possible to have the precompiled source point to the PHP file and the post compiled source will output a .png extention? Some sort of URL redirect or something fancy?

[Maqtiah]

[QUOTE=Dinonid;42617278]I know how to make links, they just look bland to me. I was curious how other people made their links look prettier. As I said earlier, I'm new and just looking for tips.[/QUOTE]

You can also set a pseudo class for speciel stuff like hovering over a link.

a:hover {
color: red;
text-decoration: underline;
}

[editline]24th October 2013[/editline]

I might be late, but better be sure :v: