How do you position the Sidebar at absolute top-right?

saidrad · April 9th, 2009, 03:29 AM

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

Imar · April 9th, 2009, 04:23 AM

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

saidrad · April 9th, 2009, 11:36 AM

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

Imar · April 9th, 2009, 11:45 AM

Take a look at this:



The style sheet is commented out....

Imar

saidrad · April 9th, 2009, 12:05 PM

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

Imar · April 9th, 2009, 12:09 PM

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

saidrad · April 9th, 2009, 12:21 PM

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

Imar · April 9th, 2009, 12:27 PM

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

saidrad · April 9th, 2009, 12:51 PM

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

Imar · April 11th, 2009, 06:21 AM

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