Page 2 - Bottom and right table borders not working

Dev Shed Forums Sponsor:

#16

March 20th, 2013, 03:47 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

Hi there,

Here is the HTML:

Code:

<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:

Code:

.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.

__________________
"WERE NOT WORTHY!"

"WERE NOT WORTHY!"

#17

March 20th, 2013, 06:23 PM

dsf190

Registered User

Join Date: Mar 2013

Posts: 10

Time spent in forums: 2 h 29 m 58 sec
Reputation Power: 0

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

#18

March 20th, 2013, 06:50 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

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:

Code:

.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.

#19

March 20th, 2013, 07:19 PM

dsf190

Registered User

Join Date: Mar 2013

Posts: 10

Time spent in forums: 2 h 29 m 58 sec
Reputation Power: 0

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

#20

March 20th, 2013, 11:21 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192

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"?

Quote:

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.

Quote:

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?

Quote:

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.

Quote:

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?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

Last edited by Kravvitz : March 20th, 2013 at 11:24 PM.

#21

March 21st, 2013, 01:07 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

Quote:

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!

Quote:

Originally Posted by Kravvitz

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

Indeed!

Quote:

Originally Posted by Kravvitz

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.

Quote:

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

Page 2 - Bottom and right table borders not working

Developer Shed Advertisers and Affiliates