Вобщем вопрос возник в следующем недавно верстая
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: