GoldenLine
Zaloguj się
Mateusz Ziarko

Mateusz Ziarko Front-End Tech Lead
at VirtusLab
(Sensinum) | Owner
at we...

Temat: Rozlatujące sie formularze.

Pierwszy raz spotykam się z takim problemem, od kąd programuję w php. Mianowicie po zaincludowaniu formularza rozjeżdża się komórka tabeli w którą został wrzucony.

Kod formularza jest następujący:

<table width="100%" cellpadding="0" cellspacing="0">
<tr><td><img src="images/gfx/przyciski/8.gif" width="4" height="29"></td>
<form method="post" name="login" action="checklogin.php">
<td class="login" align="center" width="105">
<input name="ws_user" type="text" class="login" size="16" style="border: 0"></td><td class="haslo" align="center" width="105">
<input name="pwd" type="password" class="haslo" size="16" style="border: 0"><td><img src="images/gfx/przyciski/10.gif" height="29"></td><td align="center" class="ok">

<input type="image" name="Submit" src="images/gfx/przyciski/10_ok.gif" style="border: 0">
</td>
</form>
<td>
<table width="79" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="79">
<a href="index.php?site=register">
<img border="0" src="images/gfx/przyciski/11.gif" width="79" height="14"></a></td>
</tr>
<tr>
<td>
<a href="index.php?site=lostpassword">
<img border="0" src="images/gfx/przyciski/12.gif" width="79" height="15"></a></td>
</tr>
</table>
</td>
</tr>
</table>

Strona gdzie występuje problem:

http://www.cyperdesign.netarteria.pl/uvm/index_f2f.php
Link do wypowiedziLink

konto usunięte

Temat: Rozlatujące sie formularze.

zadaj sobie pytanie, co ma wspolnego kod tej strony z zadeklarowanym doctype.
Link do wypowiedziLink
Mateusz Ziarko

Mateusz Ziarko Front-End Tech Lead
at VirtusLab
(Sensinum) | Owner
at we...

Temat: Rozlatujące sie formularze.

Jest to HTML 4.01 + JavaScript więc wnioskuję, że najodpowiedniejszy będzie:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Aczkolwiek nie naprawiło to problemu.
Link do wypowiedziLink
Dawid Daniel Pacholczyk

Dawid Daniel Pacholczyk Project Manager

Temat: Rozlatujące sie formularze.

proponuje ci po prostu zainwestować 5 minut na zmontowanie arkusza stylów który na bank załatwi sprawę. Przeżuć tam szerokości, wysokości (to akurat zabieg czysto kosmetyczny), zajmij się marginesami, dopełnieniami.
Link do wypowiedziLink
Jakub L.

Jakub L. Programista

Temat: Rozlatujące sie formularze.

Może pokombinowanie z form.style.display da jakieś efekty, ustawienie na 'inline' na przykład.
Link do wypowiedziLink

konto usunięte

Temat: Rozlatujące sie formularze.

Tak na przyszłośc zaczął bym od nauki podstaw wygodnego i dobrego Html'a. Znalezienie błedu w takim gąszczu niepotrzebnych znaczników to masakra. Np.: Sam paprametr size="16" nie daje żadnej kontroli nad rozmiarem bo może być przecież dowolnie zinterpretowany). itd.
polecam:
http://osiolki.net/tabelki/
Link do wypowiedziLink
Mateusz Ziarko

Mateusz Ziarko Front-End Tech Lead
at VirtusLab
(Sensinum) | Owner
at we...

Temat: Rozlatujące sie formularze.

Jakub L.:
Może pokombinowanie z form.style.display da jakieś efekty, ustawienie na 'inline' na przykład.

Kombinacje z form.style.display już przerabiałem, zmienia się jedynie położenie w rozciągniętej komórce. A właśnie to niechciane rozciągnięcie chcę wyeliminować.

Co do niepotrzebnych tagów, dostałem do przerobienia ten cms i raptem 5 godzin dopiero nad nim siedzę, nie wszystko jeszcze zostało pozamieniane.
Link do wypowiedziLink
Dawid Daniel Pacholczyk

Dawid Daniel Pacholczyk Project Manager

Temat: Rozlatujące sie formularze.

Marcin Deręgowski:
Tak na przyszłośc zaczął bym od nauki podstaw wygodnego i dobrego Html'a. Znalezienie błedu w takim gąszczu niepotrzebnych znaczników to masakra. Np.: Sam paprametr size="16" nie daje żadnej kontroli nad rozmiarem bo może być przecież dowolnie zinterpretowany). itd.
polecam:
http://osiolki.net/tabelki/

Pan Marcin ma rację :) A w 5 godzin można zmontować kilka nowych formularzy :) Ale to nie jest istotne. Formularz zbuduj wykorzystująć jedynie NIEZBĘDNE tagi, a całość wystylizuj za pomocą css. W końcu po coś on jest :)

pozdrawiam
Link do wypowiedziLink
Mateusz Ziarko

Mateusz Ziarko Front-End Tech Lead
at VirtusLab
(Sensinum) | Owner
at we...

Temat: Rozlatujące sie formularze.

Finalna wersja będzie oparta w pełni na css, mam na to jeszcze około miesiąca.

Zuważyłem, że problem leży chyba nie tyle po stronie znaczników, bo wszędzie tam gdzie includuje część zawierającą formularz pojawia się odstęp, którego nie da się zlikwidować.
Rozszerzyłem teraz includowaną część o całe menu i odstęp pojawił się ponad nim.
Link do wypowiedziLink
Dawid Daniel Pacholczyk

Dawid Daniel Pacholczyk Project Manager

Temat: Rozlatujące sie formularze.

Dobrze ci radzę od razu oprzeć w pełni na css bo tak to będziesz się z tym ciągle bujał. A odstępy mogą być spowodowane marginesami, dopełnieniami lub białymi znakami (polonizm:) ) dlatego zacznij od wyrzucenia wszystkich wartości przy tagach i zastąp je właściwościami w css...spora szansa na to, że połowa problemów od razu zniknie
Link do wypowiedziLink

konto usunięte

Temat: Rozlatujące sie formularze.

Mateusz Ziarko:
Rozszerzyłem teraz includowaną część o całe menu i odstęp pojawił się ponad nim.

form
{
padding:0px;
margin:0px;
}

?

tak jak wszyscy -> zobacz co to css.
Link do wypowiedziLink
Krzysztof Mierzejewski

Krzysztof Mierzejewski SharePoint
Consultant

Temat: Rozlatujące sie formularze.

Na stronie http://www.cyperdesign.netarteria.pl/uvm/index_f2f.php nie widzę co prawda błędu, ale już za to http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cyp... całkiem sporo znajduje...

Opisz problem może dokładniej, jakiś screen i pod jaką konkretnie przeglądarką (wszystkimi?).

Przede wszystkim ten doctype jest nieodpowiedni do html 4.01 transitional, z automatu rozpoznaje xhtml 1.0 i zwraca 350 błędów.

A co do sugestii - end tag for "sth" omitted, but OMITTAG NO was specified, popraw wszystkie od razu bez zbędnego zastanawiania się, błędy typu missing ALT można olać póki co...
Link do wypowiedziLink
Mateusz Ziarko

Mateusz Ziarko Front-End Tech Lead
at VirtusLab
(Sensinum) | Owner
at we...

Temat: Rozlatujące sie formularze.

Zmieniłem doctype po poprawkach kodu na xhtml 1.0, przerobiłem wszystko na css 2.1 i dalej do samo.

ss z opery:

Obrazek


ss z ie 6.0:

Obrazek
Mateusz Ziarko edytował(a) ten post dnia 28.02.08 o godzinie 14:58
Link do wypowiedziLink
Krzysztof Mierzejewski

Krzysztof Mierzejewski SharePoint
Consultant

Temat: Rozlatujące sie formularze.

Przede wszystkim usuń ten pusty tag (<></>):


Obrazek


po drugie jak już masz tam wsadzone tabelki to wymuszaj ich szerokość:


Obrazek


Po trzecie popraw inputy login i password.

Widać, że jeszcze sporo pracy przed Tobą... Tylko jednego nie rozumiem - czemu używasz tabelek kiedy na stronie masz centred fixed width layout? Ja używałem tabelek zawsze w ostateczności, jeżeli chciałem bez JS'a dostosowywać szerokość strony do okna przeglądarki i pozwalać na dowolne jego rozciąganie.
Link do wypowiedziLink
Grzegorz K.

Grzegorz K. Angular, JavaScript,
Frontend, UI

Temat: Rozlatujące sie formularze.

Ściągnąłem źródło, ale coś bida jest z tym.

Jak chcesz to wyślij kompletne źródło z grafiką i stylami.

Szczegóły na priva.

Pozdr.
Link do wypowiedziLink
Grzegorz K.

Grzegorz K. Angular, JavaScript,
Frontend, UI

Temat: Rozlatujące sie formularze.

Chodzi o wyjustowanie pionowe tekstu w polach input. Jakkolwiek nie da się tego "standardowo" naprawić paddingiem, nie mówiąc już o vertical-align:middle lub bottom. Jest jednak na to rada. Fantastyczny atrybut line-height którym odsuniesz sobie frazy od krańca górnego pola input. Dla podanych wysokości pól height:29px wypróbuj wartość line-height:25px, lub jeśli nie pomoże, poeksperymentuj.

Tag Input-Password powinien wyglądać mniej więcej tak:

<input name="ws_user" class="login" style="width: 97px; height: 17px;line-height:25px" type="text">

Pozdr.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj