Одесса: 2°С (вода 8°С)
Киев: 0°С
Львов: -2°С

Тема: Верстальщики и их штуки )

Ответить в теме
Страница 1 из 2 1 2 ПоследняяПоследняя
Показано с 1 по 20 из 31
  1. Вверх #1
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212

    По умолчанию Верстальщики и их штуки )

    Предлагаю обсудить интересные техники в различных вопросах верстки

    Задам свой первый вопрос какому способу верстки каскада вы отдаете предпочтение и почему
    Каскад берем по умолчанию шапка+контент(пофиг сколько колонок)+футер всегда внизу вот.
    God Gave Me Everything I Want, now come on...


  2. Вверх #2
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    Один из вариантов, можно и с флотами, но лень патом очищать поток)
    Можно менять колонки местами)
    Футер всегда внизу
    относительно резиновый вариант
    из минусов пришлось шапку в абсолютом позишене запустить
    может еще что то забыл


    Код HTML:
    <!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=UTF-8" />
    
    <title>test</title>
    
    <style type="text/css">
    html,body{height:100%;}
    body{
        font-family:Arial;
        margin:0;padding:0;
    }
    #wrapper{
        height:100%;
        min-width:980px;
        max-width:1200px;
        margin:-60px auto 0;
        position:relative;
    }
    
    #header{
        background:#e2e2e1;
        position:absolute;
        z-index:10;
        padding:10px 0 30px;
        top:60px;
        width:100%;
        border-bottom:1px solid #cbcbcb;
        border-radius:3px;
        
    }
    #header .logo{
        display:block;
        position:absolute;
        top:5px;
        left:20px;
    }
    #header ul{
        list-style:none;
        padding:0;
        margin:0;
        text-align:right;
    }
    #header ul li{
        padding:0;
        margin:0 20px;
        display:inline;
    }
    #header li a{
        font-size:14px;
        color:#555;
        font-weight:bold;
        text-transform:uppercase;
        text-decoration:none;
        padding:0;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.4);
    }
    #header li a:hover, .sel{
        border-bottom:3px solid #ff9811;
    }
    #footer{
        position:relative;    
        height:60px;
        background:#444;
        color:#fff;
    }
    
    .column{
        display:inline-block;
        vertical-align: top;
        position:relative;
        font-size:0;
        min-height:100%; 
        /* for ie7 */ 
        zoom: 1;
        *display: inline;
    }
    .main{
        background:#fefefe;
        width:50%;
        margin-left:35%;
    }
    
    .sidebar_2{
        background:#eee;
        width:15%;
    }
    
    .sidebar_3{
        background:#bebebe;
        width:35%;
        margin-left:-100%;
    }
    .b_in{
        padding:140px 0 0;
        font-size:24px;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="wrapper">
        <div id="header">
            <a href="/" class="logo"><img src="logo.jpg" border="0"></a>
            <ul class="menu">
                <li><a href="/">Home</a></li>
                <li><a href="/">About</a></li>
                <li><a href="/" class="sel">Managment</a></li>
                <li><a href="/">My profile</a></li>
                <li><a href="/">Help</a></li>
            </ul>
        </div>
    
        <div class="column main">
            <div class="b_in">
            main
            </div>
        </div><div class="column sidebar_2">
            <div class="b_in">
            sidebar_2
            </div>
        </div><div class="column sidebar_3">
            <div class="b_in">
            sidebar_3
            </div>
        </div>
    
        <div id="footer">
            footer
        </div>
    </div>
    </body>
    </html>
    God Gave Me Everything I Want, now come on...

  3. Вверх #3
    Вот отучайтесь ставить нижнее подчеркивание)

    Примерно так и делаю.

    Но хочется уже юзать

    <header></header>, <section> ...
    Сделай, чтобы было. Затем — чтобы было красиво. Затем — чтобы было быстро

  4. Вверх #4
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    Цитата Сообщение от SooR Посмотреть сообщение
    Вот отучайтесь ставить нижнее подчеркивание)

    Примерно так и делаю.

    Но хочется уже юзать

    <header></header>, <section> ...
    ссылкам подчеркивание?)
    шапка просто кусок от одного проекта)))

    Ну хтмл5 отличается просто более четкими тегами по назначению, хотя как на меня те же дивы)))

    Правда канваз творит чудеса внутри себя...


    Кстати еще колонки круто сделать с одинаковой высотой, вот пытаюсь сделать каскад с двумя колонками чтоб высота их была всегда минимум 100% и тянулась в зависимости от начинки в одной из колонок(высота была одинаковой у обеих), это для фоновых рисунков колонок)
    Без флоатов... Чикуенок делал такое с флоатами
    Почти сделал только нужно придумать пару моментов)
    God Gave Me Everything I Want, now come on...

  5. Вверх #5
    Цитата Сообщение от SooR Посмотреть сообщение
    Но хочется уже юзать

    <header></header>, <section> ...
    И что мешает? http://ru.html5boilerplate.com/

  6. Вверх #6
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    кстати я его еще не пробовал юзать, хотя давно хотел, насколько описанное правде соответствует?
    God Gave Me Everything I Want, now come on...

  7. Вверх #7
    Magneto, эмм.. оправдано? Пробовал? Хотелось бы чистым..
    Сделай, чтобы было. Затем — чтобы было красиво. Затем — чтобы было быстро

  8. Вверх #8
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    Вообще есть много приятных вещей облегчающих верстку причем на разных этапах, но иногда они просто не рациональны, к примеру Лесс и Сас на больших проектах юзать можно, а вот на средних и маленьких это просто загруз клиентской части
    God Gave Me Everything I Want, now come on...

  9. Вверх #9
    Постоялец форума Аватар для K@R@NTiN
    Пол
    Мужской
    Адрес
    Одесса
    Возраст
    26
    Сообщений
    1,791
    Репутация
    986
    Записей в дневнике
    1
    Цитата Сообщение от SooR Посмотреть сообщение
    Вот отучайтесь ставить нижнее подчеркивание)
    а чем это самое нижнее подчёркивание плохо?)
    Не СпИ_зАмЕрЗнЕшЬ

  10. Вверх #10
    Цитата Сообщение от [email protected]@NTiN Посмотреть сообщение
    а чем это самое нижнее подчёркивание плохо?)
    Не скажу, что плохо, стиль каждого, но красивее и тут советуют.
    Сделай, чтобы было. Затем — чтобы было красиво. Затем — чтобы было быстро

  11. Вверх #11
    Цитата Сообщение от TenЬ Посмотреть сообщение
    Один из вариантов, можно и с флотами, но лень патом очищать поток)
    Можно менять колонки местами)
    Футер всегда внизу
    относительно резиновый вариант
    из минусов пришлось шапку в абсолютом позишене запустить
    может еще что то забыл
    Так и не понял какая необходимость была в абсолютном позиционировании шапки?
    Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

    Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.
    Еще... лично я предпочитаю, чтобы отдельные структуры шли в коде в том же порядке, в котором они будут показаны на сайте. Очередность с верху в низ с лева на право. Т.е. если у нас есть левая колонка, то ее код должен идти первее чем код центральной части. Это потом облегчает отладку и поиск элементов.

  12. Вверх #12
    Новичок
    Пол
    Мужской
    Адрес
    Одесса
    Сообщений
    93
    Репутация
    19
    Цитата Сообщение от polevoi Посмотреть сообщение
    Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.
    Интересные утверждения.
    Может еще скажете кто и где устанавливает моду на макеты ?

  13. Вверх #13
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    Цитата Сообщение от polevoi Посмотреть сообщение
    Так и не понял какая необходимость была в абсолютном позиционировании шапки?
    Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

    Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.
    Еще... лично я предпочитаю, чтобы отдельные структуры шли в коде в том же порядке, в котором они будут показаны на сайте. Очередность с верху в низ с лева на право. Т.е. если у нас есть левая колонка, то ее код должен идти первее чем код центральной части. Это потом облегчает отладку и поиск элементов.
    В этом макете шапка абсолютна сделана ввиду необычности нижней части, необычность это ее реализация футер внизу+колонки одинаковой высоты.
    Хотя есть другие варианты, но я частично использую этот макет, только там шапка уже как обычно без позишена)
    не сказалбы что враппер лишний если надо красивый фон да и вообще, видел я такие макеты где все висит на боди шаг влево право гавноверстка)

    а вообще если говорите что можно проще лучше, покажите код с улучшениями или же свой вариант наиболее часто применяемого каскада

    Про поисковики утверждать не стану, но сейчас не начало 2000х они схавают почти любой макет
    Последний раз редактировалось TenЬ; 10.08.2011 в 21:48.
    God Gave Me Everything I Want, now come on...

  14. Вверх #14
    Постоялец форума Аватар для Аратор
    Пол
    Мужской
    Адрес
    Одесса
    Возраст
    37
    Сообщений
    2,819
    Репутация
    684
    Цитата Сообщение от polevoi Посмотреть сообщение
    Так и не понял какая необходимость была в абсолютном позиционировании шапки?
    Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

    Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.
    Еще... лично я предпочитаю, чтобы отдельные структуры шли в коде в том же порядке, в котором они будут показаны на сайте. Очередность с верху в низ с лева на право. Т.е. если у нас есть левая колонка, то ее код должен идти первее чем код центральной части. Это потом облегчает отладку и поиск элементов.
    почитайте гугл,где написано что статика лучше индексируется.
    Короче говоря чем проще сайт и чем уникальнее контент тем быстрее он будет подниматься в рейтингах.
    Да и вообще сайт по умолчанию должен быть простым,удобным и быстрым,а вот когда навешивают кучу флеша на сайт это уже сравни с "у меня 40 см в холодной воде".Красиво? не всегда,а то что увесисто это факт.
    Мне недавно клиент позвонил и жаловался почему в инет магазине фотки так долго открываются(открывались примерно 1-1,5 сек),как оказалось у него торент качал штук 20 фильмов и сериалов от 1 гига до 25 гигов....На самом деле фотки открываются практически мгновенно)) там вес не больше 400 кб.
    <-=SEO=->

  15. Вверх #15
    Новичок
    Пол
    Мужской
    Адрес
    Одесса
    Возраст
    26
    Сообщений
    56
    Репутация
    14
    Я просто оставлю это тут.

  16. Вверх #16
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    Цитата Сообщение от 081krieger Посмотреть сообщение
    Я просто оставлю это тут.
    да ализар постарался...перевел))

    давно юзаю прикольная вещь, надыбал гдето год назад в блоге трюкачей.

    Еще есть неплохие вещи с CSS3 анимацией... надо порыться гдето была ссылка)
    God Gave Me Everything I Want, now come on...

  17. Вверх #17
    Не покидает форум Аватар для TenЬ
    Пол
    Мужской
    Адрес
    свая тарелка, жемчужина)
    Возраст
    31
    Сообщений
    6,898
    Репутация
    3212
    так ради интереса)

    как выставляем размер шрифта )

    я использую два варианта px в body, или проценты 62,5%, а от них в em.

    Еще есть rem, но опера и олд ие не работает с этой величиной)
    God Gave Me Everything I Want, now come on...

  18. Вверх #18
    Новичок
    Пол
    Мужской
    Возраст
    29
    Сообщений
    28
    Репутация
    11
    Цитата Сообщение от polevoi Посмотреть сообщение
    Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.
    Что за чушь? ПС пофиг на ширину макета, поскольку ширина далеко не показатель качества ресурса.

  19. Вверх #19
    вот от нечего делать наваял:
    Код HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    * {
    }
    #wrapper {
    	width:960px;
    	margin:0 auto;
    }
    #header, #footer {
    	width:100%;
    	background:#808080;
    	text-align:center;
    	font-size:0;
    	letter-spacing: -1px;
    	line-height: 0;
    }
    #header div, #footer div, #main .col, #wrapper li{
    	font-size:16px;
    	letter-spacing: normal;
    	line-height: normal;
    }
    #header #logo {
    	height:100px;
    	width:250px;
    	background:#2A1FFF;
    	color:#FFF;
    	font-size:26px;
    	letter-spacing: normal;
    	line-height: normal;
    }
    #header .menu {
    	list-style:none;
    	margin:0px;
    	padding:0px;
    	font-size:0;
    	letter-spacing: -1px;
    	line-height: 0;
    }
    #header .menu li {
    	display:inline-block;
    	font-size:16px;
    	letter-spacing: normal;
    	line-height: normal;
    }
    #header .menu a, #footer .menu a {
    	display:block;
    	margin:0 5px;
    }
    #main {
    	font-size:0;
    	letter-spacing: -1px;
    	line-height: 0;
    	background:#A0A0A4;	
    }
    .col {
    	display:inline-block;
    	vertical-align:top;
    	border:0 none;
    	padding:5px;
    	margin:0px;
    }
    .left {
    	width:190px;
    }
    .right {
    	width:190px;	
    }
    .center {
    	width:550px;
    	background:#FFF;
    	min-height:400px;
    }
    #footer .menu {
    	list-style:none;
    	margin:0px;
    	padding:0px;
    	font-size:0;
    	letter-spacing: -1px;
    	line-height: 0;
    }
    #footer .menu li {
    	display:inline-block;
    }
    #copyright {
    	width:50%;
    	text-align:left;
    	display:inline-block;
    	color:#FFF;
    }
    #design {
    	width:50%;
    	text-align:right;
    	display:inline-block;
    }
    .content {
    }
    </style>
    </head>
    
    <body>
     <div id="wrapper">
      <div id="header">
       <div id="logo">Logo</div>
       <ul class="menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О сайте</a></li>
        <li><a href="#">Статья</a></li>
        <li><a href="#">Картинки</a></li>
        <li><a href="#">Контакты</a></li>
       </ul>
      </div>
      <div id="main">
       <div class="col left">
        <div class="block">
         <h4>Left block 1</h4>
         <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius ornare augue eget lobortis. Praesent imperdiet, urna in rutrum placerat, enim turpis vehicula risus, pellentesque gravida justo ante nec arcu. Proin dui odio, tristique et congue et, tincidunt sit amet elit. Sed ut dui est, et malesuada felis. Aliquam erat volutpat. In congue dui hendrerit augue congue malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        </div>
       </div>
       <div class="col center">
       	<h1>Title</h1>
        <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius ornare augue eget lobortis. Praesent imperdiet, urna in rutrum placerat, enim turpis vehicula risus, pellentesque gravida justo ante nec arcu. Proin dui odio, tristique et congue et, tincidunt sit amet elit. Sed ut dui est, et malesuada felis. Aliquam erat volutpat. In congue dui hendrerit augue congue malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
         <h1>Это H1 заголовок</h1>
         <h2>Это H2 заголовок</h2>
         <h3>Это H3 заголовок</h3>
         <h4>Это H4 заголовок</h4>
         <h5>Это H5 заголовок</h5>
         <h6>Это H6 заголовок</h6>
         <ol>
          <li>пункт 1</li>
          <li>пункт 2
            <ol>
             <li>подпункт 1</li>
             <li>подпункт 2</li>
             <li>подпункт 3</li>
            </ol>
    	  </li>
          <li>пункт 3</li>
         </ol>
         <ul>
          <li>пункт 1</li>
          <li>пункт 2
            <ul>
             <li>подпункт 1</li>
             <li>подпункт 2</li>
             <li>подпункт 3</li>
            </ul>
    	  </li>
          <li>пункт 3</li>
         </ul>
         <p>Cras bibendum <q>condimentum posuere</q>. Curabitur egestas <a href="#">hendrerit tincidunt</a>. Sed aliquet, enim sit amet imperdiet auctor, <strong>ante mi dignissim velit</strong>, eget molestie magna dolor eu nunc. Mauris tempor, ante <em>sed elementum</em> vestibulum, ipsum justo lobortis lacus, sit amet tincidunt quam eros eget arcu.</p>
         <blockquote cite="value">Nunc sit amet enim a eros sagittis elementum eu a neque. Vestibulum a ultrices tortor. Nullam sem est, tempus sit amet lacinia quis, pellentesque sed libero.</blockquote>
         <p>Nunc sit amet enim a eros sagittis elementum eu a neque. Vestibulum a ultrices tortor. Nullam sem est, tempus sit amet lacinia quis, pellentesque sed libero. Nunc aliquam eros hendrerit ante faucibus eleifend vulputate dolor lacinia. Etiam eget mi neque, ut molestie arcu.</p>
         <code>if($a){
         		echo "qqq";
         	}
         </code>
         <p>Praesent nibh ante, eleifend ac rutrum sit amet, egestas at erat. Morbi fermentum dapibus ipsum eu venenatis. Maecenas hendrerit tincidunt dui, ut tempor lacus luctus vel.</p>
        </div>
       </div>
       <div class="col right">
        <div class="block">
         <h4>Right block 1</h4>
         <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius ornare augue eget lobortis. Praesent imperdiet, urna in rutrum placerat, enim turpis vehicula risus, pellentesque gravida justo ante nec arcu. Proin dui odio, tristique et congue et, tincidunt sit amet elit. Sed ut dui est, et malesuada felis. Aliquam erat volutpat. In congue dui hendrerit augue congue malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        </div>
       </div>
      </div>
      <div id="footer">
       <ul class="menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">О сайте</a></li>
        <li><a href="#">Статья</a></li>
        <li><a href="#">Картинки</a></li>
        <li><a href="#">Контакты</a></li>
       </ul>
       <div id="copyright">Копирайт</div>
       <div id="design">designed by Me</div>
      </div>
     </div>
    </body>
    </html>

  20. Вверх #20
    Цитата Сообщение от Sourcer Посмотреть сообщение
    Что за чушь? ПС пофиг на ширину макета, поскольку ширина далеко не показатель качества ресурса.
    См. выше. Или вы не верите гугилу когда он говорит как ищет? Ну-ну. Удачи в ваших начинаниях.

    ЗЫ: всегда умиляли люди утверждающие "бред", "чушь", "фигня" но не приводящие никаких аргументов и доказательств.


Ответить в теме
Страница 1 из 2 1 2 ПоследняяПоследняя

Социальные закладки

Социальные закладки

Ваши права

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