Wrox Programmer Forums
| 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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 9th, 2009, 03:29 AM
Registered User
 
Join Date: Mar 2009
Posts: 6
Thanks: 1
Thanked 0 Times in 0 Posts
Default How do you position the Sidebar at absolute top-right?

I am using the downloaded DarkGrey.css and yet the Sidebar element is still positioned next to the MainContent element and not at the absolute top-right as shown on page 221. Any idea why that is the case? Here is the css style for the sidebar:
Code:
#Sidebar
{
    /*
        The SideBar is positioned absolutely in the top-right corner of the page (yet still within PageWrapper).
        It has the same font-size and color as #MainContent
    */
    font-size: 0.8em;
    width: 124px;
    color: White;
    float: left;
}
Thanks!

Said
 
Old April 9th, 2009, 04:23 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Said,

What is the client ID of the Sidebar <div>? Is it called Sidebar as well, with the same casing?

Also, are you using the book's CSS for MainContent?

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!
 
Old April 9th, 2009, 11:36 AM
Registered User
 
Join Date: Mar 2009
Posts: 6
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Hi Imar,

Here is what I have for the CSS:

Code:
*
{
    font-family: Verdana, Arial, Sans-Serif;
}

body
{
    /* 
        Clears white space around the body and assigns it BodyBackground.jpg as the background image.
      The image is not repeated, so the remaining background gets #464646 as its color.
    */
    margin: 0;
    background-image: url(Images/BodyBackground.jpg);
    background-repeat: no-repeat;
    background-color: #464646;
}

a
{
    /*
        Clears the underline on normal links, and give them #da6637 as the color.
    */
    color: #da6637;
    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;
}

#PageWrapper
{
    /*
        Sets the total width for the entire page.
    */
    width: 944px;
}

#Header
{
    /*
        Gives the header the same width as the PageWrapper. The height creates some room for the logo.
    */
    width: 944px;
    height: 125px;
}

.HeaderLink
{
    /*
        The #HeaderLink is nested in the #Header. It provides a link to the homepage,
        and sets the header image background.
        margin: auto puts the link (with a width of 278) right in the middle of #Header.
    */
    background-image: url(Images/Header.gif);
    background-repeat: no-repeat;
    width: 278px; 
    height: 131px; 
    display: block;    
    margin: auto;
}

#MenuWrapper
{
    /*
        Floats the entire menu on the left of the content.
    */
    width: 180px;
    padding-top: 4px;
    float: left;
    padding: 10px;
}

#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 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.
    */
    color: white;
    font-size: 0.8em;
    width: 600px;
    min-height: 500px;
    padding: 10px;
    padding-top: 0;
    float: left;
}

#Sidebar
{
    /*
        The SideBar is positioned absolutely in the top-right corner of the page (yet still within PageWrapper).
        It has the same font-size and color as #MainContent
    */
    font-size: 0.8em;
    width: 124px;
    color: White;
    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.
    */
    text-align: center;
    border-top: 2px dashed gray;
    height: 37px;
    clear: both;
}
And here is the MasterPage:

Code:
<%@ 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>
    <!--
    <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
    -->
</head>
<body>
    <form id="form1" runat="server">
      <div id="PageWrapper">
        <div id="Header"><a class="HeaderLink" href="~/" runat="server">Header Goes Here</a></div>
        <div id="MenuWrapper">Menu Goes Here</div>
        <div id="MainContent">
          <asp:ContentPlaceHolder id="cpMainContent" runat="server">
          </asp:ContentPlaceHolder>
        </div>
        <div id="Sidebar">Sidebar Goes Here</div>
        <div id="Footer">Footer Goes Here</div>
      </div>
    </form>
</body>
</html>
Thanks,
Said

Last edited by saidrad; April 9th, 2009 at 11:39 AM..
 
Old April 9th, 2009, 11:45 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Take a look at this:

<!--
<link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
-->

The style sheet is commented out....

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!
 
Old April 9th, 2009, 12:05 PM
Registered User
 
Join Date: Mar 2009
Posts: 6
Thanks: 1
Thanked 0 Times in 0 Posts
Default

What about the commented out style sheet? Although I didn't think it would make any difference I removed the commented out style sheet. Also there is no style sheet to link to anyway. But still the Sidebar is next to the MainContent element. I must add that I am using DarkGrey.css in themes.

Thanks,
Said

Last edited by saidrad; April 9th, 2009 at 12:16 PM.. Reason: Clarifying that I am using themes.
 
Old April 9th, 2009, 12:09 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Quote:
Also there is no style sheet to link to anyway
Not sure what you mean with this...

The MainContent and Sidebar divs are floated next to each other using CSS, so somehow you'll need to link or embed some CSS.... So where's your CSS coming from then? When you check the HTML in the browser, do you see the correct theme's CSS linked in the head?

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!
 
Old April 9th, 2009, 12:21 PM
Registered User
 
Join Date: Mar 2009
Posts: 6
Thanks: 1
Thanked 0 Times in 0 Posts
Default

This is what I see in the HTML in the browser:

</title>
<link href="App_Themes/DarkGrey/DarkGrey.css" type="text/css" rel="stylesheet" /></head>
<body>

Said
 
Old April 9th, 2009, 12:27 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

That looks OK.

A few other things to check:

1. Do you get the same behavior with a brand new page based on the master page? That is, maybe some page content is messing with the layout?

2. What browser are you using?

3. Does the code that comes with the book work for you?

4. Can I see your site on-line somewhere?

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!
 
Old April 9th, 2009, 12:51 PM
Registered User
 
Join Date: Mar 2009
Posts: 6
Thanks: 1
Thanked 0 Times in 0 Posts
Default

The behavior is the same in both IE and FireFox. I haven't got to the deployment yet but here is the HTML source in FireFox:


<!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/DarkGrey/DarkGrey.css" type="text/css" rel="stylesheet" /><title>
Welcome to Planet Wrox
</title>
<link href="App_Themes/DarkGrey/DarkGrey.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="/wEPDwUKMTY1NDU2MTA1MmRkz/JH4XGyHgRbH1X0lvhab4RwsIg=" />
</div>

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

<h1>
Hi there visitor and welcome to Planet Wrox</h1>
<p class="Introduction">
We are 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 pictures</b> to be found here.
</p>
<p class="Introduction">
You can <a href="Login.aspx">log in</a> here.</p>

</div>
<div id="Sidebar">Sidebar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</form>
</body>
</html>

Do you see anything wrong with it?

Said
 
Old April 11th, 2009, 06:21 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

I think your code is OK, and the screenshot on that page is off. Initially I had the Sidebar up there, but later moved it down a bit. Apparently, the screenshot was never updated.

To float the Sidebar next to the Header, you'll need to give the header a smaller width and a float: left.

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!




Similar Threads
Thread Thread Starter Forum Replies Last Post
position: absolute; fix for IE 7 crmpicco Javascript How-To 1 March 30th, 2006 04:45 AM
Sidebar loading through reflection? bmains C# 2005 0 October 20th, 2005 10:21 PM
<div> with a absolute position crmpicco Javascript How-To 0 August 30th, 2005 05:42 AM
Absolute position vs. other divs beckfield CSS Cascading Style Sheets 2 March 23rd, 2005 04:21 AM
position:absolute nerssi CSS Cascading Style Sheets 3 February 21st, 2005 10:17 AM





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