Jump to content
  • 0

frD-Как отодвигать бокс

avb

Asked by avb,

 Share

Question

avb Explorer

avb

Posted
Posted

Доброго времени суток.

Вот простенький сайт

http://nwmost.ru/csstest/nd/index.html

Вроде бы все нормально, но если кликнуть на "Прайс-лист", то видим, что если контент выходит за рамки, то получается белиберда.

Подскажите: как сделать, чтобы нижняя полска отодвигалась под контент.

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
shkoda Explorer

shkoda

Posted
Posted

У вас очень интересный код: есть доктайп, но нет ни тега , ни

, ни . Это раз, а во-вторых, у тебя в стилях написано следующее

#meta {
 position:absolute; bottom:0;
 height:35px; width:700px;
 padding:1px 0;
 background:#00ff33;
}

Отсюда и вытекает такое расположение блока.

Убери position:absolute. Плюс ко всему у тебя размазано описание стилей для одних и тех же идентификаторов по всему файлу со стилями. Нужно собрать в одно место - тебе же проще будет. Поправь все, а потом посмотри на результат

Link to comment
Share on other sites
  • 0
Цветков Антон Explorer

Цветков Антон

Posted
Posted

avb, для начала оформите документ правильно... Как только сделаете правильное оформление, то сразу заметите, что растянуть дизайн по высоте вы не сможете - стандарт HTML 4.01 не дает этой возможности. Соответственно, и необходимость в отодвигании блока отпадает... Неужели, вы не замечаете, что в Сети практически нет сайтов, растянутых по высоте (а если и есть, то они точно не соответствуют стандартам (либо соответствуют старым, типа HTML 3.2)).

Глупо полагать, что, если после разборки/сборки телевизора остались детали, то он заработает правильно...

Link to comment
Share on other sites
  • 0
Evgeny Explorer

Evgeny

Posted
Posted

To Цветков Антон: Вы уверены в сво?м высказывании ? а как тогда объясните вот такое ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>Пример</title>
 </head>

 <body>
 <table cellspacing=0 cellpadding=5 width="90%" height="100%" border=1>
 <tr height=30>
 <td></td><td>Шапка</td><td></td>
 </tr>
 <tr>
 <td></td><td>Тело</td><td></td>
 </tr>
 <tr height=30>
 <td></td><td>Ботинки</td><td></td>
 </tr>
 </table>
 </body>
</html>

Применр конечно не совсем удачный, НО !

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

Link to comment
Share on other sites
  • 0
Цветков Антон Explorer

Цветков Антон

Posted
Posted

По поводу кода - я ж говорю - оформляйте правильно... Если указать соответствующий документ, содержащий стандарты (т.е. правильно оформить доктайп), то растяжки не будет...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

PS: Указание параметров высот для таблиц и ячеек - жуткое несоответствие стандартам - отучайтесь от этого. :)

Итак, я по-прежнему утверждаю, что при правильном оформлении документа растяжения по высоте не добиться... Есть еще аргументы? :P

А по поводу телевизора - я имею ввиду жизненно важные детали... Ведь, собственно, без тегов ,

, не может быть html-страницы... А уж то, что она всетаки отображается - это с вас большая благодарность в адрес разработчиков браузеров, которые сделали так...
Link to comment
Share on other sites
  • 0
Цветков Антон Explorer

Цветков Антон

Posted
Posted
можно опустить и ничего страшного не произойдет. 100%

Можно, но соответствия стандартам и валидность даже не ждите в таком случае. То, что это можно опускать, вовсе не означает, что так рекомендуется делать - это полнейшая некомпетентность. Аналогично можно не указывать закрывающие td, tr, p и т.д... Но сомневаюсь, что кто-то станет воспринимать вас как компетентного в данном направлении человека, если вы будете делать подобное. Аналогично - зачем давать лекарства больному - и без них проживет...

А работает оно лишь потому, что (еще раз повторю - вдруг дойдет) разработчики браузеров сделали проверки на криворуких кодеров (хотя и не обязаны были)...

Link to comment
Share on other sites
  • 0
avb Explorer

avb

Posted
  • Author
Posted
можно опустить и ничего страшного не произойдет. 100%

Аналогично можно не указывать закрывающие td, tr, p и т.д...

Вот тут вы погорячились. Таблицу не сверстать если не закрывать табличные теги.

Посмотрите, я добавил по стандартам html, body, head

http://nwmost.ru/csstest/nd/index.html

Link to comment
Share on other sites
  • 0
Цветков Антон Explorer

Цветков Антон

Posted
Posted
Вот тут вы погорячились. Таблицу не сверстать если не закрывать табличные теги.

Пожалста - вот пример работающей таблицы (люди, никогда так не делайте):

<table border="1">
<tr>
 <td>1
 <td>2
<tr>
 <td>3
 <td>4
</table>

По поводу сайта:

1) Смените доктайп на человеческий: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

2) Доктайп должен идти ДО "";

3) "" должен быть внутри "

... ";

4) Вложенные теги

- неправильно в данном случае;

5)

[*] тоже закрывать надо;

6) Кривая верстка глючит в Опере...

Link to comment
Share on other sites
  • 0
Evgeny Explorer

Evgeny

Posted
Posted

Из Спецификации HTML 4.01 про тег

(http://www.w3.org/TR/html401/struct/text.html#h-9.3.1):

Start tag: required, End tag: optional

И Хоть сотни людей мне твердите что надо закрывать тег

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

Это конечно не относиться когда в?рстка должна быть в стандарте XHTML

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

Извините за офтопик, но слишком уж категорические тут заявления ... (дискусию продолжать не буду, сочт?те за ненадобность можете удалить, это я модераторам)

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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