Hey all, I'm a noov and I got a question. I'm experimenting with using borders in conjunction with the link:hover pseudo-class to make neato looking menus. I'm having a little trouble tho... when the border appears it makes the text within the border move, and I don't want that. Anyone know a way around this? Sketchy description I know, go to my site at <!-- w --><a class="postlink" href="http://www.geocities.com/spudly_nexus/index.htm">www.geocities.com/spudly_nexus/index.htm</a><!-- w --> to see what I mean. Any input at all is appreciated. The site is really just a template at the moment, so please excuse it's crudeness.
Thanks.The text is shifting around because when you hover over the link, the border appears where there was no border before, thus shoving everything around to make room for it. If you can, add a border to the normal state of the link, coloring it the same as your background color so it blends in. Then, on :hover, change the color.What you could do instead, is to have some padding on the link, then with :hover remove the padding and add the border, then you don't have to worry about matching the colour of the border to whatever is behind it.
Edit: Some things I forgot.
Don't use tables for layout.
Don't put block level elements (eg. <hn>) inside inline elements (eg. <a>).
Don't use depreciated attributes (eg. border).
The headings on your page don't make any sense. You have an <h1> then you jump straight to <h4> and miss out <h2-3>. Plus, the <h4> headings you have used aren't actually headings, it looks like you're just using them for font effects.What you could do instead, is to have some padding on the link, then with :hover remove the padding and add the border, then you don't have to worry about matching the colour of the border to whatever is behind it.
Good idea. I'll try that.
Don't use tables for layout.
I thought using tables for layout was a good idea. Why would I not want to do that?
The headings on your page don't make any sense. You have an <h1> then you jump straight to <h4> and miss out <h2-3>. Plus, the <h4> headings you have used aren't actually headings, it looks like you're just using them for font effects.
I had no use for <h2-3>. I could have used a <div> or <p> element in place of h4, but I chose to use a header element because it seemed to fit the purpose better. True that it wasn't necessary to have a block level element, if that's what you're arguing.
Thanks for the replies guys, like I said, any input is appreciated.
Originally posted by Spudly
I thought using tables for layout was a good idea. Why would I not want to do that?For tabular data (e.g., spreadsheets, calendars) they're excellent. For anything else, such as a page layout: horrible. See: <http://www.hotdesign.com/seybold/>.I fixed the page; used padding to compensate for the border, (really cool idea btw) and removed the <h4> from within the table. I still don't understand why I wouldn't want to use tables for page formatting. In this instance in particular a table seemed the best course of action. For columns of formatted text, it's perfect. The table cells hold the text where I want it in relation to the other cells, which leaves me with the simple task of putting the table where I want it. If that makes sense.
<!-- m --><a class="postlink" href="http://www.geocities.com/spudly_nexus">http://www.geocities.com/spudly_nexus</a><!-- m -->
if you want to check it out. Could be a little prettier, but at least it's a lot cleaner. Dunno if I'll ever actually complete the site that this page would be the main hub for, but it's good practice anyway.
What would be better for me to learn next, server scripting such as ASP and SQL, or XML? Seems to me ASP and SQL coders are in higher demand. I've got some c++ experience under my belt, so I'm sure I can handle it...
Thanks!Originally posted by Spudly
What would be better for me to learn nextProper XHTML and CSS.To be a little more clear: Tables were not intended to be used for controlling layout. It was an early way of satisfying the desire to have pages with a complex arrangements. CSS was introduced to do the job properly, so that layout could be controlled (and updated) without affecting the content (HTML+text). Tables also take up a little more code than CSS-positioned divs. In my opinion, it's not critical, but I definitely plan on making any future pages CSS and xhtml compliant to avoid any issues down the road and make changes easier.Proper XHTML and CSS.
Ouch. You are right though, I could use some more practice in XHTML and CSS. I think that's all I really need though is practice. I'll get better through time, but in the meantime I want to learn some marketable skills so I can pay the bills.
I see your point about using tables. With CSS in the picture, tables are more work than you really need to do for the sake of text formatting.
Once again thank you for all your input.Originally posted by Spudly
I'll get better through time, but in the meantime I want to learn some marketable skills so I can pay the bills. Well last I heard valid CSS and (X)HTML are very marketable skills. I know allot of people who would pay BIG BUCKS to have a web site which is valid. Lots of people don't even know how to code let alone make a valid web site. If I were you I would try learning CSS first.
Well, I decided to go ahead and finish making my CSS site. I'm attempting to do a professional job, one that I would be proud to offer an employer. I'll be updating it over the next couple days until it's complete. To that end any feedback anyone can offer is very much appreciated a lot.
So, I'm going to strike out with my own answer to this question, but I'm interested in what you folks have to say about the problem: If using a table for the purposes of the menu I created is bad form, what would you recommend doing instead? Create some CSS divs with positioning paramaters? What are your thoughts on the menu itself?
the site is still at
<!-- m --><a class="postlink" href="http://www.geocities.com/spudly_nexus">http://www.geocities.com/spudly_nexus</a><!-- m -->
Thanks!Since a menu is a list of links, you should use an unordered list for the markup. Tables to layout anything other than tabular data is wrong.
Thanks.The text is shifting around because when you hover over the link, the border appears where there was no border before, thus shoving everything around to make room for it. If you can, add a border to the normal state of the link, coloring it the same as your background color so it blends in. Then, on :hover, change the color.What you could do instead, is to have some padding on the link, then with :hover remove the padding and add the border, then you don't have to worry about matching the colour of the border to whatever is behind it.
Edit: Some things I forgot.
Don't use tables for layout.
Don't put block level elements (eg. <hn>) inside inline elements (eg. <a>).
Don't use depreciated attributes (eg. border).
The headings on your page don't make any sense. You have an <h1> then you jump straight to <h4> and miss out <h2-3>. Plus, the <h4> headings you have used aren't actually headings, it looks like you're just using them for font effects.What you could do instead, is to have some padding on the link, then with :hover remove the padding and add the border, then you don't have to worry about matching the colour of the border to whatever is behind it.
Good idea. I'll try that.
Don't use tables for layout.
I thought using tables for layout was a good idea. Why would I not want to do that?
The headings on your page don't make any sense. You have an <h1> then you jump straight to <h4> and miss out <h2-3>. Plus, the <h4> headings you have used aren't actually headings, it looks like you're just using them for font effects.
I had no use for <h2-3>. I could have used a <div> or <p> element in place of h4, but I chose to use a header element because it seemed to fit the purpose better. True that it wasn't necessary to have a block level element, if that's what you're arguing.
Thanks for the replies guys, like I said, any input is appreciated.
Originally posted by Spudly I thought using tables for layout was a good idea. Why would I not want to do that?For tabular data (e.g., spreadsheets, calendars) they're excellent. For anything else, such as a page layout: horrible. See: <http://www.hotdesign.com/seybold/>.I fixed the page; used padding to compensate for the border, (really cool idea btw) and removed the <h4> from within the table. I still don't understand why I wouldn't want to use tables for page formatting. In this instance in particular a table seemed the best course of action. For columns of formatted text, it's perfect. The table cells hold the text where I want it in relation to the other cells, which leaves me with the simple task of putting the table where I want it. If that makes sense.
<!-- m --><a class="postlink" href="http://www.geocities.com/spudly_nexus">http://www.geocities.com/spudly_nexus</a><!-- m -->
if you want to check it out. Could be a little prettier, but at least it's a lot cleaner. Dunno if I'll ever actually complete the site that this page would be the main hub for, but it's good practice anyway.
What would be better for me to learn next, server scripting such as ASP and SQL, or XML? Seems to me ASP and SQL coders are in higher demand. I've got some c++ experience under my belt, so I'm sure I can handle it...
Thanks!Originally posted by Spudly
What would be better for me to learn nextProper XHTML and CSS.To be a little more clear: Tables were not intended to be used for controlling layout. It was an early way of satisfying the desire to have pages with a complex arrangements. CSS was introduced to do the job properly, so that layout could be controlled (and updated) without affecting the content (HTML+text). Tables also take up a little more code than CSS-positioned divs. In my opinion, it's not critical, but I definitely plan on making any future pages CSS and xhtml compliant to avoid any issues down the road and make changes easier.Proper XHTML and CSS.
Ouch. You are right though, I could use some more practice in XHTML and CSS. I think that's all I really need though is practice. I'll get better through time, but in the meantime I want to learn some marketable skills so I can pay the bills.
I see your point about using tables. With CSS in the picture, tables are more work than you really need to do for the sake of text formatting.
Once again thank you for all your input.
Originally posted by Spudly I'll get better through time, but in the meantime I want to learn some marketable skills so I can pay the bills. Well last I heard valid CSS and (X)HTML are very marketable skills. I know allot of people who would pay BIG BUCKS to have a web site which is valid. Lots of people don't even know how to code let alone make a valid web site. If I were you I would try learning CSS first.
Well, I decided to go ahead and finish making my CSS site. I'm attempting to do a professional job, one that I would be proud to offer an employer. I'll be updating it over the next couple days until it's complete. To that end any feedback anyone can offer is very much appreciated a lot. So, I'm going to strike out with my own answer to this question, but I'm interested in what you folks have to say about the problem: If using a table for the purposes of the menu I created is bad form, what would you recommend doing instead? Create some CSS divs with positioning paramaters? What are your thoughts on the menu itself?
the site is still at
<!-- m --><a class="postlink" href="http://www.geocities.com/spudly_nexus">http://www.geocities.com/spudly_nexus</a><!-- m -->
Thanks!Since a menu is a list of links, you should use an unordered list for the markup. Tables to layout anything other than tabular data is wrong.