>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Как сделать адаптивную структуру таблицы или колонок для сайта?

голоса: 0

Как сделать адаптивную структуру таблицы или блоков для сайта как на примере ?

1 Полный размер

2 Размер браузера узже

| Автор: | Категория: Вопросы новичков
Переоткрытие | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
 
Лучший ответ
И что это будет за вебстудия и какие у вас программисты или верстальщики которые не знают как создавать адаптивные таблицы, это называется будущий лохотрон для заказчиков, извините, но так и есть.
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Мы не веб студия , я просто хочу узнать как сделать как на том сайте
| Автор:
Руслан Ельдеев,
это вовсе не таблицы, учитесь пользоваться инспектором кода, в каждом браузере имеется данный инструмент, как пример по таблицах, прочтите пост - http://habrahabr.ru/post/149742/ и посмотрите демо примеры и стили которые применяются к таблицам, думаю разберетесь

Хотите сделать адаптивный блок, задавайте ему размеры max-width:100% и display:inline-block; в данном примере я не вижу ссылку на ваш сайт или вы еще изображение нам предоставите чтобы по фото все смотреть и после в графическом редакторе рисовать решение ))
| Автор:

Сделал вот такой пример, но что то он не хочет работать

сss

/* imports */
@import url(http://fonts.googleapis.com/css?family=Lobster);

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* global */
body {
  background-color: rgb(40,40,40);
  color: rgb(100,100,100);
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.3;
}
.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}
h1 {
  font-family: "Lobster", cursive;
  font-size: 2em;
  margin-bottom: 10px;
}
h2 {
  font-weight: 700;
}

/* layout */
.container {
  
}
.primary {
  margin-bottom: 20px;
}


@media all and ( min-width: 600px ) {
  
  .container {
    padding-right: 300px;
  }
  .primary {
    float: left;
    padding-right: 60px;
    width: 100%;
  }
  .secondary {
    float: right;
    margin-right: -300px;
    width: 300px;
  }
  
}

 

HTML

<body>
  <div class="wrapper">
    <h1>Easy Responsive CSS Grid Layout, Version 1b: Fluid Content Fixed Sidebar</h1>
    <p>Demo by Nick Salloum. <a href="http://www.sitepoint.com/easy-responsive-css-grid-layouts">See article</a>.</p>
    
    <div class="container clearfix">
      <div class="primary">
        <h2>Primary</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse architecto modi ratione porro magnam explicabo! Porro dolore aut nam sed officiis dolores unde quo nostrum vero earum error ipsum cumque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aliquam explicabo sapiente doloremque perspiciatis qui iste ipsa consectetur suscipit eum totam laborum quidem quam sint ducimus fugit dolorem illum doloribus!
      </div>
      <div class="secondary">
        <h2>Secondary</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
    </div><!-- /.container -->
  </div><!-- /.wrapper -->
</body>

| Автор:
И хотел узнать как применить такой стиль к стандартному table ucoz
| Автор:
...