Jump to content

Откомментируйте, пожалуйста, первую вёрстку

ianton

By ianton,
in Discussion of works

 Share

Recommended Posts

ianton Explorer

ianton

Posted
  • Author
Posted
  On 7/30/2013 at 7:48 AM, Bassline said:

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

Да, таких тем полно, но чем же все-таки это объясняется, если даже w3.org свёрстан почти на одних id?

Link to comment
Share on other sites
wwt Explorer

wwt

Posted
Posted (edited)
  On 7/30/2013 at 11:47 AM, ianton said:
  On 7/30/2013 at 7:48 AM, Bassline said:

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

Да, таких тем полно, но чем же все-таки это объясняется, если даже w3.org свёрстан почти на одних id?

Может пересмотрите еще раз? =) там на 30 классов дай бог 1 id в стилях (примерно, точно не считал). А сделано это скорее всего потому что если у элемента уже есть id для какого либо функционала на javascript то в стилях используют id для стилизации этого или дочерних элементов чтоб не городить лишние классы, и это логично. А для всех остальных элементов используют классы.

Вот что я имею ввиду:


<div id="mybutton"></div>
<div class="mybox"></div>
<style>
#mybutton {background:red;}
.mybox {background:green;}
</style>
<script>
$('#mybutton').click(function(){
alert('ok');
});
</script>

div с id=mybutton это кнопка и к ней привязан обработчик вот и стиль я привязываю к id

div c class=mybox просто стилизованный блок потому я использую класс.

Edited by wwt
Link to comment
Share on other sites
ianton Explorer

ianton

Posted
  • Author
Posted
  On 7/30/2013 at 12:08 PM, wwt said:
  On 7/30/2013 at 11:47 AM, ianton said:
  On 7/30/2013 at 7:48 AM, Bassline said:

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

Да, таких тем полно, но чем же все-таки это объясняется, если даже w3.org свёрстан почти на одних id?

Может пересмотрите еще раз? =) там на 30 классов дай бог 1 id в стилях (примерно, точно не считал). А сделано это скорее всего потому что если у элемента уже есть id для какого либо функционала на javascript то в стилях используют id для стилизации этого или дочерних элементов чтоб не городить лишние классы, и это логично. А для всех остальных элементов используют классы.

Вот что я имею ввиду:


<div id="mybutton"></div>
<div class="mybox"></div>
<style>
#mybutton {background:red;}
.mybox {background:green;}
</style>
<script>
$('#mybutton').click(function(){
alert('ok');
});
</script>

div с id=mybutton это кнопка и к ней привязан обработчик вот и стиль я привязываю к id

div c class=mybox просто стилизованный блок потому я использую класс.

Теперь ясно. Большое спасибо!

  On 7/30/2013 at 4:59 PM, nerv said:

делать так

<!DOCTYPE html>

а потом так


<div id="aside">
<div id="footer">
<div id="nav">

зачем?

Сделал сначала 5-ми тегами, но всё поплыло в ие<9, вот и переименовал в дивы. А как правильнее поступить?

Link to comment
Share on other sites
121990 Explorer

121990

Posted
Posted (edited)
  On 7/30/2013 at 4:59 PM, nerv said:
зачем?

Потому что так генераторы макетов делают.

  On 7/30/2013 at 10:08 PM, ianton said:
А как правильнее поступить?

Ето в стили


aside, footer, nav { display: block }

Ето в шапку


<!--[if lte IE 8]>
	 <script> /*Для IE*/
		 document.createElement('aside');
		 document.createElement('nav');
		 document.createElement('footer');
	 </script>
<![endif]-->

Edited by 121990
Link to comment
Share on other sites
cris7iano Explorer

cris7iano

Posted
Posted (edited)

какой век????

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

Как по мне лучше в хеад кинуть


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ну а там дело каждого

Edited by cris7iano
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
Reply to this topic...

×   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 topic 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