Шапка из 3-х колонок - auto+liquid+auto - HTML и CSS

Дерек · 02.02.2014, 12:01

Птенчики, чёта совсем не получается сделать так.
Вот спецом для вас нарисовал, чтобы словами не особо объяснять и чтобы было лучше понятно.

Проблема у меня с центром.
Нужно чтобы он был "резиновым" (при сжимании он должен сжиматься) и всегда был по центру.
А левый и правый блоки тоже не должны иметь фиксированной ширины в пикселах (наверное auto должно быть) так как в них длинна надписей может меняться и они тоже должны расширяться или сужаться.

Дерек · 02.02.2014, 21:04

О, как! Даже великий и могучий Naive не может решить подобную задачку!

На первый взгляд вроде всё просто, но на самом деле - не просто

input в середине должен обязательно иметь width: 100%,; т. е. играть роль распорки между левым и правым блоками.

Metandrostenalon · 02.02.2014, 21:16

Иметь 100% и при этом не быть на 100%? Занимательная математика. Я бы тоже посмотрел на решение этой задачки на css, а в его отсутствии воспользовался бы js

Дерек · 02.02.2014, 21:16

Вот нахимичил, но не могу с центром решить проблему.

Код HTML:

<div class="header">

<div class="header_left">Название компании</div>

<div class="header_right"><a href="#">Вход и регистрация</a></div>

<div class="header_center"><form action="" method="get">
<input type="text" name="searchword" value="" class="input_search">
</form></div>

</div>

Код HTML:

.header {
   float: left;
   width: 100%;
   padding: 0;
   margin: 0;
}

.header_left {
    float: left;
	width: auto;
	line-height: 1.45;
} 

.header_center {
	margin: 0 auto;
	text-align: center;
}

.header_right {
    padding: 0;
	margin: 0;
    width: auto;
	float: right;
}

Дерек · 02.02.2014, 21:18

Цитата:

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

Иметь 100% и при этом не быть на 100%? Занимательная математика. Я бы тоже посмотрел на решение этой задачки на css, а в его отсутствии воспользовался бы js

100% ширина относительно промежности между левым и правым блоками, а не 100% относительно контейнера

Metandrostenalon, ты советский качок?

Дерек · 02.02.2014, 21:53

Зяблики, ну что, никто не знает как такое решается с помощью CSS?
Блин, этот грёбанный CSS - какой-то недоносок родившийся у недоносков!

То ли дело таблицы! С помощью таблицы я такое решаю проще, чем свой палец описаю

Но таблицей типа некошерно нынче, не в моде и не по понятиям

Вот смотрите:

Код HTML:

<!DOCTYPE html>

<html lang="ru"><head>
<title></title>
<meta charset="utf-8">

</head>
<body>

<table width="100%">
<tr>
<td nowrap bgcolor="yellow">htyhtrytryrtyr grtgretgertg ertertewrwrrewrewr</td>
<td width="100%" style="padding: 0 20px;"><form action="" method="get"><input type="text" name="" value="" style="width: 100%;"></form></td>
<td nowrap bgcolor="yellow">htyhtrytryrtyr grtgretgertg</td>
</tr>
</table>

</body>
</html>

Metandrostenalon · 03.02.2014, 10:18

Как вариант

Код HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .header {
            display:table;
            width:100%;
        }
        .header > div {
            display:table-cell;
            white-space:nowrap;
        }
        .header .header_center {
            width:100%;
            padding:0 20px;
        }
        .header .header_center input {
            width:100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header_left">htyhtrytryrtyr grtgretgertg ertertewrwrrewrewr</div>
        <div class="header_center">
            <form action="" method="get">
                <input type="text" name="searchword" value="" class="input_search">
            </form>
        </div>
        <div class="header_right"><a href="#">Вход и регистрация</a></div>
    </div>
</body>
</html>

Дерек · 03.02.2014, 20:51

Метанчик, Дростаналончик, может долбанём по таблеточке на мускол

Чтобы мозг лучше работал.

Такой код абсолютно неприемлем.
IE ещё никто не отменял, он ещё жив, и думаю, что долго ещё будет жить.

Естественно, что должна быть кроссбраузерность.

Metandrostenalon · 03.02.2014, 22:09

поддерживать версии 6-7, нет уж извольте

Дерек · 05.02.2014, 03:24

Цитата:

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

поддерживать версии 6-7, нет уж извольте

Да уж конечно, те люди, которые юзают IE 6-7 (особенно их много именно в крупных фирмах) - они как бы и не совсем люди

Иными словами - нам насрать на вас, даже если вы наши потенциальные клиенты

Ваших денег нам не нужно, так как нам впадлу работать и получать деньги от таких как вы поросят использующих IE 6-7.
Если вы хотите платить нам денежки за наши услуги, то вы должны подстроиться под нас - тогда мы благородно и снисходительно примем ваши денежки. А пока сушите вёсла!

02.02.2014, 21:04	#2
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	О, как! Даже великий и могучий Naive не может решить подобную задачку! На первый взгляд вроде всё просто, но на самом деле - не просто input в середине должен обязательно иметь width: 100%,; т. е. играть роль распорки между левым и правым блоками. Последний раз редактировалось Дерек; 02.02.2014 в 21:09.

02.02.2014, 21:16	#3
Metandrostenalon Форумчанин Регистрация: 03.04.2009 Сообщений: 108	Иметь 100% и при этом не быть на 100%? Занимательная математика. Я бы тоже посмотрел на решение этой задачки на css, а в его отсутствии воспользовался бы js php,javascript

02.02.2014, 21:53	#6
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Зяблики, ну что, никто не знает как такое решается с помощью CSS? Блин, этот грёбанный CSS - какой-то недоносок родившийся у недоносков! То ли дело таблицы! С помощью таблицы я такое решаю проще, чем свой палец описаю Но таблицей типа некошерно нынче, не в моде и не по понятиям Вот смотрите: Код HTML: <!DOCTYPE html> <html lang="ru"><head> <title></title> <meta charset="utf-8"> </head> <body> <table width="100%"> <tr> <td nowrap bgcolor="yellow">htyhtrytryrtyr grtgretgertg ertertewrwrrewrewr</td> <td width="100%" style="padding: 0 20px;"><form action="" method="get"><input type="text" name="" value="" style="width: 100%;"></form></td> <td nowrap bgcolor="yellow">htyhtrytryrtyr grtgretgertg</td> </tr> </table> </body> </html> Последний раз редактировалось Дерек; 03.02.2014 в 20:43.

03.02.2014, 22:09	#9
Metandrostenalon Форумчанин Регистрация: 03.04.2009 Сообщений: 108	поддерживать версии 6-7, нет уж извольте php,javascript

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновая 3-х колоночная шапка с 1 колонкой width: auto;	Дерек	HTML и CSS	8	11.02.2013 15:12
CSS - height auto	bulat786	HTML и CSS	1	11.11.2011 20:02
webbrowser Auto-Size	Delphinchik	Общие вопросы Delphi	1	14.02.2011 11:16
height:auto !important	yarilo	HTML и CSS	4	28.07.2009 15:16

03.02.2014, 20:51	#8
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Метанчик, Дростаналончик, может долбанём по таблеточке на мускол Чтобы мозг лучше работал. Такой код абсолютно неприемлем. IE ещё никто не отменял, он ещё жив, и думаю, что долго ещё будет жить. Естественно, что должна быть кроссбраузерность.