Резиновая 3-х колоночная шапка с 1 колонкой width: auto; - HTML и CSS

Дерек · 10.02.2013, 14:05

Господа, не получается добиться того, что нужно.
Поэтому снова обращаюсь за помощью к вам
Может кто поможет.
Нарисовал наглядно и прикрепляю картинку

Общая ширина хедера 100%;
У первой колнки должен быть width: auto;

Нужно чтобы всегда номер телефона - 123456 - находился по центру. Т. е. слева и справа одинаковые отступы.

Если знаете решение, то прошу дать, а не отсылать на учебники и прочее. Я уже прочитал учебники и кучу лэйаутов просмотрел, но не получается сделать как нужно.

MyLastHit · 10.02.2013, 14:30

Делай номер телефона display:inline-block; и для родительского контейнера задай text-align: center;

Дерек · 10.02.2013, 17:34

inline и text-align тут не при чём.
дело только в блоках.
ты наверное смотришь на картинку, но не совсем понял как должно быть

А должно быть точно так, как на картинке.
но, не получается сделать, т. е. не получается.

вот моя конструкция:

Код:

<div style="width: 100%;">

<div style="width: auto; float: left; background: yellow;">Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст.</div>

<div style="float: left; background: red;">123456</div>

<div style="float: left; background: green;"><textarea style="width: 100%;"></textarea></div>

</div>

так получается. т. е. я не знаю как растянуть 2 блока, чтобы вместе 3 блока были 100%.

MyLastHit · 10.02.2013, 20:09

Читаю, каждую букву в отдельности понимаю, а все вместе - нет. Сначала вам нужно, чтобы номер всегда центровался, вот я и говорю - делайте его inline-block и родителю text-align, а сейчас выясняется что вы даже не представляете как сверстать.
Хотябы объясните, как должны масштабироваться по ширине 1,2,3 колонки?
Вы странно верстаете. Если нужно, чтобы в сумме было 100%, то и делайте. А все вытекающие из этого проблемы решайте по другому. А вы наоборот всё.

Дерек · 10.02.2013, 23:35

Я прекрасно знаю как верстать, но не понимаю как сделать то, что на картинке

Специально нарисовал, чтобы наглядно всё показать.
Там вроде чётко видно. Но если что-то не ясно, то дополню словами

:

Ширина контейнера - 100%. Колонки должны занимать все 100% ширины контейнера.

1-ая колонка растягивается вдлинну в зависимости от длинны текста в ней.

2-ая и 3-я колонки занимают всё пространство справа (его ширина динамична и зависит от ширины 1-ой колонки) и при сдавливании браузера сначала только они - 2-ая и 3-я - сдавливаются (первая колонка не сдавливается!).

Когда 2-ая и 3-я колонки сдавились до такой степени, что дальше некуда (третий рисунок), тогда начинает сдавливаться и 1-ая колонка.

MyLastHit · 11.02.2013, 01:36

Код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    window.onload = function(){
      document.querySelector('.wrap').style.marginLeft = document.querySelector('.left').clientWidth + 'px';
    }
  </script>
  <style>
    .left,.middle,.right,.wrap{
      height: 300px;
    }
    .left{
      background: red;
      float: left;
      width: auto;
    }
    .wrap{
      background: yellow;
    }
    .right,.middle{
      float: left;
      width: 50%;
    }
    .middle{
      background: blue;
      line-height: 300px;
      text-align: center;
    }
    .right{
      background: green;
    }
  </style>
  <div class="left">тексттекстткствфвжофы</div>
  <div class="wrap">
    <div class="middle">
      89209392390981
    </div>
    <div class="right"></div>
  </div>
</body>
</html>

Если текст в первой колонке меняется динамически, то просто следите за его длиной по setInterval и в случае изменения выполняйте тот код.

Дерек · 11.02.2013, 12:22

Ой, огромнейшее спасибо!
Ценнейший человек во всём межзвёздном и около пространствах!

Но, к сожалению, не совсем, что нужно.
Нужно на CSS, без костылей в виде скрипта.

Я тут нафигачил кое-что, но я уже так заморочился, что плохо соображаю - не пойму почему IE немного по другому показывает.

Код:

<html>
<head>
<body>

    <div style="overflow: hidden;">
      <div style="float: left; width: auto; background: green;">This is a left-floated element, with slightly lowered opacity (in supporting browsers). Let's also add some filler.</div>
      <div style="background: yellow;">
	  
	  
	<div>
      <div style="float: left; width: auto; background: yellow; padding: 0 10%; text-align: center;">123456<br>fgfdrtg<br>gyujtyu</div>
      <div style="background: blue; width: auto;">67u6ersbye5yeb5ye byb5ey5y56y75e45e ftynrd6r65656e45654e6</div>
	</div>
	  
	  
	  </div>
	</div>
	
</body>
</html>

Дерек · 11.02.2013, 14:19

Ну, с твоей помощью, вроде сделал очень близко как нужно.
Но, хотелось бы чтобы первая колонка тоже начала сжиматься, но только после того, как две правые максимально сжались. Чтобы колонки не спрыгивали вниз.

Код HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <style>
    .left,.middle,.right,.wrap{
      height: 300px;
    }
    .left{
      background: red;
      float: left;
      width: auto;
    }
    .wrap{
      background: yellow;
    }
    .middle{
      float: left;
      width: 30%;
    }
	.right{
      width: auto;
	  background: green;
    }
    .middle{
      background: blue;
      line-height: 300px;
      text-align: center;
    }
  </style>
  <div class="left">тексттекстткствфвжофы</div>
  <div class="wrap">
    <div class="middle">
      89209392390981
    </div>
    <div class="right"></div>
  </div>
</body>
</html>

Дерек · 11.02.2013, 15:12

Блин, может такая конструкция и не подходит!
У меня ведь резиновая форма width: 100%; и она вываливается из зелёного дива.

Можно как-то её загнать на место? Сама форма должна быть по всей ширине пространства после синей колонки.

Код HTML:

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">

   <title>Document</title>
   <style>
    .left,.middle,.right,.wrap{
      height: 300px;
    }
    .left{
      background: red;
      float: left;
      width: auto;
    }
    .wrap{
      background: yellow;
    }
    .middle{
      float: left;
      width: 30%;
    }
    .right{
      width: auto;
      background: green;
      vertical-align: top;;
    }
    .middle{
      background: blue;
      line-height: 300px;
      text-align: center;
    }
   </style>
</head>

<body>
   <div class="left">
      тексттекстткствфвжофы вапкеук укекуекуеу кепкуекуеуке укекуеку укеуккеуке
   </div>

   <div class="wrap">
      <div class="middle">
         89209392390981
      </div>

      <div class="right">
         <form>
            <textarea cols="30" placeholder="Ваше письмо" rows="3" style="width: 100%;">
</textarea>
         </form>
      </div>
   </div>
</body>
</html>

10.02.2013, 14:30	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Делай номер телефона display:inline-block; и для родительского контейнера задай text-align: center; Ненавижу быть как все, но люблю, чтобы все были как я.

10.02.2013, 20:09	#4
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Читаю, каждую букву в отдельности понимаю, а все вместе - нет. Сначала вам нужно, чтобы номер всегда центровался, вот я и говорю - делайте его inline-block и родителю text-align, а сейчас выясняется что вы даже не представляете как сверстать. Хотябы объясните, как должны масштабироваться по ширине 1,2,3 колонки? Вы странно верстаете. Если нужно, чтобы в сумме было 100%, то и делайте. А все вытекающие из этого проблемы решайте по другому. А вы наоборот всё. Ненавижу быть как все, но люблю, чтобы все были как я.

10.02.2013, 23:35	#5
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Я прекрасно знаю как верстать, но не понимаю как сделать то, что на картинке Специально нарисовал, чтобы наглядно всё показать. Там вроде чётко видно. Но если что-то не ясно, то дополню словами : Ширина контейнера - 100%. Колонки должны занимать все 100% ширины контейнера. 1-ая колонка растягивается вдлинну в зависимости от длинны текста в ней. 2-ая и 3-я колонки занимают всё пространство справа (его ширина динамична и зависит от ширины 1-ой колонки) и при сдавливании браузера сначала только они - 2-ая и 3-я - сдавливаются (первая колонка не сдавливается!). Когда 2-ая и 3-я колонки сдавились до такой степени, что дальше некуда (третий рисунок), тогда начинает сдавливаться и 1-ая колонка. Последний раз редактировалось Дерек; 10.02.2013 в 23:38.

11.02.2013, 12:22	#7
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Ой, огромнейшее спасибо! Ценнейший человек во всём межзвёздном и около пространствах! Но, к сожалению, не совсем, что нужно. Нужно на CSS, без костылей в виде скрипта. Я тут нафигачил кое-что, но я уже так заморочился, что плохо соображаю - не пойму почему IE немного по другому показывает. Код: <html> <head> <body> <div style="overflow: hidden;"> <div style="float: left; width: auto; background: green;">This is a left-floated element, with slightly lowered opacity (in supporting browsers). Let's also add some filler.</div> <div style="background: yellow;"> <div> <div style="float: left; width: auto; background: yellow; padding: 0 10%; text-align: center;">123456<br>fgfdrtg<br>gyujtyu</div> <div style="background: blue; width: auto;">67u6ersbye5yeb5ye byb5ey5y56y75e45e ftynrd6r65656e45654e6</div> </div> </div> </div> </body> </html>

11.02.2013, 14:19	#8
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Ну, с твоей помощью, вроде сделал очень близко как нужно. Но, хотелось бы чтобы первая колонка тоже начала сжиматься, но только после того, как две правые максимально сжались. Чтобы колонки не спрыгивали вниз. Код HTML: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .left,.middle,.right,.wrap{ height: 300px; } .left{ background: red; float: left; width: auto; } .wrap{ background: yellow; } .middle{ float: left; width: 30%; } .right{ width: auto; background: green; } .middle{ background: blue; line-height: 300px; text-align: center; } </style> <div class="left">тексттекстткствфвжофы</div> <div class="wrap"> <div class="middle"> 89209392390981 </div> <div class="right"></div> </div> </body> </html> Последний раз редактировалось Дерек; 11.02.2013 в 14:27.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновая шапка стартовой и форма входа!	zech227	HTML и CSS	3	02.10.2012 12:36
td width	veter48	HTML и CSS	1	10.08.2012 13:24
Незадaча с правой колонкой.	kazzz	Компьютерное железо	1	22.06.2011 21:38
Резиновая шапка сайта	dizmo	HTML и CSS	21	19.08.2009 06:21
Резиновая шапка	acmilan	HTML и CSS	14	12.07.2009 00:31