Как бы Вы это верстали?
Привет!
Уже сверстал с использованием JS(jQuery), но пришлось вешать событие на resize, а это опять рывки в опере + некоторые баги при округлении. Подготовил картинку, для наглядности: http://img404.imageshack.us/img404/1039/ideae.jpg Поясню, меню делится на 2 части, левая 40% от ширины окна, правая 60%, в каждой из частей есть по 3 кнопки, у каждой из них свой текст (разной длины), который отцентрирован, необходимо поделить свободные остатки между всеми кнопками (на рисунке это переменная "a"), причем некоторые кнопки имеют динамическую длину текста. Вопрос: Как бы Вы это реализовывали? Можно ли обойтись вообще без JS или применить его в минимальной степени? Спасибо. |
Вы себе противоречите. Сначала говорите, что должно быть равномерное распределение ширины меж блоками, а затем говорит что переменная а должна быть одинаковой и справа и слева.
|
Цитата:
|
a слева(40%) не может быть равно a справа(60%).
Если уж решали обозначить переменными то обозначайте и разницу: a и b например. P.S.: табличкой это делается на раз-два, а с блоками придётся помудрить.) |
Ну в JS реализации a вполне может быть общей, суммируем остатки места слева и справа и делим на 12, это и есть a.
Ок, пусть будут a и b (чтобы отойти от JS), как бы Вы это делали на блоках в CSS? В том то и вопрос, я несколько нуб в верстке, сложноватая конструкция для меня :( |
Нет, вопрос в вашем фейле, а не в 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 не кушает), либо городить кучу вложенных )Второй случай подумаю как сделать если таки разъясните чего хотите. |
Цитата:
Давайте представим, что справа вообще ничего нет, оставим только левую сторону, с теми же условиями (она задана в % отношении от ширины страницы, пускай, опять же 40%). Как бы Вы это делали? Никто и не спорит, что у меня "фейл", иначе бы я сюда не писал, по крайней мере с вопросом. //не видел, что Вы отредактировали сообщение, сейчас посмотрю код, спасибо. |
<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>
|
Спасибо за ответы, но по-моему оба варианта не работают, может просто у меня не получилось донести то, что я хочу.
Давайте упростим, уберем вообще правую часть, есть только левая, она 40% от экрана, в ней есть 3 кнопки, в каждой из этих 3 кнопок текст !!!разной длины!!!, которая заранее неизвестна, все эти кнопки в ширину в итоге должны получиться разными (за исключением случая, когда текст в двух кнопках занимает одинаковое кол-во места), однако расстояние от текста до краев кнопки у всех должно получиться одинаковым. Этого нет в обоих вариантах, в первом видно на глаз, если растянуть на весь экран, а во втором пришлось по пикселям мерить, я уже было подумал, что вроде похоже на правду, но нет :( //кстати, неплохо было бы еще добавить условие, не использовать text-align, а использовать доп. блок внутри таблички с width: auto; display: table; margin: 0 auto; (делать центрирование таким образом). |
Цитата:
P.S. a должны быть динамическим насколько я понял. |
Цитата:
Тады в % ? (мне показалось имхо, что TC - определил а - как переменную из-за вычислений в jQuery Цитата:
|
a действительно должно быть динамическим, если говорить об a, как о полноценной переменной в коде, то его можно было бы вычислить по формуле:
Цитата:
|
madd1,
a) Если отступы не задаете явно - могет быть такая ситуация при смене масштаба - что текст привысит ширину отведенной ячейки и она вылезет на соседние - а так будет автоперенос - пробуйте приведенный пример в при zoom экрана (или разных разрешения) (Сонтрл+колёсико мыши - аналогично изменениям масштаба (Последный пост имхо - чот Вы задёргались в перестраховках |
Меня, честно говоря, больше автоперенос пугает, а так, да, при х7~ зуме может и возникает проблема, что текст немного налезает, но кому нужен такой зум?! Для мобильных устройств будет отдельный сайт, а на десктопах вряд ли будут настолько извращаться?!
|
Да, я тупанул чутка. Давно таблицы не юзал:
<!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>
|
:) В принципе - если челу низзя автоперенос
наверно добавить td, td *{ white-space: nowrap; } |
Спасибо за таблички, не знал, что это будет так работать, в основном блоками верстаю :)
|
Хотя, есть ещё проблема, не заметил её сразу, так как Вы сделали через button, что если мне там button не нужен, а нужен, скажем, блок какой-то, как не пробую, не получается сделать так, чтобы текст был в 1 строку, он начинает переноситься, пока не задашь блоку внутри <td> ширину в пикселях, а мне это не подходит :( Подскажите, как решить, спасибо заранее.
|
Цитата:
Цитата:
|
Не заметил, спасибо, теперь всё как надо :)
|
| Часовой пояс GMT +3, время: 11:35. |