envoleon

Интересное задание от работодателя

Recommended Posts

Всем привет. Примерно год назад, я пытался устроиться в одну компанию( не помню название). В общем там дали 3 тестовых задания для рассмотрения знаний. Первый был связан с html и css. Остальные два с javascript и mysql. На все про все давалось пол дня. По первому впечатлению первый оказался самым легким, но не тут то было (из-за чего я и провалил тест), о нем и пойдет речь в этой теме, так как с остальными я управился за час.

После провала, я решил не сдаваться и попробовать добить это первое задание. Бился на нем днями. Так его и не решил. Так его и не решили мои знакомые друзья (которые имеют хороший опыт в верстке). Я не знаю в чем подвох, может вы мне подскажите?

 

Вот само задание

Цитата

Имеется HTML разметка:


<style>
    .columns {width: 100%; overflow: hidden;}
    .sidebar-left {width: 300px;}
    .sidebar-right {width: 300px;}
</style>
<div class="columns">
    <div class="content"></div>
    <div class="sidebar-left"></div>
    <div class="sidebar-right"></div>
</div>


Допишите необходимые стили, чтобы на экране блоки отображались в следующем порядке:  sidebar-left,  content,  sidebar-right. При необходимости в разметку можно добавить один блок div. Использование bootstrap, flexbox, javascript и css функции calc запрещено.
Боковые столбцы фиксированные, центральная занимает оставшееся пространство. Высота колонок должна формируется в зависимости от их содержимого, а не от явного ее указания в css.
Запрещается менять местами div контейнеры в html разметке.  Ни одна из колонок не должна перекрывать содержимое, которое может идти сразу под колонками.
 

Может кто из вас сможет его решить, потому что я уже перепробовал очееень много разных способов? Может даже создатель этого задания сидит тут.

В заранее, прежде чем думать, что вы решили его за 5 минут с лета, внимательно прочитайте все условия (Тут не все так просто и вправду нужно подумать)

Никакие советы не принимаются. только готовое решение, которое вы сами уже протестировали. Буду проверять, укажу на ошибки, если будут.

Время для выполнения не ограничено, это чисто на интерес каждого, проверить свои способности.

Share this post


Link to post
Share on other sites

Здравствуйте.

Это действительно простая задача, на решение которой требуется не более 5 минут.

Дело в том, что такое решение не актуально много лет, с тех пор как "float" был вытеснен боле современными инструментами. А вот 10-15 лет назад такое можно было увидеть достаточно часто.

Я бы удивился увидев такое тестовое задание последние лет 7 так точно. Самое задание устарело как и его решение.

По моему мнению сейчас давать такое задание — равносильно что кичится.

Share this post


Link to post
Share on other sites

 

5 часов назад, klierik сказал:

Я бы удивился увидев такое тестовое задание последние лет 7 так точно. Самое задание устарело как и его решение.

По моему мнению сейчас давать такое задание — равносильно что кичится.

У работодателя видно были свои (как и его борода) взгляды на все это.
Решение засчитывается, но с требованием "за 5 минут" я бы поспорил, как минимум из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).
Значит пункт с добавлением еще одного div был выходом. Я старался его избежать из-за слов "при необходимости". Не знаю возможно ли его вообще выполнить.

У меня было одно решение (с таблицами), но слабое, так как каждая колонка тянет за собой вертикальный размер:

<html>
	<head>
		<style type="text/css">
			body
			{
				margin: 0px;
			}
			.columns
			{
				display:inline-table;
				table-layout: fixed;
				width: 100%;
				background: #FCE600;
				overflow:hidden;
				position: relative;
			}
			.sidebar-right
			{
				display:table-cell;
				position:relative;
				width: 300px;
				background: #0000ff;
			}
			.sidebar-left
			{
				display:table-cell;
				position:relative;
				right:100%;
				transform: translateX(200%);
				width: 300px;
				background: #ff0000;
			}
			.content
			{
				display:table-cell;
				position:relative;
				right:-300px;
				background: #54B948;
				word-wrap:break-word;
			}
		</style>
	</head>
	<body>
		<div class="columns">
			<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
			<div class="sidebar-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
			<div class="sidebar-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem deserunt odit illum accusantium esse quo inventore molestias natus quasi quidem tempora, alias ullam expedita minus eius, aspernatur aperiam dolorem nostrum.
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
		</div>
	</body>
</html>


 

Share this post


Link to post
Share on other sites
1 час назад, envoleon сказал:

Решение засчитывается, но с требованием "за 5 минут" я бы поспорил, как минимум из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).

Нужно уметь верстать под IE6 😉

Share this post


Link to post
Share on other sites
10.11.2019 в 03:09, envoleon сказал:

из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).

Нужно просто знать как работают отрицательные маржины 🙂

У меня решение заняло чуть больше времени. Но я искал решение без использования дополнительного div. Единственный минус - не работает в IE6, но ведь в условии про него ничего и не сказано, верно? 🙂 Если бы до меня это сразу дошло, решил бы быстрее, а так где -то минут за 40 управился. Причем я не сказал бы что я хорошо разбираюсь в верстке 🙂

.columns {
  width: 100%;
  overflow: hidden; 
}

.sidebar-left {
  width: 300px;
  float: left;
}

.sidebar-right {
  width: 300px;
  float: right;
}

.content{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-left: 300px;
  padding-right: 300px;
  margin-right: -100%;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
    • By marizza40
      Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 
      Есть не анимированный слайдер
      <div class="slider"> <div class="slider_site"> <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line"> </div> <div class="txt_left"> <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1> <div class="button"> <a href="#" class="button_a">Подробнее</a> </div><!--/.button--> </div> <div class="slider_site"> <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line_two"> </div> <div class="txt_left"> <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1> <div class="button"> <a href="#" class="button_a_one">Подробнее</a> </div><!--/.button--> </div> </div> Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 
      CSS:
      /*slider*/ .slider{ display: flex; font-family: 'Roboto', sans-serif; } .slider_h{ position: absolute; color: #fff; top: 32%; left: 7%; font-size: 86px; line-height: 85px; text-align: right; } .slider_h_two{ position: absolute; color: #fff; top: 32%; left: 52%; font-size: 86px; line-height: 85px; } .slider_site{ width: 100%; } .img_slider{ width: 100%; position: relative; } .slider_line{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 42%; } .slider_line_two{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 57%; } /*button*/ .button_a{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 39%; } .button_a:hover{ color: #0092db; text-decoration: none; } .button_a_one{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 52%; } .button_a_one:hover{ color: #0092db; text-decoration: none; }  
    • By marizza40
      Первый раз создаю сайт на хостинге. Не видит блок о компании. Он в конструкции есть, на сайте пустота.  

  • Member Statistics

    46,526
    Total Members
    3,128
    Most Online
    Егор0248
    Newest Member
    Егор0248
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.