I want to use this template in my MVC project.
But the left column is not showing in index.aspx.
Thanks for helping me to find the error.
Site.css
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
background: #C8FC98;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
Site.Master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head id="topsection" runat="server">
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
<body>
<asp:ContentPlaceHolder ID="pageHeadPlaceHolder" runat="server">
<div id="pageHead">
<p>Head</p>
</div>
</asp:ContentPlaceHolder>
<div id="mainContainer">
<asp:ContentPlaceHolder ID="leftColPlaceHolder" runat="server">
<div id="leftcolumn">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<div id="contentwrapper">
<div id="contentcolumn">
<p>
test</p>
</div>
</div>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder ID="pageFooterPlaceHolder" runat="server">
<div id="footer">
</div>
</asp:ContentPlaceHolder>
</body>
</html>
Index.aspx
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>
UPDATED Image
Have you checked the HTML output? If the left column code is not there then its not a CSS issue. It looks like you are overwriting your left column code in the master with the blank content tag. Try removing the following from your index.aspx.
<asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>
You only need to declare it in the index.aspx if you plan on replacing what is in the master.
Love,
I can't see the css file included anywhere in your Site.Master. Try adding a reference to that, something along the lines of (or whatever the path to your particular css may be):
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
Related
So I need to do my school project which is building a website using asp.net and including a master page.
Now I kind of got stuck since My menu isn't where I want it to be (I pointed where I want it to be using paint), I have no idea what I'm doing wrong so if someone could tell me how to change the menu location and why it didn't work for me I will be very glad.
this is the video page code
`<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Videos.aspx.cs" Inherits="WebApplication1.Videos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
height: 298px;
margin-top: 0px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Videos</h1>
<p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>
<div id="video1">
<iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
</div>
<h3>Buakaw training</h3>
<p></p>
<p></p>
<div id="video2">
<iframe width="420" src="https://www.youtube.com/embed/Mf1Ch8mJ464" frameborder="0" allowfullscreen class="auto-style1"></iframe>
</div>
</asp:Content>`
this is the css code:
`body {
background-color:black;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color: #333;
margin: 0;
padding: 0;
line-height: 16px;
direction:rtl;
border-color:cornsilk;
}
#header{
height:120px;
background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSljBA8SLU52gNwOjT0HYxWNs17EXF3ykPDNLaiwy0lsC4rx71w") repeat-x;
direction:rtl;
text-align:center;
position:fixed;
}
#header2
{
height:30px;
}
p
{
direction:rtl;
text-align:left;
color:brown;
font-size: x-large;
}
HomePage picture
{
text-align:left;
}
table,td
{
border:1px white solid;
border-collapse:collapse;
border-spacing:30px;
}
td
{
font-size:23px
}
td
{
padding-top: .5em;
padding-bottom: .5em;
}
h1
{
text-align:center;
}
img
{
padding:5px;
}
video1
{
text-align:left;
position:absolute
}
video2
{
text-align:left;
position:relative;
}
#video1
{
position:static;
text-align:left;
}
#video2
{
position:static;
text-align:left;
}
h3{
text-align:left;
}`
and this is the master page code:
` <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="NewWebsite.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
</div>
<div id="header2">
<form id="form1" runat="server">
<div>
<h2>Menu</h2>
<table>
<tr>
<td> Home Page</td>
</tr>
<tr>
<td> Top Fighters</td>
</tr>
<tr>
<td>Videos</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
<div id="left">
</div>
</body>
</html>`
Where I want to put my manu
i just dont know why you are not using bootstrap ?
if you will usew bootstrap it would be easy to place content any where you want with a responsive design Like
just make a a row with 2 divs inside that like
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row col-sm-8">
Now place your Video Content here like :
<h1>Videos</h1>
<p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>
<div id="video1">
<iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
</div>
<h3>Buakaw training</h3>
<p></p>
<p></p>
</div>
<div class="row col-sm-4">
And place you navigation here like :
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</div>
</div>
</div>
</body>
</html>
Run this Snippet in a full page view you will find out how to adjust more and do stuff that you want
Need help.
I cannot figure out why I cannot place div side by side in the child .aspx of master page.
The code works if I hardcode the style like this
<div id="pagemiddleleft" style="float:left;">
But when I move the style into the CSS file, the div's refuse to sit side by side.
Below is the child code
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="pagetop">
</div>
<div id="pagemiddle">
<div id="pagemiddleleft">111111
</div>
<div id="pagemiddlecenter">111111
</div>
<div id="pagemiddleright">111111
</div>
<div style="clear: both"></div>
</div>
<div id="pagebottom">
</div>
</asp:Content>
Below is an extraction of the Master Page
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
Below is the CSS portion for the child aspx page
#pagemiddleleft {
float: left; background-color: #FFFF00;}
#pagemiddlecenter {
float: left; background-color: #00FFFF;}
#pagemiddleright {
float: right; background-color: #FF00FF;}
Try this master page layout
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
div.page
{
float: left;
width: 100%;
background:#ffc;
}
div#main
{
float: left;
clear: both;
width: 100%;
position: relative;
}
div#page-left
{
float: left;
width: 20%;
background:orange;
}
div#page-right
{
float: right;
width: 20%;
background:green;
}
div#page-middle
{
float: left;
margin: 0 auto;
width: 60%;
background:blue;
}
</style>
</head>
<body>
<div class="page">
<div id="main">
<form id="form1" runat="server">
<div id="page-left">
<asp:ContentPlaceHolder ID="leftContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="page-middle">
<asp:ContentPlaceHolder ID="middleContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="page-right">
<asp:ContentPlaceHolder ID="rightContent" runat="server"></asp:ContentPlaceHolder>
</div>
</form>
</div>
</div>
</body>
</html>
Content Page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MasterPageFile="~/MasterPage.master"
Inherits="_Default" %>
<asp:Content ContentPlaceHolderID="leftContent" runat="server" ID="PageLeft">
Page Left Contentt</asp:Content>
<asp:Content ContentPlaceHolderID="middleContent" runat="server" ID="PageMiddle">
Page Middle Content</asp:Content>
<asp:Content ContentPlaceHolderID="rightContent" runat="server" ID="PageRight">
Page Right Content</asp:Content>
I think it's important to set the width on your elements and you can lose the clear: both <div> and just put overflow: hidden on pagemiddle. (The height isn't needed, I just put it there to better illustrate my answer)
#pagemiddle { overflow: hidden; width: 500px; }
#pagemiddleleft { float: left; background-color: #FFFF00; width: 100px; height: 100px; }
#pagemiddlecenter { float: left; background-color: #00FFFF; width: 300px; height: 100px; }
#pagemiddleright { float: right; background-color: #FF00FF; width: 100px; height: 100px; }
Demo - http://jsfiddle.net/8NH8t/
I'm trying to get the nested div #canvas (white area) here: http://osf.fivetoolsoftware.com to fill up 100% of the empty space.
Here is the html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ontario Shores Foundation</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
</telerik:RadStyleSheetManager>
</head>
<body>
<form id="form2" runat="server">
<telerik:RadScriptManager ID="RadScriptManager3" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div id="wrapper">
<div style="padding-top: 20px;">
<div id="canvas">
<div style="text-align: right; width: 100%;">
<uc3:LoginView ID="LoginView1" runat="server" />
</div>
<uc1:Header ID="Header1" runat="server" />
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div class="push">
</div>
</div>
<uc2:Footer ID="Footer2" runat="server" />
</form>
</body>
</html>
Here is the pertinent css:
html, body, form
{
background-color: #c7beb4;
font-family: Tahoma, arial;
font-size: 12px;
color: #000000;
height: 100%;
margin:0;
padding:0;
top: 0px;
left: 0px;
background: url('../images/bg.jpg') top left repeat-x;
background-color: #c9c0b7;
}
#wrapper
{
background-position: left top;
height: auto !important;
height: 100%;
position: relative;
margin: 0 auto -132px;
min-height: 100%;
}
#canvas {
position: relative;
width: 930px;
background:#fff;
min-height: 100%;
margin: 0 auto;
}
I ended up using a jquery function to increase the height of the div
$(document).ready(function () {
var h = window.innerHeight - 20 - 132; //padding and footer height
if (h > $('div#canvas').height()) {
$('div#canvas').height(h);
}
});
I am still thinking there's a cleaner css solution to this problem.
I want to use a div to centre a website, should this be done on the site.master or on each page?
thanks
<div id="wrapper">
//Rest Of Masterpage
</div>
in CSS
#wrapper
{
margin: auto;
}
This should center everythign in your masterpage
Add this CSS to your stylesheet
* { margin:0; padding:0; }
body { text-align:center; }
#container { width:960px; margin:0 auto; text-align:left; }
Then in the master page
<div id="container">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div>
<center>
<asp:ContentPlaceHolder ID="Content1" runat="server"/>
</center>
</div>
ASPX:
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
CSS:
#main { margin: 0 auto; }
The default code shows the Home menu item aligned to the right. I changed the ul:menu and added attribute float:left to get the 'Home' menu too be aligned to the left of the page but to no avail.
Is there way to show the 'home' menu to be on the left end of the page. I am trying to create a menu bar similar to SO as a learning project
its a CSS issue but in site.css you can make following changes:
#menucontainer
{
margin-top:40px;
clear: both; /* Add this*/
}
and also
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: left; /* Change from right to left */
}
Work for this Site.Master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<asp:ContentPlaceHolder ID="head" runat="server">
<title></title>
</asp:ContentPlaceHolder>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>