Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB 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 December 11th, 2010, 01:23 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default Working with the DarkGrey.css theme

Per the book (mostly), I have a DarkGrey.css file in use. My web page looks excellent to me, but I would like to move everything over to the right. This would include all headers, footer, content, etc.

I assumed "margin" would be the solution so I tried adding margin: 160px to #Header and it caused the header to move to the right where I wanted it, but the header also moved down from the top of the page. All other margins I added caused a similar reaction: portions moving down, not just moving right.

What am I missing and is there a simpler way to get everything moved at once?

Code:
*
{
    /* 
    Defines the main font used throughout the entire site 
  */
    font-family: Verdana, Arial, Sans-Serif font-size: medium;
    margin-left: 5px;
    font-size: large;
}

body
{
  /* 
    Clears white space around the body and sets the background color to a dark grey.
  */
  margin: 0;
  background-color: #464646;
}

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

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

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

#Header
{
  /*
    Sets the background of the header to the same color as the right-hand side of the 
    header image. This way, the header can expand to the right.
    The margin at the bottom creates some room between the header and the menu and the main content.
  */
  background-color: #464646;
  margin-bottom: 20px;
 
}

#Header a
{
  /*
    The #Header a is nested in the #Header. It provides a link to the homepage,
    and sets the header image background.
  */
  background-image: url(Images/Header.jpg);
  background-repeat: no-repeat;
  width: 944px;
  height: 138px;
  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: 944px;
  height: 36px;
  padding-top: 7px;
  padding-left: 17px;
 
}

.FirstLevelMenuItems
{
    padding-top: 10px;
}

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

.MainMenu ul li
{
  /*
    Gives the menu items in the main menu a width of 150px each
  */
  width: 150px;
}

#MainContent
{
    /*
    Defines the main content area. The text color is white (on the gray background set on the body).
    The #MainContent element has a minimum height of 370 pixels, but can grow if necessary.
    The font-size is 80% of its parent element, which in this case comes down to 80% of the font
    the user has specified as the default font in the browser.
  */
    color: white;
    font-size: small;
    width: 870px;
    min-height: 370px;
    padding: 10px;
    float: left;
    
}



#Footer
{
  /*
    The footer is positioned below all other content.
    At the top, it gets a border with a dashed style, while all other sides have no border.
  */
  text-align: center;
  border-top: 2px dashed gray;
  height: 37px;
  clear: both;
  background-color: #8B3818;
    width: 893px;
    
}

.Introduction
{
  font-style: italic;
}

.MyButton
{
    color: White;
}

img
{
    border: 0;
}
u1.level1
{
    font-size: 10px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}

u1.level1 .selected
{
    /* Defines the appearance of the active menu items */
    background-color: #BCD1FE;
    color: #CC0000;
    font-weight: normal;
}
a.level1
{
    /* Adds some white space to the left of the main menu item text */
    margin-left: 5px;
}

a.level2
{
    /* Defines the appearance of the sub menu items */
    background-color: #cccccc;
    padding-left: 5px;
}

a.level1:hover, a.level2:hover
{
    /* Defines the hover style for the main and sub items */
    background-color: #BCD1FE;
}

.ErrorMessage
{
    color: Red;
}
Reply With Quote
  #2 (permalink)  
Old December 11th, 2010, 04:37 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,

I am not exactly sure what you're trying to acccomplish (or why), but if I understand you correctly, you can use float: left / right to place elements at different locations.

But why would you want this? Probably not a good idea from a usability point of view.

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
  #3 (permalink)  
Old December 11th, 2010, 05:27 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

Imar,

I want to see my web page centered on the computer screen. Right now it is on the left to accommodate computers using any screen size per page 83.
Reply With Quote
  #4 (permalink)  
Old December 11th, 2010, 07:22 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

Ah, I see. I thought you were trying to align it to the right (implied by "but I would like to move everything over to the right."

So you want to center it as done in the Monochrome theme: http://aspnet4.planetwrox.com/ ?

If so, make sure PageWrapper has a fixed width (say, 1000px) and then apply a margin: auto to the body:

Code:
 
body
{
  margin: auto;
}
This divides the available space between both sites, centering whatever the body contains (the PageWrapper element).

Hope this helps,

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
The Following User Says Thank You to Imar For This Useful Post:
demac3 (December 12th, 2010)
  #5 (permalink)  
Old December 12th, 2010, 11:30 AM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

It looks perfect to me now. Thanks!
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
Create a Theme and Utilize custom.css? ricknology BOOK: Beginning SharePoint Designer 2010 1 November 18th, 2010 04:58 PM
Ch6 - User Theme Selection not working ken evans BOOK: Beginning ASP.NET 4 : in C# and VB 6 October 16th, 2010 10:19 AM
Ch 6 - User-Selected theme not working jennyWren BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 16 December 21st, 2009 03:52 PM
Theme Selector wont pick up other theme Tawanda BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 5 May 4th, 2007 08:44 AM
Strange CSS Theme Problem geomar ASP.NET 2.0 Professional 1 October 20th, 2006 05:11 PM



All times are GMT -4. The time now is 01:49 AM.


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