Форум

madd1 · #1 (**permalink**) 02.08.2012, 11:46

Привет!

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

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

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

Спасибо.

Aetae · #2 (**permalink**) 02.08.2012, 11:55

Вы себе противоречите. Сначала говорите, что должно быть равномерное распределение ширины меж блоками, а затем говорит что переменная а должна быть одинаковой и справа и слева.

madd1 · #3 (**permalink**) 02.08.2012, 11:58

Сообщение от Aetae

Вы себе противоречите. Сначала говорите, что должно быть равномерное распределение ширины меж блоками, а затем говорит что переменная а должна быть одинаковой и справа и слева.

Возможно, не очень понятно выразился, но НЕТ, ширина не должна быть везде равной, напротив, свободное место должно быть именно по переменной a распределено.

Aetae · #4 (**permalink**) 02.08.2012, 12:01

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

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

madd1 · #5 (**permalink**) 02.08.2012, 12:07

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

Ок, пусть будут a и b (чтобы отойти от JS), как бы Вы это делали на блоках в CSS? В том то и вопрос, я несколько нуб в верстке, сложноватая конструкция для меня

Aetae · #6 (**permalink**) 02.08.2012, 12:22

Нет, вопрос в вашем фейле, а не в 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 не кушает), либо городить кучу вложенных )

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

madd1 · #7 (**permalink**) 02.08.2012, 12:29

Сообщение от Aetae

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

Ага, ерунду сказал, на JS пока только левую сторону сделал, думал, нормально отмасштабируется направо, но, немного еще подумав, соглашусь с Вами.

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

//не видел, что Вы отредактировали сообщение, сейчас посмотрю код, спасибо.

Deff · #8 (**permalink**) 02.08.2012, 12:41

<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>

madd1 · #9 (**permalink**) 02.08.2012, 12:48

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

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

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

//кстати, неплохо было бы еще добавить условие, не использовать text-align, а использовать доп. блок внутри таблички с width: auto; display: table; margin: 0 auto; (делать центрирование таким образом).

Aetae · #10 (**permalink**) 02.08.2012, 12:48

Сообщение от Deff

#meny > tr >td
table[id^="submeny"]

Эх, хотел бы я зыбыть про ишака как страшный сон и писать css также, но увы.=(
P.S. a должны быть динамическим насколько я понял.

Форум

Справочник

Discord чат

Курсы javascript