Позициониране в дясно и ляво.

brad4edat

Registered
Може ли някой да ми помогне да позиционирам следото меню:
http://bradchedat.snimka.bg/other/web-programirane.584574

Трябва имената да са в най-лявата страна на таблицата, а полетата за попълване да дойдат отдясно на таблицата, като даденото име и полето към него да са си на един ред.
Опитвах с div-ове, най-различни комбинации, но не успях, а не мисля че е удачно да наблъскам сумати &nbsp между името и полето, за да постигна това разлопожение.
Разместваше ми се, името и полето срещи него заставаха на два отделни реда, а трябва да са си на един ред.
Моля помогнете:0

Ето и кода, в чистия си вид:

Код:
<td width="64%" bgcolor="#EAEAEA"><div align="center"><strong>Main info</strong></div>
			Name:    <input type='text' name='name' size='60'
maxlength='250'>

<br>
Overview:
<textarea name="overview" cols="50" wrap="physical"></textarea>
<br>
      Image:    
          <input type="text" name="image" size="60" maxlength="250">
      
          <br>
      Image_1:
      <input type="text" name="image_1" size="60" maxlength="250">
      
          <br>
      Image_2:
      <input type="text" name="image_2" size="60" maxlength="250">
      
          <br>
      Image_3:
      <input type="text" name="image_3" size="60" maxlength="250">
      
          <br>
      Image_4:
      <input type="text" name="image_4" size="60" maxlength="250">

<br>
Manufacturer:
<select name="manufacturer">
  <option value="1">Acrox</option>
  <option value="2">Acoustic Solutions</option>
  <option value="3">Advance</option>
  <option value="4">Aiwa</option>
  <option value="5">Akai</option>
  <option value="6">Akura</option>
  <option value="7">Alba</option>
  <option value="500">Alpine</option>
  <option value="8">Alpha</option>
  <option value="9">Amstrad</option>
  <option value="10">AMW</option>
  <option value="11">AndrewBoss</option>
  <option value="12">Apex Digital</option>
  <option value="507">Arcam</option>
  <option value="13">Arcube</option>
  <option value="14">Arianet</option>
  <option value="15">Aries</option>
  <option value="508">Astin Trew</option>
  <option value="505">ATC</option>
  <option value="16">Bang & Olufsen</option>
  <option value="17">Bench</option>
  <option value="18">BenQ</option>
  <option value="19">Best</option>
  <option value="20">Bose</option>
  <option value="21">Bush</option>
  <option value="23">Cambridge Audio</option>
  <option value="516">Casio</option>
  <option value="24">Centrum</option>
  <option value="25">Chinese Star</option>
  <option value="517">Christie</option>
  <option value="26">Cinetec</option>
  <option value="27">Cinram</option>
  <option value="29">Clarion</option>
  <option value="30">Classic</option>
  <option value="502">Coby</option>
  <option value="31">Compacks</option>
  <option value="32">Crown</option>
  <option value="33">CyberHome</option>
  <option value="34">Cyrus</option>
  <option value="35">Daewoo</option>
  <option value="36">Dansai</option>
  <option value="37">Daytek</option>
  <option value="38">Deccavideo</option>
  <option value="509">Densen</option>
  <option value="39">Denon</option>
  <option value="40">Desay</option>
  <option value="41">Digital Works</option>
  <option value="42">Digimaster</option>
  <option value="43">Digitrex</option>
  <option value="44">DK Digital</option>
  <option value="514">Dune</option>
  <option value="45">Durabrand</option>
  <option value="46">eBench</option>
  <option value="47">Elite</option>
  <option value="48">Ellion</option>
  <option value="49">Elta</option>
  <option value="50">Eltax</option>
  <option value="518">Epson</option>
  <option value="519">Funai</option>
  <option value="51">GE</option>
  <option value="52">Go Video</option>
  <option value="53">Goodmans</option>
  <option value="54">Grundig</option>
  <option value="55">Harman Kardon</option>
  <option value="56">Himage</option>
  <option value="57">Hitachi</option>
  <option value="58">Hoher</option>
  <option value="59">Hyundai</option>
  <option value="60">Imation</option>
  <option value="515">Integra</option>
  <option value="61">Inventive</option>
  <option value="62">Jamo</option>
  <option value="63">JVC</option>
  <option value="504">KEF</option>
  <option value="64">Kenwood</option>
  <option value="65">Kiiro</option>
  <option value="66">Kiss</option>
  <option value="503">Klipsch</option>
  <option value="67">Lafayette</option>
  <option value="510">Leema</option>
  <option value="68">Lenco</option>
  <option value="69">LG</option>
  <option value="70">Limit</option>
  <option value="506">Linn</option>
  <option value="71">LiteOn</option>
  <option value="72">Loewe</option>
  <option value="73">Logix</option>
  <option value="74">Magnavox</option>
  <option value="75">Marantz</option>
  <option value="501">Matsushita</option>
  <option value="76">Matsui</option>
  <option value="77">Maxim</option>
  <option value="78">Medion</option>
  <option value="79">Meridian</option>
  <option value="80">Mico</option>
  <option value="81">Mintek</option>
  <option value="82">Mitsubishi</option>
  <option value="83">Mixonic</option>
  <option value="84">Moser Baer</option>
  <option value="85">Mustek</option>
  <option value="86">NAD</option>
  <option value="87">Naiko</option>
  <option value="88">NEO</option>
  <option value="89">Neuston Maestro</option>
  <option value="90">Nintaus</option>
  <option value="91">Norcent</option>
  <option value="92">Odyssey</option>
  <option value="93">Onkyo</option>
  <option value="94">OPPO</option>
  <option value="95">Orion</option>
  <option value="96">Oritron</option>
  <option value="97">Onida</option>
  <option value="98">Pacific</option>
  <option value="99">Panasonic</option>
  <option value="100">Peekton</option>
  <option value="101">Philips</option>
  <option value="102">Pioneer</option>
  <option value="103">Prism</option>
  <option value="104">ProScan</option>
  <option value="105">Provision</option>
  <option value="106">Primare</option>
  <option value="107">RCA</option>
  <option value="108">Reoc</option>
  <option value="109">Roadstar</option>
  <option value="110">Ronin</option>
  <option value="511">Rotel</option>
  <option value="111">Sampo</option>
  <option value="112">Samsung</option>
  <option value="113">Sanyo</option>
  <option value="114">Schneider</option>
  <option value="115">Sennheiser</option>
  <option value="116">Sharp</option>
  <option value="117">Shov</option>
  <option value="118">Sony</option>
  <option value="119">Starlogic</option>
  <option value="120">Starmedia</option>
  <option value="121">SVA</option>
  <option value="122">Teac</option>
  <option value="123">Technics</option>
  <option value="124">Technika</option>
  <option value="125">Thomson</option>
  <option value="126">Toshiba</option>
  <option value="127">Tredex</option>
  <option value="128">Truvox</option>
  <option value="129">Telefunken</option>
  <option value="130">ViewSonic</option>
  <option value="131">Waitec</option>
  <option value="132">Welltech</option>
  <option value="133">Wharfedale</option>
  <option value="134">Yakumo</option>
  <option value="135">Yamada</option>
  <option value="136">Yamaha</option>
  <option value="137">Zenith</option>
  <option value="22">Other_DVD_Blu-ray</option>
  
</select> 

<br>
Model:    <input type="text" name="model" size="60" maxlength="250">

<br>
Year:      <select name="year">
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="Antiquity">Antiquity</option>
</select>

<br>
3D_playback:<input type="text" name="_3D_playback" size="60" maxlength="250">

</td>



Може ли и да ми кажете, как мога да накарам текста в тези полета да се подравнява надясно в самото поле?? Но не в този код тук! Това подравняване искам да го сложа в едни други полета, но незнам как.
 
Толкова код не ми се гледа но по принцип като видях скрийновете си мисля

HTML:
<table><tr>
<td align="right">Tozi tekst shte e podravnen v dqsno</td></tr>
</table>
или
HTML:
<div align="left">Text/ili pole v lqvo</div>
<div align="right">Text ili pole v dqsno</div>
или
HTML:
<table><td>Text v lqvo</td><td>Text v dqsno</td>
</table>

:)
 
Мерси за вниманието :)
Но по този начин няма как да стане това позициониране за което питам.
По принцип горният код от първия пост съм го дал за да се види как работи за показаната там снимка.

Ето една конкретна част от него:
HTML:
 Name:    <input type='text' name='name' size='60'
maxlength='250'>

Name трябва да бъде разположено в ляво на общия ред.

<input type='text' name='name' size='60' maxlength='250'> трябва това текстово поле тук да се позиционира в дясно на общия ред!


Това нещо няма как да го разделя на две отделни части чрез таблици и тяхните клетки, понеже кода няма да работи тогава, а и така ако насложа клетки и таблици за всяка една такава заявка, няма ли да се претовари излишно кода??? То е едно цяло, и трябва кода за позиционирането да го вмъкна в него.

Тук дори се вижда как съм използвал 4 &nbsp-та за да отдалеча надясно от Name самото текстово поле. Но в самата страница имам много такива таблици с такива редове, и мисля че ако използвам &nbsp за позиционирането във всеки ред, ще се претрупа излишно кода.

Опитвах с div-ове на местата на &nbsp-тата, но ми излизаха Name и текстовото поле на два реда, един под друг, а трябва да са си на един ред.


Дано ме разбра, че какво обяснение му ударих, нямам думи, ужас.
 
Да попитам за последно.

До сега подобно центриране правех с &nbsp
Но за да го отдалеча достатачно се налагаше да използвам по няколко &nbsp, едо след друго, и така ми се струва че доста се претрупва кода, излишно.

Това проблем ли е за браузерите, или няма проблем да използвам този подход и за напред?

Весели празници :D
 
Отстоянията между елементите не се задават в интервали, а в някаква мерна единица. Например:

Код:
<input type="text" name="name" size="60" maxlength="250" style="margin-left: 50px;">

Разстояние от елемента в ляво - 50 пиксела, обаче в ляво нямаш block level елемент, имаш някакъв текст.

Като създаваш формяляр, много помага ако следваш правилната HTML структура, включваща fieldset, label и елементи на формуляра:

Код:
<fieldset>
    <legend>User registration</legend>

    <label for="name">Name:</label>
    <input type="text" name="name" id="name" size="60" maxlength="250" />

</fieldset>

И след това чрез стилове, да зададаш размери и подравняване на елементите като цяло.
 
хм, тва последното дето го казваш трябва да го изровя отнякъде и да попрочета за него, не бях чувал за тва до сега :o :) :?:
 

Back
Горе