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

**TenЬ** · 16.07.2011 13:07

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

Задам свой первый вопрос какому способу верстки каскада вы отдаете предпочтение и почему

Каскад берем по умолчанию шапка+контент(пофиг сколько колонок)+футер всегда внизу вот.

**TenЬ** · 16.07.2011 16:08

Один из вариантов, можно и с флотами, но лень патом очищать поток)
Можно менять колонки местами)
Футер всегда внизу
относительно резиновый вариант
из минусов пришлось шапку в абсолютом позишене запустить
может еще что то забыл

Код 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>

**SooR** · 17.07.2011 21:30

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

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

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

<header></header>, <section> ...

**TenЬ** · 17.07.2011 21:57

Сообщение от SooR

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

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

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

<header></header>, <section> ...

ссылкам подчеркивание?)
шапка просто кусок от одного проекта)))

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

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

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

**Magneto** · 17.07.2011 22:26

Сообщение от SooR

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

<header></header>, <section> ...

И что мешает? http://ru.html5boilerplate.com/

**TenЬ** · 17.07.2011 22:31

кстати я его еще не пробовал юзать, хотя давно хотел, насколько описанное правде соответствует?

**SooR** · 17.07.2011 22:43

Magneto, эмм.. оправдано? Пробовал? Хотелось бы чистым..

**TenЬ** · 17.07.2011 22:53

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

**K@R@NTiN** · 23.07.2011 12:09

Сообщение от SooR

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

а чем это самое нижнее подчёркивание плохо?)

**SooR** · 27.07.2011 16:25

Сообщение от K@R@NTiN

а чем это самое нижнее подчёркивание плохо?)

Не скажу, что плохо, стиль каждого, но красивее и тут советуют.

**polevoi** · 10.08.2011 13:18

Сообщение от TenЬ

Один из вариантов, можно и с флотами, но лень патом очищать поток)
Можно менять колонки местами)
Футер всегда внизу
относительно резиновый вариант
из минусов пришлось шапку в абсолютом позишене запустить
может еще что то забыл

Так и не понял какая необходимость была в абсолютном позиционировании шапки?
Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

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

**vadoru** · 10.08.2011 17:10

Сообщение от polevoi

Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.

Интересные утверждения.
Может еще скажете кто и где устанавливает моду на макеты ?

**TenЬ** · 10.08.2011 20:43

Сообщение от polevoi

Так и не понял какая необходимость была в абсолютном позиционировании шапки?
Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

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

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

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

Про поисковики утверждать не стану, но сейчас не начало 2000х они схавают почти любой макет

**Аратор** · 13.08.2011 16:57

Сообщение от polevoi

Так и не понял какая необходимость была в абсолютном позиционировании шапки?
Да и как по мне, так <div id="wrapper"> там лишний. Все что ним хотели добиться, можно и на body повесить. Особенно если убрать не нужное там абсолютное позиционирование.

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

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

**081krieger** · 13.08.2011 19:12

Я просто оставлю это тут.

**TenЬ** · 13.08.2011 22:27

Сообщение от 081krieger

Я просто оставлю это тут.

да ализар постарался...перевел))

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

Еще есть неплохие вещи с CSS3 анимацией... надо порыться гдето была ссылка)

**TenЬ** · 24.08.2011 13:00

так ради интереса)

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

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

Еще есть rem, но опера и олд ие не работает с этой величиной)

**Sourcer** · 24.08.2011 14:37

Сообщение от polevoi

Кстати... насчет резиновости. Поисковики последнее время предпочитают статику. Так что резиновость сейчас не в моде.

Что за чушь? ПС пофиг на ширину макета, поскольку ширина далеко не показатель качества ресурса.

**polevoi** · 15.09.2011 10:00

вот от нечего делать наваял:

Код 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>

**polevoi** · 15.09.2011 10:07

Сообщение от Sourcer

Что за чушь? ПС пофиг на ширину макета, поскольку ширина далеко не показатель качества ресурса.

См. выше. Или вы не верите гугилу когда он говорит как ищет? Ну-ну. Удачи в ваших начинаниях.

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

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

Опции темы

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

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

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

Ваши права