CSS Newbie - Jak dynamicznie przesuwać przyciski

Question

Mam formularz, który modyfikuję po renderowaniu za pomocą jquery - tylko dlatego, że nie mam kontroli nad kodem, który tworzy formularz.

W każdym razie dodaję przycisk obok przycisku logowania, który jest częścią formularza. W tym celu używam następujący jQuery:

$('.mynewbutton').hide(); 
$(".submit").addClass("buttonalign"); 
$('<div class="shared">').insertBefore($('.submit')); 
$('.submit').after($('<div class="circle circlealign">i</div>')); 

Nowy przycisk Dodaję jest rzeczywiście okrąg że mam wyciągnąć za pomocą CSS. To działa dobrze - nowy przycisk jest wyrównany z loginem. Oto css:

.shared { 
    position: absolute; 
    width: 200px; 
} 

.buttonalign { 
    position: absolute; 
    top:340px; 
} 

.circlealign { 
    position: absolute; 
    top:340px; 
} 

Problem trzeba rozwiązać jest, gdy formularz logowania zwraca komunikat o błędzie, to wyświetla się błąd w górnej części formularza i pcha wszystko w dół. Tak więc mój przycisk logowania i nowy przycisk kończą się zakrywaniem niektórych innych elementów formularza, ponieważ ich pozycja jest stała.

Zmieniłem stałych numerów do procentów i EM tak:

.shared { 
    position: absolute; 
    width: 100%; 
} 

.buttonalign { 
    position: absolute; 
    top:40em; 
} 

.circlealign { 
    position: absolute; 
    top:40em; 
} 

Ale to ma zmienić położenie nowego przycisku tak, że już nie jest wyrównana z przycisku logowania. jest mniej niż na stronie.
Czy możesz wskazać mi właściwy kierunek?

Dzięki.

EDIT 1

Oto renderowane HTML .. i oczywiście rzeczy jQuery nie pojawia się tutaj, które jest ból .. ale można zobaczyć, co początkowa forma wygląda

<H1>Login</H1><DL> 
<P class="err">Logon Failed</P> 
<form action="/cgi-bin/logon/logon" method="POST"> 
<DT>User ID</DT> 
<DD> 
<input class=" text" type="text" name="userid"> 
</DD> 
<DT>Password</DT> 
<DD> 
<input class=" password" type="password" name="password" > 
</DD> 
<DT></DT><DD><input class="submit" type="submit" name="submit" value="Logon"> 
</DD> 
</FORM></DL> 

Answer 1

Trudno mi zrozumieć, dlaczego w ogóle używasz pozycjonowania absolutnego, więc jeśli jest to konieczne z jakiegoś powodu, wybacz mi. Moim rozwiązaniem byłoby zawinięcie istniejącego przycisku w div, a następnie dodanie niestandardowego przycisku do tego kontenera. Następnie możesz umieścić swoje elementy w tym kontenerze i zostaną one wypchnięte ze wszystkim innym, gdy pojawi się komunikat o błędzie.

HTML:

<H1>Login</H1> 
<DL> 
<P class="err">Logon Failed</P> 
<form action="/cgi-bin/logon/logon" method="POST"> 
<DT>User ID</DT> 
<DD> 
    <input class=" text" type="text" name="userid"/> 
</DD> 
<DT>Password</DT> 
<DD> 
    <input class=" password" type="password" name="password" /> 
</DD> 
    <DT></DT> 
    <DD><input class="submit" type="submit" name="submit" value="Logon"/> 
</DD> 
</form></DL> 

CSS:

#actionButtons > * { 
    float: left; 
    margin-right: 2px; 
} 

#actionButtons:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

jQuery (zawinięte w funkcji gotowy DOM):

$(function(){ 
    $('.submit').wrap('<div id="actionButtons"/>'); 
    $('#actionButtons').append($('<div class="circle circlealign">i</div>')); 
}); 

UPDATE - Koło CSS:

.circle { 
    display: block; 
    width: 30px; 
    height: 30px; 
    border-radius: 15px; 
    background: #d1d1c9; 
    box-shadow: 1px 1px 2px #000; 
    opacity: 0.95; 

    font: italic bold 2em/1em "Times New Roman"; 
    text-align: center; 
    color: #000; 
    text-shadow: 0 1px 0 #666; 
    text-decoration: none; 
} 

Oto demo: http://jsfiddle.net/ebTS2/1/

Answer 2

Jeśli błąd zostanie zwrócony w znaczniku DIV, możliwe, że możesz użyć jQueryUI's dialog() method, aby wyświetlić komunikat o błędzie, a następnie ukryć element div?

$("#myError").dialog({ 
     autoOpen: true, 
     height: 300, 
     width: 350, 
     modal: true, 
       close: function() { 
        $('#ErrorDIV').hide(); 
       } 
     });