[CSS] Rozsypane dymki Opcje

[tofik1778983]

Witam
Proszę o pomoc w poprawieniu styli css tak żeby dymki wyły wyświetlane prawidłowo.
sam kod dymka w osobnym pliku działa jak trzeba jednak gdy dołączam go do reszty styli z głównego pliku to sie rozsypuje..
tekst z dymka wyświetla się także obok linka przez cały czas.
css

[HTML] pobierz, plaintext 
* {
color: #5F9EA0;
font-family: verdana;
font-size: 11px;
}
.td {
border-top: solid black 0px;
border-bottom: solid black 0px;
border-left: solid black 0px;
border-right: solid black 0px;
 
}
input, textarea, select {
color: #FFE149;
font-size: 11 px;
background: black;
border: solid gray 1px;
}
input:hover, textarea:hover {
background: #2F4F4F;
color: white;
opacity: 1;
}
a {
font-family: verdana, arial, helvetica, sans-serif;
text-decoration: none;
text-transform: none;
color: #00FFFF;
font-size: 11px;
weight:bold;
}
a:hover {
text-decoration: none;
text-transform: none;
color: red;
font-size: 11px;
}
body {
background: #2F4F4F;
}
body, iframe, select, textarea {
scrollbar-face-color: black;
scrollbar-highlight-color: gray; 
scrollbar-shadow-color: gray; 
scrollbar-3dlight-color: black; 
scrollbar-arrow-color: gray;
scrollbar-track-color: black; 
scrollbar-darkshadow-color: black; 
scrollbar-base-color: black;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
 
.staty
{
        color: #00FF00;
}
.nikname
{
        font-size: 13px;
        color:#FF0000;
}
.lokalizacja
{
        font-size: 13px;
        color:#B3BBC3;
}
 
.staty_2 td
{
 border: 1px solid #385F5F;
 cellspacing:0px;
 cellpadding:1px ;
 
}
<!--  style chmurek --->
a.dymek span {
    display: none;
    padding: 2px 3px;
    margin-left: 8px;
    width: 130px;
}
 
a.dymek:hover span{
    display: inline;
    position: absolute;
        margin: 5px 0 0 5px;
    background: #dddddd;
    border: 1px solid #b30000;
    color: #000000;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
        text-align: left;
        line-height:14px;
}
<!-- koniec -->
[HTML] pobierz, plaintext 

przykładowe linki

[HTML] pobierz, plaintext 
<a class="dymek" href="#"> w dymku <span>To jest taki sobie dymek :)</span></a><br>
<a class="dymek" href="#"> dymek <span> tresc dymkaa</span></a>
[HTML] pobierz, plaintext 

Jeszcze dodatkowo chciałbym żeby tekst z dymka pojawiał się najlepiej z lewej strony linka lub nad linkiem lekko z lewej(prawy dolny róg dymka koło kursora).

Ten post edytował tofik1778983 7.12.2010, 12:02:30

[!*!]

http://jsfiddle.net/NgQRx/

Sprawdź czy o to Ci chodzi. Jeśli coś się rozsypuje, to prawdopodobnie przez to że masz źle ustalone znaczniki, nadałeś dla "a" globalnie inne właściwości niż te które masz dla dymków.

Umieść sekcję z dymkami np. w div o id "dymki" a później odwołaj się w css do nich

[CSS] pobierz, plaintext 
#dymki a.dymek span /* i tak dalej */
[CSS] pobierz, plaintext 

[tofik1778983]

Nie do końca tak jak w JSfiddle. Tu jako link wyświetla wszystko razem z tekstem z sekcji span, a to ma byc tylko w dymku.
Może dam tak:

Kod

<a class="dymek" href="#"> link1 <span>treść w dymku 1</span></a><br>
<a class="dymek" href="#"> link2 <span> inna treść w dymku 2</span></a>

Najlepiej jakby to trybiło w ten sposób bez używania div'ów

[!*!]

U mnie wyświetla się treść span po najechaniu na link w formie dumku pod spodem. Czyli tak jak chciałeś, sprecyzuj dokładnie.

[tofik1778983]

Zrobiłem na overlib. można zamknąć.