Оптимизация HTML-кода страниц

Felix · 12.12.2009

Так решил немного почистить код сайта. Что часто встречается по убирать в CSS, что лишнее вообще выкинуть.
В связи с тем что в программировании я слабо мыслю нужна ваше не оценимая помощь.

Код:

 <td width="110" align="left" valign="top" style="background:#f1f9ff"><div style="float:left"><font color="#36a0ba"><b>Размер игры:</b></font></div></td>

Что здесь лишнее. И как правильно прописать это в CSS?
И еще кусочек.

Код:

<img style="border: medium none ; border="0" align="align" src="{THEME}/images/button_cat.bmp" align="absmiddle" />&nbsp;<A href="/1/1_1/" id="b">Пинбол</A><br>

Что здесь лишнее. И как правильно прописать это в CSS?

tigra60 · 12.12.2009

По первому вопросу:

HTML:

<html>  
<head>  
<style>  
.table_cell {
  	width:110px;
  	text-align:left;	/*align*/
  	vertical-align:top;	/*valign*/
  	background:#f1f9ff;
  	color:#36a0ba;		/*font color*/
  	font-weight:bold;	/*<b>*/
  	float:left;			/* а зачем это Вам?!*/  
}  
</style>  
</head>  
<body>  
<table><tr>
  <td class="table_cell">Размер игры:</td>  
</tr></table>  
</body>  
</html>

По второму вопросу не совсем понял. Вы не хотите гламурной синей рамочки, которую умный обозреватель добавляет при наведении курсора на Вашу кнопочку? Напишите <img ... border="0" ...>. Выравнивание - см вопрос первый.
Удачи!
ЗЫ.
Стили, конечно же, лучше поместить в отдельный файл и привязать его.

Felix · 12.12.2009

По первому вопросу то что нужно. Завтро буду пробовать!

Код:

float:left;                     /* а зачем это Вам?!*/

Для этого и спрашивал что тут лишние и бесполезное чтобы убрать.

А что лишнего есть тут?

Код:

<img style="border: medium none ; border="0" align="align" src="{THEME}/images/button_cat.bmp" align="absmiddle" />

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

У меня уже так сделано! Просто решил почистить код.

color:#36a0ba; /*font color*/

Я уже подобный вариант пробовал. Но текст стал чёрныйм.

tigra60 · 13.12.2009

По поводу float:
Если у Вас в ячейке таблицы ничего, кроме текста "Размер игры:" не будет, то смело рубите float:left. В противном случае класс table_cell нужно будет присвоить не ячейке, а блоку (<div>) внутри ячейки.
По поводу второй строки:
уберите

HTML:

style="border: medium none ;

и Ваша ссылочка выровняется по высоте с рисуночком.
А то получается, что в значении аттрибута style не закрыты кавычки, и из-за этого все аттрибуты, кроме src, блокируются. Кроме того, если border:none, то medium уже ни к чему.
CSS класс для рисунка может выглядеть так:

HTML:

.image_button {
	vertical-align:middle;
	border:none;
}	

. . . 

<img class="image_button" src="{THEME}/images/button_cat.bmp" />

Удачи!

Felix · 13.12.2009

Код:

<html>  
<head>  
<style>  
.table_cell {
        width:110px;
        text-align:left;        /*align*/
        vertical-align:top;     /*valign*/
        background:#f1f9ff;
        color:#36a0ba;          /*font color*/
        font-weight:bold;       /*<b>*/
        float:left;                     /* а зачем это Вам?!*/  
}  
</style>  
</head>  
<body>  
<table><tr>
  <td class="table_cell">Размер игры:</td>  
</tr></table>  
</body>  
</html>

Не получается это использовать. Добавил в CSS и текст стал сьезжать в сторону вобщем всё стало ужасно.

Felix · 13.12.2009

Всё разобрался и сделал так

Код:

<td class="story_a"><div class="story_tex">Размер игры:</div></td>

CSS

Код:

.story_b {
        width:100px;
        text-align:left;        /*align*/
        vertical-align:top;     /*valign*/
        background:#f1f9ff;
        }  
		

.story_tex {
        color:#36a0ba;          /*font color*/
        font-weight:bold;       /*<b>*/
       }

Сделал отдельный код для таблицы и для DIV и стало работать как надо и корректно отображается во всех браузерах.

А тут вобще выкинул vertical-align:middle; Вышло так

Код:

.image_button {
        border:none;
}       

<img class="image_button" src="{THEME}/images/button_cat.bmp" />

И ещё тут

Код:

<img class="kat" src="/templates/tpl/images/button_cat.bmp" alt="">&nbsp;<A href="/8/8_15/" class="menub">Прочие</A><br>

Это в CSS заталкать можно src="/templates/tpl/images/button_cat.bmp" Только чтобы картинка отображалась как картинка, а не как BG?

tigra60 · 14.12.2009

Лишнее подтверждение тому, что стили нужно смотреть только в контексте. Я хорощо помаялся, когда изучал "резиновые" колонки на div. Ужас, как все гуляет и разваливается от малейшего добавления свойств!
Так что, смело кроите - и все у Вас получится!
Удачи!

Felix · 04.01.2010

Я вот тут всё борюсь с оптимизацие и не могу догнать FF в консоле ошибок жалуется на

Предупреждение: Ошибка при анализе значения «left». Потерянное объявление.
Источник: http://go-to-play.ru/
Строка: 0
Предупреждение: Ошибка при анализе значения «top». Потерянное объявление.
Источник: http://go-to-play.ru/
Строка: 0

Такиех ошибок очень много что это значит ?

trueW3C · 04.01.2010

vertical-align ie6 и ie7 не поддерживает

Felix · 04.01.2010

Так это мне не ИЕ пишет, а фокс.

В ИЕ всё гуд!

trueW3C · 04.01.2010

Я в целом сказал...vertical-align ie6 и ie7 не поддерживает

http://validator.w3.org/
39 Errors, 5 warning(s)

В моём понимании оптимизация это избавления от таблиц, перенос CSS и JS в отдельный файлы, создание спрайтов

Felix · 04.01.2010

http://validator.w3.org/
39 Errors, 5 warning(s)

Про это я знаю! И полностью сделать код валидным не получается как не старайся.

В моём понимании оптимизация это избавления от таблиц, перенос CSS и JS в отдельный файлы, создание спрайтов

И оно у вас верное. Мне просто не охото было ещё тему создавать по этому спросил тут!

trueW3C · 04.01.2010

Код:

class="rating" style="float:left;">

У тебя 10 таких ошибок...если перенести style в CSS и поправить файл с функциями можно убрать -10 ошибок...

Код:

<form method=post>

Просто дописать action="#"

Код:

/>

У тебя верстка по стандартам HTML4, непарные теги должны оканчиваться просто на >

Про это я знаю! И полностью сделать код валидным не получается как не старайся.

Ни у кого не получается сделать или у тебя?)

Felix · 05.01.2010

У тебя 10 таких ошибок...если перенести style в CSS и поправить файл с функциями можно убрать -10 ошибок...

Это сделаю.

<form method=post>

С этим тоже в курсе пока руки не добралиь просто.

У тебя верстка по стандартам HTML4, непарные теги должны оканчиваться просто на >

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

Ни у кого не получается сделать или у тебя?)

Разговаривал с другими верстальщиками и как они мне сказали как ты не старайся на моём двиге полностью валидный сайт ты не сделаешь.

trueW3C · 05.01.2010

Сделаешь...

engine\modules\functions.php
Там немного поправить нужно...

Оптимизация HTML-кода страниц

Felix

Друг форума

tigra60

Спасатель

Felix

Друг форума

tigra60

Спасатель

Felix

Друг форума

Felix

Друг форума

tigra60

Спасатель

Felix

Друг форума

trueW3C

Поклонник Yii

Felix

Друг форума

trueW3C

Поклонник Yii

Felix

Друг форума

trueW3C

Поклонник Yii

Felix

Друг форума

trueW3C

Поклонник Yii

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей