Ещё макет для вёрстки

[Dimitry Wolotko]

Кто ищет что бы поверстать, велком - ещё одна PSD'шка.

[Скачать] 7.27mb

[psywalker]

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

Спасибо тебе Дима, почаще бы так

Edited October 23, 2009 by psywalker

[s0rr0w]

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

Спасибо тебе Дима, почаще бы так

Сложноватый?

Тут же думать даже особо не надо, сплошные прямоугольники.

[shvv]

Приятный макет. Уже скачал.

Слои уже выделены для облегчения верстки?

А страница должна быть резиновая или фиксированная?

[psywalker]

Сложноватый?

Тут же думать даже особо не надо, сплошные прямоугольники.

Уже смотрю, вроде не сложный и правда, поначалу такое впечатление создалось.

[Dimitry Wolotko]

А страница должна быть резиновая или фиксированная?

Фиксированный.

[psywalker]

Как пример:

http://www.psywalker.ru/Portfolio/Business.../main-page.html

[Dimitry Wolotko]

Отлично навёрстано. Только для обсуждения — есть отдельный раздел.

[psywalker]

Отлично навёрстано. Только для обсуждения — есть отдельный раздел.

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

Edited October 30, 2009 by psywalker

[Clayton]

А новички в свою очередь с собой не совладают, и просмотрят все малопонятности в коде psywalker"а гг) и думать разучатся))

[psywalker]

А новички в свою очередь с собой не совладают, и просмотрят все малопонятности в коде psywalker"а гг) и думать разучатся))

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

Edited October 30, 2009 by psywalker

[Павел Билькис]

Поверстаю, спасибо

[Clayton]

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

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

[Павел Билькис]

Какие мы все одинаковые

[Clayton]

Да. И все жить не можем без таблиц!

[Павел Билькис]

Вставай, поднимайся, рабочий народ!

[Dimitry Wolotko]

Не флуди тут.

[Timorensis]

спасибо за макет, интересно попробовать свои силы

[Игорь Ермаков]

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

http://s05.radikal.ru/i178/0911/18/cda71166823b.png

[sigma77]

Макет хороший, вроде не должен быть сложным. Будем пробовать.

Единственный момент интересует меня. Здесь очень много элементов, где все границы разных цветов (верх-низ-право-лево), но на пересечени образуются смешанные цвета (квадратик размером в 1px). Я так понимаю средствами css это задать невозможно и фон должен задаваться с учетом этих границ?

[psywalker]

Макет хороший, вроде не должен быть сложным. Будем пробовать.

Единственный момент интересует меня. Здесь очень много элементов, где все границы разных цветов (верх-низ-право-лево), но на пересечени образуются смешанные цвета (квадратик размером в 1px). Я так понимаю средствами css это задать невозможно и фон должен задаваться с учетом этих границ?

http://www.psywalker.ru/Portfolio/Business.../main-page.html - должно быть так, думай сама уже, делай как знаешь

Edited November 10, 2009 by psywalker

[sigma77]

psywalker

Твой макет уже видела. У тебя границы включены в бекграунд.

п.с. Кстати, неплохо было бы обновить... http://forum.htmlbook.ru/index.php?showtopic=14319

Edited November 7, 2009 by sigma77

[psywalker]

sigma77

psywalker

Твой макет уже видела. У тебя границы включены в бекграунд.

Ну и отлично, главное сверстай как сможешь, это уже хорошо

[aJaX]

Вот начал верстать, решил пока верх не трогать и заняться отображением новостей, но возникли проблемы

1)не могу сделать так что бы второй столбец с новостями был правее( почему то вниз лезет )

2)высота левого столбца равна отступу от нужного полодения правого

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="wrapper">

          <div id="header">            
                        <div class="header_left"></div>
          </div>

          <div id="content">
                        <div class="left_colum">
                                  <div class="title"></div>


                        </div>


                        <div class="right_colum">

                                  <div class="menu">
                                        <ul>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">Service</a></li>
                                        <li><a href="#">Support</a></li>
                                        <li><a href="#">Careers</a></li>
                                        <li><a href="#">About</a></li>
                                        <li><a href="#">Contact</a></li>
                                        </ul>
                                 </div>


                                 <div class="news">

                                          <div class="left">

                                          <div class="firts_news">
                                          <span><b>Veroeros</b> sed dolor</span>
                                          <hr>
                                        <p><img src="images/pic1.png" alt="" /><strong>Fusce nec eros augue</strong> hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat </p>

                                          </div>

                                           <p>Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a>
                                            semper. Lorem amet sed conseuat.Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum 
                                            <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat</p>




                                          <div class="right">



                                          </div>

                                 </div>

                        </div>
          </div>

          <div id="footer"></div>

    </div>

</body>
</html>

css:

/* !!! Сброс стилей !!! */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
legend{color:#000;}
ol li{list-style:decimal}
/* !!! Сброс стилей Конец !!! */


html, body {
  background:#d4e3ee url(images/bg.png) repeat-x;
  color:#4f7276;
  font-family:Verdana,Tahoma,Arial;
  font-size:11px;
  width:100%;
  min-width:900px;
}

a {
  color:#cc0000;
}

a:hover {
  text-decoration:none;
}


p {
  margin-top:30px;
}

hr {
  height:1px;
  background:#CCCCCC;
  border:0px;
}

img {
  padding:3px;
  border:1px solid #c6e1e8;
  margin-right:26px;
  margin-bottom:26px;
  float:left;
}


div#wrapper {
  margin:0 auto; /* централизуем основной блок */
  width:1000px;    /* ширина основного блока */
  height:auto;
}

          /* Стили header (верхней части сайта) */

div#header {
  background:url(images/right_head.png) no-repeat top right;
  width:100%;
  height:200px;
}

div.header_left {
  background:url(images/left_head.png) no-repeat top;
  width:300px;
  height:410px;
}


          /* Стили content (средней части сайта) */



div.left_colum {
  width:300px;
  height:auto;
  background:#dee8f9;
  margin-top:210px;
}

div.title {
  background:#3399cc url(images/title_bg.png) repeat-x;
  height:46px;
  text-align:center;
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
}


div.right_colum {
  width:700px;
  height:auto;
  background:#FFFFFF;
  float:right;
  margin-top:-230px;
  overflow:hidden;
}
                /* Стили news  */

div.news {
  padding:30px;
}

div.first_news {
  text-align:right;
}

.first_news img {
  float:left;
}



div.left {
  border-right:1px solid #CCCCCC;
  margin-top:20px;
  padding-right:30px;
  width:290px;
  float:left;
}

.left b {
  font-weight:100;
  font-size:26px;
  color:#a01111;
}

.left span {
  font-size:26px;
  width:100%;
  height:26px;
  color:#205098;
}

div.right {
  width:290px;
  float:right;
  margin-top:20px;
  padding-left:30px;
}



           /* Стили menu  */

div.menu {
  background:#3399cc url(images/menu_bg.png) repeat-x;
  height:76px;
  width:700px;
}

div.menu li {
  float:left;
  margin-left:40px;
  margin-top:30px;
  list-style-image:url(image/menu_r.png);
}

div.menu a {
  font-size:14px;
  color:#FFFFFF;

}

          /* Стили footer (нижней части сайта) */

div#footer {
  width:100%;
  height:300px;
}

Edited November 20, 2009 by aJaX

[zhuravlik]

У меня вопрос. Как определить em? Для этого какой-то калькулятор существует? Потому что нельзя же на глаз прикинуть

h1 a img {

display:block;

height:2.833em; 42px

width:19.5em; 234px

}

h1 a span {

color:#93B9EB;

display:block;

font-size:1.2em; - 14px

margin-left:42px;

margin-top:-8px;

}

Слева - размер в пикселях, взятый инструментом линейка из макета. Это просто считать пропорции? Тогда чему равен 1 em по умолчанию? И почему он задает только размеры, а расстояния (margin) - в пикселях? Разве вся страница не должна быть в одном формате? Я имею в виду, что em нужен потому, что при увеличении страницы он тоже пропорционально будет увеличиваться, а пиксели - нет. Или я где-то ошибаюсь?