Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как бы Вы это верстали? (https://javascript.ru/forum/xhtml-html-css/30369-kak-vy-ehto-verstali.html)

Deff 02.08.2012 12:51

Цитата:

Сообщение от Aetae
a должны быть динамическим насколько я понял.

:blink:
Тады в % ? (мне показалось имхо, что TC - определил а - как переменную из-за вычислений в jQuery
Цитата:

Сообщение от madd1
необходимо поделить свободные остатки между всеми кнопками (на рисунке это переменная "a")


madd1 02.08.2012 12:55

a действительно должно быть динамическим, если говорить об a, как о полноценной переменной в коде, то его можно было бы вычислить по формуле:
Цитата:

a = ($(ширина всего левого блока) - $(суммарная ширина текста во всех кнопках)) / 6;
Но тут CSS, в том и сложность, не знаю, как сделать без скрипта :(

Deff 02.08.2012 13:03

madd1,
a) Если отступы не задаете явно - могет быть такая ситуация при смене масштаба - что текст привысит ширину отведенной ячейки и она вылезет на соседние - а так будет автоперенос - пробуйте приведенный пример в при zoom экрана (или разных разрешения) (Сонтрл+колёсико мыши - аналогично изменениям масштаба

(Последный пост имхо - чот Вы задёргались в перестраховках

madd1 02.08.2012 13:23

Меня, честно говоря, больше автоперенос пугает, а так, да, при х7~ зуме может и возникает проблема, что текст немного налезает, но кому нужен такой зум?! Для мобильных устройств будет отдельный сайт, а на десктопах вряд ли будут настолько извращаться?!

Aetae 02.08.2012 13:49

Да, я тупанул чутка. Давно таблицы не юзал:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{margin:0;padding:0;}
	table{
	border:none;
	height:100%;
	border-collapse:collapse;
	font-size:10px;
	}
	td{
	text-align:center;
	}
	.first{
	width:40%;
	float:left;
	background:#faa;
	}
	.second{
	width:60%;
	background:#afa;
	}
	.container{
	width: 90%;
	margin: 10px auto;
	height:70px;
	}
	
	.spacer{
	width:30%;
	}
	.spacer2{
	width:15%;
	}	

	</style>
</head>
<body>
<div class="container">
	<table class="first">
		<tr>
			<td class="spacer2"></td>
			<td><input type="button" value="textextextextext" /></td>
			<td class="spacer"></td>
			<td><input type="button" value="textextextextextextexte" /></td>
			<td class="spacer"></td>
			<td><input type="button" value="text" /></td>
			<td class="spacer2"></td>
		</tr>
	</table>
	<table class="second">
		<tr>
			<td class="spacer2"></td>
			<td><input type="button" value="textextextextext" /></td>
			<td class="spacer"></td>
			<td><input type="button" value="textextextextextextexte" /></td>
			<td class="spacer"></td>
			<td><input type="button" value="text" /></td>
			<td class="spacer2"></td>
		</tr>
	</table>
</div>	
</body>
</html>

Deff 02.08.2012 14:07

:) В принципе - если челу низзя автоперенос
наверно добавить
td, td *{
white-space: nowrap;
}

madd1 02.08.2012 19:05

Спасибо за таблички, не знал, что это будет так работать, в основном блоками верстаю :)

madd1 02.08.2012 20:11

Хотя, есть ещё проблема, не заметил её сразу, так как Вы сделали через button, что если мне там button не нужен, а нужен, скажем, блок какой-то, как не пробую, не получается сделать так, чтобы текст был в 1 строку, он начинает переноситься, пока не задашь блоку внутри <td> ширину в пикселях, а мне это не подходит :( Подскажите, как решить, спасибо заранее.

Deff 02.08.2012 20:48

Цитата:

Сообщение от madd1
он начинает переноситься, пока не

Цитата:

Сообщение от Deff
В принципе - если челу низзя автоперенос
наверно добавить
td, td *{
white-space: nowrap;
}

Вот

madd1 03.08.2012 00:13

Не заметил, спасибо, теперь всё как надо :)


Часовой пояс GMT +3, время: 21:38.