SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box like Sitepoint

    hi there , iam interested in how did you done the boxes arround the content
    like on xxxx://articles.sitepoint.com/
    (the left content Topics)
    This Box arround that content

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The wonderful thing about the web is that you can view the code for any webpage's design, and see how some effect was achieved. Right click the page and click on "View Source" to see the HTML markup. Look in the head for the URLs of the stylesheets and find the rules associated with the boxes you like.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If you have firebug (if not download it, it's for Firefox) then you can right click an element and view the HTML up close and personal for that section and even see the CSS being applied to it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's basically a normal bordered box with this image placed absolutely over one of the corners to create the bullet effect and to rub out some of the line. The rest is just tidying up and making it fit nicely.

    Actual code:
    Code:
    #content div h3  { /* groovy floating topright headings */
      font:  normal .9em Verdana, Arial, Helvetica, sans-serif;
      height:1em;
      padding:2px 1.5em 4px .5em;
      clear: right;
      color:#99ACCA ;
      background:transparent url(/images/new/bulletr.gif) right center no-repeat;
      margin:0;
      position:absolute;
      right:-1px;
      top:-9px;
      border:0 none;
    }
    As already mentioned you can always find out how something is done by viewing the source html and CSS using Firebug or something similar.

    Here is a live example I prepared earlier as this question has been asked before.

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi pual, thanks for your reply.
    iam not so the expert with css. when i take the sample from your demo
    .box{
    width:300px;
    float:left;
    position:relative;
    margin:20px;
    border:1px solid #cad6e8;
    background:#fff;
    }
    h3.title{
    color:#99acaa;
    font-size:100%;
    position:absolute;
    top:-9px;
    margin:0;
    right:-1px;
    background:url(images/bulletr2.gif) no-repeat 100% 7px;
    padding:0 25px 0 10px;
    }
    p{margin:1em 10px 1em}


    the box will display fine. but not the h3
    could it be that the h3 tag conflicts with other tags?
    how can i say that this h3 tag is only for the box tag ?

    greetings

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The h3 element has a class of "title" applied to it so make sure you have added the class correctly.

    Then check through your stylesheet for any "global rules" that you may have set for the h3. That will be any rules in the stylesheet where you have said something like:


    h3 {float:left;margin:100px;etc........}

    That is a global rule that will affect all h3s in the page.

    After you have found all the rules that are applied to the h3 you can then cancel them out in the .title class.

    e.g.
    Code:
    h3.title{
    margin:0;
    float:none;
    }
    It is better not to set global rules for anything other than the basics (margin,padding,font etc.) otherwise you have to cancel them all out if you want something different. It all depends on the job in hand though and if you are sure an element is never to be used anywhere else you can define it globally.

    You could of course change the h3 in my example to another perhaps more suitable element for your structure as css doesn't care what an element looks like (most of the time) and you could change it to an h4 instead or whatever fits in with the logic and structure of the page.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, when i use in a blank stylesheet

    .boxes {
    BORDER-BOTTOM: #c0d0e0 1px solid; BORDER-LEFT: #c0d0e0 1px solid; PADDING-BOTTOM: 15px; MARGIN-TOP: 20px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; MARGIN-BOTTOM: 15px; BACKGROUND: #f9faf9; COLOR: #333; CLEAR: both; OVERFLOW: hidden; BORDER-TOP: #c0d0e0 1px solid; BORDER-RIGHT: #c0d0e0 1px solid; PADDING-TOP: 7px
    }


    #content DIV H3 {
    BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 4px; MARGIN: 0px;
    PADDING-LEFT: 0.5em; PADDING-RIGHT: 1.5em; FONT: 0.9em Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND: url(../images/bulletr.gif) no-repeat right center; HEIGHT: 1em; COLOR: #99acca;
    CLEAR: right; BORDER-TOP: 0px; TOP: -9px; RIGHT: -1px; BORDER-RIGHT: 0px; PADDING-TOP: 2px
    }
    #content DIV H3 IMG {
    MARGIN: -3px 0px
    }


    and in the html
    <div class="boxes">
    <h3>About the Author</h3>
    it does'nt work. the box will be shown fine. but not the bullet. did i miss something others ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Refer to my actual example as it is a stand alone example (view source) and not the sitepoint code as you don't have a structure the same as sitepooint.

    For example unless you have your example nested inside an element called #content then this rule will not work.

    Code:
    #content DIV H3 {
    If you do have #content in your page then I expect you are using the weight to over-ride previous rules but it would make more sense to define .boxes instead of div.

    Code:
    #content .boxes h3 {
    It may be better if you post all your html and css or instead provide a link to the actual page so we can debug more easily.

    As an aside don't change the case of the css rules as it is ugly and hard to read and prone to errors. Keep your rules organised and on separate lines to make debugging easier.

    e.g.
    Code:
    .box {
        width:300px;
        float:left;
        position:relative;
        margin:20px;
        border:1px solid #cad6e8;
        background:#fff;
    }
    h3.title {
        color:#99acaa;
        font-size:100&#37;;
        position:absolute;
        top:-9px;
        margin:0;
        right:-1px;
        background:url(images/bulletr2.gif) no-repeat 100% 7px;
        padding:0 25px 0 10px;
    }

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks now it works, i use a new blank stylesheet

  10. #10
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Is this technique more reliable (or less buggy) than using a standard fieldset and legend tag?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    fieldsets and legends are hard to style property in FIrefox, and getting consistant results cross-browser is extremely hard, so if you want to compare these two, then yes it's more reliable
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    And just to clarify that fieldsets and legends are only semantically correct when used for form elements and would not be correct for the box above (I'm sure you knew anyway but just in case someone else was listening in)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •