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.
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 have the following HTML code generated by Primefaces's components (I've only considered HTML important code)
<html>
<body>
<link type="text/css" rel="stylesheet" href="/tiendaVirtual/css/init.css" /></head><body>
<div id="page">
<div id="header">
//Header content
</div>
<div id="content">
<div id="dvLogin">
<div id="pnlLogin" class="ui-panel ui-widget ui-widget-content ui-corner-all pnlLogin" data-widget="widget_pnlLogin">
<div id="pnlLogin_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div id="pnlLogin_content" class="ui-panel-content ui-widget-content">
</div>
<div>
</div>
</div>
<div id="footer">
//Footer content
</div>
</div>
</body>
</html>
And your css file init.css:
body{
font-size: 12px !important;
}
#page{
width: 100%;
height: 100%;
position: absolute !important;
}
#header{
height: auto !important;
top: 0;
}
#content{
height: 100% !important;
display: block;
}
#footer{
height: auto !important;
position: absolute;
width: 100%;
bottom: 0;
}
.dvLogin{
vertical-align: middle;
height: 660px !important;
}
.pnlLogin{
width: 500px;
margin: auto auto !important;
}
#pnlFooter{
margin-bottom: 10px !important
This generate the following HTML page:
I want that panel called 'Login' is centered vertically and horizontally but I don't know as...
PD:
I added the XHTML pages:
login.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/templates/template.xhtml">
<ui:define name="content">
<h:form prependId="false">
<div id="dvLogin">
<p:panel id="pnlLogin" header="Login" styleClass="pnlLogin">
<h:panelGrid columns="2">
<p:outputLabel value="Usuario"/>
<p:inputText id="txtUsuario" value="#{loginBean.usuario}" required="true" requiredMessage="Especificar usuario"/>
<p:outputLabel value="Contraseña"/>
<p:password id="pswContrasenia" value="#{loginBean.contrasenia}" required="true" requiredMessage="Especificar contraseña"/>
</h:panelGrid>
<p:commandButton value="Ingresar" action="#{loginBean.ingresar}" />
</p:panel>
</div>
</h:form>
</ui:define>
</ui:composition>
template.xhtml
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:loadBundle basename="resources.application" var="msg"/>
<h:head>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/init.css" />
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/templates/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/templates/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
header.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:panel>
<p:graphicImage value="/img/common/logo.png" />
</p:panel>
</ui:composition>
footer.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:panel id="pnlFooter">
Everis Peru © - Shoppping Cart
</p:panel>
</ui:composition>
There are few things that you need to look.
1) there is no need of unwanted position absolute and !important tags this can be simple achieved with diaplay: table properties as follows
CSS
#content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
/* For visualization
background: #808080; width: 5px;
*/
}
#dvLogin {
display: inline-block;
vertical-align: middle;
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f00;
}
html, body{height:100%;}
Demo - jsfiddle i.e. in full screen Demo full screen
also you need to check CSS as unwanted css are commented in above demo. so Please check that
Reference Link
Hope it Helps!
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 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 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; }