Forum Moderators: not2easy
I have been finally (with loads of help from the forum) been able to get closer to the end hopeful result, however there is still a way to go....and with a gentle push from the forum I am pleased to say that I have found the courage not only to validate the html and css but also make the corrections :)
However, there is still a problem.....
I am building a directory using a - z alphabet the following is the html of a, b and c - the rest of the alphabet are in the same format...
<a class="a" href="A.html">A</a> (I have tried to change the anchor to "az" - rather than "a" with no difference)
<a class="b" href="B.html">B</a>
<a class="c" href="C.html">C</a>
The following is the css of a,b and c and the rest of the alphabet are respectively the same
.a (I have tried to change the anchor to "az" - rather than "a" with no difference)
{
position:absolute;
left:305px;
margin-top:232px;
}
.b
{
position:absolute;
left:330px;
margin-top:232px;
}
.c
{
position:absolute;
left:355px;
margin-top:232px;
}
this is the css code for the link
a:link
{
font-family: arial, helvetica, sans-serif;
font-size:130%;
font-weight:lighter;
color:#CECEF6;
text-decoration:none;
outline:none;
}
a:visited
{
font-family: arial, helvetica, sans-serif;
font-size:130%;
font-weight:lighter;
text-decoration:none;
outline:none;
color: #FF99FF;
}
a:hover
{
font-family: arial, helvetica, sans-serif;
font-size:130%;
font-weight:lighter;
color:#151B8D;
text-decoration:none;
outline:none
}
PROBLEM: the a:link is not working - not registering, the others a:visited and a:hover are -
Any advise much appreciated
Thanking you in advance
<off topic but before you go too deep . . >
.a, .b, .c {
position:absolute;
left:305px;
margin-top:232px;
}
.b { left:330px; }
.c { left:355px; }
This is a little cleaner way to code redundant css, but the overall approach has a few problems that will come back to haunt you.
- Anchors are inline elements, they shouldn't be "raw" or "bare" like that.
- We have a list of links here, should drop those in an unordered list which becomes the "container" for the links, and you can position the <li>'s instead, and without absolute positioning.
- The absolute positioning may be working for you, but try resizing your text in the browser. The right characters of the text will overflow into the links to the right because they are not restricted to a specific size. Even if you lock the text size with .px, it's no guarantee that it's not going to go sideways in a different screen resolution.
Thanks very much for giving me some advice...I did think of the initial point you made and checked the page in other browsers which showed up again with no colour difference so I assumed that perhaps I was doing something wrong....I will try the new link idea.
A few questions from your feedback
1) a., .b, .c, .d { ....} - so you can code that way and for specific attributes you can use the above and then add
a. {...} - is that right?
But your saying that code isnt good for a list and I should use the <li>'s - I will try that.
The only reason someone would want to resize the text is if they have a visual impairment? Anyway - your suggesting that I do not use absolute in which case what do you advise?
What do you mean raw or bear and how should they be used?
Again thank you for giving me some feedback and if you get he chance to answer these questions I thank you in advance.
1) a., .b, .c, .d { ....} - so you can code that way and for specific attributes you can use the above and then add
a. {...} - is that right?
Absolutely, set the most general styles first, then modifythem specifically below that. Another example,
body { font-family: arial, helvetica, sans-serif; }
Will set the font style for the entire document, then you can
a { font-family: verdana, sans-serif; }
a.some-class { fomt-family:times,'times new roman', serif; }
Do that.
What do you mean raw or bear and how should they be used?
Raw unstyled content:
<a href="anylink.html">I'm just hangin' out here</a>
One semantic approach:
<ul id="main-nav">
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
or
<p>Links are just <a href="anylink.html">hyperlinked content</a>. You should always try to apply semantic meaning to your content.</p>
The semantic meaning helps machines understand the context of the content. That is, search engines . . . and, it makes it much easier to maintain and update. Another of the many reasons is accessibility, plain text or links thrown on a page without semantic containers may "read" out of order with a screen reader.
For the above example <ul>, play with this as a starting point:
#main-nav {
width: 100%;
margin-left:350px;
padding:0;
}
#main-nav li {
white-space: nowrap;
display: inline;
text-align: center;
padding:6px 20px 6px 20px;
}
OR
#main-nav li {
white-space: nowrap;
width:6em;
float:left;
text-align: center;
padding:6px 20px 6px 20px;
}
The only reason someone would want to resize the text is if they have a visual impairment?
That's one . . .
- or environment, depending on operating system, video card, monitor and resolution of a given computer, "12px" may be very different . . .
- or browser, as you know browsers often render text quite differently . . .
- or poor design, too many designers think light gray backgrounds holding barely lighter 10 px text is cool and subtle, but for many of us it's just plain annoying, especially if we enlarge it enough to read it and the content is all fluff. :-)
Once you lock it in with absolute positioning, it becomes very difficult to unhinge once you discover a problem.
SWA66 ...the only reason Im using absolute positioning is because I dont know any better! So I take it that you are suggesting that I dont use any kind of positioning?
ROCKBIL, thanks very much for the above explanation..Im going to try and digest that just one more question as Ive never worked with lists...and I do want to get it right the first time ....
lets say this is my html:
<ul id="main-nav">
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
and this is the css:
#main-nav (this I understand to be id 'main nav')
{
width: 100%;
margin-left:350px;
padding:0;
}
#main-nav li (this I understand to be id main-nav li, which Im assuming is the ID for About, Products and Content
{
white-space: nowrap;
display: inline;
text-align: center;
padding:6px 20px 6px 20px;
}
Question what is the ID for "About"? ie how do I manipulate that individual link as the main-nav li seems to be ID for all the list attributes....
Im sure its a stupid question and my apologies as I should be at least trying to figure it out by researching the answer on the internet - but of course would be greatful for the short cut in time you might offer...
So I take it that you are suggesting that I dont use any kind of positioning?
Not at all. Positioning is how we do layouts. My opinion (and that's all it is) is absolute positioning is seldom needed to do pretty much anything. I've never used it, (professionally, maybe in my early days I did) and probably never will, for all the reasons mentioned above. The exception might be in an animated div that needs to move - but I'd never do that for "other" reasons. :-)
A general approach is to create a parent container, determine it's width, and put elements inside it. Position the content within the parent with as little CSS as possible, manipulating the natural flow of the content as desired. Simple example:
#container {
width: 95%;
max-width: 1024px; /* note this is not supported by IE6 */
margin:auto;
}
Added with the selectors in the previous post, the menu should fall at the upper left, using margins and padding to "position" it.
Question what is the ID for "About"? ie how do I manipulate that individual link as the main-nav li seems to be ID for all the list attributes....
You don't care about the id, with the below exception. :-) See above, only add stuff you need. You access the links in that code like so:
#main-nav li a { /* GENERAL selector */ }
or dispense with that, be specific to manage link states:
#main-nav li a:link { /* initial link attributes */ }
#main-nav li a:visited { /* visited link attributes */ }
#main-nav li a:hover { /* hover link attributes */ }
#main-nav li a:active { /* active link attributes */ }
Note the specificity. in the above case, you can probably simplify it, like
#main-nav a:link { /* initial link attributes */ }
#main-nav a:visited { /* visited link attributes */ }
#main-nav a:hover { /* hover link attributes */ }
#main-nav a:active { /* active link attributes */ }
If "main-nav" is not a ul as posted, you might do this, so other links in main-nav can have different attributes:
<div id="main-nav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p><a href="some-other-link.html">Some other link</p>
</div>
then
#main-nav li a:link { /* initial link attributes */ }
#main-nav li a:visited { /* visited link attributes */ }
#main-nav li a:hover { /* hover link attributes */ }
#main-nav li a:active { /* active link attributes */ }
It all depends on how you build it. You don't need the ID of the a, with the following exception:
<ul>
<li><a href="about.html">About</a></li>
<li><a id="current-page" href="products.html">Products</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
....
#current_page:link { /* selector for "the page you are on" */ }
... etc
Or, if you do Javascript for specific links, you may (or may not) need ID's directly on the links, but likely not. It all depends.
Work from the document's natural flow outward, less is more.
Thanks again.
So if youve covered this and I need to try out the code to understand (bearing in mind Ive not used lists) then I will..but just to ensure Ive clarified what I mean:
<div id="main-nav">
<ul>
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
</ul>
</div>
I give main nav the specifics that are to apply to all the alphabet using link, visit etc but then I want
A to be at {margin-left: 350px}
B to be at {margin-left:360px}
and so on ....
how do I do that? As youve mentioned using:
.a, .b, .c {
position:absolute;
left:305px;
margin-top:232px;
}
.b { left:330px; }
.c { left:355px; }
isnt preferable?
Again with thanks in advance.
left:indicates an absolute or relative positioning (I think you can use left on relative . . .) margin: is, well, a margin. Which is what you're after, I think. Just be careful if you use that div (which you shouldn't need) to select it by #main-div ul li.
First let's return back to basics.
Swear off IE for the next few minutes in order not to have to deal with its bugs and quirks.
Let's start out with clean html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mandatory</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p>BEFORE</p>
<ul id="main-nav">
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
<li><a href="D.html">D</a></li>
<li><a href="E.html">E</a></li>
<li><a href="F.html">F</a></li>
<li><a href="G.html">G</a></li>
<li><a href="H.html">H</a></li>
<li><a href="I.html">I</a></li>
<li><a href="J.html">J</a></li>
<li><a href="K.html">K</a></li>
<li><a href="L.html">L</a></li>
<li><a href="M.html">M</a></li>
<li><a href="N.html">N</a></li>
<li><a href="O.html">O</a></li>
<li><a href="P.html">P</a></li>
<li><a href="Q.html">Q</a></li>
<li><a href="R.html">R</a></li>
<li><a href="S.html">S</a></li>
<li><a href="T.html">T</a></li>
<li><a href="U.html">U</a></li>
<li><a href="V.html">V</a></li>
<li><a href="W.html">W</a></li>
<li><a href="X.html">X</a></li>
<li><a href="Y.html">Y</a></li>
<li><a href="Z.html">Z</a></li>
</ul>
<p>AFTER</p>
</body>
</html>
No superfluous divs or classes in sight :)
So first we have to get those <li>s not under but after one another. There are a few choices we can make:
- float the <li>
- make the <li> inline
The latter is a bit harder but allows for things like centering (and looking at what you're doing, that might well be what you're actually aiming for).
So we'll go for the second one.
#main-nav li {
display: inline;
}
Next you seem to be wanting to have all of the letters at a fixed width ad from code fragments I also get you want them to be rather large. A dangerous combination as the letters will easily get bigger than the space assigned for them, but it can be done:
#main-nav a {
display: inline-block;
width: 1em;
text-align: center;
background-color: red;
}
I took the width not of 10px but of 1 "em" instead to combat the width problem.
Try it with 10px instead as well.
an "em" is a unit of length equal the the width of the letter "M" in the font used.
When messing with this, it's good to add a temporary background color just to see what you're doing.
Centering the text makes the "I" look a bit less awkward.
But in reality we need to add the font you like for this before we settle on it:
#main-nav {
font-family: arial, helvetica, sans-serif;
font-weight:lighter;
background-color: orange;
}
The orange again is just temporary to know where this one is.
The font is inherited to children, so specify it here and it'll be used for all of the menu.
I'd seriously consider using something to match the proportional font in the fixed width boxes somehow, but it's a choice ...
Now you're going to tell me that there is extra whitespace between the red boxes.
They aren't even all that easy to get rid of either.
If you leave font settings to normal they're about 3 to 4 px wide, jet they come not from margins, padding or anything like it. They are simply white space between words that are inline.
Now do we have any control over them ?
We could revert to floating as there are no words on a line there, but then we'll loose the ability to do easy centering.
We could see if we don;t have control over the white space in CSS ...
word-spacing is a setting were we can add (or substract) word spacing from the default. And that's tricky! It's not that the browsers use a default and setting it to zero gets rid of the spacing, no we have to guess how wide the browsers make a space, giving the font size in use ...
A bit of experimenting in FF lead to -0.3em being a proper value IMHO.
It's still a "hack" and it'll come back in IE legacy versions to haunt us for sure (but we'll fix that when and if it poses itself)
#main-nav {
word-spacing: -0.3em;
}
Now we need to make the <ul> a bit larger and position the menu inside it.
One option its to take a cue from the positioning you gave earlier and use e.g.:
#main-nav {
padding-left: 350px;
padding-top: 232px;
}
#main-nav {
text-align: center;
padding-top:232px;
}
In this latter case, the text-align:center on the a canbe removed as text-align is inherited.
On to styling the links a bit more to what you sought:
#main-nav a {
color:#CECEF6;
text-decoration:none;
outline:none
}
#main-nav a:visited {
color:#FF99FF;
}
#main-nav a:hover {
color:#151B8D;
}
That leaves me with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mandatory</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main-nav li {
display: inline;
}
#main-nav a {
display: inline-block;
width: 1em;
background-color: red;
color:#CECEF6;
text-decoration:none;
outline:none
}
#main-nav a:visited {
color:#FF99FF;
}
#main-nav a:hover {
color:#151B8D;
}
#main-nav {
text-align: center;
padding-top:232px;
word-spacing: -0.3em;
font-family: arial, helvetica, sans-serif;
font-weight:lighter;
background-color: orange;
}
</style>
</head>
<body>
<p>BEFORE</p>
<ul id="main-nav">
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
<li><a href="D.html">D</a></li>
<li><a href="E.html">E</a></li>
<li><a href="F.html">F</a></li>
<li><a href="G.html">G</a></li>
<li><a href="H.html">H</a></li>
<li><a href="I.html">I</a></li>
<li><a href="J.html">J</a></li>
<li><a href="K.html">K</a></li>
<li><a href="L.html">L</a></li>
<li><a href="M.html">M</a></li>
<li><a href="N.html">N</a></li>
<li><a href="O.html">O</a></li>
<li><a href="P.html">P</a></li>
<li><a href="Q.html">Q</a></li>
<li><a href="R.html">R</a></li>
<li><a href="S.html">S</a></li>
<li><a href="T.html">T</a></li>
<li><a href="U.html">U</a></li>
<li><a href="V.html">V</a></li>
<li><a href="W.html">W</a></li>
<li><a href="X.html">X</a></li>
<li><a href="Y.html">Y</a></li>
<li><a href="Z.html">Z</a></li>
</ul>
<p>AFTER</p>
</body>
</html>
CSS validates.
Testing it in the other standards compliant browsers ...
There is a problem with the word-spacing in safari and chrome unfortunately.
webkit don't seem to honor the CSS1 setting at all. (FF and Opera do honor it)
I'll try to file a bug report on it later.
To work around it for now, use
#main-nav li {
margin-left: -0.3em;
/* webkit can't cope with word-spacing on the parent */
}
IE testing and construction of any conditional comments: left to the user for now.
Thanks again
Thankyou
:)
