web help

[lakijayawardana]

ඔය වෙදකම නම් හරියන්නේ නැහැ පුතේ...ලෙඩාගේ රෝග මූලේට බෙහෙත් කරන්න ඕනේ... මූට මෙලෝ මගුල දන්නේ නැතුව bootstrap වලින් ගහල වැඩක් නැහැ..වෙන්නේ මොකක් ද කියල දැන්නේ නැතුව framework එකක් යුස් කරනවා කියන්නේ තේරුමක් නැති දෙයක්...

ඔව් ඔව්.ඔව කරන්න බේසික් මතක තියෙන්න ඕනි.කොච්චර ෆ්‍රෙම්වර්ක් තිබ්බත් බේසික් අවුල් වුනොත් අවුලක් අවාම හදාගන්න බෑ.ඒකයි පන දාගෙන මේ බේසික් කරන්නේ



ෆ්‍රෙඩී එකේ තියෙන්න මම දාලා තියෙන කෝඩ් එකමනේ?
එකේ පනින්නේ නෑ මචන්.එකේ අවුල නිවුස් කියන මෙනු එක ඉස්සරහින් ඉඩක් ඇවිත් වැඩියෙන්.කොහෙන් ආවද කියල හොයගන්න බෑ.සයින් වෙන එකෙන් මාර්ජින් එකක් ඉෆෙක්ට් වෙලත් නෑ

 

[Lakshan-Seram]

float use karanawata amatharawa display: inline-block, use karanna puluwan mama nam godak welawata use karanawa IE8 walata wata wedi browser support ekakadi..

<li> waladi inline block use karanawa nam parent, <ul> ta font-size: 0; denna one float left karanne nethuwa white space remove karanna nam.

anika IE8 walata palleha support ekak ekka karanawa nam float left karata display: inline denna one nettam margin, padding double wena scene ekak tiyenawa.. me hemadema ithin experience eka thama..


anika mekedi uba responsive support eka amataka karala nisa ithin menu eka gemak na..

 

[FoXm3D!A]

wede hari giye nethnam pm ekak dapan

 

[lakijayawardana]

float use karanawata amatharawa display: inline-block, use karanna puluwan mama nam godak welawata use karanawa IE8 walata wata wedi browser support ekakadi..

<li> waladi inline block use karanawa nam parent, <ul> ta font-size: 0; denna one float left karanne nethuwa white space remove karanna nam.

anika IE8 walata palleha support ekak ekka karanawa nam float left karata display: inline denna one nettam margin, padding double wena scene ekak tiyenawa.. me hemadema ithin experience eka thama..


anika mekedi uba responsive support eka amataka karala nisa ithin menu eka gemak na..

responsive thiya thiyena widihata format ekawath gahaganna baruwa inne
IE8 nan wadak na mata hadala purudu wenna ne.

display: inline-block
meken menu athara thiyena vertical space nathi wena eka neda wenne?
me font size :0 karana seen ekaknam therune na.

 

[lakijayawardana]

wede hari giye nethnam pm ekak dapan

බැරිම වුනොත් පී එම් එකක් දාන්නම් මචන්.

 

[nkt]

ඔය menu එක තියෙන container එකේ margin-top 0px ද බලන්න.. නැත්නම් 0 කරන්න

නැත්තනම් inspect element ගිහිල්ල menu එකේ margin එහෙම මොනාද බලන්න

 

[lakijayawardana]

ඔය menu එක තියෙන container එකේ margin-top 0px ද බලන්න.. නැත්නම් 0 කරන්න

මචන් මම දැන් දාල තියෙන කෝඩින් එකේ අවුල මේක .



news එකට ඉස්සරහින් ලොකු ඉඩක් ඇවිත්

 

[lakijayawardana]

ඔය menu එක තියෙන container එකේ margin-top 0px ද බලන්න.. නැත්නම් 0 කරන්න

නැත්තනම් inspect element ගිහිල්ල menu එකේ margin එහෙම මොනාද බලන්න

මම බොඩර් දාලත් බැලුවා.එකක්වත් ඒ පලවෙනි එකට ඉෆෙක්ට් වෙල නෑ.එක්කෝ මට හොයගන්න බෑ

 

[Lakshan-Seram]

<menu id="top">
  <ul class="nav">
    <li><a href="http://bbc.com" class="logo">BBC</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#" class="active">Weather</a></li>
    <li><a href="#">iPlayer</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Radio</a></li>
  </ul>
</menu>

body, html, ul, li { margin: 0; padding: 0; box-sizing: border-box; }
menu#top { width: 100%; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; background-color: #fff; }
menu#top ul { list-style-type: none; list-style-image: none; font-size: 0; position: relative; display: block; width: 1170px; height: 44px; margin: 0 auto; position: relative; }
menu#top ul li { display: inline-block; *display: inline; zoom: 1; border-left: 1px solid #ccc; vertical-align: middle; position: relative; height: 100%; }
menu#top ul li:first-child { border: none; }
menu#top ul li a { font-size: 12px; color: #333; line-height: 24px; font-family: sans-serif; text-decoration: none; font-weight: 600; padding: 10px; display: block; }
menu#top ul li a:hover, menu#top ul li a.active { border-bottom: 3px solid #000; padding-bottom: 7px; }
menu#top ul li a.logo { background: url(http://nav.files.bbci.co.uk/orbit/1.0.0-204.0515ca1/img/blq-orbit-blocks_grey_alpha.png) no-repeat 10px 10px scroll #fff; display: block; width: 84px; height: 24px; text-indent: -9999px; border: none; }

hadissiye liwwe kisima piliwelak na.. adupadu ematai.. browser rest karala ehema na.. welawak na.. idea ekak ganna kare.

https://jsfiddle.net/hLea6rpk/1/

 

[lakijayawardana]

<menu id="top">
  <ul class="nav">
    <li><a href="http://bbc.com" class="logo">BBC</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#" class="active">Weather</a></li>
    <li><a href="#">iPlayer</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Radio</a></li>
  </ul>
</menu>

body, html, ul, li { margin: 0; padding: 0; box-sizing: border-box; }
menu#top { width: 100%; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; background-color: #fff; }
menu#top ul { list-style-type: none; list-style-image: none; font-size: 0; position: relative; display: block; width: 1170px; height: 44px; margin: 0 auto; position: relative; }
menu#top ul li { display: inline-block; *display: inline; zoom: 1; border-left: 1px solid #ccc; vertical-align: middle; position: relative; height: 100%; }
menu#top ul li:first-child { border: none; }
menu#top ul li a { font-size: 12px; color: #333; line-height: 24px; font-family: sans-serif; text-decoration: none; font-weight: 600; padding: 10px; display: block; }
menu#top ul li a:hover, menu#top ul li a.active { border-bottom: 3px solid #000; padding-bottom: 7px; }
menu#top ul li a.logo { background: url(http://nav.files.bbci.co.uk/orbit/1.0.0-204.0515ca1/img/blq-orbit-blocks_grey_alpha.png) no-repeat 10px 10px scroll #fff; display: block; width: 84px; height: 24px; text-indent: -9999px; border: none; }

hadissiye liwwe kisima piliwelak na.. adupadu ematai.. browser rest karala ehema na.. welawak na.. idea ekak ganna kare.

https://jsfiddle.net/hLea6rpk/1/

mata awula enne ara sign in ekath ekathu karama.ekata wenama div class ekak liuwama thamai okkoma awul wela yanne.hadissi na machan puluwan welawaka balanna.mama aye coding karanawa.example ekath udau wei me paara

mama muladi normalize karala thibbe.eka import kara.eth me awula hinda okkoma ayin kara.

 

[CustomerSupport]

<menu id="top">
  <ul class="nav">
    <li><a href="http://bbc.com" class="logo">BBC</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#" class="active">Weather</a></li>
    <li><a href="#">iPlayer</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Radio</a></li>
  </ul>
</menu>

body, html, ul, li { margin: 0; padding: 0; box-sizing: border-box; }
menu#top { width: 100%; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; background-color: #fff; }
menu#top ul { list-style-type: none; list-style-image: none; font-size: 0; position: relative; display: block; width: 1170px; height: 44px; margin: 0 auto; position: relative; }
menu#top ul li { display: inline-block; *display: inline; zoom: 1; border-left: 1px solid #ccc; vertical-align: middle; position: relative; height: 100%; }
menu#top ul li:first-child { border: none; }
menu#top ul li a { font-size: 12px; color: #333; line-height: 24px; font-family: sans-serif; text-decoration: none; font-weight: 600; padding: 10px; display: block; }
menu#top ul li a:hover, menu#top ul li a.active { border-bottom: 3px solid #000; padding-bottom: 7px; }
menu#top ul li a.logo { background: url(http://nav.files.bbci.co.uk/orbit/1.0.0-204.0515ca1/img/blq-orbit-blocks_grey_alpha.png) no-repeat 10px 10px scroll #fff; display: block; width: 84px; height: 24px; text-indent: -9999px; border: none; }

hadissiye liwwe kisima piliwelak na.. adupadu ematai.. browser rest karala ehema na.. welawak na.. idea ekak ganna kare.

https://jsfiddle.net/hLea6rpk/1/

Beautiful and clean markup. Shouldn't be using nav tags instead of menu?

 

[Lakshan-Seram]

mata awula enne ara sign in ekath ekathu karama.ekata wenama div class ekak liuwama thamai okkoma awul wela yanne.hadissi na machan puluwan welawaka balanna.mama aye coding karanawa.example ekath udau wei me paara

mama muladi normalize karala thibbe.eka import kara.eth me awula hinda okkoma ayin kara.

.menu ul { margin: 0; padding: 0; }

will fix your issue.

 

[Lakshan-Seram]

Beautiful and clean markup. Shouldn't be using nav tags instead of menu?

yep.. my fault wasn't thinking that much .. nav is the best..

 

[lakijayawardana]

.menu ul { margin: 0; padding: 0; }

will fix your issue.

worked
thank you so much machan.
machan wena awul monawada thiyenne? bad habits wage ewwa.
aye divs use karala wadida? keti paarawal thiyeddi mama wate gihin wage seen thiyenawada? dan mama methana display:block ; diilath naane.
mata wena template ekak wage ekak aran hadanna hithila oni na kiyala thaniyama hithala code kare.eka hinda prashna godai.

web design karaddi page eka ekapaara HTML walin liyala passe CSS karana ekada ehema naththan dan wage kaallak liyala eka style karala next ekata yana ekada hoda?

ah thawa deyak..mehema liwuata passe responsive karanna wunoth awulak weida? habai css rules waladi rules liyanna puluwan ne me gaana pixel walata adu nan font-size adu wenna anan manan.eka awul da? ehema naththan responsive karanawanan mula idan plan karanna onida

 

[Lakshan-Seram]

worked
thank you so much machan.
machan wena awul monawada thiyenne? bad habits wage ewwa.
aye divs use karala wadida? keti paarawal thiyeddi mama wate gihin wage seen thiyenawada? dan mama methana display:block ; diilath naane.
mata wena template ekak wage ekak aran hadanna hithila oni na kiyala thaniyama hithala code kare.eka hinda prashna godai.

web design karaddi page eka ekapaara HTML walin liyala passe CSS karana ekada ehema naththan dan wage kaallak liyala eka style karala next ekata yana ekada hoda?

mage code eka balapan.. short and sweet oita wada short and neat karanna puluwan welawa one..

ubata godak dewal igenaganna tiyenawa.. CSS browser reset eke idan..

mama nam karanne section eken section ekata syle karana eka.. notepad++ use karala liyana eka thama hoda.. DW use karath auto generated codes use karanne nethuwa hand-code karanna..

 

[Lakshan-Seram]

responsive karanawanam mula idan plan karanna one.. mokada godak welawa fluid layouts walata giyoth % walin width deela wede godak lesi mokada onema screen ekakata support nisa bootstrap wala column ekak gattot % walin enne so, size eka fluid.

anika font size denna one em walin pixels newe.

 

[lakijayawardana]

responsive karanawanam mula idan plan karanna one.. mokada godak welawa fluid layouts walata giyoth % walin width deela wede godak lesi mokada onema screen ekakata support nisa bootstrap wala column ekak gattot % walin enne so, size eka fluid.

anika font size denna one em walin pixels newe.

godak aya use kranne em ne font size walata.ekath balaganna oni.dan nan oluwa ridenawa.heta udema patan gannawa aye mula idala oya dapu short and sweet code ekath ekathu karala
result ekath dannan
godak kiyane ithin mula idanma wage igena ganna thiyenawa

 

[lakijayawardana]

responsive karanawanam mula idan plan karanna one.. mokada godak welawa fluid layouts walata giyoth % walin width deela wede godak lesi mokada onema screen ekakata support nisa bootstrap wala column ekak gattot % walin enne so, size eka fluid.

anika font size denna one em walin pixels newe.

calculations karala % daganna oni ne. happa... kohomada monawa karalada start up eka gaththe bn muladi? me wage poddak amaru thawa ewa monawada thiyenne ? hamathanama thiyena common ewa nathuwa hithala karana ewa. ekko mata baida danne na. mama oka code karagannath paya 6k ta wadiya giya

 

[nkt]

මම ඔයාගේ code එක copy කරලා බැලුව ... ඔයාගේ ඔය menu එක තියෙන ul එකේ left padding 40px තියෙනව ... ul එකේ style එකට padding:0px කියන එක add කරන්න ... ඕක ඔය default padding එක මම හිතන්නේ..

හැම වෙලාවෙම අපි style ලියද්දි padding ,margin වගේ ඒවා 0 කරන්න ඕන .. මොකද default ඒවා add වෙනවා ..

 

[witaramage]