I want to make a webpage with background in a colour and a paper on top of it (like irctc.com, which has a blue background and a white paper on it). Please Help!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Just for you</title> <style type="text/css"> html { height: 100%; } body{ background-color: aquamarine; height: 100%; margin: 0; } #content { height: 80%; width: 80%; background-color: white; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="content"> <h1>Just for you</h1> </div> </body> </html> Code (markup): I'd also suggest you go and learn the basics of HTML/CSS. Many good websites around, so you should have no problem finding one. But here is one of my favorites www.htmldog.com Code (markup):
yaa actually GMF is right told you there are lots of tutorial available on internet for front end development, and you can refer this one site also for learning html and css from beginning level Visit:- http://www.w3schools.com
No, mi amigo. You didn't understand the concept. I know about this code. Just open IRCTC.CO.IN in your browser and see the page.
I write the code for you. Add css in style.css and html code in html file. ======= CSS Code ======== body { background-color: #4B7B81; font-family: Arial,Helvetica,sans-serif; font-size: 62.5%; } .page-container { background-color: #FFFFFF; margin: 10px auto; width: 970px; } .page-bottom-img {width:970; height:10px; background:#FFFFFF url(img/footer_bottom.jpg no-repeat;} .header-top-img { background: url("../img/home_05.jpg") no-repeat scroll 0 0 #FFFFFF; height: 11px; width: inherit; } ======= HTML Code ======== <div clas="header-top-img"></div> <div class="page-container"></div> <div clas="header-bottom-img"></div>
There are some mistakes in your code: In CSS: I think you meant .header-bottom-img and not .page-bottom-img (because there is no class page-bottom-img) In the css for .page-bottom-img (should be .header.bottom-img) -> width:970; You need to specify the amount. I guess it would be pixel, so width:970 px; would be right. Next, you forgot to close the brace around background:#FFFFFF url(images/footer_bottom.jpg no-repeat; This would be right background:#FFFFFF url(images/footer_bottom.jpg) no-repeat; On .header-top-img -> width: inherit doesn't work out. Use 970px You know what: I'll rewrite the whole thing <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { background-color: #4B7B81; font-family: Arial,Helvetica,sans-serif; font-size: 62.5%; } .page-container { background-color: #FFFFFF; margin: 0 auto; width: 970px; height: 500px; } .header-bottom-img { width:970px; height:10px; background:#FFFFFF url(./images/footer_bottom.jpg) no-repeat; margin: 0 auto; } .header-top-img { background: url("./images/home_05.jpg") no-repeat scroll 0 0 #FFFFFF; height: 11px; width: 970px; margin: 0 auto; } </style> </head> <body> <div class="header-top-img"></div> <div class="page-container"></div> <div class="header-bottom-img"></div> </body> </html> HTML: Without my adjustments, it looks like this: With my adjustments: But why you would use images instead of CSS border-radius: is beyond me.
Below is a sample code to make a page with background image like paper. <html> <head> <title>Home</title> <style type="text/css"> body{background-color:#2781BA;} .container{margin:20px auto; width:900px; background: none repeat scroll 0 0 #FFFFFF; border: 2px solid #038B8F; border-radius: 5px 5px 5px 5px; text-align:center;} </style> </head> <body> <div class="container"> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <p>F</p> <p>G</p> <p>H</p> <p>I</p> <p>J</p> <p>K</p> <p>L</p> <p>I</p> <p>J</p> <p>K</p> <p>L</p> <p>M</p> <p>N</p> <p>O</p> </div> </body> </html>
I'm just wondering what the **** "paper" has to do with any of this -- it's not textured... it's just white... and yeah this is 2013 not 2001, use CSS3 for the rounded corners. Also, fixing the width is a bad idea design-wise unless you don't care about people actually wanting to visit the site -- and damn, that IRCTC page is horrifically bad in terms of speed, size, or accessibility. Talk about your idiotic train wrecks of ineptitude. I would say born-star's example is the best so far, though I hate the illegible stuffing everything on one line in the CSS garbage, the lack of a doctype is problematic, and you don't need to say border-radius' property multiple times if it's all the same value - border-radius:5px; would have been quite sufficient. Also, border-radius values less than 8px usually don't look all that great in some browsers.