web help

lakijayawardana · Apr 30, 2016

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

මම අද නිකමට BBC site menu ක්ලොන් කරන්න ගියා.වැඩේ හරි ගියේ නෑ එරර් ගොඩයි.පුලුවන්නම් එකටත් හෙල්ප් එකක් දෙන්න.කරල තියෙන වැරදි අඩුපාඩුත් කිව්වොත් හොදයි.

මෙකේ අවුල ඇවිත් මෙනු එකේ නිවුස් එක ඉස්සරහින් ඉඩක් වැඩියෙන් ඇවිත්.
කලින් පාර හදද්දි මෙනු එක ෆ්ලෝට් කරද්දි ඔක්කොම පල්ලෙහට පනිනවා.ඔක්කොම අයෙ මුල ඉදන් කරල අන්තිමට මෙතන හිර වුන

BUMP එකක්වත් දාන්න

lakijayawardana · Apr 30, 2016

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BBC - clone</title>
<link rel="stylesheet" type="text/css" href="style/main.css"/>
</head>

<body>

<div class="container">

<header>
<div class="top_bar">
<div class="top_menu">

<div class="logo">
<img src="img/bbc-blocks-light.png" alt="logo"/>
</div>
<div class="sign_in">
<img src="img/sign.PNG" alt="sign_in"/>
<a href="#">Sign In</a>
</div>

<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Earth</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Capital</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Autos</a></li>
</ul>

</div>
</div>
</div>
</header>

</div>

</body>
</html>

lakijayawardana · Apr 30, 2016

body {
background-color: lightblue;
padding:0;
margin:0;
font-family:"Arial Black", Gadget, sans-serif;
}

.top_bar{
width: 100%;
background-color: #000000;
height: 35px;
}

.top_menu{
max-width: 1366px;
width:93%;
height: 35px;
margin: 0 auto;
font-size: 11.3px;
font-weight: bold;

}

.logo{
float:left;
padding-top: 5px;
padding-right: 18px;
border-right: 1px solid #636363;

}

.sign_in{
float:left;
border-right: 1px solid #636363;
width:162px;

}

.sign_in img{
float:left;
margin:5px 3px auto 7px;

}

.sign_in a{
float:left;
margin-top: 10px;

}

.menu{
float:left;
}

.menu li{
float:left;
list-style: none;
border-right: 1px solid #636363;
padding: 0 20px;

}

.top_menu a{
text-decoration: none;
color:#ffffff;
}

sri D · Apr 30, 2016

RavinduSha · Apr 30, 2016

Remove this line

Add the last line

Then you'll get this

kolavari · Apr 30, 2016

What's the desired output? :baffled:

lakijayawardana · Apr 30, 2016

kolavari said:
What's the desired output?

BBC site menu ක්ලොන් කරන්න :dull:

lakijayawardana · Apr 30, 2016

RavinduSha said:
Remove this line

Add the last line

Then you'll get this

මචන් මෙනු එක පහලට පනිනවා නේ? ඒක හින්ද තමයි මටත් අවුල බන්. මම හිතන්නේ පොසිෂන් කරන්න ඕනි.අනේ මන්ද බන් අවුල හොයගන්න බෑ.

kolavari · Apr 30, 2016

lakijayawardana said:
මචන් මෙනු එක පහලට පනිනවා නේ? ඒක හින්ද තමයි මටත් අවුල බන්. මම හිතන්නේ පොසිෂන් කරන්න ඕනි.අනේ මන්ද බන් අවුල හොයගන්න බෑ.
View attachment 64705

පහලට පනින්නේ මචන් "top_menu" div එකේ width එක මදි නිසා...ඒ div එක ඇතුලේ උබ දාල තියෙන ඔක්ක්ටෝම ඉන්න බැහැ total width වැඩි නිසා. උබට තේරෙනවද මම කියන දේ?...ඒ නිසා මෙනු එක පහලට පනිනවා..

top_menu එකේ width එක 100% කරානම් හරියනවා...fix width යුස් කරන්න එපා...ඔය වගේ parcentage ම දෙන්න අනිත් ඒවටත්...

ඔයා ෆ්ලොට් කරලා තියෙනවා නම් වැරද්දක් නැහැ... :yes:

check this fiddle..

https://jsfiddle.net/xsheud4z/1/

Lakshan-Seram · Apr 30, 2016

kolavari said:
What's the desired output?

bump.. you can help. i'm going

kolavari · Apr 30, 2016

Lakshan-Seram said:
bump.. you can help. i'm going

tell ur suggestions too..that will help.. :yes:

lakijayawardana · Apr 30, 2016

Lakshan-Seram said:
bump.. you can help. i'm going

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

still you can help

lakijayawardana · Apr 30, 2016

kolavari said:
පහලට පනින්නේ මචන් "top_menu" div එකේ width එක මදි නිසා...ඒ div එක ඇතුලේ උබ දාල තියෙන ඔක්ක්ටෝම ඉන්න බැහැ total width වැඩි නිසා. උබට තේරෙනවද මම කියන දේ?...ඒ නිසා මෙනු එක පහලට පනිනවා..

top_menu එකේ width එක 100% කරානම් හරියනවා...fix width යුස් කරන්න එපා...ඔය වගේ parcentage ම දෙන්න අනිත් ඒවටත්...

ඔයා ෆ්ලොට් කරලා තියෙනවා නම් වැරද්දක් නැහැ... check this fiddle..

https://jsfiddle.net/xsheud4z/1/

මචන් මම පික්සල් ගාන දුන්නේ මැක්ස් එකක් නේ? නොමල් විඩ්ත් එක 93%.
මම මෙනු එකේ 5ක් විතරක් තිබ්බත් උඩින් පැනල තියෙන්නේ බන්.

ෆ්‍රෙඩී එකේ තියෙන එකේ චෙක් කරන ගමන් ඉන්නේ

kolavari · Apr 30, 2016

lakijayawardana said:
මේකයි සීන් එක. ගොඩක් ටියුටෝරියල් තියෙනව නේ වෙබ් ඩිවෙප්ලොමෙන්ට් කිවොත්.හැබැයි මචන් එකකවත් හරියට positioning, වගේ දේවල් හරියට කියල දෙන්නෙ නෑ.ලේසි ටික ගොඩක් වෙල කරල අරව පට පට ගාල කරන් යනවා.
උබල දන්න ඇඩ්වාන්ස් හොද ටිටෝරියල් මොනවද? මට එකක්වත් හරියට සෙට් වුනේ නෑ.

still you can help

You are already doing it the right way

Learn by doing :yes:

මමත් ඉගෙන ගත්තේ ඔහොම තමා බන්...කරලම තමා ඉගෙන ගන්න ඕනේ..css positioning කියන්නේ මට ඒ දවස් වල හරිම අමාරු වැඩක්..විශේෂයෙන් ම table වලින් ගහන්න පුරුදුවෙලා හිතල css වලින් හිතන්න ගියාම පිස්සු වගේ තමා...ඕක කරනකොට තමා එන්නේ...

positioning කියන්නේ හරිම පොඩි සීන් එකක්..මම ඔය බේසික් ටික අල්ලගත්තු ලින්ක් එකම හම්බුනා මට...මෙන්න මේක...බලල තියරිය අල්ලගනින්...ජය වේවා!!

http://www.barelyfitz.com/screencast/html-training/css/positioning/

kolavari · Apr 30, 2016

lakijayawardana said:
මචන් මම පික්සල් ගාන දුන්නේ මැක්ස් එකක් නේ? නොමල් විඩ්ත් එක 93%.
මම මෙනු එකේ 5ක් විතරක් තිබ්බත් උඩින් පැනල තියෙන්නේ බන්.

ෆ්‍රෙඩී එකේ තියෙන එකේ චෙක් කරන ගමන් ඉන්නේ

අනික්වා ෆික්ස් width නිසා ඉඩ මදි මෙනු එකට...එකයි එක පහලට පනින්නේ...fix width අයින් කරන්න... :yes:

and use browser developer options (F12) :yes:

or Firebug :yes:

lakijayawardana · Apr 30, 2016

kolavari said:
You are already doing it the right way Learn by doing මමත් ඉගෙන ගත්තේ ඔහොම තමා බන්...කරලම තමා ඉගෙන ගන්න ඕනේ..css positioning කියන්නේ මට ඒ දවස් වල හරිම අමාරු වැඩක්..විශේෂයෙන් ම table වලින් ගහන්න පුරුදුවෙලා හිතල css වලින් හිතන්න ගියාම පිස්සු වගේ තමා...ඕක කරනකොට තමා එන්නේ...

positioning කියන්නේ හරිම පොඩි සීන් එකක්..මම ඔය බේසික් ටික අල්ලගත්තු ලින්ක් එකම හම්බුනා මට...මෙන්න මේක...බලල තියරිය අල්ලගනින්...ජය වේවා!!

http://www.barelyfitz.com/screencast/html-training/css/positioning/

තැන්කූ මචන්.
ඒ අර ෆිඩ්ල් එකේ කොතනද වෙනස් කරේ බන්.පැය 6ක් විතර ඒක කරල ඔලුව කුරුවල් වෙලාද කොහෙදො තැන පෙන්නේ නෑ.

lakijayawardana · Apr 30, 2016

kolavari said:
අනික්වා ෆික්ස් width නිසා ඉඩ මදි මෙනු එකට...එකයි එක පහලට පනින්නේ...fix width අයින් කරන්න... and use browser developer options (F12) or Firebug

inspect කරල බෝඩර් දාලා බල බල තමයි ඔච්චරවත් කරගත්තේ .....

ෆීඩල් එකෙත් මැක්ස් විඩ්ත් එක එහෙම්ම තියෙනවනේ බ්‍රෝ. ඒත් එක හරි.කොහොමද එහෙම වුනේ? රෙස්ට් එකක් ගන්න වෙයි වගේ

indigofire · Apr 30, 2016

lakijayawardana said:
මේකයි සීන් එක. ගොඩක් ටියුටෝරියල් තියෙනව නේ වෙබ් ඩිවෙප්ලොමෙන්ට් කිවොත්.හැබැයි මචන් එකකවත් හරියට positioning, වගේ දේවල් හරියට කියල දෙන්නෙ නෑ.ලේසි ටික ගොඩක් වෙල කරල අරව පට පට ගාල කරන් යනවා.
උබල දන්න ඇඩ්වාන්ස් හොද ටිටෝරියල් මොනවද? මට එකක්වත් හරියට සෙට් වුනේ නෑ.

මම අද නිකමට BBC site menu ක්ලොන් කරන්න ගියා.වැඩේ හරි ගියේ නෑ එරර් ගොඩයි.පුලුවන්නම් එකටත් හෙල්ප් එකක් දෙන්න.කරල තියෙන වැරදි අඩුපාඩුත් කිව්වොත් හොදයි.

මෙකේ අවුල ඇවිත් මෙනු එකේ නිවුස් එක ඉස්සරහින් ඉඩක් වැඩියෙන් ඇවිත්.
කලින් පාර හදද්දි මෙනු එක ෆ්ලෝට් කරද්දි ඔක්කොම පල්ලෙහට පනිනවා.ඔක්කොම අයෙ මුල ඉදන් කරල අන්තිමට මෙතන හිර වුන

BUMP එකක්වත් දාන්න

මේකට කරන්න තියෙන්නේ bootstrap වගේ grid system එකක් පාවිච්චි කරන විදිය ඉගෙන ගන්න. අමුතුවෙන් tutorial බලන්න ඕන නෑ doc එක බැලුවම තේරෙනවා.

Bootstrap

Foundation

kolavari · Apr 30, 2016

indigofire said:
මේකට කරන්න තියෙන්නේ bootstrap වගේ grid system එකක් පාවිච්චි කරන විදිය ඉගෙන ගන්න. අමුතුවෙන් tutorial බලන්න ඕන නෑ doc එක බැලුවම තේරෙනවා.

Bootstrap

Foundation

ඔය වෙදකම නම් හරියන්නේ නැහැ පුතේ...ලෙඩාගේ රෝග මූලේට බෙහෙත් කරන්න ඕනේ... :baffled:

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

lakijayawardana · Apr 30, 2016

indigofire said:
මේකට කරන්න තියෙන්නේ bootstrap වගේ grid system එකක් පාවිච්චි කරන විදිය ඉගෙන ගන්න. අමුතුවෙන් tutorial බලන්න ඕන නෑ doc එක බැලුවම තේරෙනවා.

Bootstrap

Foundation

ග්‍රිඩ් සිස්ටම් එක ඉස්සර එක පාරක් කර වගෙ මතකයි. මට බූට්ස්ට්‍රැප් නැතුව පියෝ කරන්න ඕනි මචන්.මට දැන් බේසික් මොකුත් මතක නෑ.ආයේ රිෆ්‍රෙශ් කරගන්න ගමන් ඉන්නේ.ඊට පස්සේ බූට්ස්ටැප් කරනව. ඒකේ අයිකන්ස් ටිකයි රෙස්පොන්සිව් හදන එක හෙන ගති.එක පාරයි කරේ හැබැයි

thank you

web help

Member

Member

Member

Member

Well-known member

Well-known member

Member

Member

Well-known member

Well-known member

Well-known member

Member

Member

Well-known member

Well-known member

Member

Member

Member

Well-known member

Member

Similar threads