[Nanomech]

Hi there,

Here is the HTML:

<div class="network_status_box">
	<a href="http://www.mcrafthost.net/wp-content/uploads/2013/03/accept.png" class="imageZoom">
		<img src="" class="status_img" alt="accept" />
	</a>
	<p>All Nodes Online!</p>
</div>

<div class="network_status_box">
	<a href="http://www.mcrafthost.net/wp-content/uploads/2013/03/accept.png" class="imageZoom">
		<img src="" class="status_img" alt="accept" />
	</a>
	<p>Multicraft Server Online!</p>
</div>

You need to add your link to the src attribute for the images.

Here is the CSS:

.network_status_box
{
	border: 2px solid #8DC93E;
	background: #D6ECA6;
	width: 100%;
	text-align: center;
	padding: 20px;
	font-family: 'trebuchet ms';
	font-size: 13px;
}

.network_status_box:first-child
{
	border-bottom: none;
}

.network_status_box p
{
	margin: 5px 0px 5px 0px; 
}

.status_img
{
	width: 16px;
	height: 16px;
}

Replace that code with the <table> tag containing those elements.

Does this help? Let me know!

Regards,

Nm.

[dsf190]

That worked, thank you so much!!!
<3

One problem:
When I try to create additional boxes by just copying and pasting the code you gave me, the border gets thick where it connects to the previous box.
http://i.imgur.com/uAtmNvC.png

[Nanomech]

That's because I'm using first-child to select the first div, and then remove the border bottom.

What you can do then is, set the main network_status_box class declaration to have border: none instead. Get rid of the network_status_box:first-child declaration altogether and then set only the last div to have a border bottom. This will get you the effect you want.

Try this:

.network_status_box
{
	border: 2px solid #8DC93E;
	border-bottom: none;
	background: #D6ECA6;
	width: 100%;
	text-align: center;
	padding: 20px;
	font-family: 'trebuchet ms';
	font-size: 13px;
}

.network_status_box:nth-last-child(1)
{
	border-bottom: 2px solid #8DC93E;
}

Replace those 2 declaration blocks with these two.

Kind regards,

NM.

[dsf190]

Awesome, it's working perfectly now. Thank you so much kind sir!

[Kravvitz]

Unfortunately, :nth-last-child will not work if there are other sibling elements that follow the last element with that class. (CSS4 Selectors may offer a solution to this kind of problem.) In this case why not just use the shorter ":last-child"?

Originally Posted by dsf190

This question is still not solved, does anyone know what to do?

I'm sorry if it seemed we forgot about this. I was waiting for Nanomech to reply.

Originally Posted by Nanomech

1. border attribute set to 0 [...]

3. The use of tables.

4. The use of the <font> tag.

[...]

6. The table is using the align attribute which should be done with CSS.

I should clarify that you mean the inappropriate use of the <table> element.

Also I'd expand your first point to the width and cellpadding attributes of the <table>.

The others I saw were:

7. Improper use of the alt attribute. The text "accept" does not seem to make sense in that context.

8. Placing the text in a <p> but not the icon is inappropriate. If it is desired that the icon be above the text, there are better ways to achieve that.

9. Why is the icon in a link but not the text that follows it?

Originally Posted by Nanomech

5. The width + height attributes for the <img />'s should be done with CSS.

I disagree with this one. The point of specifying the dimensions is to save space for the image before it finishes loading. While technically they are presentational, I consider it good practice to use those HTML attributes.

Originally Posted by Nanomech

2. The use of Wordpress to build the site.

That's debatable. I'm not a particular fan of it, but think that it is not awful. It's one of the better freeware content management systems (CMS), is it not?

[Nanomech]

Originally Posted by Kravvitz

I'm sorry if it seemed we forgot about this. I was waiting for Nanomech to reply.

I'm glad you waited, it took me long enough!

Originally Posted by Kravvitz

I should clarify that you mean the inappropriate use of the <table> element.

Indeed!

Originally Posted by Kravvitz

I disagree with this one. The point of specifying the dimensions is to save space for the image before it finishes loading. While technically they are presentational, I consider it good practice to use those HTML attributes.

Ah that's very useful to know, I never set any widths or heights with HTML anymore, whereas I always used to set my images' width + height using it.

Originally Posted by Kravvitz

That's debatable. I'm not a particular fan of it, but think that it is not awful. It's one of the better freeware content management systems (CMS), is it not?

Lol . A lot (too many) people seem to think it is the dog's b*ll*cks but personally I am totally against anything which produces code for you.

I went on a 10 week college course in 'Web Design' not so long ago and we had to use Dreamweaver for it. Half an hour into the lesson I was ready to kill someone.

The whole 'click this button and drag it there' really got up my nose.

Having said that, I've started studying some VB6 and I'm using the Visual Studio Express for Desktop and I must say it is quite useful. For actual web design/development, I'd say always use a text editor, but for languages like Java, C#, VB etc I'd always use Netbeans or Visual Studio.

(Meh that was one BIG contradiction) (nevermind)

Not impressed in the slightest. Anyway, back on topic - Don't use WP or DW!!

If you want to learn languages and how to code, do it yourself. If you want a quick, easy fix with little coding, go for a CMS