MasterPage e Css (parte 2)
Riutilizziamo il template dell’ultimo articolo per realizzare un layout a 2 colonne:
Cominciamo con una masterpage annidata:
CodeFile=”2ColsMasterPage.master.cs” Inherits=”_2ColsMasterPage” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”Server”>
<link href=”2ColStyleSheet.css” rel=”stylesheet” type=”text/css” />
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>
<div id=”colSX”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolderSX” runat=”server”>
</asp:ContentPlaceHolder>
</div>
<div id=”colDX”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolderDX” runat=”server”>
</asp:ContentPlaceHolder>
</div>
</asp:Content>
e la pagina aspx che la utilizzera’:
<%@ Page Title=”" Language=”C#” MasterPageFile=”~/2ColsMasterPage.master” AutoEventWireup=”true” CodeFile=”2Colonne.aspx.cs” Inherits=”_2Colonne” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolderSX” Runat=”Server”>
Colonna1<br />
Colonna1<br />
Colonna1<br />
Colonna1<br />
Colonna1<br />
Colonna1<br />
Notare l’anomalia quando una colonna è + altra dell’altra si comporta esattamente come un elemento inline,
per ovviare questo, c’è un trik ma è un po’ macchinoso e si basa sulle liste
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolderDX” Runat=”Server”>
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
Colonna2<br />
</asp:Content>
Infine il file css referenziato:
{
width: 39.09%;
background-color: Fuchsia;
padding:inherit;
vertical-align:top;
}
#colDX
{
width: 59.09%;
background-color: Olive;
vertical-align:top;
}
…anche per oggi e’ tutto, la prossima volta le colonne saranno 3…
Add comment gennaio 19, 2010
MasterPage e Css (parte 1)
Qualche tempo fa, un mio collega, mi ha sorpreso chiedendomi dell’utilita’ delle masterpage in asp.net; aveva la necessita’ di creare il classico template a tre colonne con i css e mi ha chiesto di fornirgli un esempio funzionate.
L’esempio e’ servito allo scopo, e dopo aver ricevuto la stessa richiesta sulle pagine di un noto forum mi sono deciso di rispolverare l’esempio tra queste pagine abbandonate da un bel pezzo 
SiteMap
La navigazione nel sito e’ articolata secondo questa sitemap, struttura che utilizzeremo anche per alimentare il controllo di menu>
<?xml version=”1.0″ encoding=”utf-8″ ?>
<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0″ >
<siteMapNode title=”" description=”" url=”~/”>
<siteMapNode title=”1 Colonna” description=”1 sola colonna” url=”~/Default.aspx”>
<siteMapNode title=”2 Colonne inline” description=”2 colonne 40/60″ url=”~/2Colonne.aspx”>
</siteMapNode>
<siteMapNode title=”3 Colonne inline” description=”2 colonne 30/40/30″ url=”~/3Colonne.aspx”>
</siteMapNode>
</siteMapNode>
</siteMapNode>
</siteMap>
Menu’ & Template principale
I commenti sono nel mark-up:
Inherits=”MainMasterPage” %>
<!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>
<link href=”master.css” rel=”stylesheet” type=”text/css” />
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”wrapper”>
<div id=”Header”>
<h1>
Ciao!!!</h1>
<h3>Ecco il template che volevi vedere</h3>
Nota: ho utilizzato dimensioni percentuali, ma di solito questo è template per un layout a dimensioni fisse, con il wrapper a 960px(classico a 1024×768), e con le colonne a dimensioni a piacere(occhio se utilizzi i bordi devi sempre sottrarli dalle dimensioni dell’elemento).<br />
se utilizzi dimensioni fisse è crossbrowser per IE7/8 FF1/2/3 & Safari 4.x, Opera non so… BOH!!!
</div>
<div id=”MainMenu”>
<asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ Orientation=”Horizontal”
StaticDisplayLevels=”3″ MaximumDynamicDisplayLevels=”0″>
</asp:Menu>
<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
</div>
<div id=”MainContainer”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
<div id=”Footer”>
<h1>
Footer</h1>
</div>
</div>
</form>
</body>
</html>
Questo template assicura la struttura principale del sito web e fornisce la base per le specializzazioni degli altri template che andremo a realizzare:
Il file css referenziato:
<link href=”master.css” rel=”stylesheet” type=”text/css” />
contiene queste poche istruzioni di stile:
{
display: -moz-inline-stack;
display: inline-block;
zoom: 1; *display:inline;
}
* {margin:0;padding:0;}
#wrapper
{
width: 960px;
margin: 0 auto;
position:relative;
}
#Header
{
width:100%;
background-color: green;
}
#Footer
{
width:100%;
background-color: Purple;
}
#MainMenu{
width:100%;
background-color: Yellow;
}
#MainContainer{
width:100%;
background-color: Olive;
}
Ora realizziamo la prima pagina ad una sola colonna:
CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”Server”>
<style type=”text/css”>
.dummyStyle{
width: 930px; border: dashed 1px red; background-color: Aqua; height: 20px;
margin-left:10px;margin-right:10px;
}
</style>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>
<div>
</div>
Questo è il contenuto della master a una sola colonna
<div>
</div>
Questo è il contenuto della master a una sola colonna
<div>
</div>
Questo è il contenuto della master a una sola colonna
</asp:Content>
…e per il momento e’ tutto… a presto!
Add comment gennaio 18, 2010
