Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 05:31
Оценка:
Банальный веб сайт
Есть три области
— Все три целиком растянуты на ширину страницы
— Области A и C имеют одинаковый размер
— Область B должна иметь размер 500px
— если не влезает на страницу, то сначала должны уменьшаться области A и C, и только потом B
Весь мозг сломал
Помогите, пожалуйста, как это сделать?
Пытаюсь через
<table>
<tr>
<td>
<td width=500>
<td>
</table>
Но нестабильно работает
То есть какие-то мелкие изменения внутри областей приводят к тому, что область B становится больше чем 500px, без каких либо на то причин
Re: Помогите сделать разметку, пожалуйста
От:
Буравчик
Дата: 16.09.19 05:55
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>- Все три целиком растянуты на ширину страницы
TW>- Области A и C имеют одинаковый размер
TW>- Область B должна иметь размер 500px
TW>- если не влезает на страницу, то сначала должны уменьшаться области A и C, и только потом B
Так?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.row {
display: table;
width: 100%;
table-layout: fixed;
}
.cell {
display: table-cell;
}
.cell-inner {
width: 500px;
background-color: pink;
}
.cell-outer {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="row">
<div class="cell cell-outer">A</div>
<div class="cell cell-inner">B</div>
<div class="cell cell-outer">C</div>
</div>
</body>
</html>
Best regards, Буравчик
Re: Помогите сделать разметку, пожалуйста
От:
Lazytech
Дата: 16.09.19 07:01
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Пытаюсь через
TW><table>
TW><tr>
TW><td>
TW><td width=500>
TW><td>
TW></table>
HTML td width Attribute
The width attribute of <td> is not supported in HTML5. Use CSS instead.
CSS syntax: <td style="width:100px">
Re[2]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 08:26
Оценка:
Б><div class="row">
Б> <div class="cell cell-outer">A</div>
Б> <div class="cell cell-inner">B</div>
Б> <div class="cell cell-outer">C</div>
Б></div>
Прошу прощения, что плохо сформулировал
Но нужна именно таблица
Так как ниже тоже будут поля
Это банальная шапочка сайта
Re[3]: Помогите сделать разметку, пожалуйста
От:
Буравчик
Дата: 16.09.19 09:25
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Но нужна именно таблица
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table {
width: 100%;
}
.cell-inner {
width: 500px;
background-color: pink;
}
.cell-outer {
background-color: lightgreen;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="cell-outer">Header A</td>
<td class="cell-inner">Header B</td>
<td class="cell-outer">Header C</td>
</tr>
</table>
</body>
</html>
Best regards, Буравчик
Re[4]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 10:44
Оценка:
Думаете есть разница, как задавать width?
Через css или <td width=qqq>?
Re[5]: Помогите сделать разметку, пожалуйста
От:
Буравчик
Дата: 16.09.19 11:53
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Думаете есть разница, как задавать width?
TW>Через css или <td width=qqq>?
Однозначно, лучше использовать CSS.
С точки зрения браузера — разница минимальная.
С точки зрения поддержки кода — разница огромная.
Best regards, Буравчик
Re[6]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 20:35
Оценка:
Не работает независимо от того как задавать ширину через стиль или напрямую
Я там в основной ветке написал почему не работает
Чтобы внутри дискуссии не потерялось
Re: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 20:39
Оценка:
Понял почему всё рушится
В области B есть строчка с текстом (в примере это "Название сайта")
Ширина этой строчки 150px (не я задаю, а так получается)
Если я ставлю Width = 140, строчка не влезает в область B
И браузер (Chrome) ставит области B максимально возможный размер
Только FireFox догадывается что слово "сайта" нужно перенести на следующую строчку
Вот реальный код на котором эта проблема проявляется
<table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
<tr height=45>
<td>
<table width=10 border=0 cellspacing=0 cellpadding=0><tr><td></table>
<td width=140>
<td>
<table width=10 border=0 cellspacing=0 cellpadding=0><tr><td></table>
<tr height=55>
<td bgcolor=#05466C>
<td bgcolor=#05466C>
<span style="color: #FEFEFE; font-size: 16pt;" >Название сайта</span>
<td bgcolor=#05466C>
<tr height=7>
<td bgcolor=red>
<td bgcolor=green>
<td bgcolor=blue>
<tr>
<td>
<td valign=top>
123
<td>
</table>
Не важно через style я задаю width или прямо
Как быть то?
Re[2]: Помогите сделать разметку, пожалуйста
От:
Ops
Дата: 16.09.19 21:24
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Как быть то?
overflow-x: hidden может помочь, хотя с таблицами я не пробовал
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Re: Помогите сделать разметку, пожалуйста
От:
scf
Дата: 16.09.19 22:26
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Банальный веб сайт
TW>Есть три области
TW>Image: qqq.gif
TW>- Все три целиком растянуты на ширину страницы
TW>- Области A и C имеют одинаковый размер
TW>- Область B должна иметь размер 500px
TW>- если не влезает на страницу, то сначала должны уменьшаться области A и C, и только потом B
TW>Весь мозг сломал
TW>Помогите, пожалуйста, как это сделать?
Это?
https://codepen.io/Scf/pen/gOYdwwY
Re[2]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 16.09.19 23:11
Оценка:
scf>Это?
scf>https://codepen.io/Scf/pen/gOYdwwY
max-width только с дивами работает?
Что-то у меня с <td> не работает
Я не представляю как на дивах делать разметку сайта
Re[3]: Помогите сделать разметку, пожалуйста
От:
Буравчик
Дата: 17.09.19 06:20
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>max-width только с дивами работает?
TW>Что-то у меня с <td> не работает
max-width работает только с CSS. Неважно, для таблиц или дивов
Best regards, Буравчик
Re[4]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 17.09.19 08:02
Оценка:
Б>max-width работает только с CSS. Неважно, для таблиц или дивов
Я через style=.. вставлял
Ладно я понял, что затея провалилась
Сделаю ширину области B фиксированной длинны
Не получится сделать, чтобы она на смартфончиках уменьшалась
Re[5]: Помогите сделать разметку, пожалуйста
От:
Буравчик
Дата: 17.09.19 08:39
Оценка:
Здравствуйте, TailWind, Вы писали:
TW>Не получится сделать, чтобы она на смартфончиках уменьшалась
Для адаптивной верстки в CSS существует @media.
Сможешь настроить разные стили для больших и маленьких экранов
Best regards, Буравчик
Re[6]: Помогите сделать разметку, пожалуйста
От:
TailWind
Дата: 17.09.19 11:50
Оценка:
Б>Для адаптивной верстки в CSS существует @media.
Б>Сможешь настроить разные стили для больших и маленьких экранов
Ммм.. интересно, спасибо!
А то я подумал на JavaScript написать
Если ширина экрана меньше X, делаем среднюю область меньше
Пока на собственное сообщение не было ответов, его можно удалить.
Удалить