how to add correctly class name to particular List style?

[toplisek]

1. question:
Is there some solution that there will be not <li class="link">

like
<ul class="link"><li>

But I have another li defined in css script

2. question
If I have in code above class with css script, it will give me space at the top and bottom.
How to avoid this space?

Code is like:
[PHP]
<p>
Text1<br />
text2<br />
text3
<ul class="link"><li class="link"><a href="mailto:[e-mail]">[e-mail]</a></li></ul>
</p>
[/PHP]
It seems problem because there is within tage <p> but I need to have as this is for space between text paragraph

[toplisek]

There is css code like:
ul {list-style-type:none;}
li {list-style-type:none;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
background: transparent url(myimage.gif) no-repeat 0px 1px;
padding-bottom:2px;
padding-left:20px;
line-height:11px;
}
<ul class="link"><li><a href="mailto:[e-mail]" >[e-mail]</a></ul>

[toplisek]

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

[SuzyUK]

Hi toplisek..

to try and answer them all, you can't nest a <ul> inside a <p> that's why you're getting that validator error/warning message.

You say it has to be in a <p> for the spacing, but you can do this better and solve your link targeting if you use a <div>

e.g.

<div id="contact">
<p>Text1<br />text2<br />text3</p>
<ul><li><a href="mailto:[e-mail]">[e-mail]</a></li></ul>
</div>

you can then add spacing like the paragraph by setting margins on the div

#contact {margin: 1em 0;}

then to target just the list inside that div:

#contact ul {rules}
#contact li {rules}

so you might not need a class at all

if required, you can control the spacing between the p and the ul by adjusting their default margins too.

#contact p {margin: whatever;} 
#contact ul {margin: whatever;}

hth, Suzy

[edited by: SuzyUK at 10:43 am (utc) on May 23, 2007]

[toplisek]

Hello,
I have made code as following:
css like:
#mainctn p{
margin:0em 0em 1em 0em;
text-indent:0em;}

#mainctn ul {list-style-type:none;margin:0px;padding-left:20px;}
#mainctn il
{ list-style-type:none;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
background: transparent url(../images/mail.gif) no-repeat 0px 1px;
padding-top:0px;
padding-bottom:2px;
margin-left:40px;
}

<div>
<p><b>Heading</b><br />
Text1<br />
Text2<br />
Text3
<ul><li><a href="mailto:[e-mail]" >[e-mail]</a></li></ul>
</p>
</div>

there is image 16x16
1.How to do script that image will be seen all on web site?
2. It gives me too much space between Text3 and tag <ul>