Jautājums par CSS formatējumu div.box rāmī

[Tālracējs]

Sveiki!

 

Pašlaik apgūstu CSS pamatus un nedaudz esmu iestrēdzis pie box elementa, tādēļ vēršos pēc palīdzības.

Ideja iekš div.box ievietot nelielu attēlu un tekstu, katru ar savu formatējumu. Nepieciešamība katram elementam izveidot savu formatējumu ir tādēļ, lai smuki varētu iecentrēt tekstu un bildi pa vidu rāmim.

 

Man kods sanāca šādi:

 

 

ul {
    list-style-type:none;
    padding: 0px;
    margin: 0px;
}
li span {
    padding-top:-10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
}

div.box{
    position:absolute;
    width:471px;
    height:21px;
    color: #cacbcd;
    font-family:"calibri", sans-serif;
    font-size:19px;
    border:2px dashed #cacbcd;
    margin:0px;
    margin-top:533px;
    margin-left:252px;
    background-color:#ffffff;
    padding:12px 15px 18px 40px;
}

 

 

        <div class="box">
            <ul>
                <li>
                    <span><img src="images/warning.png"></span>
                    <span>TEKSTS TEKSTS TEKSTS</span>
                </li>
            </ul>
            </div>

 

 

Un rezultātā iegūstu šādu attēlojumu:

 

Kā lai visu smuki sakārto centrēti? Varbūt <ul> un <li> vietā jāizmanto savādāka metode?

 

Pateicos par palīdzību jau iepriekš! :)

Edited October 3, 2013 by Tālracējs

[Kasspars]

Es tev ieteiktu darīt šādi:

Markup vajag vienkāršāku, ul elements ir lieks

 

<div class="box">Teksts teksts tekts</div>

 

Warning ikonu liec kā background element no css

Neliec definētu augstumu. Ko darīsi, kad teksts būs vairāk kā vienā rindā

 

Rezultāta css būtu šāds

 

.box {

    /** Background krāsa caurspīdīga, tad nāk attēls (ikona), neatkārtojam attēlu, 20px no labās malas, centrēts vertikāli (var arī likt 15px, tad būs vienmēr 15px no augšas) **/

    background: transparent url(warning.png) no-repeat 20px center;

    /** Paddini no augšas un apakšas. Teksts vienmēr izskatīsies iecentrēts pa vidu **/

    padding-top: 15px;

    padding-bottom: 15px;

    /** Tā kā warning ikona ir kā bg, tad pabīdam tekstu tik daudz, lai nelien pa virsu ikonai. Šito pats pieregulē, lai labāk izskatās **/

    padding-left: 40px;

    /** Kaut kāds padding no labās puses, lai teksts nelien pie pašas malas **/

    padding-right: 15px;

    

    /** Tālāk jau tavējais css, lai izdekorētu boxi **/

     color: #cacbcd;

    font-family:"calibri", sans-serif;
    font-size:19px;
    border:2px dashed #cacbcd;

 

 

}

Edited October 3, 2013 by Kasspars

[Tālracējs]

Paldies, Kasspar!

 

Izskatās daudzsološi! Pusdienas pārtruakumā izmēģināšu šo variantu :)

[jurchiks]

Spanam stils display: inline-block, parent elementam text-align: middle, vertical-align: center.

Jautājums: tev attēlu centrēt kopā ar tekstu, jeb tas ir atsevišķi?

Edited October 4, 2013 by jurchiks

[Tālracējs]

Kasspar, vēlreiz tencinu, viss izdevās!

līdz pilnībai vēl jāpaspēlējas ar pikseļiem, bet pa lielam problēma ir atrisināta.

 

 

Paldies arī Tev, jurchiks! Kādā brīvā brīdī paspēlēšos ar Tevis ieteikto kodu. Kā reiz praksē vērtīgi izmēģināt dažādas metodes, lai saprastu kā rīkoties dažādās situācijās. :)