dažādi jautājumi par optimizāciju..

[thesnarkie]

#outer_top #outer_top_left #navigation .middle { float:left; width:1px; height:27px; background:url(blue_layout.png) repeat-x -14px -28px; margin:0; padding:0; list-style-type: none; }

 

Kamēr nav repeat-x, tad viss notiek pareizi. Viņs paņem to attēlu daļu, kuru vajag un nekādu problēmu, bet, ja vajag to kā repeat-x, tad viņš nerepīto.

 

Tālāk, es katru kastīti mājaslapā veidoju no šī koda:

      <div class="dialog">
       <div class="content">
         <div class="t"></div>
         <div class="m_title"><!-- title --></div>
         <div class="m_content"><!-- content here --></div>
       <div class="b">
         <div></div>
       </div>
     </div>

Rezultātu var apskatīt pievienotajā attēlā.

Bet, manuprāt, to var izdarīt īsāk un ērtāk, tikai nezinu kā. Un visbriesmīgākā lieta - es izmantoju ļoti lielu fonu, lai izveidotu to kastīti.

Css kastītei:

.dialog { position:relative; min-width:8em; color:#000000; z-index:1; padding-left: 4px; }
.dialog .content, .dialog .t, .dialog .b, .dialog .b div { background:transparent url(box_blue_template.png) no-repeat top right; }
.dialog .content { position:relative; zoom:1; _overflow-y:hidden; padding: 0px 0px 0px 0px; }
.dialog .t { position:absolute; left:0px; top:0px; width:4px; margin-left:-4px; height:100%; _height:384px; background-position:top left; }
.dialog .b { position:relative; width:100%; }
.dialog .b, .dialog .b div { height:4px; font-size:1px; }
.dialog .b { background-position:bottom right; }
.dialog .b div { position:relative; width:4px; margin-left:-4px; background-position:bottom left; }
.dialog .hd, .dialog .bd, .dialog .ft { position:relative; }
.dialog .wrapper { position:static; max-height:384px; }
.m_title { margin:0px; padding: 8px 0px 0px 4px; font-family: Arial; font-size: 12px; color: #FFF; font-weight: bold; font-variant: normal; overflow: hidden; }
.m_content { margin:0px; padding:14px 4px 2px 4px; font-family: Arial; font-size: 11px; color: #000; font-variant: normal; overflow: hidden; }

 

Varat palīdzēt to kastīti uztaisīt omptimizētāku?

[Evi]

htmls/css iskataas shaadi, taa lai tie apaljie stuuri vareetu ar uz leju un augshu staigaat, atkariibaa no contenta daudzuma kastiitee. Kods nav notesteets, bet nu prncips ir

 

<div class="box">
   <div class="inner">
       <h2>Statistics</h2>
       <div class="content">
           <p><b>Currently online</b>
               <br />
               3454645
               <b>Registered users</b>
               <br />
               657657</p>
       </div>
   </div>
</div>

 

 

.box{

padding:0;

margin:0;

width:120px;

background:url(top-bg.gif) 0 0 no-repeat;

}

.box .inner{

padding:0;

margin:0;

width:120px;

background:url(bottom-bg.gif) 0 bottom no-repeat;

}

.box h2{

padding:10px;

margin:0 0 10px;

color:#FFF;

background:blue;

font-size:12px;

font-weight:bold;

}

.box .content{

padding:0 10px 2px;

}

.box p{

padding:0;

margin:0 0 10px;

color:#000;

font-size:12px;

line-height:140%;

text-align:center;

}

 

Edited November 24, 2009 by Evi

[mefisto]

Evi, varbūt pirms dod citiem padomus, iemācies kaut ko:

http://www.htmldog.com/guides/htmlintermediate/badtags/

[thesnarkie]

vispār, priekš optimizācijas man patīk šis raksts:

http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/

 

Brr, nesanāk nekas man ar to kastes savādāku, ērtāku, vieglāku uzrakstīšanu. :D

Edited November 24, 2009 by thesnarkie

[Evi]

Evi, varbūt pirms dod citiem padomus, iemācies kaut ko:

http://www.htmldog.com/guides/htmlintermediate/badtags/

 

Es tikpat labi varu atrast rakstu, kur b tags nekaadaa zinjaa nav mineets kaa badTag! Bet ar tevi par sho es negribu diskuteet :P

[mefisto]

A davai ka atrodi tādu rakstu, kurā rakstīts ka prezentācijas tagus ir labi lietot un ka semantikai nav nozīmes .. uz priekšu ..

[daGrevis]

Evi, tas ka kādā desmit gadus vecā rakstā būs rakstīts, ka b tags ir labs nenozīmē, ka tagad, 2009. gadā, tā vietā nebūtu pareizāk izmantot strong tagu... :)

Mēs taču runājam par b tagu, vai ne? :)

[mefisto]

Patiesībā arī tev nav taisnība.

 

Šinī gadījmā atbilstšā dtrutūra būtu definition-list:

<div class="box">
   <div class="inner">
       <h2>Statistics</h2>
       <dl>
           <dt>Currently online</dt>
           <dd>3454645</dd>
           <dt>Registered users</dt>
           <dd>657657</dd>
       </dl>
   </div>
</div>

[thesnarkie]

Paldies, ņemšu vērā! :)