Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › 2 Borders ?

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 25, 2010 at 8:51 pm #29728
    TheN00b
    Participant

    Hi Guys

    Is it possible to get two borders around a single div ? say one red and one blue ?

    I don’t mind if it’s HTML5 and CSS3 !

    I would greatly appreciate any help.

    Thank You.

    July 26, 2010 at 2:19 am #80367
    limenet
    Participant

    No, you can’t use two borders around one div, but you can use the "outline" property (together with the border), which creates something similar to a border, but is not always the best solution. More Infos about "outline"

    July 26, 2010 at 8:49 pm #80435
    wswingle
    Member

    It can be done with CSS alone without the using border-image properties. Checkhttp://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ for more info on how-to. As long as the browser supports :after and :before pseudo elements it should work fine.

    Wayne

    July 27, 2010 at 8:31 am #80479
    TheN00b
    Participant

    Can it be done with padding ?

    i.e. make it look like it is a double border .. where in fact it is a single border with 1 pixel padding ?

    If this can be done ? How does one go about doing it ?

    Thanks

    July 27, 2010 at 3:11 pm #80485
    TheN00b
    Participant

    Hi Guys

    Ok Look here. I have managed to get the effect I want, but with two divs. Is there a way to get that same effect with a single div ?

    If not .. then no problems .. but I just wanted my code to be as small as possible.

    Can someone tell me why the bottom border of the post thumbnails is not 1 px like it should be !! I can’t figure it out.

    Also I’m using the 960 grid system there. can someone tell me how I can get the main sidebar box (on the right) to reach the white box ?

    Thank You.

    July 27, 2010 at 3:22 pm #80487
    virtual
    Participant

    The extra gap under the image is coming from the line height you gave to the body tag. Just add line-height:0 to #post .pic

    July 27, 2010 at 3:43 pm #80490
    TheN00b
    Participant

    Thank You Virtual.

    That did the trick with the 1px border issue.

    What about the other issue ? How do I get the sidebar to touch the main content box ?

    Thanks

    July 27, 2010 at 3:59 pm #80491
    virtual
    Participant

    There are margins on the content grid 8 and the sidebar grid 4 which are keeping them apart.

    July 27, 2010 at 4:34 pm #80495
    TheDoc
    Member

    You don’t need to wrap the images in divs, that is just adding extra markup. Do something like this:

    Code:
    img.stylename {
    background: #ffffff;
    border:1px solid #CFCFCF;
    float:left;
    padding:1px;
    margin-right:15px;
    }
    July 27, 2010 at 5:38 pm #80500
    tommer
    Participant
    Quote:
    Can it be done with padding ?

    i.e. make it look like it is a double border .. where in fact it is a single border with 1 pixel padding ?

    If this can be done ? How does one go about doing it ?

    Thanks

    I’m pretty new at this, – – but here’s some code that accomplishes a double-border the way it sounds like you’re trying to do it, – – on this particular one I made a 2-pixel gold border (actually, padding) surround my image with a 4-pixel maroon border surrounding that.

    I may be doing it in a primitive fashion here, – – I don’t even know, – – but it does work.

    Here’s my html

    <div><a href="MB102_101.JPG"><img id="div102101" src="MB102_101.JPG" style="background-color: #ffcc66" alt="view"></a></div>

    And here’s my corresponding CSS

    #div102101 { border-width: 4px; border-style: solid; border-

    color: #993300; padding: 2px; position: absolute; left: 62px;

    top: 40px; width: 246px; height: 166px }

    The in-line style back-ground color in my html becomes the inside (one) of the two borders, – – as padding . . .

    July 28, 2010 at 2:36 am #80519
    TheDoc
    Member

    tommer, that’s not a bad solution, but the one I provide above is a lot cleaner and semantic. Cheers!

    July 28, 2010 at 5:48 am #80533
    TheN00b
    Participant

    Thank You TheDoc

    Your solution to the border around the images worked wonderfully. Is there a solution to the same effect for the border around each post ?

    Also can you please tell me how I can extend the footer to the width of the page ? bear in mind that I am using the 960 grid system.

    Thank You.

    July 28, 2010 at 6:28 am #80535
    tommer
    Participant
    "TheDoc" wrote:
    tommer, that’s not a bad solution, but the one I provide above is a lot cleaner and semantic. Cheers!

    I don’t doubt that at all, Doc, – – just throwin’ in my one cent . . . :lol:

    July 28, 2010 at 11:17 am #80583
    virtual
    Participant

    Put the footer outside the container div to get full width like the topBar.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.