Jump to content
  • 0

как сделать такой макет


sitemaker999
 Share

Question

20 answers to this question

Recommended Posts

  • 0

количество пикселей неизвестно. Не буду уверен, но скажу, что такой макет в принципе невозможно реализовать. Хотя бы потому, что 100% - это вся ширина экрана...

Под 100% я имел в виду остальное пространство, а пикселей 200.

Edited by sitemaker999
Link to comment
Share on other sites

  • 0

Я правильно понял?

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><link rel="stylesheet" type="text/css" href="style/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" class="test" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!--Пока поставил 100px потом когда станет известно можно заменить, либо вставить туда переменную-->
<td width="100px" class="test2"> </th>
<!--Тянется на то что осталось 100%-->
Установленно 100px
<td scope="col"> </th>
Установленно 100%</tr>
</table>
</body>
</html>

CSS


.test {
background-color:#F60;}
.test2 {
background-color:#0F0;}

Link to comment
Share on other sites

  • 0

а как еще справа добавить колонку 200 пикс.

Если мой пример разбирать, то:

http://jsfiddle.net/Arhidiablo/CkXx4/2/

HTML код:


<table width="100%" class="test" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" class="test2">Установленно 200px</td>
<td scope="col">Установленно 100%</td>
<td width="200px" class="test3">Установленно 200px</td
</tr>
</table>

CSS код:


.test {
background-color:#F60;}
.test2 {
background-color:#0F0;}
.test3 {
background-color:#008e00;}

Link to comment
Share on other sites

  • 0

чтобы добавить справа еще колонку сделать можно так

http://jsfiddle.net/9HHKe/2/

естесно есть определенные условия данной верстки, приличное количество "если" :)

например желательно установить минимальную ширину, чтобы контент не наезжал на правую колонку или чтобы правая колонка не съезжала вниз при маленьких размерах экрана

и если вдруг столкнешся еще с какими-нибудь если, то будем их рассматривать по отдельности

табличный вариант имеет меньше гемора в этом плане, там все автоматически выстраивается, но там свои нюансы

Link to comment
Share on other sites

  • 0

Если мой пример разбирать, то:

http://jsfiddle.net/...diablo/CkXx4/2/ ...

Табличная разметка громоздкая и неудобная. К тому же, если её использовать для создания разметки основной страницы, то пока не загрузятся табличные данные, страница, скорее всего, не отобразится. Лучше использовать display: table и table-cell

Link to comment
Share on other sites

  • 0

а как еще справа добавить колонку 200 пикс.

Если мой пример разбирать, то:

http://jsfiddle.net/...diablo/CkXx4/2/

HTML код:


<table width="100%" class="test" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" class="test2">Установленно 200px</td>
<td scope="col">Установленно 100%</td>
<td width="200px" class="test3">Установленно 200px</td
</tr>
</table>

CSS код:


.test {
background-color:#F60;}
.test2 {
background-color:#0F0;}
.test3 {
background-color:#008e00;}

а как еще справа добавить колонку 200 пикс.

Посмотрите раздел "типовые макеты". Там есть описание резинового трёхколоночного макета.

чтобы добавить справа еще колонку сделать можно так

http://jsfiddle.net/9HHKe/2/

естесно есть определенные условия данной верстки, приличное количество "если" :)

например желательно установить минимальную ширину, чтобы контент не наезжал на правую колонку или чтобы правая колонка не съезжала вниз при маленьких размерах экрана

и если вдруг столкнешся еще с какими-нибудь если, то будем их рассматривать по отдельности

табличный вариант имеет меньше гемора в этом плане, там все автоматически выстраивается, но там свои нюансы

спс.... уже рабобрался

Link to comment
Share on other sites

  • 0

Если мой пример разбирать, то:

http://jsfiddle.net/...diablo/CkXx4/2/ ...

Табличная разметка громоздкая и неудобная. К тому же, если её использовать для создания разметки основной страницы, то пока не загрузятся табличные данные, страница, скорее всего, не отобразится. Лучше использовать display: table и table-cell

То, что пока вся таблица не загрузится она не будет отображаться это понятно, но тут много "но" и "если" - к примеру я расчитываю с точки зрения, что в любом случае если будет сделано все блоками, то пользователь будет ждать прогрузки всех блоков, я самый оптимальный описал вариант. С div тоже не все так просто, как выше было сказано если в средний блок будут фиксированные блоки вставляться и их ширина будет больше этого блока то они выйдут поверх. Вышенаписанное сугубо имхо =)

Нам не известно для чего этот шаблон по этому бесмысленно обсуждать плюсы и минусы функционала не зная для чего он =)

P.S. Я блочную верстку отвергаю потому что хуже ее знаю, и просто лень было запариться в свое время =)

Link to comment
Share on other sites

  • 0

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

P.S. Вот мой пример http://jsfiddle.net/CkXx4/

Да забудьте вы про эти таблицы, сколько можно, 2013 год на дворе, быдлокодерство сейчас не в тренде.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By _dev_
      Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
    • By Goldenant
      Добрый день! Перевел форму в календаре в обратной связи.(см фото) Но почему-то при выборе даты появляется Sat Apr 28 2018(в форме). Все изменил(в Notepade) сохранил. Календарь переведен и отображается на русском правильно.
      // internationalization         i18n: {             previousMonth : 'Предыдущий месяц',             nextMonth     : 'Следующий месяц',             months        : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],             weekdays      : ['Воскресение','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],             weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Cб']

    • By Saimone
      Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения  перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял.  Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или  с узором.  
    • By maxi5
      Здравствуйте подскажите как сделать такой слайдер.Чтобы активный вылетал вперед, это я понимаю на актив меню. Только css нужно делать?У меня например в вёрстке 10 элементов.Показываются 5 как на картинке, но 1 и последний должен быть такого размера и с z-index.В общем только css можно сделать.Либо в слайдере есть какие либо опции?
      https://gyazo.com/fa6bd54d98ebda1be6efd19325418d8a
       
      И вообще как лучше сделать,спасибо
    • By Danil S
      Добрый день.
      Есть три элемента(кнопка, див, кнопка). Необходимо расположить их в таком порядке: кнопка прижатая к левому краю, кнопка прижатая к правому краю, див на всю ширину между кнопками. 
      Пробую так:https://jsfiddle.net/dahilu/w82yhgn0/3/. Подскажите что нет так?
       
  • Обсуждения

    • Как здесь (https://skr.sh/sEfRBjoTUH1) правильно задать позиционирование? <ul class="list bottom-header-container-list"> <li class="bottom-header-container-list-item"> <div> <img src="./images/mail-svg.svg" alt="иконка эл.почты" width="28" height="22"> </div> <p>Mail Us</p> <a href="mailto:Info@bluecollar.com">Info@bluecollar.com</a> </li> <li class="bottom-header-container-list-item"> <div> <img src="./images/phone-svg.svg" alt="иконка телефона" width="26" height="26"> </div> <p>Call Us</p> <a href="tel:+01569896654">+01 569 896 654</a> </li> </ul>  
    • Сам сделал этот эффект? Ну или вообще сам писал этот код? 
    • Доброго времени суток. Есть сайт, онлайн магазин на WP, есть код- кнопка (на скрине) <div class="woocommerce-product-details__short-description"> <h5 class="wd-entities-title green sg-popup-id-12581">Нашли дешевле? Снизим цену!</h5> <?php echo $short_description; // WPCS: XSS ok. ?> </div> нужно как-то ограничить данный код от 2 категорий товаров на сайте, ранее работал с opencard там было все просто, а тут информации найти не могу, либо просто не так ищу. Прошу помощи либо статьей, либо направить в нужное русло поисков, может я просто формулирую неправильно данный вопрос. Заранее благодарю.
    • Я не вижу указаных Вами проблем заданном сайте   PS: устное предупреждение за мультипостинг. Используйте одну тему для одного вопроса.
    • Мой сайт - https://vasyldubno.github.io/project1/#directions На нем установлен скрипт MixItUp 3 для фильтрации постов. На ноутбуке все отлично работает. Но на смартфоне не работает, и в консоле выдает ошибку - [MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy