I've written this code:
#navigation ul
{
text-align: center;
margin: 110px 20px 30px 250px;
padding:0;
border:none;
}
#navigation ul li
{
width:100px;
list-style: none;
display: inline;
padding:30px, 0;
}
#navigation li a
{
border: 1px solid black;
padding: 5px;
background-color: #E9F1FD;
font: bold 18px arial;
color: #3300CC;
text-decoration: none;
text-transform: capitalize;
}
#navigation ul li a:visited
{
color: #6699CC;
}
#navigation ul li a:hover
{
color: #BB0000;
background-color: #FFDDDD;
}
Motzilla and IE show the same thing, so hopefully it is valid:
/ link1word1 l1w2 / / link2word1 l2w2 / / 31 32 /
41 42 / / 51 52 /
I put / instead of the border. it shows double border with space between them (which is not what i want). What I want is this:
/link1word1 / 21 / 31 / 41 / 51 /
/link1word2 / 22 / 32 / 42 / 52 /
(which I have managed to get on <!-- w --><a class="postlink" href="http://www.andr3.s5.com/evolutia">www.andr3.s5.com/evolutia</a><!-- w --> but it only works on IE6)
I've been trying for hours to fix it. What do I need to do?
(yea, you guessed it, I've just started learning CSS)Can you fix the link?http://validator.w3.org/check?verbose=1&uri=http%3A//www.andr3.s5.com/evolutia/
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.andr3.s5.com/evolutia/try">http://jigsaw.w3.org/css-validator/vali ... olutia/try</a><!-- m --> moving : ^border: 1px solid black;^ from ^#navigation li a^ to ^#navigation ul li^
try that and let me know if it fixes it for you
IE will move the small white space from between the "buttons" on the right of the button. Mozilla will delete the border at the top and bottom of the buttons and nothing else.
There is a clear problem with the width. That's what should make the buttons to diaplay text on two rows - but it doesnt matter where i put or what value it has. Plus the space between the buttons. there shouldn't be any.
it needs the following changes (I copied a slightly changed version without verifying it)
nav ul list-style: none;
nav ul li: padding:0;
both the html and the css will kind of validate (except for a few spelling mistakes which are not in this menu)
why is the validator bothered by ? I used it on another menu to stop buttons from braking across lines.i meant to say " & n b s p ;"why is the validator bothered by & n b s p ; ? I used it on another menu to stop buttons from braking across lines.
by breaking across lines do you mean like
hel
lo
?
if you do you can stop that with th < nobr > tag. if not, completely ignore this post.Aha I see it does exactly what I want. thanx Scleppel. But now, since they're all in <li>, rather than add the tag to every <li>, how do I add the same thing to the CSS file so it will never break a list item across lines?li {white-space: nowrap;}
#navigation ul
{
text-align: center;
margin: 110px 20px 30px 250px;
padding:0;
border:none;
}
#navigation ul li
{
width:100px;
list-style: none;
display: inline;
padding:30px, 0;
}
#navigation li a
{
border: 1px solid black;
padding: 5px;
background-color: #E9F1FD;
font: bold 18px arial;
color: #3300CC;
text-decoration: none;
text-transform: capitalize;
}
#navigation ul li a:visited
{
color: #6699CC;
}
#navigation ul li a:hover
{
color: #BB0000;
background-color: #FFDDDD;
}
Motzilla and IE show the same thing, so hopefully it is valid:
/ link1word1 l1w2 / / link2word1 l2w2 / / 31 32 /
41 42 / / 51 52 /
I put / instead of the border. it shows double border with space between them (which is not what i want). What I want is this:
/link1word1 / 21 / 31 / 41 / 51 /
/link1word2 / 22 / 32 / 42 / 52 /
(which I have managed to get on <!-- w --><a class="postlink" href="http://www.andr3.s5.com/evolutia">www.andr3.s5.com/evolutia</a><!-- w --> but it only works on IE6)
I've been trying for hours to fix it. What do I need to do?
(yea, you guessed it, I've just started learning CSS)Can you fix the link?http://validator.w3.org/check?verbose=1&uri=http%3A//www.andr3.s5.com/evolutia/
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.andr3.s5.com/evolutia/try">http://jigsaw.w3.org/css-validator/vali ... olutia/try</a><!-- m --> moving : ^border: 1px solid black;^ from ^#navigation li a^ to ^#navigation ul li^
try that and let me know if it fixes it for you
IE will move the small white space from between the "buttons" on the right of the button. Mozilla will delete the border at the top and bottom of the buttons and nothing else.There is a clear problem with the width. That's what should make the buttons to diaplay text on two rows - but it doesnt matter where i put or what value it has. Plus the space between the buttons. there shouldn't be any.
it needs the following changes (I copied a slightly changed version without verifying it)
nav ul list-style: none;
nav ul li: padding:0;
both the html and the css will kind of validate (except for a few spelling mistakes which are not in this menu)
why is the validator bothered by ? I used it on another menu to stop buttons from braking across lines.i meant to say " & n b s p ;"why is the validator bothered by & n b s p ; ? I used it on another menu to stop buttons from braking across lines.
by breaking across lines do you mean like
hel
lo
?
if you do you can stop that with th < nobr > tag. if not, completely ignore this post.Aha I see it does exactly what I want. thanx Scleppel. But now, since they're all in <li>, rather than add the tag to every <li>, how do I add the same thing to the CSS file so it will never break a list item across lines?li {white-space: nowrap;}