Jump to content
  • 0

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

sitemaker999

Asked by sitemaker999,

 Share

Question

20 answers to this question

Recommended Posts

  • 0
sitemaker999 Explorer

sitemaker999

Posted
  • Author
Posted (edited)

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

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

Edited by sitemaker999
Link to comment
Share on other sites
  • 0
Arhidiablo Explorer

Arhidiablo

Posted
Posted

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

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
Arhidiablo Explorer

Arhidiablo

Posted
Posted

а как еще справа добавить колонку 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
Switch74 Rising Star

Switch74

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Catherine Explorer

Catherine

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
sitemaker999 Explorer

sitemaker999

Posted
  • Author
Posted

а как еще справа добавить колонку 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
Arhidiablo Explorer

Arhidiablo

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
new_user Explorer

new_user

Posted
Posted

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

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
Go to question listing

  • Similar Content

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

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

  I accept