+- 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: Problem z formularzem (/thread-problem-z-formularzem--10972)
Problem z formularzem - perenek - 26-10-2013
Witam, jestem nowy na forum i potrzebuje waszej pomocy otoz mam formularz ktory ma 6 pol i dwa ostatnie pola maja byc o polowe mniejsze od pozostalych i lezec obok siebie. Kompletnie nie wiem jak to uzyskac, probowalem juz roznych rzeczy z nadaniem szerokosci.
Moj kod css formularza to:
#wyszukiwarka { width: 358px;
height: 291px;
background: #fff;
border: 1px #ced0c8 solid;
margin-top: -293px;
margin-left: 164px;
}
*,*:before,*:after
{ box-sizing:border-box;
}
#formularz { margin: 0 20px;
width: 451px;
font-family: 'MyriadProRegular', sans-serif;
font-weight: bold;
}
#formularz h3 { display: none; }
#formularz fieldset { overflow: hidden; }
#formularz ul { margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#formularz ul li { margin-bottom: 10px; }
#formularz ul li label { float: left;
padding: 3px 20px 0 0;
width: 170px;
font-size: 14px;
text-align: left;
color: #535353;
}
#formularz ul li input { width: 15px;
height: 18px;
float: left;
}
#formularz ul li select { width: 240px;
height: 33px;
font-size: 14px;
border: 1px #b2b2b2 solid;
background: #c4d2e2;
font-family: 'MyriadProRegular', sans-serif;
color:#707070;
margin: 0 0 6px -110px;
text-align: left;
}
#formularz p.submit { float: right;
padding-right: 150px;
}
p { font-family: sans-serif;
}
.custom-select { position: relative;
display: inline-block;
}
.custom-select2 { position: relative;
display: inlines-block;
}
.custom-select select { display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
outline:none;
line-height: 1.2;
background: #f8f8f8;
}
.custom-select select2 { display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
outline:none;
line-height: 1.2;
background: #f8f8f8;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select select { padding-right:30px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select2 select { padding-right:30px;
}
}
/* Select arrow styling */
.custom-select:after { content: "ˇ";
position: absolute;
top: 1px;
right: 1px;
bottom: 0;
font-size: 60%;
line-height: 33px;
padding: 0 20px;
background: #c4d2e2 url(../images/strzalka_formularz.jpg) no-repeat;
color: white;
pointer-events:none;
height:33px;
}
.custom-select2:after { content: "ˇ";
position: absolute;
top: 1px;
right: 1px;
bottom: 0;
font-size: 60%;
line-height: 33px;
padding: 0 20px;
background: #c4d2e2 url(../images/kalendarz_formularz.jpg) no-repeat;
color: white;
pointer-events:none;
height:33px;
margin: 0 4px;
}
.no-pointer-events .custom-select:after { content: none;
}
.no-pointer-events .custom-select2:after { content: none;
}
html to:
<div id="wyszukiwarka">
<form id="formularz" action="">
<fieldset>
<ul>
<li>
<label for="tekst">tekst</label>
<span class="custom-select"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<span class="custom-select2"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<span class="custom-select2"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<span class="custom-select"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<span class="custom-select"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<span class="custom-select"><select id="tekst">
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
<option>tekst</option>
</select></span>
<label for="tekst">tekst</label>
<input name="tekst" type="checkbox" value="" />
</li>
</ul>
<p class="submit">
<input type="image" src="" alt="" />
<input type="image" src="" alt="" />
</p>
</fieldset>
</form>
</div>
RE: Problem z formularzem - Kartofelek - 26-10-2013
Nie podoba mi się twój kod. Osobiście nie zgadzam się z tym, że formularz to lista. Idąc tym tokiem myślenia można powiedzieć, że cała strona to lista elementów.
No i na koniec formularza nagle użyłeś P, które jest w tym miejscu totalnie bez sensu (to przecież akapit).
Dlatego proponuję ci inną konstrukcję:
Kod:
<div class="nl clearfix">
<label>....</label>
<input type="text" /> <!-- za pole wstaw sobie selekt itp rzeczy
</div>Kod:
.nl {margin-bottom: 10px; }http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/5745706#5745706
Wersja dla 2 pól:
Kod:
<div class="nl clearfix">
<div class="half">
<label>....</label>
<input type="text" />
</div>
<div class="half">
<label>....</label>
<input type="text" />
</div>
</div>Kod:
.nl {margin-bottom:10px;}
.nl .half {width:48%; float:left;}
.nl .half:last-chilf {float:right;}Dokładniej opisywałem to tutaj:
http://doman.art.pl/webmaster/dynamiczne-formularze-w-css3-i-html5/
RE: Problem z formularzem - perenek - 26-10-2013
Dzieki ci bardzo
Do zamkniecia