Jump to content
php.lv forumi

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


Tālracējs

Recommended Posts

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:

box.png

 

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 by Tālracējs
Link to comment
Share on other sites

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 by Kasspars
Link to comment
Share on other sites

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

Capture.png

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. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...