Jump to content
  • 0

подскажите как сверстать

_axl

Asked by _axl,

 Share

Question

16 answers to this question

Recommended Posts

  • 0
rus Explorer

rus

Posted
Posted

На скорую руку вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrap {
border:1px solid #FF0000;
position:relative;
width:600px;
height:300px;
}
#content {
position:absolute;
top:20px;
bottom:20px;
right:20px;
left:200px;
width:400px;
height:250px;
}
#img{
background-image:url(images/img.jpg);
background-repeat:no-repeat;
position:absolute;
top:120px;
left:50px;
width:100px;
height:50px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="img">
</div>
<div id="content">
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
Текст Текст Текст Текст Текст Текст 
</div>
</div>
</body>
</html>

Нужные размеры сам подгонишь.

Link to comment
Share on other sites
  • 0
_axl Explorer

_axl

Posted
  • Author
Posted (edited)

отойду от темы своего же топика, но уж больно давно меня мучает вопрос. Вот вы, знающие люди, объясните зачем устраивать такой изврат? Ведь заверстать такую вещь на таблицах в разы проще и быстрее, и все там сразу будет и растягивание и обтекание, картинку запозициониривать это всего лишь align и valign, и не надо вставть на голову, чтобы содержимое вело себя так, как надо. ЗАЧЕМ???

п.с. речь не о конкретном случае, а вообще, о блочной верстке, будь моя воля, я бы с радостью продолжал верстать таблицами, но больное геморно тогда сейчас работу искать

Edited by _axl
Link to comment
Share on other sites
  • 0
Pavel_html Explorer

Pavel_html

Posted
Posted

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

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

Скажите, а Вы знакомы с характеристиками, которые имеют свои положительные и отрицательные черты в типе верстки? Чем табличная верстка лучше/хуже блочной?

Советую ознакомится с азами блочной верстки.

Вы думаете если б табличная верстка было б лучше, то вообще имело бы место быть блочной верстке?

Link to comment
Share on other sites
  • 0
_axl Explorer

_axl

Posted
  • Author
Posted

а вот это не аморально: http://www.htmlbook.ru/content/?id=109 ? использовать границу в 200 пикселей в качестве блока под данные?

я поэтому и перехожу на блоки, т.к. портфолио на таблицах постаит на тебе крест, как на верстльщике.

Клерик, я читал по поводу этого и везде достоинства блочной верстки представляются уж больно призрачными

у меня вообще, появилась мысль, что блоки ввели, что бы хоть как-то дифференцировать умения верстальщиков, ибо версть на таблицах можно научиться за месяц практики, поэтому и возникла проблема, когда человеку реально съевшему собаку в веб индустрии может составить конкуренцию малец пол года назад начавший изучать css

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

2_axl,

Вы понимаете что таблицы, как объект гипертекстовой разметки, не предназначен для построения макетов. Данный элемент разметки существует для представления именно табличных данных, но никак не для организации на его основе макета.

Табличная верстка, насколько я понимаю, имела место быть ранее блочной, только из-за того что на период расширения и глобализации сети интернет, дизайны веб-ресурсов не были столь сложными и имели стандартную сетчастую основу.

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

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

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

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

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

  • Обсуждения

    • 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