AYM

Latest Post

Better Engagement with a Wider Forum Box on Home Page

* I may have added this to JenSocial in the past. But, don't think so.



This CSS will make your home page Forum Module fill the width of 2 columns. You must have the Forum Module at the very top of your site, in the top center wide column. I added to the Ning Creators site via FireFox, so you can see an example.








This hack as in any, may have to be tweaked for your unique CSS. However, I have installed this on several Client sites without issue. I have tested on the wide and standard layouts. It will not work without more tweaking, where the wide column has been moved to the far left.



What You Need To Do After You Install CSS:

You will need to adjust your column content, as-in, you will have a gap in bottom center. All you'll probably need to do - - move another module in that spot via My Network/Settings/Features Layout.



If you want this styling on your site, I hope it works well for you!





Edit the following code, and add to your Advanced CSS via: My Network/Settings/Appearance/Advanced



CSS YOU WILL ADD:

 .xg_widget_main div.module_forum {width:738px;margin-left:-250px;height:255px; overflow:auto; position:relative;}.xg_widget_main div.module_forum .xg_module_head {width:738px!important;}
/*** MOVE ENTIRE COLUMN DOWN TO ADJUST FOR FULL WIDTH ON FORUMS ***/
.xg_widget_main_index_index .xg_3col .xg_1col {margin-top:268px!important;}

Get A Skype Button



If you would like to add a Skype Button to your site, go here:

http://www.skype.com/intl/en-us/tell-a-friend/get-a-skype-button/

Select the button you want, and copy/paste the code into a text box, or other area of your Ning Network that accepts scripts. BTW, if the code is stripped, try wrapping a DIV around it like this:

<div id="myskype">your Skype Button code</div>



In order for your button to work and accurately reflect your Skype Status, set-up your Privacy Settings:

  • To access your Skype Privacy Settings, click on the main menu option (upper-left) titled Skype, and then Privacy.
  • Select the appropriate radio boxes with your preferences. The one circled in red must be checked:

How To Share Your Logo Banner and Link - "Grab This Code"



To add a logo and link to your site, that site visitors can grab and copy, to add to another site, here's the code I use at the bottom of JenSocial. The key is the <textarea> HTML TAG:



My Original Code, and Reflects the Image Above:

<div style="background-color:#003366; color:#ffffff;"><b>Grab the JenSocial.com badge/link code:</b></div>
<div style="float:left;"><textarea rows="3" cols="65" style="width: 435px;">
&lt;a title="JenSocial Network Directory - Free Directory for All Social Networks" href="http://jensocial.com" target="_blank"&gt;&lt;img border=1 src="http://api.ning.com/files/ht2bDLLex1gqPnPETRZSyD7JPldn2Tz4nCUmOBEQAIzQb9J83ABlaJwJ3R-*rm5oUeFXSu0c*7ygDm0*xw9YGRZBgxqrFCxE/jensocial_banner468by60.png" alt="JenSocial.com: Social Network Directory and Network Creator Hub"&gt;&lt;/a&gt;</textarea></div>
<div><a title="JenSocial Network Directory - Free Directory for All Social Networks" href="http://jensocial.com" target="_blank"><img border=1 src="http://api.ning.com/files/ht2bDLLex1gqPnPETRZSyD7JPldn2Tz4nCUmOBEQAIzQb9J83ABlaJwJ3R-*rm5oUeFXSu0c*7ygDm0*xw9YGRZBgxqrFCxE/jensocial_banner468by60.png" alt="JenSocial.com: Social Network Directory and Network Creator Hub"></a></div>



File to Edit: ShareSiteLogoCode_FullWidth.txt






Code for Center Wide Column, and Reflects the Image Below:

  • Critical Note: For each code block example you would use to edit, be sure you do not alter or remove the start and end bracket codes. You will only see this within the code between start and ending <textarea> The bracket codes look like this - -&lt; for left bracket (less than), AND &gt; for right bracket (greater than).
  • I have edited my code to offer you a centered textarea, that will fit in the wide column of a Ning Network. This should provide good space if you want to use a banner type image like I have - - 468 pixels wide by 60 pixels in height.
  • Your logo needs to be a maximum of 468 pixels in width. This is a good image size to use , since it's one of the standard ad widths/heights for Google Ads. Most of you probably already have a logo banner for this width.
  • Upload your logo banner to your Ning site via the File Manager or a Blog. All you need to do is grab the URL, starting with http and ending with .jpg, .png. or .gif (depending on the type of image you are using).
  • Your edits will start where you see div align=center. If you don't want to center the DIV, remove the align=center.
  • Edit the code below.

  1. Change my titles, my site link, and my image URLS to yours. I am leaving my banner code, so you have a working example of the code.
  2. Be sure to change both instances of the image URL, with yours. One is for your visitor to grab the raw code. The other is for displaying your banner below the code. So they know what they are grabbing.
  3. Be sure to add some type of header in the text box where you offer your banner, like: Please Help Spread the Word, by Adding Our Site Logo To Your Website



<div align=center><textarea rows="3" cols="68" style="width: 468px;">
&lt;a title="JenSocial Network Directory" href="http://jensocial.com" target="_blank"&gt;&lt;img border=1 src="http://api.ning.com/files/ht2bDLLex1gqPnPETRZSyD7JPldn2Tz4nCUmOBEQAIzQb9J83ABlaJwJ3R-*rm5oUeFXSu0c*7ygDm0*xw9YGRZBgxqrFCxE/jensocial_banner468by60.png" alt="JenSocial.com: Social Network Directory"&gt;&lt;/a&gt;</textarea></div>
<div align=center><a title="JenSocial Network Directory" href="http://jensocial.com" target="_blank"><img border=1 src="http://api.ning.com/files/ht2bDLLex1gqPnPETRZSyD7JPldn2Tz4nCUmOBEQAIzQb9J83ABlaJwJ3R-*rm5oUeFXSu0c*7ygDm0*xw9YGRZBgxqrFCxE/jensocial_banner468by60.png" alt="JenSocial.com: Social Network Directory"></a></div>



File to Edit: ShareSiteLogoCode_CenterWideColumn.txt




Wide Center Column Final Result:





Code for Right Column and For the Premium Tips Badge - - Reflects the Image Below:

<div align=center><a title="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!" href="http://jensocial.com/page/join-jens-premium-ning-tips" target="_blank"><img border=1 src="http://api.ning.com/files/zy4ZbhXodTxtzn-rWlMhIKKk4lJvwKE4REYymMhuqVsABRyv-j6GO1VvJBFi-95wuykoWRgZaFcp8RAIE0dWMpmT2H-MSQ7N/privateparty2_lg.jpg" alt="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!"></a></div>
<div align=center><textarea rows="5" cols="63" style="width: 135px;">
&lt;a title="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!" href="http://jensocial.com/page/join-jens-premium-ning-tips" target="_blank"&gt;&lt;img border=1 src="http://api.ning.com/files/zy4ZbhXodTxtzn-rWlMhIKKk4lJvwKE4REYymMhuqVsABRyv-j6GO1VvJBFi-95wuykoWRgZaFcp8RAIE0dWMpmT2H-MSQ7N/privateparty2_lg.jpg" alt="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!"&gt;&lt;/a&gt;</textarea></div>



File to Edit: ShareSiteLogoCode_RightColumn.txt




Right Column Final Result:



Funny thing, this tip probably seems simple, and it is. But, it's very easy to make mistakes when sharing this type of code and information. Please let me know if I've made any errors. And I may have added to JenSocial before. I don't remember and couldn't find it. Regardless, I know I've never created a tip for this, that is this extensive. LOL!



I can't even figure out how to share the premium tip badge here (what the tutorial is all about, LOL). It converts my code, or displays all of it for you to grab. When you add this type of code in a discussion box, it converts it. Point is: be sure to add this to a text box on a Ning site.



Here's the raw code for the premium tip badge. You can grab this and use it on your site.

<div align=center><a title="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!" href="http://jensocial.com/page/join-jens-premium-ning-tips" target="_blank"><img border=1 src="http://api.ning.com/files/zy4ZbhXodTxtzn-rWlMhIKKk4lJvwKE4REYymMhuqVsABRyv-j6GO1VvJBFi-95wuykoWRgZaFcp8RAIE0dWMpmT2H-MSQ7N/privateparty2_lg.jpg" alt="JenSocial.com: Jen's Premium Ning Tips - Join the Party in our Private Club for Ning Tips!"></a></div>




And here is the raw code to add the JenSocial Banner to your site:

<div align=center><a title="JenSocial Network Directory" href="http://jensocial.com" target="_blank"><img border=1 src="http://api.ning.com/files/ht2bDLLex1gqPnPETRZSyD7JPldn2Tz4nCUmOBEQAIzQb9J83ABlaJwJ3R-*rm5oUeFXSu0c*7ygDm0*xw9YGRZBgxqrFCxE/jensocial_banner468by60.png" alt="JenSocial.com: Social Network Directory"></a></div>



Enjoy!

File လမ္းေၾကာင္းေတြကို တခ်ဳိ႕ေတြက HTML ေတြေလ့လာရင္း ရႈပ္ျပီး နားမလည္တာေတြရိွတယ္...

ဒါေၾကာင့္ ဒီမွာ ထပ္ရွင္းျပပါမယ္..

img/image.jpgအဲဒါကို index.html မွာေရးထားတာဆိုပါဆို႕...

အဲဒီ သေဘာက index.html နဲ႕ img folder နဲ႕က same root ပါ...

ဒါေၾကာင့္ img/image.jpg ဆိုျပီး တဆင့္ေခၚရတာ..

imageindex.jpg

ဒါဆိုရင္ေတာ့ index.html နဲ႕ image.jpg က same root ထဲမွာရိွတယ္လို႕ဆိုလိုပါတယ္..

../imageindex.jpg

index.html က image ဆိုတဲ့ Folder ေအာက္မွာရိွတယ္ဆိုပါဆို႕...သူက ေခၚခ်င္တာက အျပင္တဆင့္ထြက္မယ္..

အျပင္တဆင့္က imageindex.jpg ကို ေခၚမယ္လို႕ဆိုလိုတာပါ...

../../ ဆိုရင္ေတာ့ up level ႏွစ္ခါလုပ္သြားတာေပါ့..

../img/im1.jpg ဆိုရင္ေတာ့ uplevel တစ္ခါလုပ္မယ္... ျပီးရင္ img folder ေအာက္က im1.jpg ဆိုတဲ့

ပံုကို ယူမယ္ဆိုတဲ့ သေဘာပါ..

PHP Code:

<html>

<head>

<style>

.mypadding

{

padding:15px;

border:1px solid #000000;

}

.mymargin

{

margin:15px;

border:1px solid #000000;

}

.normal

{

border:1px solid #FF0000;

}

</style>

</head>

<body>

<div class="normal">

Normal text

<div class="normal">

This is normal div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mypadding">

This is padding div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mymargin">

This is mymargin div

</div>

</div>

</body>

</html>

padding ဆိုတာ ကေတာ့ အတြင္းအကြာအေ၀းပါ။ေဘာင္နဲ႕ စာနဲ႕ အကြာအေ၀းေပါ့....margin ကေတာ့ အျပင္နဲ႕ ေဘာင္အကြာအေ၀းပါ...အထက္ပါ code မွာဆိုရင္ normal ကေတာ့ ပံုမွန္ပါပဲ..normal ထဲမွာ normal ထည့္ထားလို႕... border က ထူသလိုျဖစ္သြားတာပါ..ေနာက္တစ္ခုကေတာ့ normalအထဲမွာ padding class ကိုထည့္ထားတယ္...

border အနက္ထဲက စာက border နဲ႕ ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ padding သံုးထားလို႕ပါ..ေနာက္တစ္ခုကေတာ့ normal အထဲမွာ margin class ကိုထည့္ထားတယ္...

border ႏွစ္ခုက ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ margin သံုးထားလို႕ပါ..

မိမိစိတ္ၾကိဳက္padding-bottom, padding-top, padding-left, padding-right စတာေတြရိွပါတယ္...

margin လည္းအဲလိုေတြရိွပါတယ္..padding တစ္ခုတည္းကေတာ့ အကုန္လံုးကို ျခံဳေျပာတာပါ...

ဒါမွ မဟုတ္padding: 1px 5px 0px 10px;အ ဲဒါကေတာ့ top 1px right 5px bottom 0px left 10px လို႕ဆိုတာပါ...

margin လည္း အ ဲဒီလို သံုးႏိုင္ပါတယ္...



Finish

ဘာေတြက်န္ေသးလဲေတာ့ မသိဘူး....

ကုန္သေလာက္ေတာ့ ရိွသြားျပီ...

က်န္ေနေသးတာ...

မသိတာေလးေတြ ေမးႏိုင္ပါတယ္ဗ်ာ...

by Saturngod၏ PDFမွ က်ေနာ္သူငယ္ခ်င္းမ်ားအတြက္ ဗဟုသုတအလို႕ငွာျပန္လည္းေဖာ္ျပလိုက္ပါသည္.............
မူရင္းPDF ဖိုင္းကိုေဒါင္လိုလွ်င္....ေအာက္ပါလခ့္မွာ ေဒါင္ႏိုင္ပါတယ္.....

http://www.mediafire.com/?znjmdeh3zkd 

Background Image

ကဲ..ဒီေန႕ေတာ့ background images ပိုင္းေလးေပါ့...

PHP Code:

<head>

<title>Untitled Document</title>

<style>

body

{

background:url(bg.jpg);

color:white;

}

</style>

</head>

<body>

This is use background Image<br>

New features

Workflow improvements

Adobe Bridge Simplify file handling in Photoshop and within Adobe Cre

ative Suite with Adobe Bridge, the nextgeneration

file browser. Efficiently browse, tag, search, and process

your images. (See About Adobe Bridge.)

Color management improvements Maintain common color settings througho

ut the Adobe Creative Suite components. Print with the simplified pri

nting interface for color management. (See To synchronize color setti

ngs across Adobe applications.)

Version Cue® 2.0 Manage files and versions as a single user or in a s

mall workgroup. Integrate with Adobe Bridge to manage files for your

Photoshop and Adobe Creative Suite projects. (See Version Cue managed

projects.)

Enhanced photo capabilities

Multiimage

Camera Raw Process an entire photo shoot in a fraction of the t

ime. With support for a comprehensive range of digital cameras, you c

an automatically adjust settings, convert to universal Digital Negati

ve (DNG) format, and apply nondestructive edits to batches of images.

(See The Camera Raw plug-in.)

High Dynamic Range (HDR) Work with images in 32-bits-perchannel,

extended dynamic range. Photographers can capture the full d

ynamic range of a scene with multiple exposures and merge the files i

nto a single image. (See About High Dynamic Range images.)

Optical lens correction Correct for lens aberrations such as barrel a

nd pincushion distortion, chromatic aberration, and lens vignetting.

Easily correct image perspective using the filter’s grid. (See The Le

ns Correction filter.)

Noise reduction Reduce digital image noise, JPEG artifacts, and scan

ned film grain. (See Reducing image noise.)

Smart Sharpen filter Sharpen images with new algorithms for better ed

ge detection and reduced sharpening halos. Control the amount of shar

pening in the highlights and shadows. (See To use the Smart Sharpen f

ilter.)

Spot Healing tool Quickly heal spots and blemishes without selecting

source content. (See To use the Spot Healing Brush tool.)

One-click redeye

correction Fix red eyes with one click. Set options to adjust pup

il size and darkening amount. (See To remove red eye.)

Blur filters Apply blur effects using new blur filters: Box Blur, Sha

pe Blur, and Surface Blur. (See Blur filters.)

Productivity boosters

Customizable menus Set up and save custom menus and workspaces, highl

ight new or commonly used menu items, and reduce onscreen

clutter for easier access to the tools you need. (See To defin

e a set of menus.)

Image Processor Process a batch of files to multiple file formats. (S

ee About the Image Processor.)

All new PDF engine Comprehensive, customizable presets and PDF 1.6/Ac

robat 7.0 compatibility. (See Saving files in Photoshop PDF format.)

Script and action event manager Set JavaScripts and Photoshop actions

to run automatically when a specified Photoshop event occurs. (See T

o set scripts and actions to run automatically.)

UI font size customization Customize the size of text in the options

bar, palettes, and the Layer Style dialog box. (See To change the fon

t size in the work area.)

Update Manager Automatically search for Photoshop updates.

Variables Create datadriven

graphics in Photoshop as you now do in ImageReady. (See About

data-driven graphics.)

Video preview Display your document on a video monitor using a Firewi

re (IEEE1394) link. (See To preview your document on a video monitor.

)

WYSIWYG Font menu Preview font families and font styles directly in t

he Font menu. (See To choose a font family and style.)

Designer enhancements

Vanishing Point Paste, clone, and paint image elements that automatic

ally match the perspective planes in an image. (See About Vanishing P

oint.)

Smart Objects Perform nondestructive transforms of embedded vector an

d of pixel data. Create multiple instances of embedded data and easil

y update all instances at once. (See Smart Objects.)

Multiple layer control Work with layers as objects. Select multiple l

ayers and move, group, align, and transform them. (See Selecting laye

rs and To group and ungroup layers.)

Image Warp Easily create packaging mockups

or other dimensional effects by wrapping an image around any shap

e or stretching, curling, and bending an image using Image Warp. (See

The Warp command.)

Animation Create animated GIF files in Photoshop much as you create a

nimation in ImageReady. (See Creating an animation.)

Japanese type features Format text with new character alignment (Moji

soroe) and more Kinsoku Shori types. (See About Asian type.)

Smart Guides Align the content of layers as you move them using guide

lines that appear only when you need them. (See About guides and the

grid.)

Integrated Adobe Online Services Access and download professional Ado

be Stock Photos and share and print online with Adobe Photoshop Servi

ces. (See About Adobe Stock Photos.)

</body>

</html>

ဒီ code မွာဆိုရင္ scroll bar ကိုဆြဲခ်သြားတာနဲ႕ background ပါ လိုက္လာတာေတြ႕မွာပါ... အဲဒါဆိုျပသနာ တစ္ခုျဖစ္ တတ္ပါတယ္...

ဘာလဲဆုိရင္ ကိုယ့္ရဲ႕ background image က height က 600px ပဲရိွပါတယ္ဆိုပါေတာ့္...ဆြဲခ်လိုက္ရင္ height 600px ေက်ာ္ရင္ ပံုက repeat ျဖစ္သြားလိမ့္မယ္...အဲဒါဆိုရင္ၾကည့္ရဆိုးတာေပါ့....

PHP Code:

background:url(bg.jpg) fixed;လို႕သာျပင္လိုက္ရင္ ကိုယ့္ရဲ႕ background က fixed ျဖစ္သြားမယ္..

scroll ဆြဲခ်တာနဲ႕ မလိုက္ေတာ့ဘူးေပါ့...

PHP Code:

background:url(bg.jpg) repeat-x;အဲဒါဆိုရင္ေတာ့ ကိုယ့္ရဲ႕ Image repeat က horizonal သာျဖစ္ေနမယ္...

scroll ဆြဲခ်လိုက္ရင္ ကိုယ့္ image height ကုန္သာန႕ဲ background color ေပၚလာေရာ..............

PHP Code:

background:url(bg.jpg) repeat-y;အဲဒါဆိုရင္ေတာ့ ကိုယ့္ရဲ႕ image repeat က vertical ပဲျဖစ္ေနမွာ...

PHP Code:

.myclass

{

background:url(bg.jpg) repeat-x;

color:white;

}

#mydiv

{

background:url(bg.jpg) repeat-x;

color:white;

}

class ေတြေရာ div မွာပါသံုးလို႕ရတယ္....

Div

PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

}

</style>

</head>

<body>

Div tags

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

</body>

</html>

ကၽြန္ေတာ္တို႕ mydiv ဆိုတဲ့ အထဲမွာ background-color ဆိုျပီး background colorကိုထည့္ထားခဲ့တယ္... စာလံုးအ ေရာင္ကိုေတာ့ အ ျဖဴေရာင္ေပါ့... ဒါေပမယ့္ စာေတြဟာ Div tagsေအ ာက္ကိုေရာက္ေနတယ္... ဘာျဖစ္လို႕လည္းဆိုရင္ Div ဟာ page ရဲ႕ width တစ္ခုလံုးကိုယူလိုက္ပါတယ္... သူ႕ဘာသာ သီးသန္႕ အေနနဲ႕ေပါ့... တစ္ေၾကာင္းတည္းျဖစ္ခ်င္ရင္ေတာ့ <div></div>အစား <span></span> သံုးလို႕ရတယ္.. span tag ကေတာ့ တစ္ေၾကာင္းမဆင္းဘူး...

သူ႕ styleကေတာ့ စာလံုးရိွသေလာက္ပဲ effect ျဖစ္မွာပါ... page width တစ္ခုလံုးျဖစ္မွာမဟုတ္ဘူး..



PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

width:100px;

}

.mydiv2

{

position:absolute;

background-color:#006666;

color:#FFFFFF;

width:100px;

top:50px;

left:180px;

}

</style>

</head>

<body>

Div tage

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

<div class="mydiv2">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

</body>

</html>

ဒီ coding မွာဆို div tag ရဲ႕ အသံုး၀င္ပံု အနည္းငယ္ကိုေတြ႕ရမွာပါ... mydiv ရဲ႕ width ကိုကန္႕သတ္လိုက္တယ္.. 100px ပဲေပးေတာ့တယ္...ေနာက္ mydiv2 ေရာက္ေတာ့ postion ဟာ HTML စာေပၚမွာ မူမတည္ေတာ့ဘူး... ကိုယ္ပိုင္

အ ကြာအ ေ၀းေတြထည့္လိုက္တယ္... အ ဲလိုမ်ဳိးကိုယ္ပိုင္ အကြာအေ၀းေတြ သံုးလို႕ရေအာ္ position ကိုabsolute     လုိ႕ေျပာင္းထားခဲ့ရတယ္.. ေနာက္ျပီးမွ browser အေပၚကေန အကြာအေ၀းနဲ႕ leftအကြာအ ေ၀းေတြ ထည့္လိုက္ တယ္...ေနာက္ပို ့ေတြမွာ ဆက္ၾကည့္ၾကပါ..
PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

width:100px;

border:#00FF99 1px solid;

}

.mydiv2

{

position:absolute;

background-color:#006666;

color:#FFFFFF;

width:100px;

top:31px;

left:326px;

border:rgb(200,10,30) 5px solid;

}

</style>

</head>

<body>

Div tage

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

<div class="mydiv2">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.</div>

</body>

</html>

ကၽြန္ေတာ္တို႕ border ဆိုတာကို ထပ္ျဖည့္လိုက္တယ္...border:#00FF99 1px solid; အဲဒီသေဘာ ကေတာ့   ေရွ႕ကအေရာင္ ေနာက္ျပီးေတာ့ အထူအသံုးျပဳမည့္ပံုစံေတြ႕ေပါ့...အေရာင္ကို ဘယ္လိုသတ္မွတ္လဲဆို hex color ပါ... 0 ကေန F အထိရိွတယ္... 9 ျပီးရင္ A, B, C, D ,E, Fဆိုျပီးေျပာင္းသြားပါတယ္.. အသံုးျပဳတာကေတာ့ RGB ပါ...

  ေရွ႕ႏွစ္လံုးက RED ျပီးေတာ့ Greenေနာက္ဆံုးကေတာ့ Blue ေပါ့... အ ဲဒီလို color ေတြကိုအလြတ္မွတ္စရာမလိုပါ ဘူး... photoshopကေနၾကည့္လိုက္လို႕ရပါတယ္.. hex color ကိုမၾကိဳက္ဘူးဆိုရင္ေတာ့ rgb(255,255,255)

အဲလိုပံုစံသံုးႏိုင္ပါတယ္.. သူကေတာ့ 0 ကေန 255 ထိေပါ့.. hex color မွာ A မည္းက #000000

အျဖဴကေတာ့ #FFFFFF ပါ...rgb မွာကေတာ့ rgb(0,0,0) ကေတာ့ အမည္းျဖစ္ျပီး အျဖဴကေတာ့ rgb(255,255,255) ပါ...border မွာ solid အျပင္ဘာေတြရေသးလဲဆိုရင္ေတာ့ မပူပါနဲ႕ dreamweaver မွာ ေရြးလိုက္ရံုပဲ...

<style> ခ ါတိုင္းဆို style ရဲ႕ေနာက္မွာ "text/css" ဆိုတာပါတယ္.. မထည့္လဲရတယ္ေပါ့...

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

page မွာ အသံုးျပဳမည့္ ပံုစံကိုေျပာတပါ.. charset ဆိုတာက အသံုးျပဳမယ့္ character set ေပါ့.. unicdoe

ဆိုရင္ unf-8 iso ကေတာ့ english စာအတြက္ေပါ့.. dream weaver မွာ page properties -> encoding

မွာ ေရြးလိုက္ရံုနဲ႕ရပါတယ္..အဲဒါမပါလည္း ဘာမွ မျဖစ္ပါဘူး...

<style> လုိ႕ပဲေရးရင္ ရပါတယ္...text/css က မပါရင္ လည္း ရပါတယ္..

Link with CSS

.link

{

text-decoration:none

}

<a href="test.html" class="link">Home</a>

အ ဲဒါဆိုရင္ ကၽြန္ေတာ္တို႕ သံုးလိုက္တဲ့ Home မွာ ေအာက္မွာ မ်ဥ္းသားထားသာကို

ေတြ႕ရမွာမဟုတ္ေတာ့ဘူး...

ဘာျဖစ္လို႕လည္းဆိုကၽြန္ေတာ္တို႕ttext-decoration:noneလုိ႕ေရးသားထားခဲ့လို႕ပါ..

<html><head><title>CSS</title><head>

<style>

.link , .link:visited

{

text-decoration:none

}

.link:hover

{

color:green;

text-decoration:underline;

}

</style></head>

<body>

<a href="test.html" class="link">Home</a></body>

</html>

ဒါဆိုရင္ေတာ့ တမ်ဳိးဆန္းသြားတာေပါ့...

.link:visited ဆိုတာ ကိုယ္သြားျပီးတဲ့ link လည္း .link နဲ႕ တူတူပဲျဖစ္ခ်င္လို႕ comma

ခံျပီးေရးလိုက္တာပါ...

.link:hover ဆိုတာကေတာ့ mouse တင္လိုက္ရင္ ျဖစ္သြားမယ့္ style ပါ...ဒီမွာဆိုရင္ေတာ့ အအေရာင္က အစိမ္းေရာင္ျဖစ္သြားမယ္... underlineတားမယ္...အဲလိုေလးေပၚလာပါလိမ့္မယ္...

<html><head><title>CSS</title><head>

<style>

a , a:visited

{

text-decoration:none;

}

a:hover

{

color:green;

text-decoration:underline;

}

.link , .link:visited

{

color:green;

text-decoration:underline;

}

.link:hover

{

text-decoration:none;

}

</style></head>

<body>

<a href="test.html">Home</a>

<a href="test.html">Home2</a>

<a href="test.html" class="link">Link</a>

</body>

</html>

ကဲဒါဆိုရင္ေတာ့ a tage မွန္သမွ်ရဲ႕ style ကို တစ္ပံုစံတည္းထားခိုင္းပါတယ္..link မွာေတာ့ style ထည့္ခ့ဲပါတယ္...

class သံုးတဲ့ တစ္ခုပဲပံုေျပာင္းေနပါမယ္.. က်န္တာကေတာ့ a tage style အတိုင္းေပါ့...

h1

{

text-transform:uppercase;

}

အဲလိုေလး style tage ထဲမွာေရးျပီး<h1>hello</h1> လုိ႕ေရးထားခဲ့ရင္ေတာ့ HELLO ဆိုျပီးေပၚေနပါမယ္...

အဲ..အဲဒီလုိ သံုးရမယ့္ function ေလးေတြက ဘယ္လိုသိလဲဆိုရင္ေတာ့ dreamweaver မွာ auto

ပါျပီးသားပါ..

h1 { ျပီးေတာ့ space ျခားလိုက္တာနဲ႕ ေပၚလာပါမယ္... ေရြးလိုက္ရံုပဲ...ကဲဒါဆိုရင္ HTMLTage ေတြမွာသံုး လို႕ရ တာသိေလာက္ျပီထင္တယ္...ဒီထက္နည္နည္းျမင့္တဲ့ အပိုင္းေလးေတြ မၾကာခင္သြားေတာ့မယ္...

}

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget