Witam

Mam skrypcik w PHP i chciałbym wyrównać jego pola, gdyż wprowadziłem koło dwóch z nich *, aby pokazywały, że te pola są wymagane, jednak ta operacją przesunąłem te dwa pola i nie są wyrównane z resztą. Jak nałatwiej się z tym uporać?

Domyślam się, że mogę zawrzeć to w tabelce, a potem jej ramki ustawić na niewidoczne. Jednak może lepiej byłoby w pliku css, który mam? Proszę o radę i info jak tego dokonać najlepiej i najszybciej

pozdrawiam

Tak jak mówisz, najłatwiej w css Tabelki w formularzach to przeżytek.

Jeżeli chciałbyś uzyskać konkretniejszą pomoc - wklej link do strony, albo screen, najlepiej html. Skąd mam wiedzieć jak wygląda twój formularz

Formularz mam tak, jakoś nie tak jakbym chciał - małe gwiazdki, pola przy których są gwiazki nie są wyrównane do innych...

[PHP] pobierz, plaintext 
echo ("<center>");
echo '<form action="" method="post" onsubmit="return (validateformdoddotabprog(this) && czyjestespewien());">
<h2>Prosze wypełnić pola poniżej:</h2><br />
<input type="hidden" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="id_programu" value="'.$liczba.'" /><br />
<b>Nazwa programu :</b><br />
<input type="text" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="nazwa_programu"><b> *</b><br />
<b>Wersja programu :</b><br />
<input type="text" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="system_operacyjny"><br />
<input type="image" src="graphics/button_dodaj_opro.jpg" alt="Wyslij" value="dodaj"><br /><br />
<b><FONT COLOR=\"#800517\">*  Pola oznaczone gwiazdką są wymagane</b></FONT></b><br />
</form>';
echo ("</center>");
[PHP] pobierz, plaintext 

mam też plik css, ale nie znam sie na css tak dobrze, żeby coś w nim zmieniać, mogę Ci podesłać

Prosze o pomoc

Zmień odrobinę konstrukcję formularza:

• każdy opis pola zrób jako label
• gwiazdki daj w span
• jeśli będzie Ci się chciało to dodakowo możesz cały formularz umieścić w <ul> a każdą linię w <li>
• co w kodzie robi <center>?? daj w css regułę margin: 0 auto dla formularza...

Zrobiłem tak, nie wiem, czy ok?:

[PHP] pobierz, plaintext 
echo '<ul><form action="" method="post" onsubmit="return (validateformdoddotabprog(this) && czyjestespewien());">
<li><label>Prosze wypełnić pola poniżej:</label></li>
<li><input type="hidden" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="id_programu" value="'.$liczba.'" /><br /></li>
<li><label>Nazwa programu :</label></li>
<li><input type="text" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="nazwa_programu"><b> *</b><br /></li>
<li><label>Wersja programu :</label></li>
<li><input type="text" size="45" style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000000; border: 2px solid red" name="system_operacyjny"><br /></li>
<li><input type="image" src="graphics/button_dodaj_opro.jpg" alt="Wyslij" value="dodaj"><br /><br /></li>
<li><label> Pola oznaczone gwiazdką są wymagane</label></li>
</form></ul>';
[PHP] pobierz, plaintext 

Nie wiem jak zrobić span na gwiazdki i jak dodać to o czym pisałeś związanego z CSS?

hm, wypadało by nieco przebudować Twój formularz.
Jak możesz, to nie dawaj stylów css inline (czyli w kodzie). Najlepiej całość przenosić do plików css, a w html tylko się do tego odwoływać.

Moja propozycja:

[CSS] pobierz, plaintext 
#formularz label {
  display: block;
  width: 150px;
  float: left;
  padding-top: 5px;
}
#formularz input {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000000; 
  border: 2px solid red;
  width: 250px;
}
#formularz ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#formularz .required {
  color: red;
}
#formularz .info {
  color: red;
  font-size: small;
  padding: 5px;
  display: block;
}
#formularz .submit {
  width: auto;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<form id="formularz" action="" method="POST" onsubmit="return (validateformdoddotabprog(this) && czyjestespewien());">
  <input type="hidden" name="id_programu" value="'. $liczba .'" />
  <fieldset>
    <legend>Prosze wypełnić pola poniżej</legend>
    <ul>
      <li>
        <label for="nazwa_programu">Nazwa programu: <span class="required">*</span></label>
        <input type="text" name="nazwa_programu" id="nazwa_programu" />
      </li>
      <li>
        <label for="system_operacyjny">Wersja programu:</label>
        <input type="text" name="wersja_programu" id="system_operacyjny" />
      </li>
      <li>
        <input class="submit" type="image" src="graphics/button_dodaj_opro.jpg" alt="Wyślij" value="dodaj" />
      </li>
    </ul>
  </fieldset>
  <span class="info">* Pola oznaczone gwiazdką są wymagane</span>
</form>
[HTML] pobierz, plaintext 

Rezultat jest taki:


Jak coś będzie niezrozumiałe - pytaj.

u mnie wyszło troszke inaczej:

http://www.fotosik.pl/pokaz_obrazek/a87c6b9a7dfd0a5f.html

może to wina mojego cssa?

Myślę, że to kwestia usunięcia znacznika <center>, bo chyba taki jest u Ciebie.
Ale jeżeli chcesz, aby całość była do środka, to nie ma problemu.
Spróbuj tak:

[CSS] pobierz, plaintext 
#formularz {
  width: 500px;
  margin: 0 auto;
  text-align: left;
}
[CSS] pobierz, plaintext 

Jeżeli nie chce, to wystarczy dodać:

[CSS] pobierz, plaintext 
#formularz input {
  float: left;
}
#formularz ul li {
  clear: both;
}
[CSS] pobierz, plaintext 

ALBO

[CSS] pobierz, plaintext 
#formularz {
  text-align: left;
}
[CSS] pobierz, plaintext 

Teraz i labele i inputy będą do lewej.

Kilka rzeczy odnośnie powyższego:

1) nie pokazuje u mnie tej graficznej ikonki znaku zapytania...

2) jak zrobić, aby gwiazdka znalazła się po prawej od textboxa (zaraz po polu na wpisanie Textu) i była troszkę większa?

3) jak zrobić większe odstępy w pionie pomiędzy elementami- w tej chwili są sklejone

4) zauważyłem, że nieraz jak wpiszę dłuższa nazwę: np <label for="imie_nazwisko_usera">Imię i nazwisko użytkownika blabla:</label> element niżej wychyla sie do przodu...

ad.1
-----
Jest to zastępczy obrazek wyświetlany w wypadku, gdy nie można odnaleźć źródła (graphics/button_dodaj_opro.jpg). Sposób prezentacji tego zależny jest od przeglądarki. W moim wypadku chrome przedstawia to tak.

ad.2
-----
Jak widzisz, za gwiazdkę odpowiedzialny jest wpis

[HTML] pobierz, plaintext 
<span class="required">*</span>
[HTML] pobierz, plaintext 

Przenieś to za <input>, czyli

[HTML] pobierz, plaintext 
<label for="nazwa_programu">Nazwa programu:</label>
<input type="text" name="nazwa_programu" id="nazwa_programu" />
<span class="required">*</span>
[HTML] pobierz, plaintext 

Zostało jeszcze zmodyfikować style:

[CSS] pobierz, plaintext 
#formularz .required {
  color: red;
  font-size: 18px;
}
[CSS] pobierz, plaintext 

ad.3
-----

[CSS] pobierz, plaintext 
#formularz ul li {
  margin-bottom:5px;
}
[CSS] pobierz, plaintext 

Ustaw taki margin, jaki cię interesuje.

ad.4
-----
Jest to spowodowane zdefiniowaną szerokością labela. Jeżeli potrzebujesz na to więcej miejsca, zmodyfikuj w css "#formularz label" podając większą szerokość.