Jump to content
  • 0

Разрыв границы

slavok47

Asked by slavok47,

 Share

Question

34 answers to this question

Recommended Posts

  • 0
Justnewone Explorer

Justnewone

Posted
Posted

Этот тег по разному выглядит, к сожалению, например квадратные или скругленные углы.

А лучше всего "ранг" положить в отдельный тег, сказать тегу голубой бекграунд и как-нибудь подтянуть его наверх (вниз), вобщем так уже понятно.

Link to comment
Share on other sites
  • 0
slavok47 Explorer

slavok47

Posted
  • Author
Posted
А лучше всего "ранг" положить в отдельный тег, сказать тегу голубой бекграунд и как-нибудь подтянуть его наверх (вниз), вобщем так уже понятно.

Тоесть если у меня такая структура

<table>
		 <tr>			 
			   <form name="selections">			
			   <td><select name="individual" onchange="loadIndividual(this.form)">
					 <option value="rank1">Моряк иностранного флота</option>
					 <option value="rank2">Мичман</option>					
					 <option value="rank10">Адмирал флота</option>				   
				  </select> </td>			 
			   <td><img alt="image" src="catalog/rank1.gif" id="img" /></td>		 
		 </table>

Можно Ранг вложить например в span и позиционированием наложить на границу?

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Тоесть если у меня такая структура

<table>
		 <tr>			 
			   <form name="selections">			
			   <td><select name="individual" onchange="loadIndividual(this.form)">
					 <option value="rank1">Моряк иностранного флота</option>
					 <option value="rank2">Мичман</option>					
					 <option value="rank10">Адмирал флота</option>				   
				  </select> </td>			 
			   <td><img alt="image" src="catalog/rank1.gif" id="img" /></td>		 
		 </table>

Можно Ранг вложить например в span и позиционированием наложить на границу?

Да, именно так, а лучше даже в стронг или h1-h6, типа заголовка какбе. В случае h придется немного в CSS повозиться, но грамотная структура ведь превыше всего?

Link to comment
Share on other sites
  • 0
slavok47 Explorer

slavok47

Posted
  • Author
Posted
Для грамотной структуры используйте файлдесет и легенд и не надо заморачиваться над рангами и позиционированием. :)

Это я уже понял, только что то не то получается, псе в одном блоке получается,

или для каждого блока должна быть своя table, отдельно tr нельзя что ли брать в файлдесет?

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

slavok47

Чувствую, что вы все неправильно поняли. Читайте про <fieldset> и <legend> подробней. Таблица (если форму делаете таблицей) должна быть внутри.

Этот тег по разному выглядит, к сожалению, например квадратные или скругленные углы.

Все так, но если явно задать филдсету бордер, то везде будет выглядеть одинаково. Проблемы могут возникнуть только с разными отступами в разных браузерах. На которые, впрочем, можно забить.

Link to comment
Share on other sites
  • 0
slavok47 Explorer

slavok47

Posted
  • Author
Posted
Покажите что вы пробовали (код), что не получается и что нужно на выходе.

Например:

<form name="selections">  
<fieldset >
<legend>Ранг</legend>
	<table>
	  <tr>
		<td><select name="individual" onChange="loadIndividual(this.form)">			
			<option value="rank8">Вице-адмирал</option>
			<option value="rank9">Адмирал</option>
			<option value="rank10">Адмирал флота</option>
		  </select>
		</td>
		<td><img alt="image" src="catalog/rank1.gif" id="img" /></td>
	  </fieldset>
	  <tr>  
		<td colspan="2"><input type="text" name="textfield" id="textfield" size="40"></td>
	  </tr>
	  <tr>
		<td colspan="2">
			<input name="input" type="submit">		
	  </tr>
	</table>
	</form>

Требуется: селект + img 1 блок, текстовое поле 2 блок, сабмит 3 блок

пробовал по разному, в данном случае все получается в одном блоке

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

Так в чем проблема?

<form name="selections">
<fieldset >
<legend>Ранг</legend>
<select name="individual" onChange="loadIndividual(this.form)">			
<option value="rank8">Вице-адмирал</option>
<option value="rank9">Адмирал</option>
<option value="rank10">Адмирал флота</option>
</select>
<p align="right"><img alt="image" src="catalog/rank1.gif" id="img" /></p>
</fieldset>
<fieldset >
<legend>Поле 2</legend>
<input type="text" name="textfield" id="textfield" size="40">
</fieldset>
<fieldset >
<legend>Поле 2</legend>
<input name="input" type="submit">
 </fieldset>
</form>

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
С этим то я понял, все нормально, но у меня все в таблице

при таком варианте img уходит куда то, не понятно куда, а должно быть рядом с селектом как на скрине

Ну это уже дело разметки css. Думайте, на что вам мозг? :)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Всем спасибо, я думал можно без CSS...

Проблемы могут возникнуть, если понадобится отцентрировать Легенд, тогда в разных браузерах будут разные эффекты, а если в этом нет необходимости(на рисунке вроде нет), значит смело можно и нужно Легенд использовать, ведь он в принципе для этого и нужен.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited) 
<form name="selections">  
<fieldset >
<legend>Ранг</legend>
	<table>
	  <tr>
		<td><select name="individual" onChange="loadIndividual(this.form)">			
			<option value="rank8">Вице-адмирал</option>
			<option value="rank9">Адмирал</option>
			<option value="rank10">Адмирал флота</option>
		  </select>
		</td>
		<td><img alt="image" src="catalog/rank1.gif" id="img" /></td>
	  </fieldset>
<fieldset >
<legend>Ранг</legend>
	  <tr>  
		<td colspan="2"><input type="text" name="textfield" id="textfield" size="40"></td>
	  </tr>
	  <tr>
		<td colspan="2">
			<input name="input" type="submit">		
	  </tr>
	</table>
</fieldset>
	</form>

Edited by mishka2
Link to comment
Share on other sites
  • 0
slavok47 Explorer

slavok47

Posted
  • Author
Posted (edited)

Блин вроде все нормально получилось, но

<style type="text/css">
.levo {
margin-left:190px;
margin-top:-30px;
}
.levo1 {
margin-top:7px;
}
.bord {
	width:280;
	color:#15428b;
	font-size:12px;
	font-weight:bold;
	border:solid;
	border-width:1px;
	border-color:#a3bae9;
}
body {
	background-color: #cad9ec;
}
</style>
	<form name="selections">  
<fieldset class="bord">
<legend>Ранг</legend>   
  <select class="levo1" name="individual" onChange="loadIndividual(this.form)">			
			<option value="rank9">Адмирал</option>
			<option value="rank10">Адмирал флота</option>
  </select>	  
	   <img class="levo" alt="image" src="catalog/rank1.gif" id="img" />
	  </fieldset >
		  <fieldset class="bord">
<legend>Титул</legend>
	 <input type="text" name="textfield" id="textfield" size="43">
	 </fieldset> 
  <fieldset class="bord">
<legend>Сохранить</legend>
<div align="center">
  <input name="input" type="submit">
</div>
  </fieldset>
	</form>

Opera и IE

d848969a929c.jpg2a968f540558.jpg

Все таки разница большая...

Edited by slavok47
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Блин вроде все нормально получилось, но

<style type="text/css">
.levo {
margin-left:190px;
margin-top:-30px;
}
.levo1 {
margin-top:7px;
}
.bord {
	width:280;
	color:#15428b;
	font-size:12px;
	font-weight:bold;
	border:solid;
	border-width:1px;
	border-color:#a3bae9;
}
body {
	background-color: #cad9ec;
}
</style>
	<form name="selections">  
<fieldset class="bord">
<legend>Ранг</legend>   
  <select class="levo1" name="individual" onChange="loadIndividual(this.form)">			
			<option value="rank9">Адмирал</option>
			<option value="rank10">Адмирал флота</option>
  </select>	  
	   <img class="levo" alt="image" src="catalog/rank1.gif" id="img" />
	  </fieldset >
		  <fieldset class="bord">
<legend>Титул</legend>
	 <input type="text" name="textfield" id="textfield" size="43">
	 </fieldset> 
  <fieldset class="bord">
<legend>Сохранить</legend>
<div align="center">
  <input name="input" type="submit">
</div>
  </fieldset>
	</form>

Opera и IE

d848969a929c.jpg2a968f540558.jpg

Все таки разница большая...

А в чём разница-то?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Да так то вроде и ни чего, но в ИЕ что то правый край не нравится, как то не синхронно..

На ИЕ не удивляйся, он такой. Сделай в кондишнл кометсах отступы для него отдельно.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept