Html Newbie Question about Tables and Horizontal Rule

Discussion in 'HTML' started by bennett.sean@gmail.com, Dec 11, 2005.

  1. Guest

    Hi, what I want to do is as follows via html:


    -------Contact---------------------------------------------------------------------

    -------Classes---------------------------------------------------------------------

    --------Other Stuff Goes
    Here------------------------------------------------

    In otherwords,

    1) a fixed width line at the start,
    2) a title
    3) a variable width line which makes the entire thing always the same
    width in pixels

    I've tried the following unsuccessfully:

    <table>
    <tr>
    <td width = "50">
    <hr />
    </td>
    <td width = "150">
    Contact
    <hr />
    <td>
    <hr width="600"/>
    </td>
    </tr>
    </table>
     
    , Dec 11, 2005
    #1
    1. Advertising

  2. Els Guest

    wrote:

    > Hi, what I want to do is as follows via html:
    >
    > -------Contact---------------------------------------------------------------------
    >
    > -------Classes---------------------------------------------------------------------
    >
    > --------Other Stuff Goes
    > Here------------------------------------------------
    >
    > In otherwords,
    >
    > 1) a fixed width line at the start,
    > 2) a title
    > 3) a variable width line which makes the entire thing always the same
    > width in pixels
    >
    > I've tried the following unsuccessfully:
    >
    > <table>
    > <tr>
    > <td width = "50">
    > <hr />
    > </td>
    > <td width = "150">
    > Contact
    > <hr />
    > <td>
    > <hr width="600"/>
    > </td>
    > </tr>
    > </table>


    Since you're a newbie, skip learning tables and go straight to today's
    method of webdesign. No tables unless it's for real tabular data.

    If I understand correctly what you want, you'd be best off using a
    background image for the horizontal line, and making the background of
    the word a solid colour, so it will not show the background image
    behind it.

    Presuming they are subheadings:

    HTML:

    <h2><span>Contact</span></h2>
    <h2><span>Classes</span></h2>
    <h2><span>Other Stuff</span></h2>

    CSS:

    h2{
    width:800px;
    background:url(hr.gif) repeat-x center;
    padding-left:50px;
    }
    h2 span{
    color:black;
    background:white;
    }

    Personally I'd leave the width of the h2 out though, so that people on
    a narrower window will not get a horizontal scrollbar.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Dec 11, 2005
    #2
    1. Advertising

  3. Toby Inkster Guest

    Els wrote:

    > HTML:
    >
    > <h2><span>Contact</span></h2>
    > <h2><span>Classes</span></h2>
    > <h2><span>Other Stuff</span></h2>
    >
    > CSS:
    >
    > h2{
    > width:800px;
    > background:url(hr.gif) repeat-x center;
    > padding-left:50px;
    > }
    > h2 span{
    > color:black;
    > background:white;
    > }


    How about:

    <style type="text/css">
    h2 {
    background: white;
    color: black;
    border-bottom: medium solid;
    padding: 0 0 0 2em;
    margin: 1.5em 0 1em;
    font-family: "Garamond", "Georgia", "Times New Roman", serif;
    }
    h2 span {
    padding: 0 0.5em;
    position: relative;
    top: 0.5em;
    background: white;
    color: black;
    }
    </style>
    <h2><span>Contact</span></h2>
    <h2><span>Classes</span></h2>
    <h2><span>Other Stuff</span></h2>

    No background image required.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Dec 11, 2005
    #3
  4. Els Guest

    Toby Inkster wrote:

    > Els wrote:
    >
    >> HTML:
    >>
    >> <h2><span>Contact</span></h2>
    >> <h2><span>Classes</span></h2>
    >> <h2><span>Other Stuff</span></h2>
    >>
    >> CSS:
    >>
    >> h2{
    >> width:800px;
    >> background:url(hr.gif) repeat-x center;
    >> padding-left:50px;
    >> }
    >> h2 span{
    >> color:black;
    >> background:white;
    >> }

    >
    > How about:
    >
    > <style type="text/css">
    > h2 {
    > background: white;
    > color: black;
    > border-bottom: medium solid;
    > padding: 0 0 0 2em;
    > margin: 1.5em 0 1em;
    > font-family: "Garamond", "Georgia", "Times New Roman", serif;
    > }
    > h2 span {
    > padding: 0 0.5em;
    > position: relative;
    > top: 0.5em;
    > background: white;
    > color: black;
    > }
    > </style>
    > <h2><span>Contact</span></h2>
    > <h2><span>Classes</span></h2>
    > <h2><span>Other Stuff</span></h2>
    >
    > No background image required.


    True - I was just being lazy ;-)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Dec 11, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sally Thompson

    Weight of horizontal rule

    Sally Thompson, Nov 6, 2003, in forum: HTML
    Replies:
    34
    Views:
    6,108
    Mark Parnell
    Nov 11, 2003
  2. Perth
    Replies:
    9
    Views:
    566
    dorayme
    Aug 19, 2006
  3. Wombatwal

    horizontal rule and border colour

    Wombatwal, Sep 4, 2006, in forum: HTML
    Replies:
    5
    Views:
    649
    Jonathan N. Little
    Sep 4, 2006
  4. Replies:
    0
    Views:
    1,370
  5. Kevin

    Horizontal rule

    Kevin, Mar 16, 2005, in forum: ASP .Net Mobile
    Replies:
    1
    Views:
    135
    Kevin
    Mar 17, 2005
Loading...

Share This Page