SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do I make this table with HTML?

    How do I duplicate this in HTML? I want to add the bbcode to my forum for the off topic. Its not working right.

    Exmaple:

    Off Topic:

    I want to make this with HTML


    I tried but all I can make is a table with two lines, and it doesn't look the same.

    Thanks.
    Last edited by n3v3rl4nd; Mar 15, 2007 at 09:34.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What code are you trying to use?

    (Waiting on a staff member to approve your .jpg file)

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can use a paragraph.

    HTML Code:
    <p class="offtopic">Off Topic:<br><br>
    I want to make this with HTML</p>
    Then in the CSS:
    Code:
    p.offtopic {
      border:3px double yellow;
      padding:20px;
      font:0.8em Verdana, sans-serif;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you want to accomplish this with a table use this

    Code:
    td.offtopic{
       border-collapse:collapse
    }
    and that should show the border of the table sell as a solid border.

    However, it would be better to use a div or paragraph to accomplish this the way Raffles suggests.
    Robust, Scalable, Custom Ecommerce Solution

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think I can use CSS I am trying to add this as a custom bbcode from the cp of vbulletin. So people can type
    Off Topic:

    some text
    on my forum and it makes that box like this website does.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you look at the source, you'll see the box is a div with class "sepquote". I'm pretty sure you could do it with a paragraph and then add the relevant CSS to the template's main stylesheet. And if for whatever reason this isn't possible, there are still inline styles:

    HTML Code:
    <div style="border:3px double yellow; padding:20px; font:0.8em Verdana, sans-serif;">Off Topic:<br><br>eoifbnioasnb</div>

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know you can add CSS to the main template from the admin cp, but I don't know if it will work for custom bbcode. I will ask on vb website.

    I had to modify it a little bit because I wanted the words "off topic" to be smaller then the actual text from the post. Can you check and make sure its still correct. I'm not sure about all the standards and proper ways to do things with web pages. I am only a windows programmer.

    Code:
    <html>
    <head><title></title></head>
    <body>
    <div style="border:1px double orange; padding:20px; font:0.8em Verdana;"><font size="1px">Off 
    
    Topic:</font><br><br>This is the real text.</div>
    </body>
    </html>

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    What code are you trying to use?

    (Waiting on a staff member to approve your .jpg file)
    I dont remember what the code was. It didnt work so I deleted it. But the images shows what it did.

    Its working now. As long as my modifications are going to work on all the browsers.

    Here is my final code

    Code:
    <html>
    <head><title></title></head>
    <body>
    <div style="border:1px double orange; padding:20px; Verdana;"><font size="1px">Off Topic:</font><br><br>This is the real text.</div>
    </body>
    </html>
    What does the double word mean? And I took out some san serf font and added a font tag. I think it will work.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It means you're using a double border.

    That style rule is also invalid. Try this instead:
    Code:
    border: 1px double orange; padding: 20px; font-family: Verdana, sans-serif;
    Then in your HTML, add a span around the words "Off Topic" and style it with your font-size setting:
    HTML Code:
    <span class="off-topic" style="font-size: 1px;">Off Topic: </span>
    (This also allows you to get rid of the depreciated font tags.)

    Oh, and don't forget to use a proper and valid DOCTYPE and call your CSS from an external stylesheet instead of in-lining it.

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That code doesnt work can you please post the exact code that goes in the additional css box, and the code that goes in the bbcode manager replacement box.

    it only works when i use the inline style.


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
  •