I have following image for the Create_Brochure ActionResult in Brochure Contrller Class
Here the whole URL of that Action
http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false
Once I click I want to save this view page as PDF , to do that I followed this tutorial
So this is the cshtml view page , so it doesn't have a model class
#model IEnumerable<int>
#{
ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
<title>Create a Template</title>
</head>
<body>
<div style="width:100%; padding:10px; float:left;">
<table width=1100 cellpadding=10>
<tr>
<td colspan="2">
<div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
Bank Brochure
</div>
</td>
</tr>
#if (Model.Contains(1))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
<h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
</div>
</td>
</tr>
}
#if (Model.Contains(2))
{
<tr>
<td colspan="2" style="background-color:lightgrey">
<div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
<h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
<p style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</td>
</tr>
}
#if (Model.Contains(3))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
<h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
</div>
</td>
</tr>
}
#if()....
<tr>
<td colspan="2">
<div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
Copyright © 2015 Zoo Group , Solution by kelum.
</div>
</td>
</tr>
</table>
</div>
<br />
<button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$('#btn_sumbit').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("DownloadActionAsPDF", "Brochure")',
dataType: "text",
data: null,
success: function (data) {
},
error: console.log("it did not work"),
});
});
</script>
}
this is controller class method to save to PDF
[HttpPost]
public ActionResult DownloadActionAsPDF()
{
string path = Request.Url.ToString();
//Request.Url.ToString() using to get current page URL
return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
}
but once I click this button it doesn't save to PDF file,
As i already commented that your code is calling the same Method again and again..
You can do the same thing by using ActionAsPdf and point it to the Create_Brochure Action method of yours
Ex:-
public ActionResult DownloadActionAsPDF()
{
return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
}
public ActionResult Create_Brochure()
{
//Your logic....
return View()
}
and in your view page no need of a button or a Ajax call can be done by a anchor tag
View:-
<a href="#Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>
Related
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I am very new to razor I always workder with aspx pages, I am trying to have a login form with 2 text and a submit button and down of it I am trying to add a square menu with gradients and hoover but I got stuck.
this is my Login.cshtml:
#model Magazzino.Models.LoginViewModel
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (TempData["message"] != null)
{
<script type="text/javascript">
alert(#Html.Raw(Json.Encode(TempData["message"])));
</script>
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
<table>
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.TextBoxFor(a => a.Username)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(a => a.Password)</td>
<td>#Html.PasswordFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
</div>
}
<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Contatti", "Contatti")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Informazioni", "Informazioni")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
In this ways google and firefox render the div with the actionlink in a normal way but IE doesn't render the height so I added a layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
#RenderSection("scripts", required: false)
And now IE, Chrome and Firefox are rendering the div with the action without height, I guess it's not the right way to put HTMl elements that are not linked to the form, but How do I put other HTML elements inside a razor page which has got already a form?
Thank you
I think this is mostly css and html problem.
I don't see the closing tag for <div style="background: grey">, I would verify that it is closed properly.
You have two floating divs, I would put an extra tag <div style='clear:both'> before closing the <div style="background: grey"> tag. This will clear the floating after that point.
After 1. and 2., if you don't see the grey background, I would suspect that the inner divs covered the background, if so, I would add some padding in the parent tag, for example <div style="background: grey; padding: 10px;">
I am using ASP.Net Razor , ASP.NET MVC and jQuery.
I have a dictionary in Model and a drop down list in html table. What I want is , when I select "ALM" option in drop down list , I want to show some data from dictionary in id="leftValues" using jquery .
My code:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model Dictionary<string,string>
<style type="text/css">
#myTable {
position:absolute;
top:10%;
left:30%;
}
#heading {
text-align: center
}
#SelectPlatform {
text-align: center;
position: absolute;
top: 10%;
}
</style>
<table id="myTable">
<tr>
<th id="heading"> Select Platform </th>
<th id="heading"> Available Options</th>
<th></th>
<th id="heading"> Selected Options</th>
</tr>
<tr>
<td>
<select id="SelectPlatform">
<option>Select Platform</option>
<option>ALM</option>
<option>Serena</option>
</select>
</td>
<td>
<div>
<select style="text-align: center; text-wrap:normal; width: 110%"; size="20%" id="leftValues" multiple >
// Here I want to show data from dictionary
</select>
</div>
</td>
<td>
<div>
<input style="width: 100%" type="button" id="btnLeft" value="<<" />
<input style="width: 100%" type="button" id="btnRight" value=">>" />
</div>
</td>
<td>
<div>
<select style="text-align: center; text-wrap:normal; width: 110%" id="rightValues" size="20%" multiple >
</select>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#SelectPlatform").change(function () {
var textValue = $("#SelectPlatform option:selected").text();
if (textValue == "Select Platform")
{
// some code
}
else if (textValue == "ALM")
{
// this is working
$("#leftValues").append('<option value=' + '"NoItem"' + ' >HI I am added </option>');
// this is not working
$.each(Model, function (key, value) {
alert(key);
alert(value);
$("#leftValues").append('<option value=' + '"NoItem"' + ' >HI I am also added </option>');
});
}
else if (textValue == "Serena")
{
// some code
}
});
}
});
</script>
So you need to move the Model values from the front end to the back end. Javascript cannot read ViewModel values as they are processed on the server. You can write them out into javascript though:
<script>
var dicMap = new Map();
#foreach (var kv in Model)
{
#:dicMap.set(#kv.Key, #kv.Value);
}
</script>
now change:
// this is not working
$.each(dicMap, function (key, value) {
I am trying to click a button which is in a table cell. This cell contains couple of buttons.
Table has 5 rows and 10 collumns. Button cell is the last one.
Tried using xpath tool in firefox but i am getting an exception that the element could not be found.
tried these xpath variations:
Drv.Driver.FindElement(By.XPath("//table[#id='SERVICE_CANCEL']/tbody/tr[" + 4 + "]/td[10]")).Click();
Drv.Driver.FindElement(By.XPath(".//*[#id='SERVICE_CANCEL']/tr[" + 4 + "]/td[10]/div")).Click();
Drv.Driver.FindElement(By.XPath("//[#serid='10002455']/tr[4]")).Click();
none of these works. Also in every row's 10th cell there is a pack of buttons as i said before. Dont have any other ideas how to click it. If u could help i would appreciate it.
Because HTML code is a bit "Huge" so part of it:
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons><A title="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455"></A></DIV></TD></TR>
The button has an id (SERVICE_CANCEL). First you should rectify the HTML because you need quotes like that : <a id="SERVICE_CANCEL"> and then just use :
Drv.Driver.FindElement(By.Id("SERVICE_CANCEL")).Click();
You don't need any xpath when you have an id
Shien, As we cannot use IDs in a table cell value with ID(as these can be generated dynamically or not unique) you need to give the entire xpath.
I have taken your HTML and just updated the last values You can see with ** and following is the selenium code worked for me.
HTML Code:
<html>
<body>
<table border="1" width="200px">
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons>**<input type=button value="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455" onclick="calFunc()"></input>**</DIV></TD></TR>
</table>
<script>
function calFunc()
{
alert("Hello World");
}
</script>
</body>
</html>
Selenium Code in Java:
driver.findElement(By.xpath("//table/tbody/tr[1]/td[6]/div/div/input[#value='shutdown']")).click();
Found the solution after digging even more.
Xpath that i used was:
//a[contains(#id, 'SERVICE_CANCEL') and contains (#serid, '" +tempPaslaugosIDReiksme + "')]"
I want to put controls on the page where I want for example grid view on the left side
and pairs of text boxes and labels on the right side. how could i do that?
because when i try to drag and drop it just puts text boxes and labels under the grid view or up the view (it sticks to the grid view)
You can control the Layout of your page :
1.) Using CSS. by use of <div>, <span> tags etc
2.) Using Tables
Using tables for page layout is actually debatable and many recommend not to use it. Anyhow thats totally a different question. Still check this: Why is using tables for website layout such an evil
Using CSS:
Page Markup:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
CSS:
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
*Output:*
Using tables:
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright Note</td>
</tr>
</table>
Output:
Refer below links for more examples:
http://www.maxdesign.com.au/articles/css-layouts/
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
http://www.w3schools.com/html/html_layout.asp