+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: formatowanie wyglądu formularza kontaktowego css (/thread-formatowanie-wygladu-formularza-kontaktowego-css)
formatowanie wyglądu formularza kontaktowego css - faust - 26-02-2010
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.