Html Newbie Question about Tables and Horizontal Rule

[bennett.sean]

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>

 

[Els]

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.

 

[Toby Inkster]

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.

 

[Els]

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 ;-)