CSS help on this website.

Discussion in 'Web Design and Development' started by Got Josh?, Jan 11, 2010.

  1. Got Josh? macrumors member

    Joined:
    Mar 27, 2009
    #1
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I'm seeing a lot of br tags in there. Usually that means you're not appropriately using CSS. The br tag should not be used for formatting. You also shouldn't have an empty div simply to add that border at the bottom of each item. Using border-bottom on the #magazine part does just fine. Also you have item with an id of magazine. That's invalid, a id must be unique on the page. Change it to a class instead. So get rid of the extra empty tags you have and use CSS to accommodate the design. I was able to use Firebug to achieve the same design while removing that extra stuff.

    I'm not sure why you're seeing it fine on Firefox Mac, because every browser I try (Firefox, IE8, Safari, Opera) from Windows shows that info in the middle of the pic rather than the bottom. You may be viewing a cached version of the page or something.
     
  3. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009
    #3
    mind, copy pasting what you used to achieve the design, i can't seem to get to it... :(
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Well, it was all done from Firebug, so it doesn't really allow for copying and pasting those changes, and I couldn't save them either. Essentially though, it just involved using margin, padding, and border for the most part. Nothing fancy.
     
  5. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009
    #5
    i have been playing with it for the last three hours and i still cant get it done T__T
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    This is without tampering with any HTML, it simply trashes the junk HTML I mentioned earlier, and you should still get rid of it. I commented parts I added or modified.
    Code:
    #magazine {
    	 width: 180px; float: left; margin: 5px 5px 5px 5px;
    	 border-bottom: 1px solid #D8D8D8;/*new*/
    	 text-align: center; /*new*/
    }
    #magazine div {/*new*/
    	text-align: center;
    }
    #magazine h2 {
    	font-size: 18%;
    	/*position: absolute; removed*/
    	color: #031F52;
    	margin-top: 0px;/*was 90*/
    	text-align: center;/*new*/
    }
    /* This is for empty and tags in #magazine and useless br tags*/
    .blog_line, .blog_p, .publish {/*new*/
    	display: none;
    }
    #magazine img {/*because of align="right" in html*/
    	margin: 0 auto !important;
    	float: none !important;
    }
    /* blog img revista */
    .rthumb {
    	border: solid 1px white; margin-top: 5px;
    	/*margin-right: 45px; removed*/
    }
     
  7. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009

Share This Page