Jump to content

Unvisited Link And Table Formatting Issues


dmorgado.design@gmail.com
 Share

Recommended Posts

Hi, please be gentle since I'm a bit of a newbie when it comes to website coding.I'm building a portfolio website for myself, however I am having 2 problems:1- In Firefox, my unvisited links aren't displaying correctly, they display as a standard un-formated link (blue, times neew roman, underlined), instead of what I established in the CSS file. It displays correctly on IE... Here's the relevant code:A html section

<td style="height:300px" valign="top" class=link><a href="index.html">> Home</a><br /><br />   <a href="2d.html">> 2D Art</a><br /><br />   <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br />  <a href="team.html">> Blog</a><br />  </td>

And the according CSS section:

a:link {	color:#878787;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:visited {	color:#878787;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:hover {	color:#000000;	font-family: arial;	text-decoration: none;	font-weight: bold;}a:active {	color:#878787;	text-decoration: none;	font-family: arial;	font-weight: bold;}

2- The second problem I am having is that a certain table isn't aligning correctly,but only 1 section of it. The idea is to have a small margin on both sides of the website.In the following code, there's 2 tables, the first one is positioned correctly, but the second one for some reason is not. i've tried changing the style in the CSS, but it only results in everything showing wacjy in IE, and no changes in Firefox

<table style= width="100%" align="center" cellpadding="5" cellspacing="10"><td style=height:"100%" valign="top" class=news><p><img src="header.jpg" width="100%" height="100%"></p><hr /></td></table><table class="tab1" cellpadding="5" cellspacing="10"><td style="height:300px" valign="top" class=link><a href="index.html">> Home</a><br /><br />   <a href="2d.html">> 2D Art</a><br /><br />   <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br />  <a href="team.html">> Blog</a><br />  </td><td style="height:300px" valign="top" class=cont><p><h3>2d Art</h3></p><script type="text/javascript" src="2dsamples.js"></script><br /><a href="2d.html">see more</a><br /></td><td style="height:300px" valign="top" class=cont><p><h3>3d Art</h3></p><script type="text/javascript" src="3dsamples.js"></script><br /><a href="3d.html">see more</a><br /></td><td style="height:300px" valign="top" class=link><br /></td></table>

The relevant CSS

<!-- Table -->table {	align: top;	table-layout: fixed;	width: 100%;	min-height: 200px;}tab {	align: top;	table-layout: fixed;	width: 100%;	min-height: 200px;}tab1 {	align: top;	table-layout: fixed;	width: 80%;	min-height: 200px;}td.link {	padding: 5px;	width: 10%;}td.cont {	padding: 30px;	background-color: #34383b;	width: 45%;	border-width: thin;	border-style: solid;	border-color: #000000;}td.cont1 {	padding: 30px;	background-color: #34383b;	width: 90%;	border-width: thin;	border-style: solid;	border-color: #000000;}

Thanks in advance :)

Link to comment
Share on other sites

I haven't got time for a full answer, but two things: one, in FF and most good browsers, specificity is the key: your links are in a table, so try selectors like:table tr td a:link {blah: blah;} Also, try to avoid using tables for layouts. It's been said so many times on here there ought to be an anti-tables shortcut where the smileys are. Tables should be used, as all elements should, semantically: that is they are all designed for certain purposes and to display certain things. Tables make navigation difficult for people who browse using screen readers and other iterative, serial methods. You should put content in whatever element makes the most semantic sense and learn to style it. Navigation should be in a list if there's enough to warrant it. Write your HTML without any CSS, just write it in order: header, navigation, then, as quickly as possible, get to the main content. Head the main content with h1 or h2, then subheadings h3, text should be in paragraphs, etc. etc. Then move it where you want it with CSS.If you have tabular data, then by all means use them - they aren't the devil. Just make sure you use the appropriate table elements - headings, legends, etc. There are plenty of elements out there for making the task of understanding your table very simple to those who cannot see it to understand it straight away, but that most people won't even need to see. Accessibility won't detriment your code - it will make it clean.

Link to comment
Share on other sites

the css coding you have will target all links, whether in table or not.i can't see a problem with this link css coding when i run it in FireFox, it works as it should.try not to repeat css unnecessarily a {font-family: arial; text-decoration: none; font-weight: bold;}a:link, a:visited, a:active { color:#878787;}a:hover { color:#000000;}will do exactly the same.errors found: classes incorrectly defined for tab and tab1, should be .tab and .tab1.no such thing as 'align: top;' should be 'vertical-align: top;'style=height:"100%" should be style="height:100%"style= width="100%" should be style="width:100%"Your tables don't have table row tags <tr><table style= width="100%" align="center" cellpadding="5" cellspacing="10"><tr><td style=height:"100%" valign="top" class="news"><p><img src="header.jpg" width="100%" height="100%"></p><hr /></td></tr></table><table class="tab1" cellpadding="5" cellspacing="10"><tr><td style="height:300px" valign="top" class="link"><a href="index.html">> Home</a><br /><br /> <a href="2d.html">> 2D Art</a><br /><br /> <a href="3d.html">> 3D Art</a><br /><br /> <a href="info.html">> About</a><br /> <br /> <a href="team.html">> Blog</a><br /> </td><td style="height:300px" valign="top" class="cont"><p><h3>2d Art</h3></p><script type="text/javascript" src="2dsamples.js"></script><br /><a href="2d.html">see more</a><br /></td><td style="height:300px" valign="top" class="cont"><p><h3>3d Art</h3></p><script type="text/javascript" src="3dsamples.js"></script><br /><a href="3d.html">see more</a><br /></td><td style="height:300px" valign="top" class="link"><br /></td></tr></table>

Edited by dsonesuk
Link to comment
Share on other sites

try not to repeat css unnecessarily a {font-family: arial; text-decoration: none; font-weight: bold;}a:link, a:visited, a:active { color:#878787;}a:hover { color:#000000;}will do exactly the same.
Thanks, that seemed to fix it. And thank you for the error spotting as well! :)
Also, try to avoid using tables for layouts. It's been said so many times on here there ought to be an anti-tables shortcut where the smileys are. Tables should be used, as all elements should, semantically: that is they are all designed for certain purposes and to display certain things. Tables make navigation difficult for people who browse using screen readers and other iterative, serial methods. You should put content in whatever element makes the most semantic sense and learn to style it. Navigation should be in a list if there's enough to warrant it. Write your HTML without any CSS, just write it in order: header, navigation, then, as quickly as possible, get to the main content. Head the main content with h1 or h2, then subheadings h3, text should be in paragraphs, etc. etc. Then move it where you want it with CSS.If you have tabular data, then by all means use them - they aren't the devil. Just make sure you use the appropriate table elements - headings, legends, etc. There are plenty of elements out there for making the task of understanding your table very simple to those who cannot see it to understand it straight away, but that most people won't even need to see. Accessibility won't detriment your code - it will make it clean.
I'm not sure I understood what you meant here. You are saying that I shouldn't use tables to define the placement of my page elements? But for instance, this website (w3schools) has tables to define its layout, or atleast that's the impression I get from quickly looking at its code (but keep in mind I rly don't understand much if at all when it comes to coding... I'm a simple artist).Thank you both for your help :)
Link to comment
Share on other sites

For most of the time, this site is displaying tabular data - i.e. rows fall under column headings and the columns are tied together by the rows, but using tables for layout is old hat. If you want to set the width of your page, you use CSS to define the style of the body element that contains the page, and if you want a list you style the list. It's not bad to use tables, just they should only be used for data that belongs in a table. The alternative is to go div crazy, which is bad, too. The fewer divs between the first line of HTML and the real content, the better, in general. It's usually easier to style a page when everything is in the correct elements.

Link to comment
Share on other sites

Things can be side by side without being in galleries, too! <div id="gallery1"><img etc.><img etc.><img etc.></div></div id="gallery2"><img etc.><img etc.><img etc.></div>#gallery1 {float: left;width: 50%;} Something like that ought to make them sit side by side.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...