i want to give a margin to these codes so it ll align in my web page correctly margins are. top=30 right=-30 bottom=0 left=-70 plz tel me how to do that !! <div style="border: 3px solid rgb(0, 0, 75); padding: 0px; width: 800px; height: 550px; background-color: rgb(0, 0, 10);"> <p style="color: rgb(94, 136, 158);"><span style="text-decoration: underline; color: rgb(255, 255, 255);">Srilankan Channels</span> <a href="watch-tv.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Rupawahini</span></a> <a href="swarnawahini.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Swarnawahini</span></a> <a href="cityhits.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">City Hits</span></a> <a href="sri-tv.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">SriTV</span></a> <a href="derana.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Derana</span></a></p><p style="color: rgb(94, 136, 158);"> <a href="itn.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">ITN</span></a> <a href="sirasa.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Sirasa</span></a> <a href="damlak.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Damlak TV (Tamil)</span></a></p><p style="color: rgb(94, 136, 158);"><span style="text-decoration: underline; color: rgb(255, 255, 255);">International Music</span> <a href="mtvindia.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">MTV (INDIA)</span></a> <a href="invincible.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Invincible TV</span></a> <a href="fly.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">FLY Music</span></a> <a href="kiss.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Kiss TV</span></a> <a href="e.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">E Music</span></a></p><p style="color: rgb(94, 136, 158);"> <a href="classicfm.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Classic Fm TV</span></a> <a href="9x.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">9X Music</span></a> <span style="text-decoration: underline;"></span><a href="ministry.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Ministry of Sound</span></a><br></p><p style="color: rgb(94, 136, 158);"><span style="text-decoration: underline; color: rgb(255, 255, 255);">International Movies</span> <a href="fox.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Fox Movies</span></a> <a href="star.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Star Plus</span></a> <a href="hbo.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">HBO Hits</span></a></p><p style="color: rgb(94, 136, 158);"><span style="text-decoration: underline; color: rgb(255, 255, 255);">Other Channels</span><span style="color: rgb(94, 136, 158);"> </span><a href="nasa.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Nasa</span></a><span style="color: rgb(94, 136, 158);"> </span><a href="espn.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">ESPN</span></a><span style="color: rgb(94, 136, 158);"> </span><a href="college.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">College Humor</span></a><span style="color: rgb(94, 136, 158);"> </span><a href="ftv.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">FTV</span></a><span style="color: rgb(94, 136, 158);"> </span><a href="research.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Research CH</span></a></p><p style="color: rgb(94, 136, 158);"> <a href="national.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">National Geographic</span></a></p><p></p> <script type="text/javascript"><!-- google_ad_client = "pub-5881133802957507"; /* 728x15, created 2/28/09 */ google_ad_slot = "2565214945"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <p></p><p></p> <script type="text/javascript"><!-- google_ad_client = "pub-5881133802957507"; /* 728x15, created 2/28/09 */ google_ad_slot = "8068614784"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <p></p><p style=""><span style="text-decoration: underline; color: rgb(255, 255, 255);">News Channels</span> <a href="bbcw.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">BBC World</span></a> <a href="al.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Al Jazeera</span></a> <a href="nbc.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">NBC</span></a> <a href="press.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Press TV</span></a> <a href="reuters.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">Reuters</span></a></p><p style=""><span style="color: rgb(255, 255, 255);"> <a href="ndtv.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">NDTV</span></a> <a href="sky.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">SKY</span></a> <a href="cnn.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">CNN</span></a> <a href="cnnibn.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">CNN IBN</span></a> <a href="bbchead.php"><span style="text-decoration: underline; color: rgb(94, 136, 158);">BBC Headlines</span></a><br></span></p><p style=""><span style="color: rgb(255, 255, 255);"></span></p> <p> <script type="text/javascript"><!-- google_ad_client = "pub-5881133802957507"; /* 728x90, created 3/9/09 */ google_ad_slot = "0252026696"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </p></div> Code (markup):
First of all, I would split up your page into two files. Call the first one index.html (or whatever you prefer) and only include your content in this one. Use CSS for your styling, and use this file to get the look of your page right. Try this out, you can change the values in the CSS file to alter the style and postion of elements. You will notice there is much less code, and you are not repeating your span styles over and over again. index.html <html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <p>Srilankan Channels <a href="watch-tv.php">Rupawahini</a> <a href="swarnawahini.php">Swarnawahini</a> <a href="cityhits.php">City Hits</a> <a href="sri-tv.php">SriTV</a> <a href="derana.php">Derana</a> <a href="itn.php">ITN</a> <a href="sirasa.php">Sirasa</a> <a href="damlak.php">Damlak TV (Tamil)</a></p> <p>International Music <a href="mtvindia.php">MTV (INDIA)</a> <a href="invincible.php">Invincible TV</a> <a href="fly.php">FLY Music</a> <a href="kiss.php">Kiss TV</a> <a href="e.php">E Music</a> <a href="classicfm.php">Classic Fm TV</a> <a href="9x.php">9X Music</a> <a href="ministry.php">Ministry of Sound</a></p> <p>International Movies <a href="fox.php">Fox Movies</a> <a href="star.php">Star Plus</a> <a href="hbo.php">HBO Hits</a> <p>Other Channels <a href="nasa.php">Nasa</a> <a href="espn.php">ESPN</a> <a href="college.php">College Humor</a> <a href="ftv.php">FTV</a> <a href="research.php">Research CH</a> <a href="national.php">National Geographic</a></p> <!-- Add your adsense code here --> <p>News Channels <a href="bbcw.php">BBC World</a> <a href="nbc.php">NBC</a> <a href="press.php">Press TV</a> <a href="reuters.php">Reuters</a> <a href="ndtv.php">NDTV</a> <a href="sky.php">SKY</a> <a href="cnn.php">CNN</a> <a href="cnnibn.php">CNN IBN</a> <a href="bbchead.php">BBC Headlines</a> </p> </div> </body> </html> stylesheet.css body { text-align: center; } p { color: rgb(255,255,255); } a { color: rgb(94,136,158); margin-left: 20px; } #page { border: 3px solid rgb(0,0,75); padding: 0px; width: 800px; background-color: rgb(0,0,10); margin: 30px auto; } See how you get on with those, also google up <li> elements and consider putting your links in a list.
Basic Html Use for heading <h1>heading1</h1> <h2>heading2<h2> <h3>heading3</h3> Use for Paragraphs <p>this is used for paragraph</p>
Of course, andy10k did a fine job of assisting you so kudos there, but it can be done in several ways. He's very correct that it is usually best to have a seperate stylesheet: 1. To keep your pages clean and orderly and 2. have less confusion and better organization and 3. to be able to use any classes and ID's you make multiple times throughout any page you wish as long as you link the stylesheet. Styles can be used in 3 places: 1. Style sheet, the furthest away from the actual dislayed page and the last to be used by the browser 2. In the head tag using <style type="text/css>[classes and id's]</style>. 3. Inline with the actual html in div's or tags. This is will be dislpayed overriding the above two. If there is no inline style then it looks for the style in the head and if there is no style in the head it resorts to the linked stylesheet. The margin styles can written as such: In head and style sheet: margin: 10px 20px 10px 20px; Code (markup): (and the positions are top right botom left (clockwise)) If the left and right values (or top and bottom values) are the same then you can just place one value for each together such as: margin: 10px 20px 13px; Code (markup): the 10px is the top and the 20px will be used for the left and right and the 13px the bottom If the top and bottom values are equal and the right and left are equal, but the vertical is not equal to the horizontal the you can write it as such: margin: 10px 20px; Code (markup): where the 10px is the top and bottom and the 20px is the right and left. If all values are the same then it can be simple placed as: margin: 10px; Code (markup): and will be 10px for all 4 values. For inline you already seem to know, but the value placement is teh same all of this can also be done individually such as: margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; Code (markup): But that is so excessive and wastes space...