I'm just beginning my journey into the world of CSS2. I have no CSS experience other than what I've aquired today (be happy I'm trying to convert).
I've got an HTML file with the following:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD HEIGHT="17" BGCOLOR="#444444" ALIGN="center">
<A>1-800-606-6684</A><A HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</A><A HREF="employ.html">Employment Opportunities</A><A HREF="speak.html">Request A Speaker</A><A HREF="terms.html">Terms and Conditions</A></TD>
</TR>
</TABLE>
I want spacing inbetween the text menu items. I have tried several methods with the only effect creating line breaks.
The HTML doc is using a .css source file which contains properties for <A>.
I'm sure this is an easy fix... a little help here? Thanks.You mean horizontal spacing?
a+a {
margin-left: 15px;
}
The above code will cause the second, and all following <A> tags, to be pushed 15 pixels to the left.
Edit: I don't know if this will work in IE, but it should.
Originally posted by Heavy
(be happy I'm trying to convert)
I'm not only happy, I'm excited!
I'm excited as well... *jumps from foot to foot* what about junking tables?
And Jona's code is the fanciful way, but if it's not IE-compatible (a must), then just use
--in the head--
<style type="text/css">
a {
margin-left: 15px;
}
a.first {
margin-left: 0;
}
</style>
--your code, modified for XHTML, kind of--
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="17" bgcolor="#444444" align="center">
<a class="first">1-800-606-6684</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</a><a href="employ.html">Employment Opportunities</a><a href="speak.html">Request A Speaker</a><a href="terms.html">Terms and Conditions</a></td>
</tr>
</table>
or you could go "all crazy", with something like...
<style type="text/css">
#links {
border: 0;
background: #444444;
margin: auto;
border: 1px #121212;
font-family: tahoma, "arial narrow", arial, sans-serif;
padding: 3px;
}
#links a:link {
margin-left: 15px;
border-bottom: dotted 1px;
color: blue;
text-decoration: none;
}
#links a:hover {
border-bottom: solid 1px;
color: white;
}
#links a.first {
margin-left: 0;
}
#links span.phone {
color: gray;
}
</style>
<div id="links">
<span class="phone">Phone: 1-800-606-6684</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"employ.html">Employment Opportunities</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"speak.html">Request A Speaker</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"terms.html">Terms and Conditions</a>
</div>
Note: that last one i improvised some...Given it's a table layout anyway, why not just stick a between the anchors?
The card carrying CSS For Lunch Bunch (of which I'm a proud member) would readily point out that what you've got there is a list of links so it should be written as a list (ul) with styling appropriate to make it look like you want. We would also be required by the bylaws of the disorganization to refer you to the "Taming Lists" article on A List Apart and the List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) tool to help spit out some list fodder for you to work with.True, true. By the way, for an example of tamed lists, I have one on an inside joke/ side project page (aka don't ask) <!-- m --><a class="postlink" href="http://projep.t35.com/snazzyturtle">http://projep.t35.com/snazzyturtle</a><!-- m --> .
Also, I was trying to wean him away from tables, show him how much more convenient CSS is (which it is, in the long run at least).
Oh yes. CSS for lunch member right hea :-D
And that kind of kills seperation of presentation and content. The CSS solution is quite simple, anyways.Originally posted by Jona
Edit: I don't know if this will work in IE, but it should.[/font]
I didn't see anyone confirm or deny that, so I figured I'd jump in by saying no, IE does not recognize that. P.O.C.Heh, guess he's stuck with my simpleton code.
Note: I think this is my thousandth post!. Oh, who good
Originally posted by Paul Jr
I didn't see anyone confirm or deny that, so I figured I'd jump in by saying no, IE does not recognize that. P.O.C.
I rarely use IE, so I wasn't sure if it was supported - but I know it works in Mozilla. Must be CSS2.
Also, what's P.O.C.? Paranoid oyster cans?I greatly appreciate everyone's help here. There's a big complication with what I'm trying to accomplish though.
I should have mentioned that the page in question contains several images that are linked through <A HREF> tags.
When applying the CSS rule of margin-left: 15px; all linked text and images alike are affected. This screws up the page layout quite badly.
Any ideas to get the best of both worlds?CSS:
/* Compliant browsers */
.navTable a+a {
margin-left: 15px;
}
/* IE - teh suk */
.navTable a.two {
margin-left: 15px;
}
HTML:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" class="navTable">
<TR>
<TD HEIGHT="17" BGCOLOR="#444444" ALIGN="center">
<A>1-800-606-6684</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" class="two">[email protected]</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"employ.html">Employment Opportunities</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"speak.html">Request A Speaker</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"terms.html">Terms and Conditions</A>
</TD>
</TR>
</TABLE>
Also, I'm glad you're using CSS, but I just thought I'd mention that you're still using tables for the layout, you're just modifying it a little with CSS - it's a good start, but if you want to transfer all the way, it will take a bit more modification. And um, why is the phone number in an empty <A> tag?One trick for taking images out of the flow is to put them in the backgrounds.Yes, that works, then putting the text-indent to negative values.
Also, we need a good list of reasons for switching to CSS. Make it a sticky or something...Originally posted by Jona
[Also, what's P.O.C.? Paranoid oyster cans?[/font]
Piece Of Crap.
That's not what it originally was, though...Ooh. What was it originally...? P.O.S.?P.I.T.A.P.O.S.What does P.I.T.A. stand for?Okay, Paul, mind explaining the first three letters of that last one? This is getting off-topic, we better stop. (PM me or just say the whole darn thing next time! )Offtopic? Ptschh. [Scans horizon for Pyro] So, Paul, tell us.
[Sees Pyro]Offtopic?!? God forbid. Bad Jona, bad!It's kind of crude... I don't know if I should say it.
I've got an HTML file with the following:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD HEIGHT="17" BGCOLOR="#444444" ALIGN="center">
<A>1-800-606-6684</A><A HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</A><A HREF="employ.html">Employment Opportunities</A><A HREF="speak.html">Request A Speaker</A><A HREF="terms.html">Terms and Conditions</A></TD>
</TR>
</TABLE>
I want spacing inbetween the text menu items. I have tried several methods with the only effect creating line breaks.
The HTML doc is using a .css source file which contains properties for <A>.
I'm sure this is an easy fix... a little help here? Thanks.You mean horizontal spacing?
a+a {
margin-left: 15px;
}
The above code will cause the second, and all following <A> tags, to be pushed 15 pixels to the left.
Edit: I don't know if this will work in IE, but it should.
Originally posted by Heavy
(be happy I'm trying to convert)
I'm not only happy, I'm excited!
I'm excited as well... *jumps from foot to foot* what about junking tables?And Jona's code is the fanciful way, but if it's not IE-compatible (a must), then just use
--in the head--
<style type="text/css">
a {
margin-left: 15px;
}
a.first {
margin-left: 0;
}
</style>
--your code, modified for XHTML, kind of--
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="17" bgcolor="#444444" align="center">
<a class="first">1-800-606-6684</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</a><a href="employ.html">Employment Opportunities</a><a href="speak.html">Request A Speaker</a><a href="terms.html">Terms and Conditions</a></td>
</tr>
</table>
or you could go "all crazy", with something like...
<style type="text/css">
#links {
border: 0;
background: #444444;
margin: auto;
border: 1px #121212;
font-family: tahoma, "arial narrow", arial, sans-serif;
padding: 3px;
}
#links a:link {
margin-left: 15px;
border-bottom: dotted 1px;
color: blue;
text-decoration: none;
}
#links a:hover {
border-bottom: solid 1px;
color: white;
}
#links a.first {
margin-left: 0;
}
#links span.phone {
color: gray;
}
</style>
<div id="links">
<span class="phone">Phone: 1-800-606-6684</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">[email protected]</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"employ.html">Employment Opportunities</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"speak.html">Request A Speaker</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"terms.html">Terms and Conditions</a>
</div>
Note: that last one i improvised some...Given it's a table layout anyway, why not just stick a between the anchors?
The card carrying CSS For Lunch Bunch (of which I'm a proud member) would readily point out that what you've got there is a list of links so it should be written as a list (ul) with styling appropriate to make it look like you want. We would also be required by the bylaws of the disorganization to refer you to the "Taming Lists" article on A List Apart and the List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) tool to help spit out some list fodder for you to work with.True, true. By the way, for an example of tamed lists, I have one on an inside joke/ side project page (aka don't ask) <!-- m --><a class="postlink" href="http://projep.t35.com/snazzyturtle">http://projep.t35.com/snazzyturtle</a><!-- m --> .
Also, I was trying to wean him away from tables, show him how much more convenient CSS is (which it is, in the long run at least).
Oh yes. CSS for lunch member right hea :-D
And that kind of kills seperation of presentation and content. The CSS solution is quite simple, anyways.Originally posted by Jona Edit: I don't know if this will work in IE, but it should.[/font]
I didn't see anyone confirm or deny that, so I figured I'd jump in by saying no, IE does not recognize that. P.O.C.Heh, guess he's stuck with my simpleton code.
Note: I think this is my thousandth post!. Oh, who good
Originally posted by Paul Jr I didn't see anyone confirm or deny that, so I figured I'd jump in by saying no, IE does not recognize that. P.O.C.
I rarely use IE, so I wasn't sure if it was supported - but I know it works in Mozilla. Must be CSS2.
Also, what's P.O.C.? Paranoid oyster cans?I greatly appreciate everyone's help here. There's a big complication with what I'm trying to accomplish though.
I should have mentioned that the page in question contains several images that are linked through <A HREF> tags.
When applying the CSS rule of margin-left: 15px; all linked text and images alike are affected. This screws up the page layout quite badly.
Any ideas to get the best of both worlds?CSS:
/* Compliant browsers */
.navTable a+a {
margin-left: 15px;
}
/* IE - teh suk */
.navTable a.two {
margin-left: 15px;
}
HTML:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" class="navTable">
<TR>
<TD HEIGHT="17" BGCOLOR="#444444" ALIGN="center">
<A>1-800-606-6684</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" class="two">[email protected]</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"employ.html">Employment Opportunities</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"speak.html">Request A Speaker</A>
<A HREF=http://www.webdeveloper.com/forum/archive/index.php/"terms.html">Terms and Conditions</A>
</TD>
</TR>
</TABLE>
Also, I'm glad you're using CSS, but I just thought I'd mention that you're still using tables for the layout, you're just modifying it a little with CSS - it's a good start, but if you want to transfer all the way, it will take a bit more modification. And um, why is the phone number in an empty <A> tag?One trick for taking images out of the flow is to put them in the backgrounds.Yes, that works, then putting the text-indent to negative values.
Also, we need a good list of reasons for switching to CSS. Make it a sticky or something...Originally posted by Jona
[Also, what's P.O.C.? Paranoid oyster cans?[/font]
Piece Of Crap.
That's not what it originally was, though...Ooh. What was it originally...? P.O.S.?P.I.T.A.P.O.S.What does P.I.T.A. stand for?Okay, Paul, mind explaining the first three letters of that last one?
This is getting off-topic, we better stop. (PM me or just say the whole darn thing next time! )Offtopic? Ptschh. [Scans horizon for Pyro] So, Paul, tell us.[Sees Pyro]Offtopic?!? God forbid. Bad Jona, bad!It's kind of crude... I don't know if I should say it.