Divisions
Division என்பது குறிப்பிட்ட ஒரு content ஐ மட்டும் தனியே அழைக்கவும் பலவகைகளில் பயன்படுத்தவும் பயன்படுகிறது. உதாரணமாக, நமது content-ஐச் சுற்றி கோடு போட்டு ஒரு பெட்டியை உருவாக்கப் பயன்படும். இதை எவ்வாறு அழகு செய்வது என்று பின்வருமாறு பார்க்கலாம்.
[code]
<html>
<head>
<style>
div {width:60%; height: 40%; border: 3px solid red; }
</style>
</head>
<body> <div>Dont Giveup! Keep on Trying! Even though it seems to be impossible, It will happen in your life one day. All the very best friends! Wait to see the miracle in your life!!!!!! </div></body>
</html>
[/code]
மேலே நமது division-இன் நீளம், அகலம், border ஆகியவை எவ்வாறு இருக்க வேண்டும் எனும் விவரங்கள் கொடுக்கப்பட்டுள்ளன. இப்போது margin:25px என்று சேர்க்கும்போது அந்த division அதன் மேற்புறமும் பக்கவாட்டிலும் 25px இடைவெளி விட்டு வெளிப்படுவதை கவனிக்கவும்.
div {width:60%; height: 40%; border: 3px solid red; margin:25px; }
இப்போது division-க்கும் அதனுள் உள்ள content-க்கும் ஏதேனும் ஒரு margin அமைக்க விரும்பினால் padding:25px என்று கொடுக்கலாம். இது பின்வருமாறு.
div {width:60%; height: 40%; border: 3px solid red; margin:25px;padding: 25px; }
ஜாவாஸ்கிரிப்டு கொண்டு இந்த div ன் உள்ளடக்கதைக் கூட எளிதில் மாற்றலாம். உதாரணத்திற்கு இங்கே காண்க.
www.willmaster.com/library/web-development/replace-div-content.php
[code]
<html>
<pre class="source-code-box"><script type="text/javascript"><!–
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
//–></script></pre>
<pre class="source-code-box"><div
id="example1div"
style="border-style:solid;
padding:10px;
text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer(‘example1div’,’Whew! You clicked!’)">
Click me to replace the content in the container.
</a>
</html>
[/code]
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/