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/
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
I tried to add some special features to child page in my project without applying it to the master page. Therefore i added a style sheet to it and now it gives me several warnings as below.
Warning 1 Error updating JScript IntelliSense: System\JS\materialize.js: Expected identifier, string or number # 1774:16 System\agencyAdmin.aspx 1 1 Appeal
Warning 2 Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'td'. System\agencyAdmin.aspx 8 6 Appeal
Warning 4 Validation (XHTML 1.0 Transitional): Attribute 'data-collapsible' is not a valid attribute of element 'ul'. System\agencyAdmin.aspx 14 33 Competition Appeal
Also when i execute the program and when loading the relevant page, browser diplsays an error as "Internet Explorer has stopped working".
Then it displays following error.
JavaScript runtime error: '$' is undefined
I have tried answers in this site and some other found on the internet. But didn't work for me.
Here is the code in master page header section
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="CDDS_Master.master.cs" Inherits="ccs.CDDS_Master" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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">
<asp:ContentPlaceHolder id="head" runat="server">
<title></title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="agency" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
height: 75;
width: 1024px;
border-collapse: collapse;
}
.styPageData
{
height:625px;
width:934px;
vertical-align:top;
}
.style4
{
height: 113px;
width: 100%;
}
.style5
{
width: 925px;
height: 103px;
}
.style7
{
width: 653px;
height: 78px;
}
.style8
{
height: 78px;
width: 245px;
}
.style9
{
width: 183px;
}
.styTreeWith
{
width: 200px;
}
.reportView
{
overflow:scroll;
}
</style>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
Here is the code in child page
<%# Page Title="" Language="C#" MasterPageFile="~/ccs.Master" AutoEventWireup="true"
CodeBehind="agencyAdmin.aspx.cs" Inherits="ccs.agencyAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="agency" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link href="CSS/materialize.css" rel="stylesheet" type="text/css" />
<link href="CSS/materialize.min.css" rel="stylesheet" type="text/css"/>
<script src="JS/materialize.js" type="text/javascript"></script>
<script src="JS/materialize.min.js" type="text/javascript"></script>
<div id="divCol" style="width: 100%; height: auto; float: left">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>Second</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
</div>
</asp:Content>
use this code in child class
<%# Page Title="" Language="C#" MasterPageFile="~/ccs.Master" AutoEventWireup="true"
CodeBehind="agencyAdmin.aspx.cs" Inherits="ccs.agencyAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="CSS/materialize.css" rel="stylesheet" type="text/css" />
<link href="CSS/materialize.min.css" rel="stylesheet" type="text/css"/>
<script src="JS/materialize.js" type="text/javascript"></script>
<script src="JS/materialize.min.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
height: 75;
width: 1024px;
border-collapse: collapse;
}
.styPageData
{
height:625px;
width:934px;
vertical-align:top;
}
.style4
{
height: 113px;
width: 100%;
}
.style5
{
width: 925px;
height: 103px;
}
.style7
{
width: 653px;
height: 78px;
}
.style8
{
height: 78px;
width: 245px;
}
.style9
{
width: 183px;
}
.styTreeWith
{
width: 200px;
}
.reportView
{
overflow:scroll;
}
</style>
</asp:Content>
<asp:Content ID="agency" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="divCol" style="width: 100%; height: auto; float: left">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>Second</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body">
<p>
Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
</div>
</asp:Content>
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" />
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; }