Tālracējs Posted October 3, 2013 Report Share Posted October 3, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Kasspars Posted October 3, 2013 Report Share Posted October 3, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Tālracējs Posted October 4, 2013 Author Report Share Posted October 4, 2013 Paldies, Kasspar! Izskatās daudzsološi! Pusdienas pārtruakumā izmēģināšu šo variantu :) Quote Link to comment Share on other sites More sharing options...
jurchiks Posted October 4, 2013 Report Share Posted October 4, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Tālracējs Posted October 4, 2013 Author Report Share Posted October 4, 2013 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. :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.