Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
This is the forum to discuss the Wrox book Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars; ISBN: 9780470187593
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 14th, 2010, 04:20 PM
Registered User
 
Join Date: Apr 2010
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Question page 221 - problems with Monochrome and dark grey css

Hi,
I have 2 problems at page 221:
1. when i apply the dark grey css - final page does not look like yours
-content text does come in the center
- sidebar comes right of "Hi there visitor ...." text line, not in the upper most right of the page as shown. but in line with menu goes here.
-the content text seems to be kind of under menu goes here on the final ouput.

i check the id in the css and made sure that they match.

2. when i apply Monochrome -
- the HeaderLink - seems to be repeating twice
- the side bar is to the right of content but then to the right of side bar there is some space that i dont see in yours.

please help.
thanks,
Sarala vasudevan
saralav@hotmail.com

Last edited by sarala; April 14th, 2010 at 04:23 PM.. Reason: i forgot to add the 2 problem
Reply With Quote
  #2 (permalink)  
Old April 14th, 2010, 04:42 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

Hard to say without seeing your code. Can you post the final HTML and the CSS?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old April 14th, 2010, 09:53 PM
Registered User
 
Join Date: Apr 2010
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi,
My 1st problem with DarkGrey css is solved. i get the correct page as seen in yours.
The problem was because of some slight spelling (caps) differences, once that got corrected the problem was fixed.

However after i corrected the id to match the selector id, Monochrome is behaving differently, it now gets it sidebar, under the content on the left side.

HTML Code is:

<!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><link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><link href="App_Themes/Monochrome/Monochromesara.css" type="text/css" rel="stylesheet" /><link href="App_Themes/Monochrome/Monochrometest.css" type="text/css" rel="stylesheet" /><title>
Home Page
</title><link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><link href="App_Themes/Monochrome/Monochromesara.css" type="text/css" rel="stylesheet" /><link href="App_Themes/Monochrome/Monochrometest.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZPV/DDsoMdLzRrdEleUT7NNqE1k9" />
</div>


<div id="PageWrapper">
<div id="Header"><a href="./" class="HeaderLink"></a></div>
<div id ="MenuWrapper">Menu goes here</div>
<div id="MainContent">

<h1>Hi there visitor welcome to Planet Wrox.</h1>

<p class="Introduction">
We're glad you're paying a visit to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>,
the coolest music community site on the internet.
</p>
<p class="Introduction">
Feel free to have a <a href="Default.aspx">look around</a>, as there are lots of interesting <b>reviews and concert</b>
pictures to be found here.
</p>
<p class="Introduction"><a href="Login.aspx">You can log in here</a></p>


</div>
<div id="Sidebar"> Side bar goes here</div>
<div id="Footer"> foooter goes here</div>
</div>


</form>
</body>
</html>

and
Monochrome.css is:
*
{
font-family: Arial, Sans-Serif;
}

body
{
/*
Clears white space around the body except for the top which gets 10 pixels.
*/
margin: 10px 0 0 0;
}

a
{
/*
Clears the underline on normal links, and give them #308462 as the color.
*/
color: #308462;
text-decoration: none;
}

a:hover
{
/*
Underlines links when the users hover the mouse over them.
*/
text-decoration: underline;
}

h1
{
/*
Makes h1 elements smaller than their browser default.
*/
font-size : 20px;
}

.Introduction
{
font-style: italic;
color: #003399;
}

#PageWrapper
{
/*
Sets the total width for the entire page.
*/
width: 844px;
background-color: #cccccc;
}

#Header
{
/*
Gives the header the same width as the PageWrapper. The height creates some room for the logo
that is set with the background-image.
*/
background-image: url(Images/Header.jpg);
width: 844px;
height: 86px;
}

.HeaderLink
{
/*
The #HeaderLink is nested in the #Header. It provides a link to the homepage.
*/
width: 844px;
height: 86px;
display: block;
}

#MenuWrapper
{
/*
The menu spans the page width, right below the header.
At the top and left a few pixels padding is applied to create some room.
*/
background-image: url(Images/MenuBackground.jpg);
width: 827px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}

#MenuWrapper a
{
/*
Links in the Menu are white. This gets overriden by styles in chapter 7.
*/
color: #fff;
}

.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid white;
width: 814px;
height: 19px;
background-color : #cccccc;
}


#MainContent
{
/*
Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
The font-size is 80% of its parenty element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.

*/
font-size: 0.8em;
width:659px;
border-left: 1px solid white;
border-right: 2px solid white;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}




#Sidebar
{
/*
The SideBar is positioned to the right of the MainContent area. It gets the same font-size as #MainContent
and gets a background image called Sidebar.jpg. To ensure the image is visible in (most) browsers
on a dmall page, the element gets a minimum height of 500px. This is ignored by IE 6.
*/

font-size: 0.8em;
background-image: url(Images/Sidebar.jpg);
background-repeat: no-repeat;
background-color: #cccccc;
width: 152px;
min-height: 500px;
padding-top: 10px;
padding-left: 10px;
float: left;
}



#Footer
{
/*
The footer is positioned below all other content (yet still within PageWrapper).
At the top, it gets a border with a dashed style, while all other sides have no border.
clear: both is used to clear the impact of the float properties used for #MainContent and #SideBar.
*/
clear: both;
height: 37px;
background-color : #bee4cf;
color: White;
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}


thanks,
sarala
Reply With Quote
  #4 (permalink)  
Old April 15th, 2010, 03:04 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

Take a look at your <head /> section: there are multiple CSS files listed. Maybe one of those is messing up the layout? Try removing all the css files from the App_Themes folder, except for the correct one.

If I copy and paste your HTML and CSS to a new HTML page, things look as they should, so it has to be one of those other CSS files.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old April 15th, 2010, 07:07 AM
Registered User
 
Join Date: Apr 2010
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default thank you....the problem got fixed

Yup, those multiple css were causing the problem.
However my question to you....i did not refer these css in the web.config file.
i referenced only the needed css, so why do i see the other css too in the head section?

thank you,
sarala
Reply With Quote
  #6 (permalink)  
Old April 15th, 2010, 04:51 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

As described in the book, each .css file in the active theme's folder is injected into the page automatically.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #7 (permalink)  
Old April 15th, 2010, 04:55 PM
Registered User
 
Join Date: Apr 2010
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up thank you.....

.......thank you.
i love this book.
sarala
will keep working on it, until the end.
Reply With Quote
  #8 (permalink)  
Old April 16th, 2010, 02:35 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quote:
i love this book.
...
will keep working on it, until the end.
Excellent. Good to hear you like it. Spread the word, Spread the word ;-)

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Beginning MX 2004 pg. 221 Beth Ellen Dreamweaver (all versions) 3 May 14th, 2005 06:12 AM



All times are GMT -4. The time now is 02:51 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.