Жду обсуждения насчёт вёрстки

psywalker · January 21, 2009

Жду обсуждения насчёт вёрстки,единственное хочу извиниться за шрифт,я не знаю,почему он такой,када на Народ.ру заливаю,всегда так,но это не суть,мне главное мнения насчёт вёрстки и кода..

А пока мои отдельные вопросы:

1) Я использовал много Элементов <div> ,так как повсюду ПНГ картинки,и по другому не получалось,если подскажите способ легче,буду рад.

2) Использовал кодировку charset=windows-1251" вместо нормальной,потому что опятьже Народ.ру

3) Первый раз верстал на ЕМ ,вроде бы получилось,а как вы считаете?

Вот HTML:

http://psywalker2008.narod.ru/start32/index.html

Вот CSS:

http://psywalker2008.narod.ru/start32/style.css

Вот CSS для IE6

http://psywalker2008.narod.ru/start32/IE6.css

Edited January 21, 2009 by psywalker

rus · January 21, 2009

CSS не смотрел, просто лень, а так...

Где доктайп?

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> - что это за доктайп?

Кодировка так и осталась в UTFe, так как видимо изначально документ был создан в utf, а потом ты просто тупо поставил 1251 так?

Поэтому крякозябры, это проблема BOM.

Верстка понравилась, код относительно чистенький, правда картинок действительно много.

UPD:

К стати, в ИЕ 7 горизонтальное меню не активное, тоесть ссылки таковыми не являются.

Edited January 21, 2009 by rus

Scrum · January 21, 2009

скажите а за каким вы так сверстали шапку ? я имею в виду вот этот кусок

			<div id="hdrbg"><img src="img/hdrbg.png" alt="hdrbg" /></div>
			<div id="rainbow"><img src="img/rainbow.png" alt="rainbow" /></div>
			<div id="sky"><img src="img/sky.png" alt="sky" /></div>
			<div id="sky1"><img src="img/sky1.png" alt="sky1" /></div>

что вы на этом выиграли ? в чем гибкость ? в данный момент вот этот блок вместе с картинками у вас 690 кило, готов поспорит что можно уменьшить до 180 (это навскидку).

Дальше смотреть не стал ибо сделано тяп ляп

пару необдуманных примеров:

#header { height: 33.8em; .... }
#sky { .... 52.4em;}
#sky1 {... height: 56em;}

максимальная высота картинки в headere - 21.1em.

body { background: url(img/bg.jpg) repeat; }

если текста будет больше чем bg.jpg по высоте, как думаете что произойдет ?

psywalker · January 21, 2009

rus

Исправил,всё что мог,ребята,никогда не залевайте на Народ.ру,один гемор..

Scrum

1)

скажите а за каким вы так сверстали шапку ? я имею в виду вот этот кусок
Код
<div id="hdrbg"><img src="img/hdrbg.png" alt="hdrbg" /></div>
<div id="rainbow"><img src="img/rainbow.png" alt="rainbow" /></div>
<div id="sky"><img src="img/sky.png" alt="sky" /></div>
<div id="sky1"><img src="img/sky1.png" alt="sky1" /></div>
что вы на этом выиграли ? в чем гибкость ? в данный момент вот этот блок вместе с картинками у вас 690 кило, готов поспорит что можно уменьшить до 180 (это навскидку).

Согласен,я поэтому и спрашиваю,КАК сделать меньше и лучше,подскажите?

2)

body { background: url(img/bg.jpg) repeat; }
если текста будет больше чем bg.jpg по высоте, как думаете что произойдет ?

А что будет,ведь bg.jpg тянется до низа легко)

Edited January 21, 2009 by psywalker

Scrum · January 21, 2009

А что будет,ведь bg.jpg тянется до низа легко)

а низ у вас заканчивается после 1200px ? если текста будет больше чем 1200px ? возьмите картинку по по высоте 100px допустим и присвойте ей тот же стиль.

Согласен,я поэтому и спрашиваю,КАК сделать меньше и лучше,подскажите?

на скорую руку (немного в градиент не попал)

+ опять куда то кнопка редактировать пропала.

b { ...; margin: .2em auto 0; }

margin-top: .2em; на три символа короче, а эффект тот же.

mini · January 21, 2009

Ну по крайней мере а в FF2 вижу два бага:

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

2. В самом внизу там нету футера, тоесть я имею ввиду, там де форма для поиска и рядом нарисована лупа, её там просто НЕТ!!!

psywalker · January 22, 2009

Scrum

1)

а низ у вас заканчивается после 1200px ? если текста будет больше чем 1200px ? возьмите картинку по по высоте 100px допустим и присвойте ей тот же стиль.

А что можете предложить?

2)

+ опять куда то кнопка редактировать пропала.

Какая именно кнопка?

3)

b { ...; margin: .2em auto 0; }
margin-top: .2em; на три символа короче, а эффект тот же.

В смысле?

4)Всё же как сделать шапку меньше по весу? Я так ответа и не получил

5)В общем мне это всё самому уже не нравится,чувствую надо переверстать,просто первый опыт с PNG и ЕМ ,решил сразу убить двух зайцев,видимо поторопился..

6) А никто не знает какой нибудь код,чтобы обмануть конструкцию: <div id="hdrbg"><img src="img/hdrbg.png" alt="hdrbg" /></div> ,тоесть меня волнует что элемент IMG (PNG) надо обязательно вставлять в Элемент DIV, можно ли это обойти каким нибудь способом полегче?

P.S klierik ,я пробовал твой способ с ИЕ6-7,но у меня он не работает почему-то

Edited January 22, 2009 by psywalker

kalyaka-malyaka · January 22, 2009

при проверке на разрешении 1024*768 футер везде*, кроме ie6, выглядит так:

http://www.jetScreenshot.com/demo/57hoabdc-117kb.jpg

в мозилле и сафари картинки кнопок "на главную", "в избранное", "карта" и ссылки не совпадают:

http://www.jetScreenshot.com/demo/5vfh3ytv-7kb.jpg

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

ну и кодировка, конечно.

только все это называется не "оцените верстку", а "найдите мои ляпы".

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

—————————-

поняла, что надо уточнить.

* - мое "везде": ie6, ie7, Mozilla Firefox, Opera, Safari.

Edited January 22, 2009 by kalyaka-malyaka

Scrum · January 22, 2009

psywalker

А что можете предложить?

body { background: Цвет url(img/bg.jpg) repeat-x; } что не мешало вам проверить самому "возьмите картинку по по высоте 100px допустим и присвойте ей тот же стиль."

Какая именно кнопка?

это не по вашу душу.

В смысле?

"Атрибут margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон." - клик

4)Всё же как сделать шапку меньше по весу? Я так ответа и не получил rolleyes.gif

так же невнимательны в прочтении ответов как и при верстке "на скорую руку (немного в градиент не попал)" - не забудь кликнуть

5)В общем мне это всё самому уже не нравится,чувствую надо переверстать,

в яблочко.

6) А никто не знает какой нибудь код,чтобы обмануть конструкцию: <div id="hdrbg"><img src="img/hdrbg.png" alt="hdrbg" /></div>

смотри предоставленный мной вариант.

kalyaka-malyaka

что значат домик, .... не ясно, куда я попаду

домой попадешь.

psywalker · January 22, 2009

Ребят,я извиняюсь честно,что вы на мою галимую вёрстку потратили своё время,сам понимаю,она того не стоила

Даа..даа..я уже в 20-ый раз понял,что надо переверстать,как минимум,потом ещё проверить 50 раз

У меня вопросы есть насчёт этого макетика:

1) Как мне сделать,чтобы картинки не весили так много? Может их разделить на множество ПНГ?

2) Можно ли обойтись без Дивов,которые обёртывают изображения? Если да,то как? (извините Scrum,я просто не понял ваш вариант,не могли бы вы поподробнее объяснить?)

Vlad · January 23, 2009

Сохрани картинку с небом как JPG, размер уменьшится раз в пять точно. Ну а поверх уже рисунок с логотипом наложи.

Scrum · January 23, 2009

1) Как мне сделать,чтобы картинки не весили так много? Может их разделить на множество ПНГ?
2) Можно ли обойтись без Дивов,которые обёртывают изображения? Если да,то как? (извините Scrum,я просто не понял ваш вариант,не могли бы вы поподробнее объяснить?)

http://www.homeblog.jino-net.ru/ - открываешь и разбираешь по полочкам. результаты своих мыслей выкладываешь сюда.

psywalker · January 23, 2009

Scrum

А что там разбирать,там же один Яваскрипт,а я его не знаю((

Вобщем я попробую переделать,када сделаю,выложу на проверку

Scrum · January 23, 2009

о каком это ЯваСкрипте вы говорите ? ах да это банер. d оригинале выглядит так:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
	margin:0;
	padding: 0;
  }
  body {
	background: url(images/bg.gif) repeat-x;
  }
  #head {
	background: url(images/head.jpg) no-repeat right;
  }
  #head img {
	display: block;
  }


  #menu {
	height: 87px;
	background: url(images/menutopbg.jpg);
  }


  /*]]>*/
  </style>
</head>

<body>
	<div id="head">
		<img src="images/hdrbg.png"  alt="" />
	</div>
	<div id="menu">

	</div>
</body>
</html>

psywalker · January 23, 2009

Scrum , Vlad Я вас понял,спасибо за идею

А ещё вопрос: А ведь вес <img src="images/hdrbg.png" alt="" /> всё равно будет большим? Может её поделить на части?

Edited January 23, 2009 by psywalker

Scrum · January 23, 2009

если нет принципиальности в том что бы облака заползали под панель навигации то можно вообще одной картинкой сделать объем значительно сократиться, "Может её поделить на части? " - нет смысла.

psywalker · January 23, 2009

Scrum

понял,но принципиальность есть к сожалению,вобщем будем работать)))

Sign In

Жду обсуждения насчёт вёрстки

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information