Помогите сделать разметку, пожалуйста
От: 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>

Прошу прощения, что плохо сформулировал
Но нужна именно таблица
Так как ниже тоже будут поля

Это банальная шапочка сайта

Отредактировано 16.09.2019 8:26 TailWind . Предыдущая версия .
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
Оценка:
Не работает независимо от того как задавать ширину через стиль или напрямую

Я там в основной ветке написал почему не работает
Чтобы внутри дискуссии не потерялось
Отредактировано 16.09.2019 20:42 TailWind . Предыдущая версия . Еще …
Отредактировано 16.09.2019 20:38 TailWind . Предыдущая версия .
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 или прямо

Как быть то?
Отредактировано 16.09.2019 20:52 TailWind . Предыдущая версия .
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, делаем среднюю область меньше
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.