X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Оптимизация CSS
Yuri_hb
Yuri_hb
Topic Starter сообщение 27.4.2011, 0:17; Ответить: Yuri_hb
Сообщение #1


Вобщем вопрос возник в следующем недавно верстая http://ortodox.it уже после сдачи работы задался вопросом, а как его можно оптимизировать. Можно конечно убежать себя, что поскольку работа делалась в довольно таки быстом темпе (5часов от принятия псд до сдачи готового шаблона), но это немного не наши методы.

Собственно суть вопроса, как лучше оптимизитьвать и какие вообще есть способы оптимизации при экстримальном, а так же при спокойном кодировании? (Удаление пробелов не предлагать, я выдал читаемый код, далее уже заказчики распоряжались как лучше его использовать)

p.s. Тэги i, b это не мое :rolleyes: это уже программисты нарезали.

сам код css, собственно(reset.css и ie.css не выкладываю, первый массово очищает все и вся, второй лечит некоторые проблемы ие6):
[CSS]body {
width:100%;
background: url(../images/bg/bgBody.png) repeat left top #d6d6d6;
}

.fullBodyWrapper {
background: url(../images/bg/bodyIconDouble.png) repeat-y left top #fff;
width: 1047px;
margin: 0 auto;
}

.topImage {
background: url(../images/bg/mainHeaderLeft.png) no-repeat left top;
border: 1px solid #630;
width:980px;
height:350px;
margin-left:32px;
position:relative;
}
.centerImg {
background: url(../images/bg/mainHeaderCenter.png) no-repeat left top;
width:406px;
height:350px;
margin-left:299px;
}
.rightImg {
background: url(../images/bg/mainHeaderRight.png) no-repeat left top #630;
width:275px;
height:350px;
margin-left:406px;
}
.vicenzza {
position:absolute;
width:100px;
height:25px;
left:112px;
top:50px;
}

.mitropolje {
position:absolute;
width:120px;
height:25px;
left:450px;
top:-3px;
}

.fidenzza {
position:absolute;
width:100px;
height:25px;
left:796px;
top:20px;
}

.topImage a:hover {
border-bottom: 1px solid blue;
}
/*language bar definition*/
.langBar {
position:absolute;
width:100px;
height:20px;
left:470px;
top:92px;
}

.langBar a {
display:inline-block;
width: 16px;
height:11px;
margin-right:9px;

}
/*language highlight for contemporary brousers only not ie*/
.langBar a:hover {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 0;
}

.ru {
background: url(../images/flagRu.jpg) no-repeat top left;
}

.ro {
background: url(../images/flagRo.jpg) no-repeat top left;
}

.it {
background: url(../images/flagIt.jpg) no-repeat top left;
}

/*end of lang bar*/

.ortodoxIt {
position:absolute;
width:200px;
height:45px;
left:396px;
bottom:0;
font-size:45px;
font-family: Georgia;
font-style:italic;
color:#630;
text-decoration:none;

}

a:hover[class="ortodoxIt"]{
border:0;
color:#452302;

}
/*------navigation definition------*/
.navMenu {
background: url(../images/bg/horNavBg.png) repeat-x left top;
border: 1px solid #630;
width:980px;
height:49px;
margin-left:32px;
position:relative;
top:-1px;
}

.navMenu p, .navMenu a, .navMenu span {
padding-top:14px;
text-align:center;
font-size:18px;
font-family: Georgia;
font-style:italic;
color:#630;

}
.navMenu a, .bottomMenu a {
text-decoration:underline;
}

.navMenu a:hover, .bottomMenu a:hover {
text-decoration:none;
}

/*------content definition------*/

.contentWrapper {
width:940px;
margin: 20px auto;
}

.centerMain {
width:485px;
margin: 0 0 0 225px;
float:left;
display:inline;
position:relative;
padding-bottom:20px;
}

h1 {
font-size:24px;
color:#963;
font-family:Arial;
font-weight:300;
padding-left:15px;
}

.second {
padding: 10px 0 10px 0;
}

.mainBlock {
width:460px;
margin: 20px 5px 0 15px;
border-bottom: 1px solid #ccc;
min-height:177px;
}

.mainBlock img {
float:left;
border: 1px solid #ac5930;
margin: 10px 10px 10px 0;
}

.mainBlock p {
font-size: 14px;
font-family:Arial;
color:#333;
margin-top:10px;
line-height:16px;

}

.mainBlock a {
font-size:14px;
font-family:Arial;
color:#930;
display:block;
line-height:18px;
}

.allNews a {
background: url(../images/linkIndex.gif) no-repeat left center;
padding-left:25px;
font-size:14px;
font-family:Arial;
color:#930;
display:block;
line-height:18px;
}

.date {
font-size: 12px;
font-family:Arial;
color:#333;
}

h3 {
font-size:18px;
color:#963;
font-family:Arial;
font-weight:300;
padding:5px 0 5px 0;
}

.leftBar {
width:224px;
margin: 0 0 0 -714px;
float:left;
display:inline;
position:relative;
}

.rightBar {
width:224px;
height:400px;
float:right;
display:inline;
position:relative;
}

.container {
width:220px;
background: url(../images/subMenuFooter.png) no-repeat bottom left;
padding-bottom:0px;
margin-bottom:20px;
}

.contBody {
border-left:1px solid #d6d6d6;
border-right:1px solid #d6d6d6;
background: url(../images/bg/contBg.png) repeat top left;
position:relative;
top:-5px;

}
.container h2 {
background: url(../images/subMenuHeader.png) no-repeat top left;
text-align:center;
font-size:18px;
font-family: Georgia;
font-style:italic;
color:#630;
font-weight:300;
min-height:30px;
padding-top:5px;
}

.container a {
background: url(../images/linkIndex.gif) no-repeat 10px 20px;
padding: 18px 3px 0 35px;
font-size:12px;
font-family:Arial;
color:#930;
display:block;
line-height:13px;
}

.contBody>img {
margin:10px 0 5px 53px;
}

.inputSearch {
width:142px;
margin: 18px 5px 10px 5px;
border-left: 1px solid #999;
border-top: 1px solid #999;
border-bottom: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
}

.calendarUnderlinedWrapper {
width:178px;
margin: 0 auto;
}
.calendarUnderlinedWrapper table {
width:178px;
height:55px;
}
table, tr, td {
border: 0px solid black;
}
tr {
height:50%;
}
td {
width:33%;
font-family:Arial;
font-size:11px;
text-align:center;
padding-top:5px;
}

.calendarUnderlinedWrapper p {
border-top: 1px solid #999;
font-size:12px;
font-family:Arial;
color:#333;
line-height:14px;
padding: 5px 0 3px 0;
text-align:center;
}

p.relativePos, span.relativePos {
text-align:left;
position:relative;
top:3px;
}

.relativePos img {
display:inline-block;
}

.inputSubmit {
background: url(../images/searchButton.png) no-repeat top left;
border: 1px solid #6a3907;
width:48px;
}

.footer {
clear:both;
background: url(../images/bg/footerBird.png) no-repeat right top;
border: 1px solid #630;
width:980px;
height:97px;
margin-left:32px;
position:relative;


}

.bottomMenu {
background: url(../images/bg/footerMain.png) repeat-x right top;
height:97px;
margin-right:132px;


}

.bottomMenu p, .bottomMenu a, .bottomMenu span {
padding-top:30px;
text-align:center;
font-size:18px;
font-family: Georgia;
font-style:italic;
color:#630;
}

.paginator {
margin: 25px 6px 0 0;
}
.paginator a, .paginator span {
font-size:12px;
font-family: Tahoma;
color:#930;
text-decoration:underline;
font-weight:700;
padding:6px;

}
.paginator span {
text-decoration:none;
}

[/CSS]

И еще один вопросик в догонку - в цсс есть такой кусочек:

[CSS]/*language highlight for contemporary brousers only not ie*/
.langBar a:hover {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 0;
}[/CSS]

подскажите, как сделать такое свечение для браузеров ие, а то мне только подмена картинки в голову приходит :hmhm:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nils-on
nils-on
сообщение 20.5.2011, 17:30; Ответить: nils-on
Сообщение #2


(Yuri_hb @ 27.4.2011, 03:17) *
подскажите, как сделать такое свечение для браузеров ие, а то мне только подмена картинки в голову приходит


Попробуйте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
maxim_malets
maxim_malets
сообщение 20.5.2011, 17:55; Ответить: maxim_malets
Сообщение #3


По оптимизации CSS навскидку:
1. Использование спрайтов уменьшит количество кода и ускорит загрузку страницы, но по времени делать дольше, особенно если рука не набита.
2. Использовать короткую запись font для шрифтов, по времени так же, кода чуть меньше

Еще неплохо бы добавить шрифтов и семейство шрифта в family для лучшей совместимости.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок
Большой опыт работы, отзывы
304 tario777 203538 13.3.2024, 14:01
автор: tario777
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 92159 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3488 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3421 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок. Большой опыт работы
2 BurzhuyXXi 1989 25.2.2023, 14:37
автор: BurzhuyXXi


 



RSS Текстовая версия Сейчас: 25.4.2024, 1:40
Дизайн