By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,470 Members | 949 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,470 IT Pros & Developers. It's quick & easy.

Using Style sheets and ASP.NET Master Pages

P: n/a
I found a great site for CSS tempaltes, http://blog.html.it/layoutgala/ .
I downloaded them, and played around with them. Then I tried to use the
template in as ASP.Net MasterPage, but everything seems to break. For
example, Number 13 is coded as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 13</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill
very.</p>
<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly
column filler silly text fill text filler filler filler make make make make
text filler fill column filler make silly make text text fill make very
filler column very </p>
<p>column text long column make silly long text filler silly very very very
long filler fill very fill silly very make make filler text filler text make
silly text text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long make
very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column fill
silly column long make silly filler column filler silly long long column
fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
------
So, I started by replacing the content in the Div with the ID Content with
the ContentPlaceHolder, leaving everything else the same. (I just left a
few words in the Content Div so that I could track it more easily.) See
below code substitution from Opening to closing of div id="wrapper")
--
<div id="wrapper">

<div id="content">

<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly </p>

<p>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"
Visible=false>

</asp:ContentPlaceHolder>

&nbsp;</p>

</div>

</div>

--

This is the only change. On the MasterPage.Master, (In Visual Studio
2005), it renders fine. Then I create a new page that uses that MasterPage.
Here it renders fine on the TesterPage.aspx in Visual Studio, but when I
look at it in the browser, it is all broken, the page is totally corrupted.

Any and all help is truely appreciated,

Paul.
May 4 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Found my error, it was in the Web.Comfit page, where I had specified a
"pages theme". If I just invoke the theme per page, rather than sitewide,
then it works.

Any comments still appreciated,

Paul

"Paul" <Pa***********@TheCornerStore.com> wrote in message
news:sO************@fe12.lga...
I found a great site for CSS tempaltes, http://blog.html.it/layoutgala/ .
I downloaded them, and played around with them. Then I tried to use the
template in as ASP.Net MasterPage, but everything seems to break. For
example, Number 13 is coded as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 13</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long
fill fill fill long text text column text silly very make long very fill
silly make make long make text fill very long text column silly silly very
column long very column filler fill long make filler long silly very long
silly silly silly long filler make column filler make silly long long fill
very.</p>
<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make make
make make text filler fill column filler make silly make text text fill
make very filler column very </p>
<p>column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very
silly long long filler filler fill silly long make column make silly long
column long make very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very
silly fill text filler silly silly filler fill very make fill column text
column very very column fill fill very silly column silly silly fill fill
long filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column
fill silly column long make silly filler column filler silly long long
column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
------
So, I started by replacing the content in the Div with the ID Content with
the ContentPlaceHolder, leaving everything else the same. (I just left a
few words in the Content Div so that I could track it more easily.) See
below code substitution from Opening to closing of div id="wrapper")
--
<div id="wrapper">

<div id="content">

<p><strong>1) Content here.</strong> column long long column very long
fill fill fill long text text column text silly </p>

<p>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"
Visible=false>

</asp:ContentPlaceHolder>

&nbsp;</p>

</div>

</div>

--

This is the only change. On the MasterPage.Master, (In Visual Studio
2005), it renders fine. Then I create a new page that uses that
MasterPage. Here it renders fine on the TesterPage.aspx in Visual Studio,
but when I look at it in the browser, it is all broken, the page is
totally corrupted.

Any and all help is truely appreciated,

Paul.

May 4 '06 #2

P: n/a
A wierd thing happend on the way to the browser.

an HTML page like this renders fine in IE 6 or Firefox 1.5.0.3.

<head>

<title>Untitled Page</title>

<link href="../../MasterPagesTest/21/StyleSheetStore21-2.css"
rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill
very.</p>

<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>

<p>fill long make long text very make long fill column make text very silly
column filler silly text fill text filler filler filler make make make make
text filler fill column filler make silly make text text fill make very
filler column very </p>

<p>column text long column make silly long text filler silly very very very
long filler fill very fill silly very make make filler text filler text make
silly text text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long make
very </p>

</div>

</div>

<div id="navigation">

<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>

</div>

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column fill
silly column long make silly filler column filler silly long long column
fill silly column very </p>

</div>

<div id="footer"><p>Here it goes the footer</p></div>

</div>

</body>

</html>

__________________________________________________ ______________________

However, using MasterPages, (with the actual aspx page consuming the
MasterPage blank), it renders fine in IE, but the two navigation boxes.
(Divs navigation and extra) do not show up in Firefox.

__________________________________________________ _______________________

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat=server>

<title>Layout 13</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="generator" content="HAPedit 3.1">

<link href="../../MasterPagesTest/21/StyleSheetStore21-2.css"
rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</div>

<div id="navigation">

<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>

</div>

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column fill
silly column long make silly filler column filler silly long long column
fill silly column very </p>

</div>

<div id="footer"><p>Here it goes the footer</p></div>

</div>

</body>

</html>

Here is the CSS:

html,body

{

margin:0;padding:0

}

body

{

font: 76% arial,sans-serif

}

p

{

margin:0 10px 10px

}

a

{

display:block;color: #981793;padding:10px

}

#header h1

{

height:80px;

line-height:80px;

margin:0;

padding-left:10px;

background: #EEE;color: #79B30B

}

#content p

{

line-height:1.4

}

#navigation

{

background:#B9CAFF

}

#extra

{

background:#FF8539

}

#footer

{

background: #333;color: #FFF

}

#footer p

{

margin:0;padding:5px 10px

}

#wrapper

{

float:left;width:100%

}

#content

{

margin: 0 200px

}

#navigation

{

float:left;width:200px;margin-left:-100%

}

#extra

{

float:left;width:200px;margin-left:-200px

}

#footer

{

clear:left;width:100%

}

---------------------------------------------------------

Thanks,

Paul
May 4 '06 #3

P: n/a
This is extremely confusing. It would be much easier if you put the
page(s) somewhere where we could see them live. Wading through that much
code in a ng post strongly discourages people from bothering.

I was actually very interested in your post as I use master pages and
themes a lot in my ASP.NET pages, but I couldn't work out what the
problem was here.

Not a flame, just a gentle suggestion to help you and us.

Ta ra
alan

In article <dz*************@fe12.lga>, Paul
<Pa***********@TheCornerStore.com> writes
A wierd thing happend on the way to the browser.

an HTML page like this renders fine in IE 6 or Firefox 1.5.0.3.

<head>

<title>Untitled Page</title>

<link href="../../MasterPagesTest/21/StyleSheetStore21-2.css"
rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill
fill fill long text text column text silly very make long very fill silly
make make long make text fill very long text column silly silly very column
long very column filler fill long make filler long silly very long silly
silly silly long filler make column filler make silly long long fill
very.</p>

<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill make
text very make make very fill fill long make very filler column very long
very filler silly very make filler silly make make column column </p>

<p>fill long make long text very make long fill column make text very silly
column filler silly text fill text filler filler filler make make make make
text filler fill column filler make silly make text text fill make very
filler column very </p>

<p>column text long column make silly long text filler silly very very very
long filler fill very fill silly very make make filler text filler text make
silly text text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long make
very </p>

</div>

</div>

<div id="navigation">

<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>

</div>

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column fill
silly column long make silly filler column filler silly long long column
fill silly column very </p>

</div>

<div id="footer"><p>Here it goes the footer</p></div>

</div>

</body>

</html>

_________________________________________________ _______________________

However, using MasterPages, (with the actual aspx page consuming the
MasterPage blank), it renders fine in IE, but the two navigation boxes.
(Divs navigation and extra) do not show up in Firefox.

_________________________________________________ ________________________

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat=server>

<title>Layout 13</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="generator" content="HAPedit 3.1">

<link href="../../MasterPagesTest/21/StyleSheetStore21-2.css"
rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</div>

<div id="navigation">

<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very silly
fill text filler silly silly filler fill very make fill column text column
very very column fill fill very silly column silly silly fill fill long
filler </p>

</div>

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make
filler fill make column column silly filler text silly column fill silly
fill column text filler make text silly filler make filler very silly make
text very very text make long filler very make column make silly column fill
silly column long make silly filler column filler silly long long column
fill silly column very </p>

</div>

<div id="footer"><p>Here it goes the footer</p></div>

</div>

</body>

</html>

Here is the CSS:

html,body

{

margin:0;padding:0

}

body

{

font: 76% arial,sans-serif

}

p

{

margin:0 10px 10px

}

a

{

display:block;color: #981793;padding:10px

}

#header h1

{

height:80px;

line-height:80px;

margin:0;

padding-left:10px;

background: #EEE;color: #79B30B

}

#content p

{

line-height:1.4

}

#navigation

{

background:#B9CAFF

}

#extra

{

background:#FF8539

}

#footer

{

background: #333;color: #FFF

}

#footer p

{

margin:0;padding:5px 10px

}

#wrapper

{

float:left;width:100%

}

#content

{

margin: 0 200px

}

#navigation

{

float:left;width:200px;margin-left:-100%

}

#extra

{

float:left;width:200px;margin-left:-200px

}

#footer

{

clear:left;width:100%

}

---------------------------------------------------------

Thanks,

Paul


--
Alan Silver
(anything added below this line is nothing to do with me)
May 8 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.