Page 2 of 2 First 12
  • Jump to page:
    #16
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
  2. #17
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    10
    Rep 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
  4. #18
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
  6. #19
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    10
    Rep Power
    0
    Awesome, it's working perfectly now. Thank you so much kind sir!
  8. #20
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    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?
    Last edited by Kravvitz; March 20th, 2013 at 11:24 PM.
    Spreading knowledge, one newbie at a time.

    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).
  10. #21
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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
Page 2 of 2 First 12
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo