Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2012, 11:46
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Как бы Вы это верстали?
Привет!

Уже сверстал с использованием JS(jQuery), но пришлось вешать событие на resize, а это опять рывки в опере + некоторые баги при округлении.

Подготовил картинку, для наглядности: http://img404.imageshack.us/img404/1039/ideae.jpg
Поясню, меню делится на 2 части, левая 40% от ширины окна, правая 60%, в каждой из частей есть по 3 кнопки, у каждой из них свой текст (разной длины), который отцентрирован, необходимо поделить свободные остатки между всеми кнопками (на рисунке это переменная "a"), причем некоторые кнопки имеют динамическую длину текста.

Вопрос: Как бы Вы это реализовывали? Можно ли обойтись вообще без JS или применить его в минимальной степени?

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2012, 11:55
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

Вы себе противоречите. Сначала говорите, что должно быть равномерное распределение ширины меж блоками, а затем говорит что переменная а должна быть одинаковой и справа и слева.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2012, 11:58
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Сообщение от Aetae Посмотреть сообщение
Вы себе противоречите. Сначала говорите, что должно быть равномерное распределение ширины меж блоками, а затем говорит что переменная а должна быть одинаковой и справа и слева.
Возможно, не очень понятно выразился, но НЕТ, ширина не должна быть везде равной, напротив, свободное место должно быть именно по переменной a распределено.
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2012, 12:01
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

a слева(40%) не может быть равно a справа(60%).
Если уж решали обозначить переменными то обозначайте и разницу: a и b например.

P.S.: табличкой это делается на раз-два, а с блоками придётся помудрить.)
__________________
29375, 35

Последний раз редактировалось Aetae, 02.08.2012 в 12:03.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2012, 12:07
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Ну в JS реализации a вполне может быть общей, суммируем остатки места слева и справа и делим на 12, это и есть a.

Ок, пусть будут a и b (чтобы отойти от JS), как бы Вы это делали на блоках в CSS? В том то и вопрос, я несколько нуб в верстке, сложноватая конструкция для меня
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2012, 12:22
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

Нет, вопрос в вашем фейле, а не в js-реализации. Если a и там и там будет одинаковым, то справа никакого равномерного распределения не будет.

Впрочем ладно, вот первый случай:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{margin:0;padding:0;}
	table{
	font-size:10px;
	border:none;
	border-collapse:collapse;
	height:100%;
	}
	td{
	text-align:center;
	}
	.first{
	width:40%;
	float:left;
	background:#faa;
	}
	.second{
	width:60%;
	background:#afa;
	}
	.container{
	width: 90%;
	margin: 10px auto;
	height:70px;
	}
	</style>
</head>
<body>
<div class="container">
	<table class="first">
		<tr>
			<td>textextextextext</td>
			<td>textextextextextextexte</td>
			<td>textextextexte</td>
		</tr>
	</table>
	<table class="second">
		<tr>
			<td>textextextextext</td>
			<td>textextextextextextexte</td>
			<td>textextextexte</td>
		</tr>
	</table>
</div>	
</body>
</html>
Можно и блоками - но лень, так проще.(блокам всё равно надо display:inline-block или table-cell(что ие6 не кушает), либо городить кучу вложенных )

Второй случай подумаю как сделать если таки разъясните чего хотите.
__________________
29375, 35

Последний раз редактировалось Aetae, 02.08.2012 в 12:34.
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2012, 12:29
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Сообщение от Aetae Посмотреть сообщение
Нет, вопрос в вашем фейле, а не в js-реализации. Если a и там и там будет одинаковым, то справа никакого равномерного распределения не будет.
Ага, ерунду сказал, на JS пока только левую сторону сделал, думал, нормально отмасштабируется направо, но, немного еще подумав, соглашусь с Вами.

Давайте представим, что справа вообще ничего нет, оставим только левую сторону, с теми же условиями (она задана в % отношении от ширины страницы, пускай, опять же 40%). Как бы Вы это делали? Никто и не спорит, что у меня "фейл", иначе бы я сюда не писал, по крайней мере с вопросом.

//не видел, что Вы отредактировали сообщение, сейчас посмотрю код, спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2012, 12:41
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<style type="text/css">
#meny *{
 padding: 0;
 margin: 0;
}
#meny {
 padding:0;
 border-collapse:collapse;
 border:2px solid blue;
 width:100%;
}
#meny > tr,
#meny > tr >td{
 padding:0;
 vertical-align:center;
}
table[id^="submeny"]{
 margin:0;
 padding:0;
 border-collapse:collapse;
 width:100%;
}
table[id^="submeny"] td{
  border:1px solid red;
}
table[id^="submeny"] > tr{
 padding:0;
 vertical-align:center;
}
#meny table[id^="submeny"] td{
 padding: 10px 20px!important; /* a=20px */
}
table[id^="submeny"] td div.cont{
 border:2px solid blue;
 text-align:center
}
table#submeny-2 {
  border:2px solid blue;
}
</style>
<table id=meny><tr valign=center>
   <td width=40%>
        <table id=submeny-1>
          <tr>
             <td>

               <div class=cont> cont 0-1</div>
           
             </td>
             <td>
               <div class=cont> cont 0-2</div>
             </td>
             <td>

               <div class=cont> cont 0-3</div>

             </td>
         </tr>
       </table>
   </td>
   <td width=60%>
        <table id=submeny-2>
          <tr>
             <td>

               <div class=cont> cont 1-1</div>

             </td>
             <td>

               <div class=cont> cont 1-2</div>

             </td>
             <td>

               <div class=cont> cont 1-3</div>

             </td>
         </tr>
       </table>
   </td>
</tr></table>
Ответить с цитированием
  #9 (permalink)  
Старый 02.08.2012, 12:48
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Спасибо за ответы, но по-моему оба варианта не работают, может просто у меня не получилось донести то, что я хочу.

Давайте упростим, уберем вообще правую часть, есть только левая, она 40% от экрана, в ней есть 3 кнопки, в каждой из этих 3 кнопок текст !!!разной длины!!!, которая заранее неизвестна, все эти кнопки в ширину в итоге должны получиться разными (за исключением случая, когда текст в двух кнопках занимает одинаковое кол-во места), однако расстояние от текста до краев кнопки у всех должно получиться одинаковым.

Этого нет в обоих вариантах, в первом видно на глаз, если растянуть на весь экран, а во втором пришлось по пикселям мерить, я уже было подумал, что вроде похоже на правду, но нет

//кстати, неплохо было бы еще добавить условие, не использовать text-align, а использовать доп. блок внутри таблички с width: auto; display: table; margin: 0 auto; (делать центрирование таким образом).
Ответить с цитированием
  #10 (permalink)  
Старый 02.08.2012, 12:48
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,470

Сообщение от Deff Посмотреть сообщение
#meny > tr >td
table[id^="submeny"]
Эх, хотел бы я зыбыть про ишака как страшный сон и писать css также, но увы.=(
P.S. a должны быть динамическим насколько я понял.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подключить это к джумле? nikki4 Элементы интерфейса 0 05.05.2012 14:17
Как поменять формат переменной, чтоб комп понял, что это не текст, а команды? FirstFrost Общие вопросы Javascript 2 15.07.2010 22:33
Как это реализовать ~online~ Оффтопик 9 13.07.2010 16:15
Подскажите, как это сделно ? AlexNiko Элементы интерфейса 11 08.12.2009 10:39
1092*0.15=? А на javascript? Как это объяснить бухгатеру? oid Общие вопросы Javascript 15 24.10.2009 12:51