Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
formatowanie wyglądu formularza kontaktowego css
#1
Witam.
Posiadam na stronce formularz kontaktowy ale nie wiem jak zrobić żeby etykiety tam gdzie jest opis 1 opisz 2 oraz wybierz opcje było po prawej czyli obok imie i nazwisko nazwa firmy oraz inne opcje kontaktu. link do strony www.testingweb.yoyo.pl
kod xhtml
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title> untitled</title>
<meta http-equiv="Content-type" content="text.html;charset=iso-8859-2" />

<link href="styles.css" media="all" rel="stylesheet" />
<link href="text_n_colors.css" media="all" rel="stylesheet" />
<style type="text/css">
</style>
</head>

<body>
<div id="main_wrapper">

<div id="header">
    <div id="header_inner">
    <ul>
        <li><a href="link1.html">Link1</a></li>
        <li><a href="link2.html">Link2</a></li>
        <li><a href="link3.html">Link3</a></li>
        <li><a href="link4.html">Link4</a></li>
      </ul>        
    </div><!-- koniec elementu header_inner -->
</div><!-- koniec elementu header -->


  <div id="content">
    <div id="content_inner">
<div class="two_col_form">
  <form action="wyslij.php" method="post">
    <div class="formsection">
      <h3>Informacje</h3>
      <ul class="">
      </ul>
    </div>
    <div class="formsection">
      <label for="user_name">Imie i nazwisko *</label>
      <input type="text" id="user_name" name="user_name" size="32" maxlength="45" tabindex="1" />
  
      <label for="company_name">Nazwa firmy *</label>
      <input type="text" id="company_name" name="company_name" size="32" maxlength="45" tabindex="2" />
      <label for="email_name">Twój e-mail *</label>
      <input type="text" id="email_name" name="email_name" size="32" maxlength="45" tabindex="2" />
        <label for="other_name">Inne opcje kontaktu</label>
      <input type="text" id="other_name" name="other_name" size="32" maxlength="45" tabindex="2" />
    </div>
  
    <div class="formsection">
      <label for="description">Opis 1</label>
      <textarea id="description" name="description" rows="6" cols="32" tabindex="3">Wprowadz opis.</textarea>
       <label for="description2">Opisz 2</label>
      <textarea id="description2" name="description2" rows="6" cols="32" tabindex="3">Wprowadz opis.</textarea>
    </div>
    <div class="formsection clearfix">
      <label for="radioset">Wybierz opcje</label>
      <div class="buttongroup" id="radioset">
        <input checked="checked" id="radio1" name="radioset" type="radio" value = "opcja 1" />
        <label for="radio1">opcja 1</label>
        <input id="radio2" name="radioset" type="radio" value="opcja 2" />
        <label for="radio2">opcja 2</label>
        <input id="radio3" name="radioset" type="radio" value="opcja 3" />
        <label for="radio3">opcja 3</label>
        </div>
        </div>
    <div>
    </div>
    <div>
      <input type="submit" value="Wyslij" />
    </div>
  </form>
</div>
     </div>
  </div>
    

<div id="footer">
    <div id="footer_inner">

    </div>
</div>

</div>

</body>
</html>

kod css
Kod:
.two_col_form h3 {
    margin-top:.0em;
}
.two_col_form form {
    float:left;
    width:50em;
    margin:20px 0 0 50px; /*  styl tymczasowy - odsuwa formularz od lewego górnego rogu okna  */
    padding:1em .75em .5em;
}
.two_col_form div.formsection {
    float:left; /* otacza sekcje komponentów formularza i etykiete */
    width:100%; /* rozszerza plywajacy element na caly dostepny obszar */
    padding-bottom:.4em;
}


.two_col_form div.formsection input {
    font-size:.8em;
    padding-bottom:.5em;
}
.two_col_form div.formsection label {
    display:block;
    clear:both;
    font-size:85%;
    font-weight:bold;
    margin:.5em 0 0;
    padding-bottom:.5em;
}
.two_col_form div input[type="submit"] {  /* Nie dziala w IE 6 - przycisk bedzie po lewej stronie. */
    float:right;
    margin:.5em .3em .5em 0;
}
/* style pól wyboru i przycisków radiowych */
.two_col_form div.formsection .buttongroup {
    float:left;
}
.two_col_form div.formsection .buttongroup input {
    float:left;
    clear:both;
    margin:0;
    padding:0;
    line-height:0;
    border:1px solid;
    float:left;
    background-color:red;
}
.two_col_form div.formsection .buttongroup label {
    width:25em;
    float:left;
    margin:0 0 0 1em;
    font-weight:normal;
    clear:none;
}
/* style listy komunikatów i bledów */
.two_col_form div.formsection ul {
    display:none;
    font-size:.8em;
    padding:1em 3em;
}
.two_col_form div.formsection ul.message {
    display:block;
}
.two_col_form div.formsection ul.error {
    color:red;
    display:block;
}
.two_col_form div.formsection li {
    padding: .3em 0;
}

Proszę o pomoc.
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  walidacja formularza hieroshima 2 2,107 02-08-2012, 13:49
Ostatni post: hieroshima
  [CSS] ZMiana wyglądu menu kamilj 1 2,070 02-02-2012, 02:08
Ostatni post: Pedro84
  Zmiana wyglądu menu. misiek111232 1 1,985 11-12-2011, 06:01
Ostatni post: Marys
  Zmiana wyglądu scrollbarów. Mathix 2 2,100 20-10-2011, 03:03
Ostatni post: Kartofelek
  [Jquery Form] - nie dostaje wiadomości po wypełnieniu formularza MFrost 2 2,506 09-10-2011, 02:07
Ostatni post: MFrost

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl