CSS Border with Text

Discussion in 'CSS' started by Abhik, Aug 20, 2011.

0
  1. #1
    Hello,
    How can I do that with CSS? I have seen this somewhere, but can't remember.

    [​IMG]
    A fluid border with a text within it.
     
    Solved! View solution.
    Abhik, Aug 20, 2011 IP
  2. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #2
    It's not that complicated, but it's an illusion.
    The text isn't actually breaking the border, but is layered on top using -margins. You have to set your text to have a background color (in this case white).

    .mybox{
    height: 100px;
    width: 200px;
    border: 1px solid #000;
    text-align:center;
    }

    .mytext{
    background: #FFF;
    margin-top: -30px; /* Or whatever you need to move it up far enough. It will depend on your font size. */
    }
     
    xira, Aug 20, 2011 IP
  3. Abhik

    Abhik ..:: The ONE ::..

    Messages:
    11,337
    Likes Received:
    606
    Best Answers:
    0
    Trophy Points:
    410
    Digital Goods:
    2
    #3
    Thanks xira,
    But, what about a box with different color than the background?
     
    Abhik, Aug 20, 2011 IP
  4. #4
    you can make this with just a single line.
    <legend>This is a Text in Border</legend>
    you can add styles in stylesheet.
     
    dplover147, Aug 20, 2011 IP
  5. Bapinder

    Bapinder Well-Known Member

    Messages:
    151
    Likes Received:
    7
    Best Answers:
    3
    Trophy Points:
    120
    #5
    Add background-color: (color); to the .mybox.

    So an example with a blue background:
    
.mybox{
background-color: #0000FF;
height: 100px;
width: 200px;
border: 1px solid #000;
text-align:center;
}

.mytext{
background: #FFF;
margin-top: -30px; /* Or whatever you need to move it up far enough. It will depend on your font size. */
}
    Code (markup):
    Or as the user said above you can use the legend tag.

    Here is an example:

    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset
     
    Bapinder, Aug 21, 2011 IP
  6. suryawl

    suryawl Peon

    Messages:
    54
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #6
    <fieldset>
    <legend>This is a text in border</legend>
    </fieldset>
     
    suryawl, Aug 21, 2011 IP
  7. Abhik

    Abhik ..:: The ONE ::..

    Messages:
    11,337
    Likes Received:
    606
    Best Answers:
    0
    Trophy Points:
    410
    Digital Goods:
    2
    #7
    Awesome!!
    How do I style the legend tag in CSS? I mean, border color, border radius and width etc?
     
    Abhik, Aug 21, 2011 IP
  8. dplover147

    dplover147 Member

    Messages:
    120
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    36
    #8
    if you want to style the border then you should style the fieldset
    an example of style are mention here.
     
    dplover147, Aug 22, 2011 IP
  9. Oweneds

    Oweneds Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ah I knew there was a tag for this type of heading!
     
    Oweneds, Aug 22, 2011 IP
  10. saadCOOLDUDE

    saadCOOLDUDE Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    <html>
    <head>
    <title>
    <style>
    .mybox{
    height: 100px;
    width: 200px;
    border: 1px solid #000;
    text-align:center;
    }

    .mytext{
    background: #FFF;
    margin-top: -30px;
    }
    </style>
    <body>
    <h1 id="mytext"> Hello Saad</h1>

    this is not working
     
    saadCOOLDUDE, Aug 22, 2011 IP
  11. hangcun

    hangcun Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    This is the same question with me , i'm a webdesigner , i usually design magento themes
     
    hangcun, Aug 23, 2011 IP
  12. markwill

    markwill Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    Its good that you are doing these changes in CSS many developers use PHTML files to make design changes.
     
    markwill, Feb 15, 2013 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Assuming it is a form -- if it's not a form you have NO BUSINESS using those tags... you know, semantic markup and all that. Suggesting fieldset and legend JUST because they want a border and offset text is some of the WORST ADVICE you could give somebody!

    Again, if you are choosing tags based on their default appearance, you are probably choosing all the wrong tags.
     
    deathshadow, Feb 15, 2013 IP