ďťż

[CSS] Pozycjonowanie raz jeszcze.

Podstrony

telcocafe

Cześć.
Mam flage(img) i pole wyboru <select>.
Chcę żeby jedno wyświetlało się obok drugiego.
Niestety pożadany efekt udało mi się uzyskać tylko w FireFoks'ie.
Firefox (poprawnie): Link
IE (niepoprawnie): Link

<div id="profile"> <form action="UpdateProfile/" method="post"> <table border="0" cellspacing="5"> <tr> <td colspan="2" class="txtHead"><center><b>Dane osobowe:</b></center></td> </tr> <tr> <td class="desc">Imię</td> <td class="editor"><input type="text" value="Sebastian" name="imie"></td> </tr> <tr> <td class="desc">Nazwisko</td> <td class="editor"><input type="text" value="" name="nazwisko"></td> </tr> <tr> <td class="desc">Kraj</td> <td style="border:0; height:22px;"> <img class="countryFlag" id="flagImage" src="flags/pl.gif"> <select style="float:right;" name="in_flag" id="countrySelector" onchange="changeFlag()" class="countryList"><option value="af"> Afganistan </option><option value="al"> Albania </option><option value="ad"> Andora </option><option value="en"> Anglia </option><option value="an"> Antyle </option><option value="sa"> Arabia Saudyjska </option><option value="ar"> Argentyna </option><option value="am"> Armenia </option><option value="aw"> Aruba </option><option value="au"> Australia </option><option value="at"> Austria </option><option value="az"> Azerbejdzan </option><option value="bs"> Bahama </option><option value="bh"> Bahrain </option><option value="bd"> Bangladesz </option><option value="bb"> Barbados </option><option value="be"> Belgia </option><option value="bz"> Belize </option><option value="bl"> Beneluks </option><option value="bj"> Benin </option><option value="bm"> Bermudy </option><option value="bt"> Bhutan </option><option value="by"> Bialorus </option><option value="bo"> Boliwia </option><option value="ba"> Bosnia i Hercegowina </option><option value="bw"> Botswana </option><option value="br"> Brazylia </option><option value="bn"> Brunei </option><option value="bg"> Bulgaria </option><option value="bf"> Burkina Faso </option><option value="bi"> Burundi </option><option value="cl"> Chile </option><option value="cn"> Chiny </option><option value="hr"> Chorwacja </option><option value="cy"> Cypr </option><option value="cz"> Czechy </option><option value="dk"> Dania </option><option value="eg"> Egipt </option><option value="ec"> Ekwador </option><option value="er"> Erytrea </option><option value="ee"> Estonia </option><option value="et"> Etiopia </option><option value="eu"> Europa </option><option value="fj"> Fidzi </option><option value="ph"> Filipiny </option><option value="fi"> Finlandia </option><option value="fr"> Francja </option><option value="ga"> Gabon </option><option value="gi"> Giblartar </option><option value="gr"> Grecja </option><option value="gl"> Grenlandia </option><option value="ge"> Gruzja </option><option value="gu"> Guam </option><option value="gt"> Gwatemala </option><option value="gn"> Gwinea </option><option value="ht"> Haiti </option><option value="es"> Hiszpania </option><option value="nl"> Holandia </option><option value="hk"> Hong Kong </option><option value="in"> Indie </option><option value="id"> Indonezja </option><option value="ig"> Irak </option><option value="ir"> Iran </option><option value="ie"> Irlandia </option><option value="is"> Islandia </option><option value="il"> Izrael </option><option value="jm"> Jamajka </option><option value="jp"> Japonia </option><option value="ye"> Jemen </option><option value="jo"> Jordan </option><option value="yu"> Jugoslawia </option><option value="cm"> Kamerun </option><option value="cs"> Kanada </option><option value="ga"> Katar </option><option value="kz"> Kazachstan </option><option value="ke"> Kenia </option><option value="kg"> Kirgistan </option><option value="co"> Kolumbia </option><option value="cg"> Kongo </option><option value="kr"> Korea </option><option value="kp"> Koreanska Republika Ludowa </option><option value="cr"> Kostaryka </option><option value="cu"> Kuba </option><option value="kw"> Kuwejt </option><option value="lb"> Liban </option><option value="ly"> Libia </option><option value="lt"> Litwa </option><option value="lu"> Luksemburg </option><option value="lv"> Lotwa </option><option value="mg"> Madagaskar </option><option value="my"> Malezja </option><option value="mr"> Mauretania </option><option value="mx"> Meksyk </option><option value="md"> Moldawia </option><option value="mc"> Monako </option><option value="mn"> Mongolia </option><option value="mz"> Mozambik </option><option value="na"> Namibia </option><option value="nr"> Nauru </option><option value="de"> Niemcy </option><option value="no"> Norwegia </option><option value="nz"> Nowa Zelandia </option><option value="om"> Oman </option><option value="pk"> Pakistan </option><option value="pa"> Panama </option><option value="py"> Paragwaj </option><option value="pe"> Peru </option><option value="pl" selected="selected"> Polska </option><option value="pt"> Portugalia </option><option value="pr"> Puerto Rico </option><option value="cf"> Republika Afryki srodkowej </option><option value="za"> Republika Poludniowej Afryki </option><option value="ru"> Rosja </option><option value="ro"> Rumunia </option><option value="lc"> Saint Lucia </option><option value="sl"> Sierra Leone </option><option value="sg"> Singapur </option><option value="sn"> Skandynawia </option><option value="sk"> Slowacja </option><option value="si"> Slowenia </option><option value="so"> Somalia </option><option value="sd"> Sudan </option><option value="sc"> Szkocja </option><option value="ch"> Szwajcaria </option><option value="se"> Szwecja </option><option value="wr"> swiat </option><option value="th"> Tajlandia </option><option value="tp"> Tajpei </option><option value="tw"> Tajwan </option><option value="tz"> Tanzania </option><option value="tg"> Togo </option><option value="to"> Tongo </option><option value="tt"> Trynidad i Tobago </option><option value="tn"> Tunezja </option><option value="tr"> Turcja </option><option value="tv"> Tuwalu </option><option value="ug"> Uganda </option><option value="ua"> Ukraina </option><option value="uy"> Urugwaj </option><option value="us"> USA </option><option value="uz"> Uzbekistan </option><option value="wa"> Walia </option><option value="va"> Watykan </option><option value="ve"> Wenezuela </option><option value="hu"> Wegry </option><option value="uk"> Wielka Brytania </option><option value="vn"> Wietnam </option><option value="it"> Wlochy </option><option value="ci"> Wybrzeze Kosci Sloniowej </option><option value="ck"> Wyspy Cooka </option><option value="vi"> Wyspy Dziewicze </option><option value="fo"> Wyspy Owcze </option><option value="tc"> Wyspy Turks i Caicos </option><option value="cv"> Zielony Przyladek </option><option value="ae"> Zjednoczone Emiraty Arabskie</option></select> </td> </tr> <tr> <td class="desc">Miejscowość </td> <td class="editor"><input type="text" value="" name="miejscowosc"></td> </tr> <tr> <td class="desc">Numer GG</td> <td class="editor"><input type="text" value="" name="gg" maxlength="10"></td> </tr> <tr> <td class="desc">Steam ID</td> <td class="editor"><input type="text" value="" name="steamid"></td> </tr> <tr> <td colspan="2" class="txtHead"><center><b>Komputer:</b></center></td> </tr> <tr> <td class="desc">Procesor</td> <td class="editor"><input type="text" value="" name="procesor"></td> </tr> <tr> <td class="desc">Karta Graficzna </td> <td class="editor"><input type="text" value="" name="k_graficzna"></td> </tr> <tr> <td class="desc">Karta Dźwiękowa</td> <td class="editor"><input type="text" value="" name="k_dzwiekowa"></td> </tr> <tr> <td class="desc">Dysk Twardy</td> <td class="editor"><input type="text" value="" name="dysk"></td> </tr> <tr> <td class="desc">Pamieć</td> <td class="editor"><input type="text" value="" name="pamiec"></td> </tr> <tr> <td class="desc">Myszka</td> <td class="editor"><input type="text" value="" name="myszka"></td> </tr> <tr> <td class="desc">Klawiatura </td> <td class="editor"><input type="text" value="" name="klawiatura"></td> </tr> <tr> <td class="desc">Monitor</td> <td class="editor"><input type="text" value="' Medion" name="monitor"></td> </tr> <tr> <td colspan="2" class="txtHead"><center><b>Ulubione:</b></center></td> </tr> <td class="desc" rowspan="2" height="34">Serwer </td> <td class="editor"><input type="text" value="" name="NazwaSerwera"></td> </tr> <tr> <td class="editor"><input type="text" value="2" name="IPSerwera"></td> </tr> <tr> <td class="desc">Osoba</td> <td class="editor"><input type="text" value="" name="osoba"></td> </tr> <tr> <td class="desc">Gracz</td> <td class="editor"><input type="text" value="" name="gracz"></td> </tr> <tr> <td class="desc">Link 1</td> <td class="editor"><input type="text" value="" name="link1"></td> </tr> <tr> <td class="desc">Link 2</td> <td class="editor"><input type="text" value="" name="link2"></td> </tr> <tr> <td class="desc">Link 3</td> <td class="editor"><input type="text" value="" name="link3"></td> </tr> <tr> <td class="desc">Link 4</td> <td class="editor"><input type="text" value="" name="link4"></td> </tr> </table> </div>
Chodzi mi o fragment:

<tr> <td class="desc">Kraj</td> <td style="border:0; height:22px;"> <img class="countryFlag" id="flagImage" src="flags/pl.gif"> <select style="float:right;" name="in_flag" id="countrySelector" class="countryList"> <option value="af"> Afganistan</option> <option value="al"> Albania</option> <option value="ad"> Andora</option> <option value="en"> Anglia</option> <option value="an"> Antyle</option> <option value="pl" selected="selected"> Polska</option> </select> </td> </tr>

CSS:

div#profile { width:330px; float:left; margin:0; padding:0; border:1px solid #000000; } div#profile td { background:#4d1505; margin:0; padding:0; color:#CCCCCC; font-size:12px; text-align:left; width:80px; height:15px; } div#profile td.desc { background:#4d1505; margin:0; padding:0; color:#CCCCCC; font-size:12px; text-align:left; height:15px; padding-left:5px; } div#profile td.view { padding-left:5px; } div#profile td.txtHead { background:none; margin:0; padding:0; color:#CCCCCC; font-size:12px; text-align:center; width:100%; border:0; border-bottom:1px black solid; } div#profile td.editor { border:1px solid #000000; } div#profile td select.countryList { float:right; border:1px solid #000000; width:120px; background:#5c1a06; font-size:12px; color:#CCCCCC; } div#profile td img.countryFlag { float:left; height:14px; width:16px; } div#profile td input { vertical-align:middle; padding-left:5px; color:#CCCCCC; background:none; font-size:12px; text-align:left; border:0; width:200px; height:15px; }
Użytkownik laughFik edytował ten post 02 wrzesień 2006, 01:39

A próbowałeś w CSS display:inline; ??

Tak próbowałem ; (
ale zrobiłem to jeszcze inaczej usunęłęm tabele.
O taaak jest z siebie dumny że to zrobiłem.
Jednak powstał inny problem mam input i tekst w tym inpucie za cholere nie chce być pośrodku nie chodzi mi ośrodek uzyskiwany za pomocą text-align:center; tylko o środek w pionie. Hilfe ;(

edit >

line-height działa ale tylko pod IE pod FireFoksem tekst w inpucie nadal jest przesunięty w góre.
Użytkownik laughFik edytował ten post 02 wrzesień 2006, 11:42

Tak próbowałem ; (
ale zrobiłem to jeszcze inaczej usunęłęm tabele.
O taaak jest z siebie dumny że to zrobiłem.
Jednak powstał inny problem mam input i tekst w tym inpucie za cholere nie chce być pośrodku nie chodzi mi ośrodek uzyskiwany za pomocą text-align:center; tylko o środek w pionie. Hilfe ;(

edit >

line-height działa ale tylko pod IE pod FireFoksem tekst w inpucie nadal jest przesunięty w góre.
a vertical-align:middle; ??

@EDIT DOWN a sory, wiem to, a mi sie pomyliło, zwracam honor:) i poprawiam
Użytkownik kutar edytował ten post 02 wrzesień 2006, 14:09

a vertical-align:center; ??
jak już to
vertical-align: middle;
a jak center to:
text-align: center;

Z tego co wiem vertical-align:center; nadaje się tylko do tabel.
Jeśli zdefiniuje tabele za pomocą CSS'a nie odczyta jej IE.
Jednak owszem wybrubowałem tą metode.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL